<template>
  <div class="table-box">
    <ProTable ref="proTable" :config="config" :api="getCustomerPage" :paramCallback="paramCallback">
      <template #left_buttons>
        <!-- <el-button type="primary" :disabled="!selectdList || selectdList.length < 1" @click="pushCreditcard">新建信用卡</el-button> -->
        <!-- <el-button type="primary" @click="pushCredit">新建信用卡</el-button>
        <el-button
          type="primary"
          :disabled="!selectdList || selectdList.length < 1"
          @click="pushCreditcard"
          >新建网贷&信用贷</el-button
        > -->
        <el-button type="primary" @click="pushCustomer()">新建客户</el-button>
        <!-- <el-button type="primary">发起风控审核</el-button> -->
      </template>
    </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 { getCustomerPage, sendReport  } from '@/api/customer';
  import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
  import { useRouter } from 'vue-router';

  const proTable = ref(null);
  const selectdList = ref([]);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
  };
  const router = useRouter();

  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'];
    }
    return obj;
  };
  const onCheckboxAll = (flag) => {
    if (flag.checked) {
      selectdList.value = flag.records;
    } else {
      selectdList.value = [];
    }
  };
  const pushCustomer = (row) => {
    router.push({
      path: '/infoGather/customerGather/Customer',
      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 send = async (e, row) => {
    e.stopPropagation()
    await ElMessageBox.confirm(`是否分起客户名称为${row.name}，身份证号为${row.idCard}，创建时间为${row.createTime}的风控审核?`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    });
    sendReport(row.id).then(res => {
      if (res.success) {
        router.push({
          name: 'dangerReportDetail',
          query: res.result ? { id: res.result.id }: {}, //这里不能直接写成 query: JSON.stringify(item)
        });
      }
    })
  }
  const onCellClick = ({ row, rowIndex }) => {
    pushCustomer(row)
  }
  const config = reactive({
    onCheckboxChange: onCheckboxChange,
    onCheckboxAll: onCheckboxAll,
    onCellClick: onCellClick,
    columns: [
      // { type: 'checkbox', width: 60,fixed: 'left' },
      { field: 'name', title: '客户名称', search: { labelWidth: 85, el: 'input' } },
      {
        field: 'createTime',
        title: '创建日期',
        search: {
          el: 'date-picker',
          labelWidth: 85, 
          props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
        },
      },
      {
        field: 'inputUserName',
        title: '创建人',
        search: { el: 'input',labelWidth: 85,  props: { clearable: true } },
      },
      { field: 'idCard', title: '身份证号', search: { labelWidth: 85, el: 'input' } },
      { field: 'phone', title: '手机', search: { labelWidth: 85, el: 'input' } },
      { field: 'email', title: '电子邮箱', search: { labelWidth: 85, el: 'input' } },
      { field: 'reserveWorkUnit', title: '预留工作单位', search: { labelWidth: 85, el: 'input' } },
      { field: 'reserveAddress', title: '预留家庭地址', search: { labelWidth: 85, el: 'input' } },
      { field: 'remark', title: '备注', search: { labelWidth: 85, el: 'input' } },
      { field: 'complete', title: '是否完成',slots: {
          default: ({ row }) => {
            return (
              <>
                {row.complete=== 'Y' ? '是':'否'}
              </>
            );
          },
        }},
      {
          field: 'code',
          title: '操作',
          width: 100,
          slots: {
            default: ({ row, rowIndex }) => {
              return (
                <>
                  <ElButton type="primary" onClick={(e) => send(e, row)} disabled={row.complete=== 'Y'}>
                    发起风控审核
                  </ElButton>
                </>
              );
            },
          },
        },
    ],
  });

  const query = () => proTable.value?.search();

  onMounted(() => {
    query();
  });
</script>
