<!-- 添加根实体类 -->
<template>
  <a-modal
    :title="'添加根节点' + TEXT.ENT_CLS"
    :visible="show"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleClose"
  >
    <div style="display: flex">
      <div style="width:130px;">
        <div style="width:100px;height:100px;overflow:hidden;border:1px solid #ddd">
          <img v-if="headImg" style="width:100px;height:100px;" :src="headImg" alt="头像">
        </div>
        <label
          class="btn btn-orange"
          for="uploads"
          style="display:inline-block;width: 100px;padding: 0;text-align: center;line-height: 28px;border:1px solid #ccc;margin-top: 20px;"
        >选择图片</label>
        <input
          id="uploads"
          type="file"
          :value="imgFile"
          style="position:absolute; clip:rect(0 0 0 0);display: none"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="uploadImg($event, 1)"
        >
      </div>
      <a-form :form="form" style="flex: 1">
        <a-form-item label="名称">
          <a-input v-decorator="formRules.entityClass" :placeholder="'请输入' + TEXT.ENT_CLS +'名'" />
        </a-form-item>
        <a-form-item label="描述">
          <a-input v-decorator="formRules.entClsMemo" type="textarea" />
        </a-form-item>
        <a-form-item label="背景颜色">
          <a-color-picker v-decorator="formRules.backGroundColor" @fromChild="getColor" />
          <!-- <a-color-picker :color="color" v-decorator="formRules.backGroundColor" /> -->
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
import AColorPicker from '@/components/common/colorPicker'
const api = require('@/api/index')
const TEXT = window.USER_ROLE_LANGUAGE[window.USER_ROLE]
const formRules = { // 所有验证规则
  entityClass: [ // 用作标识，我们统一写成和表单提交字段一样
    'entityClass', // 表单提交的字段
    {
      rules: [{ required: true, message: '此选项必填', whitespace: true }]
    }
  ],
  entClsMemo: [ // 用作标识，我们统一写成和表单提交字段一样
    'entClsMemo', // 表单提交的字段
    {
      rules: [{ required: false }]
    }
  ],
  backGroundColor: [ // 用作标识，我们统一写成和表单提交字段一样
    'backGroundColor', // 表单提交的字段
    {
      rules: [{ required: false }]
    }
  ]
}
export default {
  name: 'AddRootEntityClassModal',
  components: {
    AColorPicker
  },
  data() {
    return {
      TEXT,
      fileName: '', // 本机文件地址
      headImg: '',
      imgFile: '',
      show: true,
      form: this.$form.createForm(this),
      formRules,
      color: ''
    }
  },
  created() {},
  destroyed() {
  },
  methods: {
    getColor(color) {
      this.color = color
    },
    // 选择本地图片
    uploadImg(e, num) {
      var max_size = 80// 80k
      var _this = this
      // 上传图片
      var file = e.target.files[0]
      _this.fileName = file.name
      var size = file.size
      if (size > max_size * 1024) {
        this.$message.warning('建议上传图标不要超过20KB')
      }
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG|JPEG|BMP)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        data = e.target.result
        this.$open('cropperImgModal', {
          paramImgUrl: data
        }, function(data) {
          this.headImg = data.data
        })
      }
      // 转化为base64
      reader.readAsDataURL(file)
      // 转化为blob
      // reader.readAsArrayBuffer(file)
    },
    async getFormData() {
      var result = await this.$formValidateFields('form') // form的字符串
      // 在这里对form返回数据进行处理
      return result
    },
    async handleOk(e) {
      const vm = this
      const result = await this.getFormData() // this是当前组件的this,  'form'此表单的名称，一定要是字符串
      const uniqueMatchList = this.$checkSpecialChar(result.entityClass)
      if (uniqueMatchList.length > 0) {
        this.$message.error(`实体类名称不能包含特殊字符【${uniqueMatchList.join('、')}】！`)
        return false
      }
      const data = {
        entClsMemo: result.entClsMemo ? encodeURI(result.entClsMemo.trim()) : '',
        entClsName: result.entityClass.trim(),
        entClsType: 'NONE',
        entClsIcon: encodeURIComponent(this.headImg), // base64转一下，不然会把+ 替换成 空格
        pid: '',
        backGroundColor: vm.color
      }
      api.entityClass.addEntityClass(data).then((data) => {
        // 添加成功
        if (data !== false) {
          vm.$message.success('添加根节点' + TEXT.ENT_CLS + '成功')
          this.$trigger('entityClass:nodeCreated', data)
          vm.$close({
            msg: result
          })
        }
      })
    },
    handleClose(e) {
      this.$close(false)
    }
  }
}
</script>

<style scoped>
    .wid-800 {
        width: 800px !important;
    }
</style>
<style>
   .m-colorPicker .colorBtn{
    width: 33px !important;
    height: 32px !important;
     }
</style>
