<template>
  <div class="table-box">
    <div>
      <ProTable :config="config" :data="data" ref="caseLRef">
        <!-- 表格 header 按钮 -->
        <template #left_buttons>
          <el-button
            type="primary"
            @click="audit"
            :disabled="!selectdList || selectdList.length === 0"
            >发起稽核</el-button
          >
        </template>
      </ProTable>
    </div>
    <callDrawer ref="callDrawerRef" @success="query()"></callDrawer>
    <el-image-viewer :url-list="srcList" v-if="RefImage" @close="RefImage = false" />
  </div>
</template>

<script setup name="case-audit" lang="jsx">
  import { Picture, Download } from '@element-plus/icons-vue';
  import { inject } from 'vue';
  import { ElButton } from 'element-plus';
  import { onMounted } from 'vue';
  import { getAppEnvConfig } from '@/utils/env';

  const envs = getAppEnvConfig();
  import { reactive, ref } from 'vue';
  const downloadfile = inject('download');

  const allocationModalRef = ref();
  const caseLRef = ref();
  const selectdList = ref([]);
  const callDrawerRef = ref();
  const srcList = ref([]);
  const RefImage = ref(false);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
  };

  const followStatusOpt = [
    { label: '接通后挂断', value: 'hang_up' },
    { label: '接通有实质进展', value: 'progress' },
    { label: '接通有效转告', value: 'pass_on' },
    { label: '接通拒绝转告', value: 'no_pass' },
    { label: '接听后挂断', value: 'Hang_up_after_answering' },
    { label: '接通无应答', value: 'No_response_when_connected' },
    { label: '称与债人无关', value: 'Claims_unrelated_to_creditors' },
    { label: '称非本人', value: 'Claiming_not_to_be_myself' },
    { label: '无人接听', value: 'no_answer' },
    { label: '关机', value: 'Shutdown' },
    { label: '空号', value: 'dead_number' },
    { label: '占线/忙音/正在通话中', value: 'Busy' },
    { label: '停机', value: 'closing_down' },
    { label: '机器人回复', value: 'Robot_reply' },
    { label: '微信', value: 'WeChat' },
    { label: '短信', value: 'short_message' },
    { label: 'QQ', value: 'QQ' },
    { label: '飞书', value: 'fly' },
    { label: '钉钉', value: 'DING' },
  ];
  const phoneResultStatusOpt = [
    { label: '后续再跟进', value: 'later' },
    { label: '承诺还款', value: 'Promise_Repayment' },
    { label: '暂无还款意愿', value: 'No_Repay' },
    { label: '要求停催', value: 'Stop_Urging' },
    { label: '情绪激动抗拒', value: 'resistance' },
    { label: '拒绝还款', value: 'Refuse_Repayment' },
    { label: '已还款', value: 'Repaired' },
    { label: '代履行还款', value: 'repayment_others' },
  ];
  const callTelephone = (row) => {
    callDrawerRef.value.openModal(JSON.parse(JSON.stringify(row)));
  };
  const config = reactive({
    columns: [
      { type: 'checkbox', title: '', width: 40 },
      { field: 'id', title: '跟进记录ID', width: 90 },
      {
        field: 'caseId',
        title: '案件ID',
        width: 80,
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'trackTime',
        title: '跟进日期',
        width: 100,
        search: {
          el: 'date-picker',
          props: { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
        },
      },
      {
        field: 'nextTime',
        title: '下次跟进时间',
        width: 110,
        search: {
          el: 'date-picker',
          props: { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
        },
      },
      {
        field: 'guarantor.name',
        title: '联系人姓名',
        width: 110,
        search: { el: 'input', props: { clearable: true }, key: 'guarantorName' },
      },
      {
        field: 'guarantor.phone',
        title: '联系人号码',
        width: 110,
        search: { el: 'input', props: { clearable: true }, key: 'guarantorPhone' },
      },
      {
        field: 'followStatus',
        title: '拨打跟进结果',
        width: 120,
        enum: followStatusOpt,
        search: { el: 'select', props: { filterable: true }, span: 1 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.followStatus
                  ? followStatusOpt.find((v) => v.value === row.followStatus).label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'phoneResultStatus',
        title: '拨打处置状态',
        width: 120,
        enum: phoneResultStatusOpt,
        search: { el: 'select', props: { filterable: true }, span: 1 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.phoneResultStatus
                  ? phoneResultStatusOpt.find((v) => v.value === row.phoneResultStatus).label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'phoneResultStatus',
        title: '稽核状态',
        width: 80,
        enum: phoneResultStatusOpt,
        search: { el: 'select', props: { filterable: true }, span: 1 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.phoneResultStatus
                  ? phoneResultStatusOpt.find((v) => v.value === row.phoneResultStatus).label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'remark',
        title: '备注',
        width: 80,
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'voices',
        title: '通话录音',
        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)} />
                    </el-icon>
                  ))}
                </>
              );
            }
          },
        },
      },
      {
        field: 'code',
        title: '微信图片附件',
        width: 80,
        slots: {
          default: ({ row, rowIndex }) => {
            if (row.images && row.images.length > 0) {
              return (
                <>
                  <el-icon>
                    <Picture onClick={() => preview(row, 'images')} />
                  </el-icon>
                </>
              );
            }
          },
        },
      },
      {
        field: 'code',
        title: '短信图片附件',
        width: 80,
        slots: {
          default: ({ row, rowIndex }) => {
            if (row.notes && row.notes.length > 0) {
              return (
                <>
                  <el-icon>
                    <Picture onClick={() => preview(row, 'notes')} />
                  </el-icon>
                </>
              );
            }
          },
        },
      },
      {
        field: 'code',
        title: '其他图片附件',
        width: 80,
        slots: {
          default: ({ row, rowIndex }) => {
            if (row.others && row.others.length > 0) {
              return (
                <>
                  <el-icon>
                    <Picture onClick={() => preview(row, 'others')} />
                  </el-icon>
                </>
              );
            }
          },
        },
      },
      {
        field: 'code',
        title: '操作',
        width: 80,
        slots: {
          default: ({ row, rowIndex }) => {
            if (row.others && row.others.length > 0) {
              return (
                <>
                  <ElButton type="primary" onClick={() => callTelephone(row)}>
                    处理
                  </ElButton>
                </>
              );
            }
          },
        },
      },
    ],
    onCheckboxChange: onCheckboxChange,
  });
  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(envs.VITE_GLOB_API_URL_PREFIX + '/sys/static/' + item, {}, name);
  };
  const audit = (row) => {
    if (
      !caseLRef.value.element.getCheckboxRecords() ||
      caseLRef.value.element.getCheckboxRecords().length === 0
    )
      return;
    console.log('111', caseLRef.value.element.getCheckboxRecords());
    allocationModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
  };
  const query = () => caseLRef.value?.search();

  onMounted(() => {
    query();
  });
  const data = [
    { name: 'admin', code: 'admin', role: 'superadmin' },
    { name: 'account1', code: 'account1', role: 'user' },
    { name: 'account2', code: 'account2', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
  ];
</script>
