<template>
  <router-view></router-view>
  <a-table :columns="columns" :data-source="props.list" :pagination="false">
    <template #bodyCell="{ text, record, index, column }">
      <div v-if="record.payname == '1'&& column.key === 'name' ">
        <div class="flex">
          <WechatFilled :style="{ fontSize: '24px' }"></WechatFilled
          ><span class="ml20">微信支付</span>
        </div>
      </div>
      <div v-else-if="record.payname == '2'&& column.key === 'name'  ">
       <div class="flex">
          <AlipaySquareFilled :style="{ fontSize: '24px' }"></AlipaySquareFilled
          ><span class="ml20">支付宝</span>
        </div>
      </div>
      <div v-else-if="record.payname == '3'&& column.key === 'name' ">
        <div class="flex">
          <DollarCircleFilled :style="{ fontSize: '24px' }"></DollarCircleFilled
          ><span class="ml20">京东白条</span>
        </div>
      </div>
      <div v-else-if="record.payname == '4'&& column.key === 'name'  ">
        <div class="flex">
          <CreditCardFilled :style="{ fontSize: '24px' }"></CreditCardFilled
          ><span class="ml20">花呗</span>
        </div>
      </div>
      <div v-else-if="record.payname == '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";
import { message } from 'ant-design-vue';
const columns = [
  {
    title: "支付渠道",
    name: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "绑定账户数",
    dataIndex: "paycount",
    key: "paycount",
  },
  {
    title: "当前预警",
    dataIndex: "paystatus",
    key: "paystatus",
  },
  {
    title: "操作",
    key: "tags",
    dataIndex: "tags",
  },
];

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