<template>
  <vxe-modal
    resize
    v-model="showModal"
    :title="title"
    @hide="onHide"
    height="300"
    width="430"
    show-footer
    esc-closable
  >
    <div class="tag-wrapper">
      <template v-if="title === '添加临时标签'">
        <div class="flex items-center">
          <div>临时标签：</div>
          <el-input v-model="form.tag" placeholder="请输入临时标签" style="width: 200px"/>
        </div>
      </template>
      <template v-if="title === '导入批量添加标签'">
        <div class="flex justify-center" >
          <div style="line-height: 28px;">上传文件：</div>
          <el-upload
            class="avatar-uploader"
            :headers="{ timeout: 600000 }"
            ref="uploadRef"
            :action="upload.url"
            :disabled="upload.isUploading"
            accept=".xls, .xlsx"
            :auto-upload="true"
            :limit="1"
            :on-success="handleFileSuccess"
            :on-remove="handleRemove"
            :on-progress="uploadVideoProcess"
          >
            <el-button type="primary" plain :loading="upload.isUploading"
              >点击上传</el-button
            >
          </el-upload>
        </div>
      </template>
      <template v-if="title === '删除临时标签'">
        <div class="flex items-center">
          <div>临时标签：</div>
          <el-select
            v-model="form.tag"
            style="width: 200px"
            placeholder="请选择临时标签"
          >
            <el-option
              v-for="item in tagOpt"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div class="w-full">
        <el-checkbox v-model="form.check">从所有案件中删除此标签</el-checkbox>
        </div>
      </template>
    </div>
    <template #footer>
      <el-button type="primary" link style="float: left;" v-if="title === '导入批量添加标签'" @click="downloadtemplate">点击下载模版</el-button>
      <el-button type="default" @click="showModal = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </template>
  </vxe-modal>
</template>

<script setup lang="jsx" name="allocationModal">
  import { UserFilled } from '@element-plus/icons-vue';
  import { RefreshRight } from '@element-plus/icons-vue';
  import { ElInputNumber } from 'element-plus';
  import { addTag, importTag, deleteTag, listTags } from '@/api/property';
  import { inject } from 'vue';
  import { computed } from 'vue';
  import { getAppEnvConfig } from '@/utils/env';
  import { reactive, ref } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';

  const data = ref([]);
  const uploadRef = ref();
  const tabledata = ref([]);

  const showModal = ref(false);
  const form = ref({ tag: '', fileUrl: '', check: false });
  const currentAllBtn = ref(1);
  const editRowIndex = ref(-1);
  const envs = getAppEnvConfig();

  const tagOpt = ref([]);
  const title = ref();
  const curParam = ref({})
  const downloadfile = inject('download');
  const emits = defineEmits(['success']);
  const upload = reactive({
    // 是否禁用上传
    isUploading: false,
    // 上传的地址
    url: envs.VITE_GLOB_API_URL_PREFIX + '/sys/upload',
  });
  const onHide = () => {
    form.value = { tag: '', fileUrl: '', check: false };
    uploadRef.value.clearFiles();
  };
  const handleFileSuccess = (response, file, fileList) => {
    if (!response.success) {
      ElMessage.error({
        message: response.message || '检查失败',
        plain: true,
      });
      upload.isUploading = false;
      uploadRef.value.clearFiles();
    }
    if (response.success) {
      ElMessage.success({
        message: '上传成功',
        plain: true,
      });
      form.value.fileUrl = response.message;
      upload.isUploading = false;
    }
  };
  const handleRemove = () => {
    form.value.fileUrl = '';
  };
  const openModal = (type, paramsStatic, selectlist) => {
    showModal.value = true;
    if (type == 'add') title.value = '添加临时标签'
    if (type == 'import') title.value = '导入批量添加标签'
    if (type == 'del') title.value = '删除临时标签'
    if (selectlist && selectlist.length) {
      curParam.value['caseId'] = selectlist.map((v) => v.caseId).join(',');
    } else {
      delete paramsStatic.current
      delete paramsStatic.size
      curParam.value = paramsStatic;
    }
    listTags().then(res=>{
      if (res.success) {
        if (!res.result) res.result = []
        tagOpt.value = res.result.filter(v => v)
      }
    })
  };
  const uploadVideoProcess = (event, file, fileList) => {
    upload.isUploading = true;
  };
  const backform = () => {
    step.value = 0;
  };
  const submitForm = () => {
    if(title.value === '添加临时标签') {
      addTag({
        tag: form.value.tag,
        ...curParam.value
      }).then(res => {
        if (res.success) {
          ElMessage.success({
            message: '添加成功',
            plain: true,
          });
          showModal.value = false;
          emits('success');
        }
      })
    } else if (title.value === '导入批量添加标签') {
      if (!form.value.fileUrl) {
        return ElMessage.warning({
          message: '请上传标签文件',
          plain: true,
        });
      }
      importTag({
        fileUrl: form.value.fileUrl
      }).then(res => {
        if (res.success) {
          ElMessage.success({
            message: '上传成功',
            plain: true,
          });
          showModal.value = false;
          emits('success');
        }
      })
    } else{
      if (!form.value.tag) {
        return ElMessage.warning({
          message: '请选择临时标签',
          plain: true,
        });
      }
      const param = {
        tags: form.value.tag,
      }
      if (!form.value.check) {
        param['caseId'] = curParam.value['caseId']
      }
      deleteTag(param).then(res => {
        if (res.success) {
          ElMessage.success({
            message: '上传成功',
            plain: true,
          });
          showModal.value = false;
          emits('success');
        }
      })
    }
  };
  const downloadtemplate = () => {
    downloadfile('/Loan/downloadTag', {}, '标签模版.xls');
  };

  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped>
  .tag-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 20px;
  }
</style>
