<template>
  <div class="table-box">
    <ProTable ref="proTable" :config="config" :api="getContractPage" :paramCallback="paramCallback" :selectdList="selectdList">
      <template #left_buttons>
        <el-button type="primary" @click="addConstant()">新建合同</el-button>
      </template>
    </ProTable>
    <addModel
      ref="addModelRef"
      @success="query"
    ></addModel>
  </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 { getContractPage  } from '@/api/customer';
  import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
  import { useRouter } from 'vue-router';
  import addModel from './components/addModel.vue';
  import { useDict } from '@/hooks/useDict';
  const { PaymentForm, ContractStatus } = useDict("PaymentForm", "ContractStatus");
  const addModelRef = ref()
  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 addConstant = (row) => {
    addModelRef.value.openModal(row
    );
  };

  const config = reactive({
    onCheckboxChange: onCheckboxChange,
    onCheckboxAll: onCheckboxAll,
    columns: [
      // { type: 'checkbox', width: 60,fixed: 'left' },
      { field: 'id', title: '档案编号', slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                {rowIndex + 1}
              </>
            );
          },
        }  
      },
      { field: 'id', title: '合同编号', search: { labelWidth: 85, el: 'input' }, slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                <div
                  onClick={() => addConstant(row)}
                  className=" text-blue-400 cursor-pointer inline-block"
                >
                  {row.contractNo}
                </div>
              </>
            );
          },
        }  
      },
      {
        field: 'contractSignBody',
        title: '合同签订主体',
        search: { labelWidth: 85, el: 'input' }
      },
      {
        field: 'businessName',
        title: '业务名称',
        search: { el: 'input',labelWidth: 85,  props: { clearable: true } },
      },
      { field: 'customerName', title: '客户名称', search: { labelWidth: 85, el: 'input' } },
      { field: 'idCard', title: '身份证号', search: { labelWidth: 85, el: 'input' } },
      {
        field: 'paymentForm',
        title: '缴费形式',
        showOverflow: 'tooltip',
        width: 80,
        enum: PaymentForm,
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.paymentForm
                  ? PaymentForm.value?.find((v) => v.value === row.paymentForm)?.label
                  : ''}
              </>
            );
          },
        },
      },
      { field: 'serviceFeeTotal', title: '服务费总额', search: { labelWidth: 85, el: 'input' } },
      { field: 'serviceTerm', title: '服务期限', search: { labelWidth: 85, el: 'input' } },
      { field: 'contractScanFile', title: '合同扫描件', search: { labelWidth: 85, el: 'input' } },
      { field: 'createTime', title: '创建日期', search: {
        el: 'date-picker',
        labelWidth: 85, 
        props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
      }, },
      { field: 'createBy', title: '创建人' },
      { field: 'contractStatus', title: '合同状态', showOverflow: 'tooltip',
        width: 80,
        enum: ContractStatus,
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.contractStatus
                  ? ContractStatus.value?.find((v) => v.value === row.contractStatus)?.label
                  : ''}
              </>
            );
          },
        }, },
      { field: 'remark', title: '操作', fixed: 'right',
        slots: {
          default({ row }) {
            return (
              <>
                <ElButton type="primary" link onClick={() => addConstant(row)}>
                  修改
                </ElButton>
              </>
            );
          },
        }, },
    ],
  });

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

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