<template>
  <a-table :columns="columns" :data-source="props.list" :pagination="false">
    <template #bodyCell="{ text, record, index, column }">
      <div v-if="record.paytype === '1'&& column.key === 'name' ">
        <div class="flex">
          <AlipaySquareFilled :style="{ fontSize: '24px' }"></AlipaySquareFilled
          ><span class="ml20">支付宝</span>
        </div>
      </div>
      <div v-else-if="record.paytype === '2'&& column.key === 'name'  ">
        <div class="flex">
          <WechatFilled :style="{ fontSize: '24px' }"></WechatFilled
          ><span class="ml20">微信支付</span>
        </div>
      </div>
      <div v-else-if="record.paytype === '3'&& column.key === 'name' ">
        <div class="flex">
          <DollarCircleFilled :style="{ fontSize: '24px' }"></DollarCircleFilled
          ><span class="ml20">京东白条</span>
        </div>
      </div>
      <div v-else-if="record.paytype === '4'&& column.key === 'name'  ">
        <div class="flex">
          <CreditCardFilled :style="{ fontSize: '24px' }"></CreditCardFilled
          ><span class="ml20">花呗</span>
        </div>
      </div>
      <div v-else-if="record.paytype === '5'&& column.key === 'name' ">
        <div class="flex">
          <SkypeFilled :style="{ fontSize: '24px' }"></SkypeFilled
          ><span class="ml20">京东白条</span>
        </div>
      </div>
   
      <div v-if="record.status=== '0' &&column.key === 'status'">
       <span class="ml20" style="color: rgba(12,191,33,1)">良好</span>
      </div>
      <div v-else-if="record.status=== '1' &&column.key === 'status'">
       <span class="ml20" style="color: rgb(250, 116, 116)">预警</span>
      </div>
      <div v-else-if="column.key === 'tags'">
        <a-button type="primary" @click="onOpenInfo(record, index, column)">查看</a-button>
      </div>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import { defineExpose,defineProps } from "vue";
import { useRouter } from "vue-router";
import {
  AlipaySquareFilled,
  WechatFilled,
  DollarCircleFilled,
  CreditCardFilled,
  SkypeFilled,
} from "@ant-design/icons-vue";

const columns = [
  {
    title: "支付渠道",
    name: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "绑定账户数",
    dataIndex: "amount",
    key: "amount",
  },
  {
    title: "当前预警",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    key: "tags",
    dataIndex: "tags",
  },
];

const router=useRouter()
const props = defineProps({
  list:{
    type:Object
  }
})
console.log(props.list);
const onOpenInfo = (record:any, index:any, column:any) => {
  console.log(record,index,column,"record");
  router.push({
    path:'/home/paybind',
    query:{
      isShow:1,
      paytype:record.paytype
    }
  })
};
defineExpose({
  props,
  onOpenInfo,
});
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.ml20 {
  margin-left: 20px;
}
</style>