<template>
  <DragModal
      :visible="visible"
      :title="$t('structural-analysis.right-boundary-map.property')"
      :width="1000"
      :destroyOnClose="true"
      :maskClosable="false"
      @cancel="visible = false"
      :footer="null">
    <div>
      <a-form v-bind='formItemLayout'>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.name')">
          <a-input
              allowClear
              v-model="formData.struName"
              :maxLength="500"
              :placeholder="$t('structural-analysis.right-boundary-map.please-enter-name')"
          />
        </a-form-item>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.width')">
          <a-input-number
              id="w"
              v-model="formData.w"
              :min="15"
              :max="99999"
          />
        </a-form-item>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.high')">
          <a-input-number
              id="h"
              v-model="formData.h"
              :min="15"
              :max="99999"
          />
        </a-form-item>
        <a-form-item :label="$t('structural-analysis.right-boundary-map.color')">
          <i class="iconfont iconbeijingse" :style="'color:' + formData.c"></i>
          <colorPicker
              :style="{zIndex: '1000', marginLeft: '-25px', marginTop: '-5px'}"
              v-model="formData.c"
              v-on:change="handleChangeColor"
          />
        </a-form-item>
      </a-form>
      <div slot="footer" class="dialog-footer mt10 text-right">
        <a-button @click="visible = false">
          {{ $t('global-btn.cancel') }}
        </a-button>
        <a-button
            type="primary"
            class="ml10"
            @click="save"
            :loading="saveLoading"
            v-preventReClick>
          {{ $t('global-btn.confirm') }}
        </a-button>
      </div>
    </div>
  </DragModal>
</template>
<script>

export default {
  name: 'PropertyNodeModal',
  components: {},
  props: {},
  data() {
    return {
      /** 组件开关 */
      visible: false,
      /** 表单布局 */
      formItemLayout: {
        // xxl: '1600px',
        // xl: '1200px',
        // lg: '992px',
        // md: '768px',
        // sm: '576px',
        // xs: '480px',
        labelCol: {
          xxl: {span: 2},
          xl: {span: 2},
          lg: {span: 2},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        },
        wrapperCol: {
          xxl: {span: 10},
          xl: {span: 10},
          lg: {span: 10},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        }
      },
      /** 属性ID */
      attrId: undefined,
      /** 表单参数 */
      formData: {
        struName: '', // 名称
        w: '', // 宽
        h: '', // 高
        c: '', // 颜色
        x: '',
        y: '',
      },
      /** 加载loading... */
      saveLoading: false,
    }
  },
  watch: {
    'visible'(val) {
      if (val) {
        this.init();
        // 清空选中节点信息（避免与树结构快捷键冲突）
        this.$store.dispatch("fmeaTree/set", {
          key: "lastCheckedNode",
          value: undefined
        });
      } else {
        // 关闭前恢复选中节点信息
        let lastCheckedNode = this.$store.getters.checkedLeftNode;
        this.$store.dispatch("fmeaTree/set", {
          key: "lastCheckedNode",
          value: lastCheckedNode
        });
      }
    },
  },
  methods: {
    /**
     * 刷新左侧结构树
     */
    initLeftTree() {
      this.$emit("initLeftTree");
    },
    /**
     * 刷新位置
     */
    refreshPosition() {
      this.$emit("refreshPosition");
    },
    /**
     * 获取属性相关数据
     */
    init() {
      let _that = this;
      _that.$api.getBoundaryNodeDetail({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: _that.attrId,
      }).then(res => {
        if (res.flag) {
          if (res.data.options) {
            let options = JSON.parse(res.data.options);
            _that.formData.w = options?.size?.width ? options?.size?.width : options.width;
            _that.formData.h = options?.size?.height ? options?.size?.height : options.height;
            _that.formData.c = options.attrs.body.fill;
          } else if (res.data.coordinateObj) {
            let coordinateObj = res.data.coordinateObj;
            _that.formData.w = coordinateObj.w;
            _that.formData.h = coordinateObj.h;
            _that.formData.c = coordinateObj.c;
          }
          _that.formData.struName = res.data.struName;
        }
      });
    },
    /**
     * 保存
     */
    save() {
      let _that = this;
      let node = window.rightX6Graph.getCellById(_that.attrId);
      node.setAttrs({
        // 名称
        label: {
          title: _that.formData.struName,
        },
        // title
        text: {
          text: _that.formData.struName
        },
        // 颜色
        body: {
          fill: _that.formData.c,
        }
      });

      // 宽、高
      node.prop("size", {
        width: _that.formData.w,
        height: _that.formData.h,
      });
      _that.saveLoading = true;
      _that.$api.updateBoundaryNodeDetail({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: _that.attrId,
        struName: _that.formData.struName,
        options: JSON.stringify(node),
      }).then((res) => {
        if (res.flag) {
          _that.initLeftTree();
          _that.refreshPosition();
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.visible = false;
        _that.saveLoading = false;
      })
    },
    /**
     * 处理选择颜色事件
     * @param color
     */
    handleChangeColor(color) {

    },
  },
}
</script>

<style lang="less" scoped>
// 背景颜色
::v-deep .m-colorPicker {
  position: absolute;

  .colorBtn {
    opacity: 0;
    margin-top: 5px;
    width: 20px;
    height: 25px;
  }
}
</style>

