<template>
  <el-dialog
    :title="refList.title"
    :visible.sync="dialogVisible"
    width="33%"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :append-to-body="true"
    v-loading.fullscreen.lock="fullscreenLoading"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-form-item label="分类名称：" prop="typeId">
        <el-select
          filterable
          placeholder="请选择"
          v-model="form.typeId"
          @visible-change="visbleChange"
          @change="classifyChange"
        >
          <el-option
            v-for="(item, index) in classifyList"
            :key="index"
            :label="item.name"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="上传文件：" prop="docUrl">
        <div>
          <el-upload
            class="upload-demo"
            :action="url"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :before-upload="beforeAvatarUpload"
            accept=".pdf, application/pdf"
          >
            <el-button
              size="small"
              style="background: #579ef8; border-color: #579ef8"
              type="primary"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              仅支持pdf文件,文件名称保存时生效
            </div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="文件名称：" prop="name">
        <el-input
          class="maxlength-input"
          placeholder="请输入"
          maxlength="64"
          show-word-limit
          v-model.trim="form.name"
        ></el-input>
      </el-form-item>
      <el-form-item prop="status">
        <template slot="label"><span>状&#8195;&emsp;态</span>：</template>
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button
        size="small"
        style="margin-left: 60px"
        type="primary"
        @click="addList('form')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import * as api from '@/api/api'
export default {
  data() {
    return {
      fullscreenLoading: false,
      dialogVisible: false,
      form: {
        docUrl: '',
        id: '',
        linkUrl: '',
        name: '',
        status: 1,
        typeId: ''
      },
      refList: {},
      fileList: [],
      classifyList: [],
      rules: {
        typeId: [
          { required: true, trigger: 'change', message: '请选择分类名称' }
        ],
        name: [{ required: true, trigger: 'blur', message: '请输入文件名称' }],
        docUrl: [{ required: true, trigger: 'click', message: '请上传文件' }]
      },
      url: window.global_config.BASE_URL + '/api/file/local/upload'
    }
  },
  methods: {
    /**
     * @method 关闭弹框
     * **/
    handleClose() {
      this.dialogVisible = false
      this.$parent.search()
      this.form = {
        docUrl: '',
        id: '',
        linkUrl: '',
        name: '',
        status: 1,
        typeId: '',
        fileSize: ''
      }
      this.fileList = []
      this.$refs['form'].resetFields()
    },
    /**
     * @method 打开文件弹框
     * **/
    openClose(val) {
      if (val) {
        this.refList = val
        if (val.id) {
          this.visbleChange(true)
          this.details()
        }
      }
      this.dialogVisible = true
    },
    /**
     * @method 详情
     * **/
    details() {
      api.GET('/doc/getDetail', { id: this.refList.id }).then(data => {
        if (data.code == 0) {
          this.form = data.data
          this.fileList = [{ name: this.form.name, url: this.form.docUrl }]
        }
      })
    },
    /**
     * @method 分类下拉列表
     * **/
    visbleChange(val) {
      if (val) {
        api.POST('/doc/type/dropList').then(data => {
          if (data.code == 0) {
            this.classifyList = data.data
          }
        })
      }
    },
    /**
     * @method 分类选择
     * **/
    classifyChange(val) {
      this.classifyList.find(item => {
        if (item.typeId == val) {
          this.form.linkUrl = item.linkUrl
        }
      })
    },
    /**
     * @method 上传
     * **/
    // api_import(file) {
    //   const files = {
    //     file: file.file
    //   }
    //   api
    //     .IMPORT('/api/file/local/upload', files)
    //     .then(data => {
    //       if (data.code == 0) {
    //         this.form.name == ''
    //           ? (this.form.name = file.file.name)
    //           : this.form.name

    //         // data.data.name = this.form.name
    //         // this.fileList = [data.data]
    //         this.form.docUrl = data.data.url
    //         this.form.fileSize = data.data.size
    //         this.$message.success('上传成功')
    //       }
    //     })
    //     .catch(() => {
    //       this.fileList = []
    //     })
    // },
    /**
     * @method 文件上传限制
     * **/
    handleExceed(files, fileList) {
      if (fileList.length == 1) {
        this.$message.warning('只能上传单个文件')
      }
    },
    /**
     * @method 上传成功
     * **/
    handleSuccess(file, fileList) {
      this.form.name == ''
        ? (this.form.name = fileList.name.split('.pdf')[0].substring(0, 64))
        : this.form.name
      file.data.name = this.form.name
      this.fileList = [file.data]
      this.form.docUrl = file.data.url
      this.form.fileSize = file.data.size
      this.$message.success('上传成功')
    },
    /**
     * @method 文件删除
     * **/
    handleRemove(files, fileList) {
      this.form.name = ''
      this.fileList = fileList
      this.form.docUrl = ''
      this.form.fileSize = ''
    },
    /**
     * @method 上传限制
     * **/
    beforeAvatarUpload(file) {
      const ispaf = file.type === 'application/pdf'

      if (!ispaf) {
        this.$message.error('上传文件只能是 PDF 格式!')
      }
      return ispaf
    },
    /**
     * @method 提交确定
     * **/
    addList(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true
          let code = {
            docUrl: this.form.docUrl,
            linkUrl: this.form.linkUrl,
            name: this.form.name,
            status: this.form.status,
            typeId: this.form.typeId,
            fileSize: this.form.fileSize
          }
          this.refList.show ? this.addfile(code) : this.editfile(code)
        }
      })
    },
    /**
     * @method 新增文件
     * **/
    addfile(val) {
      api
        .POST('/doc/addDoc', val)
        .then(data => {
          if (data.code == 0) {
            this.$message.success(data.message)
            this.handleClose()
            this.fullscreenLoading = false
          }
        })
        .catch(() => {
          this.fullscreenLoading = false
        })
    },
    /**
     * @method 编辑文件
     * **/
    editfile(val) {
      val.id = this.form.id
      api
        .PUT('/doc/updateDoc', val)
        .then(data => {
          if (data.code == 0) {
            this.$message.success(data.message)
            this.handleClose()
            this.fullscreenLoading = false
          }
        })
        .catch(() => {
          this.fullscreenLoading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
</style>