<template>
  <el-drawer
    v-model="showModal"
    title="拨打跟进记录"
    :size="850"
    direction="rtl"
    :before-close="onHide"
  >
    <div class="h-full flex-col flex mydrawer pb-2">
      <div>
        <p class="font-bold mb-2">联系人信息：</p>
        <div class="flex justify-between">
          <div>
            <span class="text-gray-400">姓名：</span>
            <span>{{ currentInfo.name }}</span>
          </div>
          <div>
            <span class="text-gray-400">与案人关系：</span>
            <span>{{ currentInfo.kinship }}</span>
          </div>
          <div>
            <span class="text-gray-400">联系号码：</span>
            <span>{{ currentInfo.phone }}</span>
          </div>
          <div>
            <span class="text-gray-400">号码状态：</span>
            <span>
              <el-radio-group v-model="currentInfo.status">
                <el-radio value="N">无效</el-radio>
                <el-radio value="Y">有效</el-radio>
              </el-radio-group>
            </span>
          </div>
        </div>
      </div>
      <div>
        <ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="false">
          <template #table_top>
            <p class="font-bold">关联案件：</p>
          </template>
        </ProTable>
      </div>
      <div class="flex">
        <div class="mt-3 pr-8 w-1/2">
          <p class="font-bold mb-2">跟进信息：</p>
          <el-form
            ref="formRef"
            inline
            :model="form"
            :rules="rules"
            label-width="110px"
            label-position="left"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item class="w-full" label="跟进时间：" prop="name">
                  <el-date-picker
                    v-model="form.trackTime"
                    class="w-full"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="w-full" label="下次跟进时间：" prop="code">
                  <div>
                    <el-date-picker
                      v-model="form.nextTime"
                      class="w-full"
                      format="YYYY-MM-DD HH:mm:ss"
                      type="datetime"
                    />
                    <div>
                      <el-button size="small" @click="changeLastTime('tomorrow')">明天</el-button>
                      <el-button size="small" @click="changeLastTime('tomorrowDay')"
                        >后天</el-button
                      >
                      <el-button size="small" @click="changeLastTime('tomorrow2Day')"
                        >2天后</el-button
                      >
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  class="w-full"
                  style="display: block"
                  label="跟进结果："
                  prop="name"
                  label-position="top"
                >
                  <el-tabs v-model="resuleObj.label" class="w-full">
                    <el-tab-pane
                      :label="item.label"
                      :name="item.label"
                      v-for="(item, index) in tabObj"
                      :key="`tab${index}`"
                    >
                      <el-button
                        size="small"
                        :type="resuleObj.childrenlabel === item1.label ? 'primary' : null"
                        plain
                        v-for="(item1, index1) in item.children"
                        :key="`tabchild${index1}`"
                        @click="resuleObj.childrenlabel = item1.label"
                        >{{ item1.label }}</el-button
                      >
                    </el-tab-pane>
                  </el-tabs>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="w-full" style="display: block" label="跟进状态：" prop="code">
                  <el-button
                    size="small"
                    style="margin-left: 0"
                    class="mr-2 mb-2"
                    :type="form.phoneResultStatus === item1.value ? 'primary' : null"
                    plain
                    v-for="(item1, index1) in statusArr"
                    :key="`btn${index1}`"
                    @click="form.phoneResultStatus = item1.value"
                    >{{ item1.label }}</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="w-full" label="跟进备注：" prop="code" style="display: block">
                  <el-input
                    v-model="form.remark"
                    class="w-full"
                    :rows="2"
                    type="textarea"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="w-1/2">
          <p class="font-bold mb-2 mt-2">跟进附件：</p>
          <el-form inline :model="form" :rules="rules" label-width="110px" label-position="left">
            <el-form-item class="w-full" label="通话录音：" prop="code">
              <el-upload
                class="avatar-uploader"
                :action="url"
                :on-success="handleFileSuccess"
                :on-remove="handleRemove"
                :auto-upload="true"
              >
                <el-button type="primary" plain :icon="Upload">上传录音文件</el-button>
              </el-upload>
              <!-- 进度条 -->
              <!-- <el-progress v-if="progressFlag" :percentage="loadProgress" /> -->
            </el-form-item>
            <el-form-item label="微信图片附件：" prop="code" class="w-full">
              <el-upload
                v-model:file-list="form.images"
                :action="url"
                list-type="picture-card"
                class="mypicture"
                :on-preview="handlePictureCardPreview"
                :on-success="handleFileSuccess1"
                :on-remove="handleRemove1"
              >
                <div class="text-center">
                  <el-icon><Plus /></el-icon>
                  <div>微信相关附件</div>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="短信图片附件：" prop="code" class="w-full">
              <el-upload
                v-model:file-list="form.notes"
                :action="url"
                list-type="picture-card"
                class="mypicture"
                :on-preview="handlePictureCardPreview"
                :on-success="handleFileSuccess2"
                :on-remove="handleRemove2"
              >
                <div class="text-center">
                  <el-icon><Plus /></el-icon>
                  <div>短信相关附件</div>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="其他图片附件：" prop="code" class="w-full">
              <el-upload
                v-model:file-list="form.others"
                :action="url"
                list-type="picture-card"
                class="mypicture"
                :on-preview="handlePictureCardPreview"
                :on-success="handleFileSuccess3"
                :on-remove="handleRemove3"
              >
                <div class="text-center">
                  <el-icon><Plus /></el-icon>
                  <div>其他相关附件</div>
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="showModal = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </el-drawer>
</template>
<script setup lang="jsx" name="reduceDrawer">
  import dayjs from 'dayjs';
  import { computed } from 'vue';
  import { reactive, ref } from 'vue';
  import { ElInputNumber } from 'element-plus';
  import { Upload } from '@element-plus/icons-vue';
  import { getAppEnvConfig } from '@/utils/env';
  import { saveTrackRecord } from '@/api/property';
  const envs = getAppEnvConfig();
  const url = envs.VITE_GLOB_API_URL_PREFIX + '/sys/upload';
  const showModal = ref(false);
  const editFirst = ref(false);
  const tabledata = ref([]);
  const splitdata = ref([]);
  const progressFlag = ref(false);
  const loadProgress = ref(0);
  const dialogImageUrl = ref('');
  const dialogVisible = ref(false);
  const tabObj = [
    { label: '本人可联', children: [{ label: '接听有实质沟通' }, { label: '接听后挂断' }] },
    { label: '联系人可联', children: [{ label: '接听有实质1' }, { label: '接听后2' }] },
    { label: '未接听', children: [{ label: '接听有实质3' }, { label: '接听后4' }] },
  ];

  const resuleObj = reactive({
    label: '本人可联',
    childrenlabel: null,
  });

  const form = reactive({
    sum: 0,
    images: [],
    notes: [],
    phoneResultStatus: '',
    others: [],
    voices: [],
    remark: '',
    trackTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    nextTime: null,
  });
  const currentDetail = ref({});
  const currentInfo = ref({ name: 0, kinship: 0, phone: 0, status: '' });
  const onHide = (done) => {
    currentInfo.value = { name: 0, kinship: 0, phone: 0, status: '' };
    done();
  };
  const statusArr = [
    {
      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 options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ];
  const selectdList = ref([]);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
  };
  const handleRemove = (uploadFile, uploadFiles) => {
    const index = form.voices.findIndex((v) => v.name === uploadFile.name);
    form.voices.splice(index, 1);
  };

  const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url;
    dialogVisible.value = true;
  };
  const changeLastTime = (day) => {
    if (day === 'tomorrow') {
      form.nextTime = dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
    } else if (day === 'tomorrowDay') {
      form.nextTime = dayjs().add(2, 'day').format('YYYY-MM-DD HH:mm:ss');
    } else {
      form.nextTime = dayjs().add(3, 'day').format('YYYY-MM-DD HH:mm:ss');
    }
  };
  const handleFileSuccess = (response, file, fileList) => {
    form.voices.push({
      url: response.message,
      name: file.name,
    });
  };
  const handleFileSuccess1 = (response, file, fileList) => {
    form.images.push({
      url: response.message,
      name: file.name,
    });
  };
  const handleRemove1 = (uploadFile, uploadFiles) => {
    const index = form.images.findIndex((v) => v.name === uploadFile.name);
    form.images.splice(index, 1);
  };
  const handleFileSuccess2 = (response, file, fileList) => {
    console.log(response, file);
    form.notes.push({
      url: response.message,
      name: file.name,
    });
  };
  const handleRemove2 = (uploadFile, uploadFiles) => {
    const index = form.notes.findIndex((v) => v.name === uploadFile.name);
    form.notes.splice(index, 1);
  };
  const handleFileSuccess3 = (response, file, fileList) => {
    form.others.push({
      url: response.message,
      name: file.name,
    });
  };
  const handleRemove3 = (uploadFile, uploadFiles) => {
    const index = form.others.findIndex((v) => v.name === uploadFile.name);
    form.others.splice(index, 1);
  };
  const config = reactive({
    minHeight: 200,
    columns: [
      { type: 'checkbox', width: 50 },
      {
        field: 'code',
        title: '案件ID',
      },
      {
        field: 'code',
        title: '产品',
      },
      {
        field: 'code',
        title: '借款机构',
      },
      {
        field: 'code',
        title: '委案金额',
      },
      {
        field: 'code',
        title: '累计减免金额',
      },
      {
        field: 'code',
        title: '累计还款金额',
      },
      {
        field: 'code',
        title: '剩余待还金额',
      },
    ],
    onCheckboxChange: onCheckboxChange,
    toolbarConfig: { enabled: false },
  });
  const splitconfig = computed(() => {
    return {
      minHeight: 200,
      columns: [
        { type: 'seq', width: 50, title: '期次' },
        {
          field: 'code',
          title: '到期日',
        },
        {
          field: 'code',
          title: '状态',
          width: 70,
        },
        {
          field: 'num',
          title: '金额',
          slots: {
            default: ({ row, rowIndex }) => {
              if (editFirst.value && rowIndex === 0) {
                return (
                  <>
                    <ElInputNumber v-model={row.num} />
                  </>
                );
              } else {
                return <>{row.num}</>;
              }
            },
          },
        },
      ],
      onCheckboxChange: onCheckboxChange,
    };
  });
  tabledata.value = [
    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
    { name: 'account1', code: 'account1', role: 'user', num: 1 },
    { name: 'account2', code: 'account2', role: 'user', num: 1 },
    { name: 'account3', code: 'account3', role: 'user', num: 1 },
  ];
  splitdata.value = [
    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
    { name: 'account1', code: 'account1', role: 'user', num: 1 },
    { name: 'account2', code: 'account2', role: 'user', num: 1 },
    { name: 'account3', code: 'account3', role: 'user', num: 1 },
  ];
  const openModal = (info, detail) => {
    showModal.value = true;
    currentInfo.value = info;
    currentDetail.value = detail;
  };
  const submitForm = () => {
    saveTrackRecord({
      credit: currentDetail.value,
      trackTime: form.trackTime,
      nextTime: form.nextTime,
      phoneResultStatus: form.phoneResultStatus,
      remark: form.remark,
      voices: form.voices,
      images: form.images,
      notes: form.notes,
      others: form.others,
    }).then((res) => {
      console.log('refsss', res);
    });
  };
  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped>
  .mydrawer {
    :deep(.card) {
      padding: 0;
      border: none;
    }
    :deep(.el-date-editor) {
      width: 100%;
    }
    .el-form-item {
      margin-right: 0;
    }
  }
  .mypicture {
    :deep(.el-upload--picture-card) {
      width: 100px;
      height: 100px;
    }
    :deep(.el-upload-list__item) {
      width: 100px;
      height: 100px;
    }
  }
</style>
