<template>
  <view class="mx--20" :style="styleConfig.face">
    <view class="my--10" v-for="(item, index) of dataList" :key="index" >
      <view class="fp--left p--10">
        <view> {{ item[propConfig.title] }} </view
        ><w-icon-text
          v-if="item[propConfig.titleIcon]"
          :img-url="item[propConfig.titleIcon]"
          img-width="30rpx"
          img-height="30rpx"
          :bg-color="'transparent'"
          bg-width="40rpx"
          bg-height="40rpx"
          bg-padding="0"
        >
        </w-icon-text>
      </view>
      <view class="px--10 fs--13">
        <uni-row :gutter="16">
          <uni-col
            :span="8"
            style="border-right: 1px solid #ebeef5; height: 100%"
          >
            <view class="danger" style="height: 33.33%">
              {{ item[propConfig.leftTop] }}</view
            >
            <view class="w--100p c666 textdot1 mt--5" style="height: 33.33%">
              {{ item[propConfig.leftBottom] }}
            </view>
          </uni-col>
  
          <uni-col :span="8">
            <view>
              <text class="c999 mr--5">{{ propConfig["middleTopText"] }}</text>
              <text>{{ item[propConfig.middleTop] }}</text>
            </view>
            <view class="mt--5">
              <text class="c999 mr--5">{{ propConfig["middleBottomText"] }}</text>
              <text>{{ item[propConfig.middleBottom] }}</text>
            </view>
          </uni-col>
  
          <uni-col :span="8" class="fp--center">
            <u-button
              type="error"
              :text="propConfig['rightBtnText']"
              @click="clickEvt(item)"
              style="width: 80px; height: 30px"
            >
            </u-button>
          </uni-col> </uni-row
      ></view>
      <slot name="footer">
        <u-divider dashed style="border: 1px dashed #f6f6f6">
        </u-divider>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, watchEffect } from "vue";
interface Props {
  dataList: any; // 数据源
  propConfig?: any; // 属性映射
  styleConfig?: Object;
}
const props = withDefaults(defineProps<Props>(), {
  dataList: () => [
    {
      name: "1709新建产品22",
      num: "1.00%",
      desc: "七日年化",
      tzqx: "T + 1 申购",
      qgje: "1万元起",
      icon: Base64.fire,
      url: '/pages/licai/detail?id=1&name=uniapp'
    },
    {
      name: "1709新建产品22",
      num: "1.00%",
      desc: "七日年化",
      tzqx: "T + 1 申购",
      qgje: "1万元起",
      icon: Base64.fire,
    },
    {
      name: "1709新建产品22",
      num: "1.00%",
      desc: "七日年化",
      tzqx: "T + 1 申购",
      qgje: "1万元起",
      icon: Base64.fire,
    },
    {
      name: "1709新建产品22",
      num: "1.00%",
      desc: "七日年化",
      tzqx: "T + 1 申购",
      qgje: "1万元起",
      icon: Base64.fire,
    },
  ],
  propConfig: {
    title: "name",
    titleIcon:'icon',
    leftTop: "num",
    leftBottom: "desc",
    middleTopText: "投资期限",
    middleTop: "tzqx",
    middleBottomText: "起购金额",
    middleBottom: "qgje",
    rightBtnText: "立即购买",
    url: "url",
  },
  styleConfig: {
    face: "",
    leftTop: "",
    leftBottom: "",
    middleTop: "",
    middleBottom: "",
  },
});

const $emit = defineEmits(["clickEvt"]);

const clickEvt = (item: any) => {
  if(item[props.propConfig.url]){
    uni.navigateTo({
      url: item[props.propConfig.url]
    });
  }else{
    $emit("clickEvt", item);
  }
};
</script>

