<template>
  <a-modal
    title="编辑实体类信息"
    :visible="show"
    :maskClosable="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
            style="width:100px;height:100px;"
            :src="headImg"
            alt="头像"
            v-if="headImg"
          />
        </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
          type="file"
          id="uploads"
          :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>
      <div style="flex: 1">
        <a-form :form="form">
          <a-form-item label="名称">
            <a-input
              v-decorator="formRules.entityClass"
              placeholder="请输入实体类名"
            />
          </a-form-item>
          <a-form-item label="描述">
            <a-input
              type="textarea"
              v-decorator="formRules.entClsMemo"
              placeholder="实体类描述"
            />
          </a-form-item>
          <a-form-item label="背景颜色">
            <AColorPicker
              @fromChild="getColor"
              :color="backGroundColor"
              v-decorator="formRules.backGroundColor"
            />
          </a-form-item>
        </a-form>
        <div class="grid-columns-3" v-if="entClsIsRoot === 'T'">
          <div v-for="(item, key) in panes" :key="key">
            <a-checkbox
              :checked="item.checked"
              @change="onChange($event, item)"
              :disabled="item.disabled"
            >
              {{ item.title }}
            </a-checkbox>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>


<script>
import AColorPicker  from '@/components/knowledge/colorPicker';
import { updateEntityClass } from "@/api/graph/entityClass"

const panes = {
  GX: { title: "关系属性", checked: false, disabled: true },
  BQ: { title: "标签属性", checked: true, disabled: true },
  ELEM: { title: "基础属性", checked: false, disabled: true },
  MIME: { title: "多媒体属性", checked: false, disabled: false },
  CIDX: { title: "能力属性", checked: false, disabled: false },
  NONE: { title: "待审属性", checked: false, disabled: false },
};
export default {
  components: {
    AColorPicker,
  },
  name: "edit-entity-class-tree-name-modal",
  props: [
    "entClsName",
    "entClsID",
    "entClsAllowAttrTypeArr",
    "entClsIsRoot",
    "entClsMemo",
    "entClsIcon",
    "backGroundColor",
  ],
  data() {
    return {
      color:"",
      show: true,
      form: this.$form.createForm(this),
      formRules: {
        // 所有验证规则
        entityClass: [
          // 用作标识，我们统一写成和表单提交字段一样
          "entityClass", // 表单提交的字段
          {
            rules: [
              { required: true, message: "此选项必填", whitespace: true },
            ],
            initialValue: this.entClsName,
          },
        ],
        entClsMemo: [
          "entClsMemo",
          {
            initialValue: this.entClsMemo,
          },
        ],
        // backGroundColor: [
        //   // 用作标识，我们统一写成和表单提交字段一样
        //   "backGroundColor", // 表单提交的字段
        //   {
        //     initialValue: this.backGroundColor,
        //   },
        // ],
      },
      panes,
      headImg: this.entClsIcon,
      imgFile: "",
    };
  },
  created() {
     this.color=this.backGroundColor;
    // 标记已有的属性类型
    for (var i = 0; i < this.entClsAllowAttrTypeArr.length; i++) {
      if (this.entClsAllowAttrTypeArr[i] !== "BQ") {
        this.panes[this.entClsAllowAttrTypeArr[i]].checked = true;
      }
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    getColor(color) {
      this.color = color;
    },
    //选择本地图片
    uploadImg(e, num) {
      var max_size = 20; // 20k
      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) {
      let result = await this.getFormData(); // this是当前组件的this,  'form'此表单的名称，一定要是字符串
      result["entClsID"] = this.entClsID; // 修改节点的id
      result["entClsAllowAttrType"] = checkoutEntClsAllowAttrType(this.panes);
      result["entClsName"] = result.entityClass.trim();
      let entityClass = result.entityClass.trim();
      const uniqueMatchList = this.$checkSpecialChar(entityClass);
      if (uniqueMatchList.length > 0) {
        this.$message.error(
          `实体类名称不能包含特殊字符【${uniqueMatchList.join("、")}】！`
        );
        return false;
      }
      // 实体类图标
      let entClsIcon = encodeURIComponent(this.headImg);
      updateEntityClass(
          result["entClsAllowAttrType"],
          this.entClsID,
          entityClass,
          result.entClsMemo,
          entClsIcon!== "null" ? entClsIcon : "",
          this.color
        )
        .then((data) => {
          // 修改成功
          if (data) {
            this.$message.success("实体类编辑成功");
            this.$close({
              data: result,
            });
          }
        });
    },
    handleClose(e) {
      this.$close(false);
    },
    //' 设置属性的选中
    onChange(e, item) {
      item.checked = e.target.checked;
    },
  },
};

// 检索出选中的属性类型
const checkoutEntClsAllowAttrType = function(list) {
  var result = [];
  for (var i in list) {
    if (list[i].checked && i !== "BQ" && i !== "GX") {
      result.push(i);
    }
  }
  return result.join(",");
};
</script>

<style scoped></style>
