<!--
 * @desc 用户管理-回访-新增回访记录
 * @author linyuanjie
 * @date 2023/11/14
-->

<template>
  <el-dialog
    title="新增回访记录"
    :visible.sync="showDialog"
    width="700px"
    center
    :append-to-body="true"
    :before-close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="回访内容:" prop="msg">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :headers="headers"
          :before-upload="beforeFileUpload"
          :on-remove="
            (file, fileList) => {
              handleFileRemove(file, fileList, 'msg');
            }
          "
          :before-remove="beforeFileRemove"
          :on-success="
            (response, file, fileList) => {
              handleFileSuccess(response, file, fileList, 'msg');
            }
          "
          :on-error="
            (err, file, fileList) => {
              handleFileError(err, file, fileList, 'msg');
            }
          "
          :on-exceed="
            (file, fileList) => {
              handleFileExceed(file, fileList, 'msg');
            }
          "
          :limit="1"
          :file-list="importFileObj['msg']"
          :show-file-list="false"
        >
          <el-button icon="el-icon-upload">上传文件</el-button>
        </el-upload>
        <div class="file-list pl4">
          <div
            v-for="item in importFileObj['msg']"
            :key="item.url"
            class="file-item pr4 pointer"
          >
            <div>
              <i class="el-icon-tickets mr7" /><span class="file-item-name">{{
                item.name
              }}</span>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitFn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import store from "@/store";
import { addRevisitRecord } from "@/api/admin/user";
import { getListByDeptApi } from "@/api/admin/role";

export default {
  name: "addQuizTitleDialog",
  props: {
    showDialog: {
      type: Boolean,
      required: true,
      default: false
    },
    dialogType: {
      type: String,
      default: "add"
    },
    userId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      deptLists: [],
      headers: {
        Authorization: "Bearer " + store.getters.access_token
      },
      uploadUrl: "/admin/sys-file/upload",
      formData: {
        msg: ""
      },
      formRules: {
        msg: [{ required: true, message: "请上传回访内容", trigger: "change" }]
      },
      importFileObj: {
        msg: []
      }
    };
  },
  methods: {
    async getListByDept() {
      const res = await getListByDeptApi();
      this.deptLists = res.data.data;
    },
    updateDepartmentInfo() {
      if (!this.form.deptId) {
        this.form.deptId = this.userInfo.deptId;
        const curr = this.deptLists.find(
          item => item.deptId === this.form.deptId
        );
        this.isLevel2csoDept = curr;
      }
      this.form.areaCodes = this.isLevel2csoDept.areaCodes;
    },
    submitFn() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.formData.userId = this.userId;
          this.formData.type = "RECORDING";
          const res = await addRevisitRecord(this.formData);
          if (res.data.code === 0) {
            this.$message.success("新增回访记录成功");
            this.handleClose();
          }
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("update:showDialog", false);
      this.$emit("getList");
      this.$refs.formRef.resetFields();
      this.importFileObj = {
        msg: []
      };
      this.formData = {
        msg: ""
      };
    },
    beforeFileUpload(file) {},
    beforeFileRemove(file, _fileList) {
      if (file.status === "success") {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    },
    removeFileFn(url, index, itemName) {
      this.importFileObj[itemName].splice();
      this.$confirm(`确定移除${url}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.importFileObj[itemName].splice(index, 1);
          this.formData[itemName] = "";
        })
        .catch(() => {});
    },
    handleFileRemove(file, _fileList, fileIdx) {
      const delIdx = this.importFileObj[fileIdx].findIndex(
        ele => ele.url === file.url
      );
      this.importFileObj[fileIdx].splice(delIdx, 1);
      this.$set(this.importFileObj, fileIdx, [...this.importFileObj[fileIdx]]);
      this.$set(this.formData, fileIdx, "");
    },
    handleFileSuccess(res, file, fileList, fileIdx) {
      if (res.code === 0) {
        this.$set(this.importFileObj, fileIdx, [
          { name: file.name, url: res.data.url }
        ]);
        this.formData[fileIdx] = res.data.url;
        this.$message.success("上传成功！");
      }
    },
    handleFileError() {
      this.$message.error("上传失败！");
    },
    handleFileExceed() {
      this.$message.warning("超出上传数量！");
    },
    viewImgFn(fileItem) {
      this.viewerList = [fileItem.url];
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    }
  },
  watch: {
    showDialog(newVal) {
      if (newVal && this.dialogType === "edit") {
        this.formData = Object.assign({}, this.currentRow);
        this.$set(this.importFileObj, "msg", [
          { name: this.formData.portalIcon, url: this.formData.portalIcon }
        ]);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.file-list {
  margin-top: 12px;
  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .file-item-name {
      color: #606266;
    }
    &:hover {
      background-color: #f5f7fa;
      .file-item-name {
        color: #2d8cf0;
      }
    }
    .file-item-right {
      .file-item-view {
        &:hover {
          color: #2d8cf0;
        }
      }
      .el-icon-close {
        &:hover {
          color: #606266;
        }
      }
    }
  }
}
</style>
