<template>
  <div class="card table-box" style="padding: 0 40px">
    <div class="flex justify-end mt-2">
      <template v-if="route.query.id">
        <el-button type="warning" plain size="mini" v-print="printContent">打印客户信息 </el-button>
        <el-button
          type="warning"
          plain
          size="mini"
          v-print="printContentWd"
          :disabled="!form.lending.length"
          >打印网贷信息
        </el-button>
        <el-button
          type="warning"
          plain
          size="mini"
          v-print="printContentXyk"
          :disabled="!form.creditCard.length"
          >打印信用卡信息
        </el-button>
      </template>
      <el-button type="primary" @click="submit()" v-if="form.complete !== 'Y'">保存</el-button>
      <!-- <template v-if="route.query.id"> -->
    </div>
    <p class="text-lg text-center mb-5">客户信息</p>
    <!-- <div class=" text-xs flex justify-around"><span class=" ml-5">收单单位：</span><span class=" ml-5">收单时间：</span></div> -->
    <table>
      <tbody>
        <tr>
          <td class="label">录入人</td>
          <td colspan="2"
            ><el-input class="line-input" v-model="form.inputUserName" placeholder="" disabled
          /></td>
          <td class="label">推荐人</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.referee"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">部门</td>
          <td colspan="2">
            <el-input class="line-input" v-model="form.inputOrg" placeholder="" disabled />
          </td>
          <td class="label">角色</td>
          <td colspan="2"
            ><el-input class="line-input" v-model="form.inputRole" placeholder="" disabled
          /></td>
        </tr>
        <tr>
          <td class="label">姓名</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.name"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
          <td class="label">年龄</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.age"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">身份证号</td>
          <td colspan="2">
            <div class="flex items-center">
              <el-input
                class="line-input"
                v-model="form.idCard"
                placeholder=""
                :disabled="form.complete === 'Y'"
              />
              <el-button :icon="Search" @click="handleQuery" :disabled="form.complete === 'Y'" />
            </div>
          </td>
          <td class="label">属相</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.zodiac"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">婚姻状况</td>
          <td colspan="2">
            <el-select
              v-model="form.marriage"
              class="line-input"
              placeholder=""
              :disabled="form.complete === 'Y'"
            >
              <el-option
                :label="item.label"
                v-for="(item, index) in Marriage"
                :key="index"
                :value="item.value"
              />
            </el-select>
          </td>
          <td class="label">电话</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.phone"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">学历</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.qualification"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
          <td class="label">职业</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.career"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">是否为公检法系统人员、教师、医生、律师、企业法人</td>
          <td colspan="2">
            <el-radio-group v-model="form.functionary" :disabled="form.complete === 'Y'">
              <el-radio value="Y">是</el-radio>
              <el-radio value="N">否</el-radio>
            </el-radio-group></td
          >
          <td class="label">如职业为企事业单位人员是否同意催收</td>
          <td colspan="2"
            ><el-radio-group v-model="form.collection" :disabled="form.complete === 'Y'">
              <el-radio value="Y">是</el-radio>
              <el-radio value="N">否</el-radio> </el-radio-group
            ><br />
            企事业单位的需客户本人同意纪委联系与谈话、去单位或者给单位打电话催收</td
          >
        </tr>
        <tr>
          <td class="label">电子邮箱</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.email"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
          <td class="label">性别</td>
          <td colspan="2"
            ><el-select
              v-model="form.sex"
              class="line-input"
              placeholder=""
              :disabled="form.complete === 'Y'"
            >
              <el-option
                :label="item.label"
                v-for="(item, index) in Sex"
                :key="index"
                :value="item.value"
              /> </el-select
          ></td>
        </tr>
        <tr>
          <td class="label">预留工作单位</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.reserveWorkUnit"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
          <td class="label">预留家庭住址</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.reserveAddress"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">是否有起诉案件</td>
          <td colspan="2">
            <el-radio-group v-model="form.hasSueCase" :disabled="form.complete === 'Y'">
              <el-radio value="Y">是</el-radio>
              <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
          <td class="label">案件描述</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.caseDesc"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">打卡收入</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.checkInIncome"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
          <td class="label">打卡银行</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.checkInBank"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">打卡银行和借款银行是否为同一银行</td>
          <td colspan="5">
            <el-radio-group v-model="form.borrowCheckInBank" :disabled="form.complete === 'Y'">
              <el-radio value="Y">是</el-radio>
              <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="label">个人及夫妻名下车辆数量</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.carNum"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
          <td class="label">个人及夫妻名下房产数量</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.houseNum"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">个人及夫妻名下车辆总价值</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.carPrice"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
          <td class="label">个人及夫妻名下房产总价值</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.housePrice"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">公积金及金额</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.providentFund"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
          <td class="label">月收入</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.monthlyIncome"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">是否有理财型保单 、股票、基金 、大额存款</td>
          <td colspan="2">
            <el-radio-group v-model="form.hasBigQuota" :disabled="form.complete === 'Y'">
              <el-radio value="Y">是</el-radio>
              <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
          <td class="label">具体描述</td>
          <td colspan="2"
            ><el-input
              class="line-input"
              v-model="form.bigQuotaDesc"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
        <tr>
          <td class="label">是否有营业执照</td>
          <td colspan="2">
            <el-radio-group v-model="form.hasBusinessLicense" :disabled="form.complete === 'Y'">
              <el-radio value="Y">是</el-radio>
              <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
          <td class="label">子女工作是否需要政审</td>
          <td colspan="2">
            <el-radio-group v-model="form.needPoliticalReview" :disabled="form.complete === 'Y'">
              <el-radio value="Y">是</el-radio>
              <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="label">贷款类型</td>
          <td colspan="5"
            >是否为抵押类贷款，人保贷款，公积金贷款，经营贷，担保、联名担保、保证类贷款，保险类贷款（保单贷），对应名下有理财保险，分红保险，现金分期，装修贷，网贷/信用贷/信用卡与资产相关联的（如与房、车、营业执照（法人/个体）、商铺、公积金等），先息后本、按期结息自由还本<br />
            <el-radio-group v-model="form.hasLoan" :disabled="form.complete === 'Y'">
              <el-radio value="Y">是</el-radio>
              <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="label">信用卡数量</td>
          <td colspan="2"
            ><el-input class="line-input" v-model="cardConfig.data.length" placeholder="" disabled
          /></td>
          <td class="label">信用贷、网贷机构数量</td>
          <td colspan="2"
            ><el-input class="line-input" v-model="creditArr.length" placeholder="" disabled
          /></td>
        </tr>
        <tr>
          <td class="label">特殊原因备注</td>
          <td colspan="5"
            ><el-input
              class="line-input"
              v-model="form.remark"
              placeholder=""
              :disabled="form.complete === 'Y'"
          /></td>
        </tr>
      </tbody>
    </table>
    <p class="text-center my-3 py-1" style="background: #bdd6ec"
      >信用卡网贷状况统计*<span class="text-xs text-red-600">(涉及金额部分单位为：元)</span></p
    >
    <div class="creditcard">
      <!-- <ProTable
            :config="cardConfig"
            :data="cardArr"
            :showPagination="false"
            :showToolBar="false"
        >
        <template #table_top>
            
        </template>
        </ProTable> -->
      <div class="flex justify-between mb-3">
        <div class="flex items-center">
          <div class="ml-5">信用卡数量</div>
          <div>
            <el-input disabled v-model="cardConfig.data.length">
              <template #append>张</template>
            </el-input>
          </div>

          <div class="ml-10">信用卡欠款合计</div>
          <div>
            <el-input disabled v-model="cardSUM" />
          </div>
        </div>
        <div>
          <el-button type="primary" @click="pushCreditcard({})" :disabled="form.complete === 'Y'"
            >新建信用卡</el-button
          >
        </div>
      </div>
      <vxe-grid v-bind="cardConfig" />
    </div>
    <div class="credit">
      <ProTable
        :config="creditConfig"
        :data="creditArr"
        :showPagination="false"
        :showToolBar="false"
      >
        <template #table_top>
          <div class="flex justify-between mb-3">
            <div class="flex items-center">
              <div class="ml-5">信用贷、网贷机构数量</div>
              <div>
                <el-input disabled v-model="creditArr.length">
                  <template #append>张</template>
                </el-input>
              </div>

              <div class="ml-10">信用贷、网贷欠款合计</div>
              <div>
                <el-input disabled v-model="creditSUM" />
              </div>
            </div>
            <div>
              <el-button type="primary" @click="pushCredit({})" :disabled="form.complete === 'Y'"
                >新建网贷&信用贷</el-button
              >
            </div>
          </div>
        </template>
      </ProTable>
    </div>
    <table>
      <tbody>
        <tr>
          <td class="label">合计欠款总额</td>
          <td colspan="5">{{ creditSUM + cardSUM }}</td>
        </tr>
      </tbody>
    </table>
    <Credit ref="CreditRef" @success="changeCredit" />
    <Creditcard ref="CreditcardRef" @success="changeCreditcard" />
    <div>
      <div style="overflow: hidden; width: 0; height: 0">
        <div id="customerStatic" style="padding: 10px">
          <h1 style="text-align: center; font-size: 20px">信用卡、网贷状况统计表</h1>
          <table style="table-layout: fixed">
            <customerPrint :data="form" />
            <cardAndCredit :data="form" />
            <!-- <productOrderDetail :workOrderTable="workOrderTable[index]" style="page-break-after:always"></productOrderDetail> -->
          </table>
        </div>
        <div id="customerStaticWd" style="padding: 10px">
          <h1 style="text-align: center; font-size: 20px">客户信息收集表(信用贷、网贷版)</h1>
          <table style="table-layout: fixed; page-break-after: always">
            <customerPrint :data="form" />
            <template v-for="(item, index) in form.lending" :key="'lending' + index">
              <creditPrint
                :data="item"
                :index="index"
                :sum="form.lending.length"
                style="page-break-after: always"
              />
            </template>
          </table>
        </div>
        <div id="customerStaticXyk" style="padding: 10px">
          <h1 style="text-align: center; font-size: 20px">客户信息收集表(信用卡)</h1>
          <table style="table-layout: fixed; page-break-after: always">
            <customerPrint :data="form" />
            <template v-for="(item, index) in form.creditCard" :key="'creditCard' + index">
              <cardPrint
                :data="item"
                :index="index"
                :sum="form.creditCard.length"
                style="page-break-after: always"
              />
            </template>
          </table>
        </div>
      </div>
    </div>
    <idCardModel ref="idCardModelRef" />
  </div>
