<template>
  <el-container style="height:100%" id="container">
    <el-aside
      :style="{ height: '100%', width: graphWidth, borderleftwidth: 1 + 'px' }"
    >
      <graph
        :porperEvent="eventBus"
        @ExchangePorperty="handlePropertyChange"
        @selectChange="handleSelChange"
      ></graph>
    </el-aside>
    <el-main
      style="height:100%;padding:0px;border-left-width:0px;min-width:320px"
    >
      <keep-alive>
        <component
          :porperEvent="eventBus"
          :is="propertyComponent"
          :formData="formData"
          :ifChange="ifChange"
          :fontFamily="fontFamily"
          :BarCodeType="BarCodeType"
          :variant="variant"
        ></component>
      </keep-alive>
    </el-main>
  </el-container>
</template>

<script>
import graph from "./designer/index.vue";
import Vue from "vue";
import graphParam from "./designer/component/set-parama/grid-parama.vue"; //画布基本属性
import commonParam from "./designer/component/set-parama/common-parama.vue"; //基本元素属性
var eventBus = new Vue(); //创建事件总线
export default {
  name: "lt-label-designer",
  components: {
    graph,
    graphParam,
  },
  data() {
    return {
      graphWidth: "80%",
      formData: null,
      eventBus: eventBus,
      propertyComponent: graphParam, //动态参数面板
      DeviceOption: [],
      ifChange: 0,
    };
  },
  props: {
    fontFamily: {
      type: Array,
      default() {
        return [
          {
            label: "宋体",
            value: "SimSun",
          },
          {
            label: "黑体",
            value: "SimHei",
          },
          {
            label: "微软雅黑",
            value: "Microsoft Yahei",
          },
          {
            label: "微软正黑",
            value: "Microsoft JhengHei",
          },
          {
            label: "楷体",
            value: "KaiTi",
          },
          {
            label: "標楷體",
            value: "DFKai-SB",
          },
          {
            label: "細明體",
            value: "MingLiU",
          },
          {
            label: "新細明體",
            value: "PMingLiU",
          },
          {
            label: "標楷體",
            value: "BiauKai",
          },
          {
            label: "新宋体",
            value: "NSimSun",
          },
          {
            label: "仿宋",
            value: "FangSong",
          },
          {
            label: "华文新魏",
            value: "STXinwei",
          },
          {
            label: "华文行楷",
            value: "STXingkai",
          },
          {
            label: "华文隶书",
            value: "STLiti",
          },
          {
            label: "华文琥珀",
            value: "STHupo",
          },
          {
            label: "华文彩云",
            value: "STCaiyun",
          },
          {
            label: "方正姚体",
            value: "FZYaoti",
          },
          {
            label: "方正舒体",
            value: "FZShuTi",
          },
          {
            label: "华文仿宋",
            value: "STFangsong",
          },
          {
            label: "华文中宋",
            value: "STZhongsong",
          },
          {
            label: "华文宋体",
            value: "STSong",
          },
          {
            label: "华文楷体",
            value: "STKaiti",
          },
          {
            label: "华文细黑",
            value: "STXihei",
          },
          {
            label: "华文黑体",
            value: "STHeiti",
          },
          {
            label: "隶书",
            value: "LiSu",
          },
          {
            label: "幼圆",
            value: "YouYuan",
          },
          {
            label: "楷体_GB2312",
            value: "KaiTi_GB2312",
          },
          {
            label: "仿宋_GB2312",
            value: "FangSong_GB2312",
          },
          {
            label: "PmingLiu",
            value: "PmingLiu",
          },
          {
            label: "Impact",
            value: "Impact",
          },
          {
            label: "Georgia",
            value: "Georgia",
          },
          {
            label: "Tahoma",
            value: "Tahoma",
          },
          {
            label: "Arial",
            value: "Arial",
          },
          {
            label: "Book Antiqua",
            value: "Book Antiqua",
          },
          {
            label: "Century Gothic",
            value: "Century Gothic",
          },
          {
            label: "Courier New",
            value: "Courier New",
          },
          {
            label: "Times New Roman",
            value: "Times New Roman",
          },
          {
            label: "Verdana",
            value: "Verdana",
          },
          {
            label: "Helvetica",
            value: "Helvetica",
          },
          {
            label: "Candara",
            value: "Candara",
          },
        ];
      },
    },
    BarCodeType: {
      //标签类型
      type: Array,
      default() {
        return [
          "CODE128",
          "CODE128 A",
          "CODE128 B",
          "CODE128 C",
          "EAN-13",
          "EAN-8",
          "EAN-5",
          "EAN-2",
          "UPC(A)",
          "UPC(E)",
          "CODE39",
          "ITF",
          "ITF-14",
          "MSI10",
          "MSI11",
          "MSI1010",
          "MSI1110",
          "Pharmacode",
          "Codabar",
        ];
      },
    },
    variant: {
      type: Array,
      default() {
        return ["变量1", "变量2", "变量3", "变量4"];
      },
    },
  },
  methods: {
    handleSelChange(value) {
      this.ifChange = value;
    },
    handlePropertyChange(cells, graph) {
      //根据类别的不同，设置不同的参数
      this.showComponentByCellType(cells, graph);
    },
    showComponentByCellType(cells, graph) {
      // var type = cells[0].cellType;
      if (cells.length < 1) {
        this.propertyComponent = null;
        this.$nextTick(() => {
          this.propertyComponent = graphParam;
          this.setPramaByVertex(cells[0], graph);
        });
      } else {
        this.propertyComponent = null;
        this.$nextTick(() => {
          this.propertyComponent = commonParam;
          this.setPramaByVertex(cells[0], graph);
        });
      }
    },
    setPramaByVertex(cell, graph) {
      this.formData = null;
      var data = {
        parent: graph,
        target: cell,
      };
      this.$nextTick(() => {
        this.formData = data;
      });
    },
    _resize() {
      //根据窗体大小，调整面板宽度
      var temp = $("#container");
      var width = temp[0].clientWidth;
      this.graphWidth = width - 320 + "px";
    },
  },
  beforeMount() {
    window.addEventListener("resize", this._resize);
  },
  mounted() {
    this._resize();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this._resize);
  },
};
</script>
