<template>
  <div class="table-box">
    <div class=" bg-white pt-2 pl-2">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
            :label="item.label"
            :name="item.value"
            v-for="(item, index) in tabs"
            :key="index"
          >
          <template #label>
            <div>
              {{item.label}}
            <span style="font-size: 20px; font-weight: bold;">{{item.msg}}</span>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <ProTable ref="proTable" :config="config" :api="getPlatformPage" :paramCallback="paramCallback">
    </ProTable>
  </div>
</template>

<script setup lang="jsx" name="platformManage">
  import { ref, reactive, onMounted } from 'vue';
  import { Plus, Delete, Edit, Setting } from '@element-plus/icons-vue';
  import { getPlatformPage, deletePlatforms } from '@/api/platform';
  import { getByStagesTotal } from '@/api/property';
  import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
  import { useRouter } from 'vue-router';
  const tabs = ref([]);
  import { useDict } from '@/hooks/useDict';
  const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, AuditStatus, CaseStatus } = useDict("PhoneResultStatus","ReduceType", "FlowStatus", "FollowStatus","AuditStatus", "CaseStatus");

  const proTable = ref(null);
  const selectdList = ref([]);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
  };
  const router = useRouter();
  const activeName = ref('pending');
  const paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    if (obj['createTime']) {
      if (obj['createTime'][0]) obj['createTimeBegin'] = obj['createTime'][0];
      if (obj['createTime'][1]) obj['createTimeEnd'] = obj['createTime'][1];
      delete obj['createTime'];
    }
    setTimeout(() => {
      const arr = JSON.parse(JSON.stringify(FlowStatus.value))
      getByStagesTotal({...obj, flowStatus: null}).then(res => {
        if (res.success) {
          arr.forEach(item => {
            const tt = res.result.find(v => v.flowStatus === item.value)
            if (tt) {
              item['msg'] = tt.number
            } else {
              item['msg'] = 0
            }
          })
          tabs.value = arr
        } else {
          tabs.value = arr
        }
      }).catch(e => {
        tabs.value = arr
      })
    }, (FlowStatus.value && FlowStatus.value.length) ? 100 : 1000)
    return obj;
  };
  const onCheckboxAll = (flag) => {
    if (flag.checked) {
      selectdList.value = flag.records;
    } else {
      selectdList.value = [];
    }
  };
  const pushCustomer = (row) => {
    router.push({
      path: '/infoGather/dangerReport/dangerReportDetail',
      query: row ? { id: row.id }: {}, //这里不能直接写成 query: JSON.stringify(item)
    });
  };
  const pushCredit = () => {
    router.push({
      path: '/infoGather/customerGather/Credit',
      query: { id: 44 }, //这里不能直接写成 query: JSON.stringify(item)
    });
  };
  const config = reactive({
    onCheckboxChange: onCheckboxChange,
    onCheckboxAll: onCheckboxAll,
    columns: [
      { field: 'id', title: '客户ID', slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                <div
                  onClick={() => pushCustomer(row)}
                  className=" text-blue-400 cursor-pointer inline-block"
                >
                  {row.id}
                </div>
              </>
            );
          },
        }  
      },
      {
        field: 'createTime',
        title: '创建日期',
        search: {
          el: 'date-picker',
          labelWidth: 85, 
          props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
        },
      },
      {
        field: 'createBy',
        title: '创建人',
        search: { el: 'input',labelWidth: 85,  props: { clearable: true } },
      },
      { field: 'name', title: '客户名称', search: { labelWidth: 85, el: 'input' } },
      { field: 'name', title: '身份证号', search: { labelWidth: 85, el: 'input' } },
      { field: 'name', title: '手机', search: { labelWidth: 85, el: 'input' } },
      { field: 'name', title: '电子邮箱', search: { labelWidth: 85, el: 'input' } },
      { field: 'maxStagesNum', title: '信用卡数量', search: { labelWidth: 85, el: 'input' } },
      { field: 'maxStagesNum', title: '网贷&信用贷数量', search: { labelWidth: 85, el: 'input' } },
      { field: 'remark', title: '欠款总额', search: { labelWidth: 85, el: 'input' } },
      { field: 'remark', title: '备注', search: { labelWidth: 85, el: 'input' } },
      { field: 'remark', title: '风控审核状态'},
    ],
  });

  const query = () => proTable.value?.search();
  const handleClick = () => {
    setTimeout(() => {
      query();
    }, 300);
  };
  onMounted(() => {
    query();
  });
</script>