</template>
<script setup name="Customer" lang="jsx">
  import { Search } from '@element-plus/icons-vue';
  import { useTabsStore } from '@/stores/modules/tabs';
  import { ElButton, ElTag, ElMessage } from 'element-plus';
  import Credit from './Credit.vue';
  import { saveCustomer, getgetByIdCustomer, getDebtInfo } from '@/api/customer';
  import { useRoute } from 'vue-router';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/stores/modules/user';
  import Creditcard from './Creditcard.vue';
  import idCardModel from './idCardModel.vue';
  import customerPrint from './customerPrint.vue';
  import cardAndCredit from './cardAndCredit.vue';
  import creditPrint from './creditPrint.vue';
  import { getdepartmentTree } from '@/api/departmentManage';
  import cardPrint from './cardPrint.vue';
  import { ref, computed, reactive, onBeforeMount } from 'vue';
  import { useDict } from '@/hooks/useDict';
  const userStore = useUserStore();
  const { LoanStatus, Marriage, Sex } = useDict('LoanStatus', 'Marriage', 'Sex');
  const idCardModelRef = ref();
  const printContent = ref({
    id: 'customerStatic',
    // preview: true, // 预览工具是否启用
    // previewTitle: '储能服务费结算单', // 预览页面的标题
    popTitle: '',
    extraHead: ``,
    isRetainOriginData: true, // 是否保留原始数据
    preview: false, // 是否开启预览
    beforeOpenCallback: () => {
      console.log('开始打印之前的callback');
    },
  });
  const departlist = ref([]);
  const printContentWd = ref({
    id: 'customerStaticWd',
    // preview: true, // 预览工具是否启用
    // previewTitle: '储能服务费结算单', // 预览页面的标题
    popTitle: '',
    extraHead: ``,
    isRetainOriginData: true, // 是否保留原始数据
    preview: false, // 是否开启预览
    beforeOpenCallback: () => {
      console.log('开始打印之前的callback');
    },
  });
  const printContentXyk = ref({
    id: 'customerStaticXyk',
    // preview: true, // 预览工具是否启用
    // previewTitle: '储能服务费结算单', // 预览页面的标题
    popTitle: '',
    extraHead: ``,
    isRetainOriginData: true, // 是否保留原始数据
    preview: false, // 是否开启预览
    beforeOpenCallback: () => {
      console.log('开始打印之前的callback');
    },
  });
  getdepartmentTree().then((res) => {
    if (res.success) {
      departlist.value = res.result;
    }
  });
  const form = ref({
    name: '',
    age: 0,
    idCard: '',
    zodiac: '',
    sex: '',
    marriage: '',
    phone: '',
    qualification: '',
    hasBigQuota: 'N',
    career: '',
    functionary: 'N',
    collection: 'N',
    email: '',
    monthlyIncome: 0,
    reserveAddress: '',
    hasSueCase: 'N',
    caseDesc: '',
    checkInIncome: 0,
    checkInBank: '',
    borrowCheckInBank: 'N',
    carNum: 0,
    carPrice: 0,
    houseNum: 0,
    housePrice: 0,
    providentFund: 0,
    bigQuotaDesc: 0,
    hasBusinessLicense: 'N',
    needPoliticalReview: 'N',
    hasLoan: 'N',
    remark: '',
    creditCard: [],
    lending: [],
    inputUserName: userStore.userInfo.username,
    inputUser: userStore.userInfo,
    inputOrg: '',
    inputRole: '',
    referee: '',
    tenantId: 0,
    tenant: {},
    reserveWorkUnit: '',
  });
  const handlePrint = () => {
    document.getElementById('printbtn').click();
  };
  const router = useRouter();
  const tabStore = useTabsStore();
  const route = useRoute();
  const CreditRef = ref();
  const CreditcardRef = ref();
  const creditArr = ref([]);
  const cardSUM = computed(() => cardConfig.data.reduce((pre, cur) => pre + Number(cur.debt), 0));
  const creditSUM = computed(() => creditArr.value.reduce((pre, cur) => pre + Number(cur.debt), 0));
  const pushCreditcard = ({ row, rowIndex }) => {
    CreditcardRef.value.openModal(row, rowIndex, form.value.complete);
  };
  const pushCredit = ({ row, rowIndex }) => {
    CreditRef.value.openModal(row, rowIndex, form.value.complete);
  };
  const handleQuery = () => {
    // idCardModelRef.value.openModal()
    if (!form.value.idCard) {
      ElMessage.warning({
        message: '请填写身份证号',
        plain: true,
      });
      return;
    }
    getDebtInfo(form.value.idCard).then((res) => {
      if (res.result) {
        res.result.creditCard = [];
        res.result.lending = [];
        form.value = res.result;
        cardConfig.data = res.result.creditCard;
        creditArr.value = res.result.lending;
      } else {
        ElMessage.warning({
          message: '您输入的身份证不存在，请手工输入详细信息',
          plain: true,
        });
      }
    });
  };
  const changeCredit = (row, index, del) => {
    if (del) {
      const arr = JSON.parse(JSON.stringify(creditArr.value));
      arr.splice(index, 1);
      creditArr.value = arr;
      form.value.lending = arr;
      return;
    }
    if (index || index === 0) {
      const arr = JSON.parse(JSON.stringify(creditArr.value));
      arr[index] = row;
      creditArr.value = arr;
    } else {
      creditArr.value.push(row);
    }
    form.value.lending = creditArr.value;
  };
  const changeCreditcard = (row, index, del) => {
    if (del) {
      const arr = JSON.parse(JSON.stringify(cardConfig.data));
      arr.splice(index, 1);
      cardConfig.data = arr;
      form.value.creditCard = arr;
      return;
    }
    if (index || index === 0) {
      const arr = JSON.parse(JSON.stringify(cardConfig.data));
      arr[index] = row;
      cardConfig.data = arr;
    } else {
      cardConfig.data.push(row);
    }
    form.value.creditCard = cardConfig.data;
  };
  const submit = () => {
    saveCustomer({ ...form.value, creditCard: cardConfig.data, lending: creditArr.value }).then(
      (res) => {
        if (res.success) {
          ElMessage.success({
            message: '保存成功',
            plain: true,
          });
          tabStore.removeTabs(route.fullPath).then((res) => {
            router.push({
              path: '/infoGather/customerGather',
            });
          });
        }
      }
    );
  };
  const query = async (type) => {
    console.log('route.query.id', route.query);
    getgetByIdCustomer(route.query.id).then((res) => {
      if (res.success) {
        form.value = res.result;
        cardConfig.data = res.result.creditCard;
        creditArr.value = res.result.lending;
      }
    });
  };
  onBeforeMount(async () => {
    if (route.query.id) {
      query();
    }
  });
  const cardConfig = reactive({
    align: 'center',
    onCellClick: pushCreditcard,
    minHeight: 250,
    rowConfig: {
      height: 40,
    },
    cellConfig: {
      height: 40,
    },
    columns: [
      {
        type: 'seq',
        width: 60,
        title: '序号',
        slots: {
          default: ({ row, rowIndex }) => {
            return <>{rowIndex + 1}</>;
          },
        },
      },
      {
        field: 'bank',
        width: 100,
        title: '发卡银行',
        showOverflow: 'tooltip',
      },
      {
        field: 'quota',
        width: 110,
        title: '授信额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'usedQuota',
        width: 110,
        title: '已用额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'debt',
        width: 110,
        title: '未还金额',
        showOverflow: 'tooltip',
      },
      {
        field: 'bigQuotaStagesAmount',
        width: 110,
        title: '大额专项欠款金额',
        showOverflow: 'tooltip',
      },
      {
        field: 'beOverduePeriod',
        width: 110,
        title: '逾期期数',
        showOverflow: 'tooltip',
      },
      {
        field: 'sixDevUsedQuota',
        width: 110,
        title: '近6个月平均使用额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'hasNegotiate',
        width: 110,
        title: '有无协商方案',
        showOverflow: 'tooltip',
        slots: {
          default: ({ row }) => {
            return <ElTag>{row.hasNegotiate == 'Y' ? '是' : '否'}</ElTag>;
          },
        },
      },
      {
        field: 'creditCardStatus',
        title: '卡片状态(逾期/正常)',
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.creditCardStatus
                  ? LoanStatus.value?.find((v) => v.value === row.creditCardStatus)?.label
                  : ''}
              </>
            );
          },
        },
        showOverflow: 'tooltip',
      },
      {
        field: 'operation',
        title: '操作',
        width: 100,
        fixed: 'right',
        slots: {
          default({ row, rowIndex }) {
            return (
              <>
                <ElButton
                  type="primary"
                  link
                  onClick={() => changeCreditcard(row, rowIndex, true)}
                  disabled={form.value.complete === 'Y'}
                >
                  删除
                </ElButton>
              </>
            );
          },
        },
      },
    ],
    data: [],
    toolbarConfig: { enabled: false },
  });
  const creditConfig = reactive({
    onCellClick: pushCredit,
    minHeight: 200,
    columns: [
      {
        type: 'seq',
        width: 60,
        title: '序号',
        slots: {
          default: ({ row, rowIndex }) => {
            return <>{rowIndex + 1}</>;
          },
        },
      },
      {
        field: 'loanPlatform',
        width: 100,
        title: '贷款机构',
        showOverflow: 'tooltip',
      },
      {
        field: 'quota',
        width: 110,
        title: '审批额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'lendingNum',
        width: 110,
        title: '贷款笔数',
        showOverflow: 'tooltip',
      },
      {
        field: 'period',
        width: 110,
        title: '贷款期数',
        showOverflow: 'tooltip',
      },
      {
        field: 'repayPeriod',
        width: 110,
        title: '已还期数',
        showOverflow: 'tooltip',
      },
      {
        field: 'debt',
        width: 110,
        title: '未还金额',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        title: '状态(逾期/正常)',
        showOverflow: 'tooltip',
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.loanStatus
                  ? LoanStatus.value?.find((v) => v.value === row.loanStatus)?.label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'operation',
        title: '操作',
        width: 100,
        fixed: 'right',
        slots: {
          default({ row, rowIndex }) {
            return (
              <>
                <ElButton
                  type="primary"
                  link
                  onClick={() => changeCredit(row, rowIndex, true)}
                  disabled={form.value.complete === 'Y'}
                >
                  删除
                </ElButton>
              </>
            );
          },
        },
      },
    ],
    toolbarConfig: { enabled: false },
  });
</script>
<style lang="scss" scoped>
  table {
    width: calc(100%);
    border-collapse: collapse;
  }
  td {
    border: 1px solid rgba(5, 5, 5, 0.06);
    background: #fff;
    color: #606268;
    width: 240px;
    line-height: 11px;
    height: 40px;
    font-size: 14px;
    padding-left: 5px;
    &.label {
      text-align: center;
      background: #dfeaf5;
      color: #000;
    }
  }
  .creditcard {
    :deep(.card) {
      // background: #fff3cc;
    }
  }
  .credit {
    :deep(.card) {
      // background: #e1f1d9;
    }
  }
</style>
