<template>
  <el-dialog :visible.sync="visible" :title="title" :v-loading="loading" :before-close="handleClose" width="600px">
    <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="100px">
      <el-form-item label="图标名称:" prop="NAME">
        <el-input v-model="form.NAME" prop="NAME" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="类型:" prop="TYPE">
        <el-select v-model="form.TYPE" prop="TYPE" style="width: 300px">
          <el-option
            v-for="item in typeList"
            :key="item.DICTIONARIES_ID"
            :label="item.name"
            :value="item.DICTIONARIES_ID"/>
        </el-select>
      </el-form-item>
      <el-form-item label="图标:" prop="FILE_PATH">
        <upload-img
          :file-list.sync="form.file"
          :multiple="false"
          :accept="'.jpg,.png,.gif,.bmp,.jpeg,.jpeg'"
          :limit="1"
          :upload-type="1"
          append-to-body/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="uploadFile">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { requestFN } from '@/utils/request'
import { upload } from '@/utils/upload'
import uploadImg from '../../../util/uploadImg/index.vue'

export default {
  components: { uploadImg },
  props: {
    title: {
      type: String,
      default: '新增'
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      config: config,
      form: {
        NAME: '',
        TYPE: '',
        TYPE_NAME: '',
        FILE_PATH: [],
        file: []
      },
      rules: {},
      tree: [],
      typeList: []
    }
  },
  methods: {
    async init(row) {
      await this.getDic()
      if (row) {
        this.form = JSON.parse(JSON.stringify(row))
        this.$set(this.form, 'file', [{ url: config.fileUrl + row.FILE_PATH }])
        this.visible = true
      } else {
        this.visible = true
      }
    },
    goBack() {
      this.$parent.activeName = 'list'
    },
    uploadFile() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          const formData = new FormData()
          if (this.form.file[0] && this.form.file[0].raw) {
            for (let i = 0; i < this.form.file.length; i++) {
              if (this.form.file[i].raw) {
                formData.append('FFILE', this.form.file[i].raw)
              }
            }
            upload('/file/upload', formData).then((data) => {
              this.confirm(data.fileurl)
            }).catch((e) => {
              console.log(e)
            })
          } else {
            this.confirm(this.form.FILE_PATH)
          }
        } else {
          return false
        }
      })
    },
    confirm(filePath) {
      this.form.FILE_PATH = filePath
      // 翻译type类型
      this.form.TYPE_NAME = this.typeList.find((item) => {
        return item.DICTIONARIES_ID === this.form.TYPE
      }).name
      requestFN(
        '/bi/emergency/saveOrUpdate', this.form
      ).then((data) => {
        this.loading = false
        this.handleClose()
        this.$emit('refresh')
      }).catch((e) => {
        this.loading = false
      })
    },
    getDic() {
      return new Promise((resolve, reject) => {
        requestFN('/dictionaries/listTree', { PARENT_ID: '8cb69dfee64945ce9b644478d1ceff99' })
          .then((data) => {
            this.typeList = JSON.parse(data.zTreeNodes)
            resolve()
          }).catch((e) => {
            console.log(e)
            reject()
          })
      })
    },
    handleClose() {
      this.form = {
        NAME: '',
        TYPE: '',
        TYPE_NAME: '',
        FILE_PATH: [],
        file: []
      }
      this.visible = false
    }
  }
}
</script>
<style lang="sass" scoped>
.table-ui
  td
    line-height: 34px

  .tbg
    width: 200px

.ui-foot
  text-align: center
  margin-top: 20px
</style>
