<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;
    };
    // 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 = [];
      }
    };
    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: 'daterange', valueFormat: 'YYYY-MM-DD' },
              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 }, 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 }, 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>
  