<template>
  <!-- 贷后检查 -->
  <div class="c-auto">
    <el-table class="c-table"
              :data="form"
              :span-method="span"
              :cell-style="{background:'#fff'}"
              border>
      <el-table-column prop="name"
                       label="选用"
                       width="100"
                       align="center">
        <template #default="{ row }">
          <el-checkbox v-model="row.isChoose"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="recordName"
                       label="检查方式"
                       min-width="150"
                       align="center">
        <template #default="{ row, $index }">
          {{ $index === 1 ? '贷后全检' : row.recordName }}
        </template>
      </el-table-column>
      <el-table-column label="检查对象"
                       min-width="200"
                       align="center">
        <template #default="{ row }">
          <el-select v-model="row.checkObject">
            <el-option v-for="item in row?.recordChildren[1].subject.itemList"
                       :key="item"
                       :label="item.options"
                       :value="item.itemId" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="检查时间"
                       min-width="270"
                       align="center">
        <template #default="{ row, $index }">
          <span v-if="$index === 4">点击后触发。</span>
          <div v-else
               class="flex items-center">
            <el-select v-model="row.checkTimeType">
              <el-option v-for="item in row?.recordChildren[2].recordChildren[0].subject.itemList"
                         :key="item"
                         :label="item.options"
                         :value="item.itemId" />
            </el-select>
            <el-input class="w-[100px] mx-2"
                      placeholder="请输入"
                      v-model="row.timeDays"></el-input> 日。
          </div>
        </template>
      </el-table-column>
      <el-table-column label="检查内容"
                       min-width="230"
                       align="center">
        <template #default="{ row }">
          <el-checkbox v-model="row.governmentData">政务数据</el-checkbox>
          <el-checkbox v-model="row.creditData">征信数据</el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="flex justify-end">
    <div class="submit"
         @click="submit">确认完成配置</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { postLoanInspectionDetails, postLoanInspectionSave } from '@/api/model';
import { getProcessInformationBasedOnRoles, addOperation } from '@/api/judgment';
import type { TableColumnCtx } from 'element-plus';
import { handleId } from '@/utils/common';
import Cookies from 'js-cookie';

const projectId = +Cookies.get('sand-projectId');
const levelId = +Cookies.get('sand-level');
const form = ref<Record<string, any>[]>([]);
const info = ref<Record<string, any>[]>([]);
// 配置项
const getConfig = async () => {
  const { process } = await getProcessInformationBasedOnRoles(1030);
  const result = [];
  process.map((e, i) => {
    const cur = info.value.length ? info.value[i] : {};
    let temp = {
      checkpointId: levelId,
      projectId,
      recordName: e.name,
      recordChildren: e.recordChildren,
      checkObject: +(cur.checkObject || 683),
      checkTimeType: +(cur.checkTimeType || 689),
      creditData: info.value.length ? !!cur.creditData : false,
      governmentData: info.value.length ? !!cur.governmentData : false,
      isChoose: info.value.length ? !!cur.isChoose : false,
      timeDays: cur.timeDays || '',
      id: cur.id || '',
      stRecordId: e.id,
    };
    result.push(temp);
  });
  form.value = result;
};
// 详情
const getDetail = async () => {
  try {
    const { data } = await postLoanInspectionDetails(levelId, projectId);
    info.value = data;
    getConfig();
  } finally {
  }
};

interface SpanMethodProps {
  row: Record<string, any>;
  column: TableColumnCtx<Record<string, any>>;
  rowIndex: number;
  columnIndex: number;
}
// 表格合并
const span = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (columnIndex < 2) {
    if (rowIndex === 1) {
      return {
        rowspan: 2,
        colspan: 1,
      };
    } else if (rowIndex === 2) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
// 新增判分记录
const addRecord = async (data: Record<string, any>) => {
  const preIds = `1,${Cookies.get('sand-level')},42,69,1030`; // 1，关卡id，角色（这个页面是风控经理策略）
  const rule = [];

  data.forEach((e, i) => {
    rule.push(handleId(1052, '', '', preIds + ',' + e.stRecordId + ',1052', ''), handleId(1053, 282, e.checkObject, preIds + ',' + e.stRecordId + ',1053', 1));
    i !== 4 && rule.push(handleId(1054, 283, e.checkTimeType, preIds + ',' + e.stRecordId + ',1054,1056', 1));
    e.timeDays && rule.push(handleId(1057, 284, e.timeDays, preIds + ',' + e.stRecordId + ',1054,1057', 3));
    e.governmentData && rule.push(handleId(1058, '', '', preIds + ',' + e.stRecordId + ',1055,1058', ''));
    e.creditData && rule.push(handleId(1058, '', '', preIds + ',' + e.stRecordId + ',1055,1058', ''));
  });

  await addOperation({
    checkpointId: levelId,
    parentId: preIds,
    lcJudgmentRuleReq: rule,
    projectId,
  });
};
// 提交
const submit = async () => {
  let param = JSON.parse(JSON.stringify(form.value));
  param.map((e, i) => {
    e.creditData = +e.creditData;
    e.governmentData = +e.governmentData;
    e.isChoose = +e.isChoose;
  });
  const recordParam = JSON.parse(JSON.stringify(param));
  param.map((e) => {
    delete e.recordChildren;
  });
  await postLoanInspectionSave({ postLoanInspectionList: param });
  addRecord(recordParam);
  getDetail();
  ElMessage.success('提交成功！');
};
onMounted(() => {
  getDetail();
});
</script>

<style lang="scss" scoped>
@import url(../../../styles/form.scss);
</style>