<template>
  <div class="table-box">
    <!-- <div class=" bg-white">
        <el-tabs v-model="activeName" type="card" 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}}
              <el-badge :value='item.msg' :max="9999"></el-badge>
              </div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div> -->
    <div>
      <ProTable
        :config="config"
        ref="caseLRef"
        :api="getTrackRecord"
        :selectdList="selectdList"
        :paramCallback="paramCallback"
      >
        <!-- 表格 header 按钮 -->
        <template #left_buttons>
          <div class="flex rounded w-full h-11 items-center pl-2 btn-grp mb-1">
            <el-dropdown @command="(command) => (dataValue = command)">
              <span class="el-dropdown-link">
                {{ dataValue }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in dataOptions"
                    :key="item.value"
                    :command="item.value"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button type="primary" @click="repair">发起修复</el-button>
          </div>
        </template>
      </ProTable>
    </div>
    <el-image-viewer :url-list="srcList" v-if="RefImage" @close="RefImage = false" />
  </div>
</template>

<script setup name="case-repair" lang="jsx">
  import { Download } from '@element-plus/icons-vue';
  import { inject } from 'vue';
  import { computed } from 'vue';
  import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
  import { onMounted } from 'vue';
  import { getAppEnvConfig } from '@/utils/env';
  import { getTrackRecord, sendRepairRecord } from '@/api/property';
  import { useUserStore } from '@/stores/modules/user';
  import { getTenantPage } from '@/api/tenant';
  import { useDict } from '@/hooks/useDict';
  import { watch } from 'vue';
  const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, AuditStatus, CaseStatus } =
    useDict(
      'PhoneResultStatus',
      'ReduceType',
      'FlowStatus',
      'FollowStatus',
      'AuditStatus',
      'CaseStatus'
    );
  const envs = getAppEnvConfig();
  const { userInfo } = useUserStore();

  import { reactive, ref } from 'vue';
  const downloadfile = inject('download');
  const dataValue = ref('对查询结果操作');
  const dataOptions = [
    {
      label: '对查询结果操作',
      value: '对查询结果操作',
    },
    {
      label: '对选中项操作',
      value: '对选中项操作',
    },
  ];
  const allocationModalRef = ref();
  const caseLRef = ref();
  const selectdList = ref([]);
  const pageParams = ref({});
  const tabs = ref([]);
  const srcList = ref([]);
  const RefImage = ref(false);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
    dataValue.value = selectdList.value.length > 0 ? '对选中项操作' : '对查询结果操作';
  };
  // watch(
  //   () => AuditStatus.value,
  //   (newValue, oldValue) => {
  //     const list = []
  //     if (AuditStatus && AuditStatus.value && AuditStatus.value.length) {
  //       AuditStatus.value.forEach(async e => {
  //         const param = {
  //           current: 1,
  //           size: 1,
  //           auditStatus: e.value,
  //           followStatus: [
  //             'progress',
  //             'pass_on',
  //             'no_pass',
  //             'Claims_unrelated_to_creditors',
  //             'Claiming_not_to_be_myself',
  //           ]
  //         }
  //         const t = e.value
  //         if (userInfo.id) {
  //           param['createBy'] = userInfo.id;
  //         }
  //         let result = new Promise((resolve, reject) => {
  //           getTrackRecord(param).then(res => {
  //             const obj = {}
  //             obj[e.value] = res
  //             resolve(obj)
  //           })
  //         });
  //         list.push(result)
  //       })
  //     }
  //     Promise.all(list).then(res => {
  //       console.log(res)
  //       let tttt = {}
  //       res.forEach(e => {
  //         tttt = {...tttt, ...e}
  //       })
  //       AuditStatus.value.forEach(e => {
  //         const obj = JSON.parse(JSON.stringify(e))
  //         obj['msg'] = tttt[e.value].result.page.totalElements
  //         tabs.value.push(obj)
  //       })
  //     })
  //   }
  // );

  const activeName = ref('un_audit');
  const callMode = ref('');
  const paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    if (userInfo.id) {
      obj['createBy'] = userInfo.id;
    }
    //   obj['auditStatus'] = activeName.value;
    if (obj['trackTime']) {
      if (obj['trackTime'][0]) obj['trackTimeBegin'] = obj['trackTime'][0];
      if (obj['trackTime'][1]) obj['trackTimeEnd'] = obj['trackTime'][1];
      delete obj['trackTime'];
    }
    if (obj['nextTime']) {
      if (obj['nextTime'][0]) obj['nextTrackTimeBegin'] = obj['nextTime'][0];
      if (obj['nextTime'][1]) obj['nextTrackTimeEnd'] = obj['nextTime'][1];
      delete obj['nextTime'];
    }
    pageParams.value = obj;
    // obj['voices'] = 'Y'
    // obj['images'] = 'Y'
    // obj['notes'] = 'Y'
    // obj['others'] = 'Y'
    return obj;
  };
  const handleClick = () => {
    setTimeout(() => {
      query();
    }, 300);
  };
  const onCheckboxAll = (flag) => {
    if (flag.checked) {
      selectdList.value = flag.records;
    } else {
      selectdList.value = [];
    }
    dataValue.value = selectdList.value.length > 0 ? '对选中项操作' : '对查询结果操作';
  };
  const config = computed(() => {
    return {
      // rowStyle({ row }) {
      //   if (row.auditDesc === 'time_out') {
      //     return {
      //       backgroundColor: 'rgb(242,217,217)',
      //     };
      //   }
      // },
      columns: [
        { type: 'checkbox', title: '', width: 60, fixed: 'left' },
        { field: 'id', title: '跟进记录ID', showOverflow: 'tooltip', width: 90 },
        {
          field: 'caseId',
          title: '案件ID',
          showOverflow: 'tooltip',
          width: 80,
          search: { el: 'input', props: { clearable: true }, labelWidth: 105 },
          slots: {
            default: ({ row }) => {
              return <>{Array.from(new Set(row.loans.map((v) => v.caseId))).join(',')}</>;
            },
          },
        },
        {
          field: 'trackTime',
          title: '跟进日期',
          showOverflow: 'tooltip',
          width: 100,
          search: {
            el: 'date-picker',
            props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
            labelWidth: 105,
          },
        },
        {
          title: 'CPE',
          showOverflow: 'tooltip',
          width: 60,
          slots: {
            default: ({ row }) => {
              return <>{Array.from(new Set(row.loans.map((v) => v?.cpe?.username))).join(',')}</>;
            },
          },
          search: { el: 'input', props: { clearable: true }, key: 'cpeName', labelWidth: 105 },
        },
        {
          showOverflow: 'tooltip',
          slots: {
            default: ({ row }) => {
              return <>{Array.from(new Set(row.loans.map((v) => v?.tenant?.name))).join(',')}</>;
            },
          },
          enum: () => getTenantPage({ current: 1, size: 999999999, status: 'enable' }),
          search: { el: 'select', props: { filterable: true,clearable: true }, key: 'tenantId', labelWidth: 105 },
          fieldNames: { label: 'name', value: 'id' },
          title: '调解中心',
          width: 100,
        },
        {
          field: 'nextTime',
          title: '下次跟进时间',
          showOverflow: 'tooltip',
          width: 110,
          search: {
            el: 'date-picker',
            props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
            labelWidth: 105,
          },
        },
        {
          field: 'guarantor.name',
          title: '联系人姓名',
          showOverflow: 'tooltip',
          width: 110,
          search: {
            el: 'input',
            props: { clearable: true },
            key: 'guarantorName',
            labelWidth: 105,
          },
        },
        {
          field: 'guarantor.phone',
          title: '联系人号码',
          showOverflow: 'tooltip',
          width: 110,
          search: {
            el: 'input',
            props: { clearable: true },
            key: 'guarantorPhone',
            labelWidth: 105,
          },
          labelWidth: 105,
        },
        {
          field: 'followStatus',
          title: '拨打跟进结果',
          showOverflow: 'tooltip',
          width: 120,
          enum: FollowStatus,
          search: {
            el: 'select',
            defaultValue: ['Claiming_not_to_be_myself', 'dead_number'],
            props: { filterable: true, multiple: true, 'collapse-tags': true },
            labelWidth: 105,
          },
          fieldNames: { label: 'label', value: 'value' },
          slots: {
            default: ({ row }) => {
              return (
                <>
                  {row.followStatus
                    ? FollowStatus.value?.find((v) => v.value === row.followStatus)?.label
                    : ''}
                </>
              );
            },
          },
        },
        {
          field: 'phoneResultStatus',
          title: '拨打处置状态',
          showOverflow: 'tooltip',
          width: 120,
          enum: PhoneResultStatus,
          search: { el: 'select', props: { filterable: true,clearable: true }, labelWidth: 105 },
          fieldNames: { label: 'label', value: 'value' },
          slots: {
            default: ({ row }) => {
              return (
                <>
                  {row.phoneResultStatus
                    ? PhoneResultStatus.value?.find((v) => v.value === row.phoneResultStatus)?.label
                    : ''}
                </>
              );
            },
          },
        },
        {
          field: 'trackRecord.auditStatus',
          title: '稽核状态',
          showOverflow: 'tooltip',
          width: 80,
          slots: {
            default: ({ row }) => {
              return (
                <>
                  {row.auditStatus
                    ? AuditStatus.value?.find((v) => v.value === row.auditStatus)?.label
                    : ''}
                </>
              );
            },
          },
        },
        {
          field: 'remark',
          title: '备注',
          showOverflow: 'tooltip',
          width: 80,
          search: { el: 'input', props: { clearable: true }, labelWidth: 105 },
        },
        {
          field: 'voices',
          title: '通话录音',
          showOverflow: 'tooltip',
          width: 80,
          slots: {
            default: ({ row, rowIndex }) => {
              if (row.voices && row.voices.length > 0) {
                return (
                  <>
                    {row.voices.map((item, index) => (
                      <el-icon>
                        <Download onClick={() => download(item)} style="cursor: pointer;" />
                      </el-icon>
                    ))}
                  </>
                );
              }
            },
          },
        },
        {
          field: 'code',
          title: '微信图片附件',
          showOverflow: 'tooltip',
          width: 100,
          slots: {
            default: ({ row, rowIndex }) => {
              if (row.images && row.images.length > 0) {
                return (
                  <>
                    <div className="flex justify-center">
                      <ElButton onClick={() => preview(row, 'images')} link type="primary">
                        查看
                      </ElButton>
                    </div>
                  </>
                );
              }
            },
          },
        },
        {
          field: 'status',
          title: '超时状态',
          width: 100,
          showOverflow: 'tooltip',
          // search: { el: 'select', props: { clearable: true }, labelWidth: 105 },
          slots: {
            default: ({ row }) => {
              return (
                <ElTag type={row.auditDesc == 'time_out' ? 'danger' : 'primary'}>
                  {row.auditDesc == 'time_out' ? '已超时' : '正常'}
                </ElTag>
              );
            },
          },
        },
        {
          field: 'code',
          title: '短信图片附件',
          showOverflow: 'tooltip',
          width: 100,
          slots: {
            default: ({ row, rowIndex }) => {
              if (row.notes && row.notes.length > 0) {
                return (
                  <>
                    <div className="flex justify-center">
                      <ElButton onClick={() => preview(row, 'notes')} link type="primary">
                        查看
                      </ElButton>
                    </div>
                  </>
                );
              }
            },
          },
        },
        {
          field: 'code',
          title: '其他图片附件',
          showOverflow: 'tooltip',
          width: 100,
          slots: {
            default: ({ row, rowIndex }) => {
              if (row.others && row.others.length > 0) {
                return (
                  <>
                    <div className="flex justify-center">
                      <ElButton onClick={() => preview(row, 'others')} link type="primary">
                        查看
                      </ElButton>
                    </div>
                  </>
                );
              }
            },
          },
        },
      ],
      onCheckboxChange: onCheckboxChange,
      onCheckboxAll: onCheckboxAll,
    };
  });
  const preview = (item, type) => {
    const list = [];
    item[type].forEach((v) => {
      list.push(envs.VITE_GLOB_API_URL_PREFIX + '/sys/static/' + v);
    });
    RefImage.value = true;
    srcList.value = list;
  };
  const download = (item) => {
    const name = item.slice(item.lastIndexOf('/') + 1, item.length);
    downloadfile('/sys/static/' + item, {}, name);
  };
  const repair = async (row) => {
    const list = selectdList.value;
    if (dataValue.value === '对选中项操作' && (!selectdList.value || !selectdList.value.length)) {
      return ElMessage.warning({
        message: '请先选择操作对象!',
        plain: true,
      });
    }
    if (dataValue.value !== '对选中项操作') {
      const param = { ...pageParams.value };
      delete param['current'];
      delete param['size'];
      await ElMessageBox.confirm('是否批量发起修复?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      });
      await sendRepairRecord(param);
    } else {
      const ids = list.map((v) => v.id).join(',');
      await ElMessageBox.confirm('是否批量发起修复?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      });
      await sendRepairRecord({ trackRecordIds: ids });
    }
    ElMessage({
      type: 'success',
      message: '修复申请发起成功！',
      plain: true,
    });
    query();
  };
  const query = () => caseLRef.value?.search();

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