<template>
  <div>
    <el-button @click="setHandler">设置</el-button>
    <el-dialog
      :close-on-click-modal="false"
      class="pub_dialog"
      title="图形文本标签"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-container>
        <el-header height="45px" style="text-align:right;padding:5px">
          <el-button type @click="addRow">添加</el-button>
          <el-button type @click="delHandler">删除</el-button>
        </el-header>
        <el-main>
          <div style="font-size:14px">
            <label style="color:red">*</label>说明：请依次从内环往外环设置图形文本标签属性
          </div>
          <el-table
            ref="multipleTable"
            :data="dataList"
            style="width: 100%"
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="选择" width="60" align="center" type="selection"></el-table-column>
            <el-table-column label="序号" width="100" align="center">
              <template slot-scope="scope">{{scope.row.index}}</template>
            </el-table-column>
            <el-table-column label="是否显示" width="80" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.show"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="显示位置" width="120" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.position">
                  <el-option
                    v-for="item in positionOpts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="显示格式" width="200" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.formatter"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="字体颜色" width="100" align="center">
              <template slot-scope="scope">
                <el-color-picker v-model="scope.row.color"></el-color-picker>
              </template>
            </el-table-column>
            <el-table-column label="字体大小" width="100" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fontSize"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="字体粗细" width="120" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.fontWeight">
                  <el-option
                    v-for="item in weightOpts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer height="45px" style="text-align:center;padding:5px">
          <el-button type="primary" @click="okHandler" size="mini">保存</el-button>
          <el-button @click="dialogVisible = false" size="mini">取消</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MulitSeriesLabel",
  props: {
    dictCode: String,
    modelData: String,
  },
  data() {
    return {
      dialogVisible: false,
      multipleSelection: [],
      // dataList: [],
      positionOpts: [
        {
          value: "outside",
          label: "外侧",
        },
        {
          value: "inside",
          label: "内部",
        },
        {
          value: "center",
          label: "中心",
        },
      ],
      weightOpts: [
        {
          value: "normal",
          label: "标准",
        },
        {
          value: "bold",
          label: "粗体",
        },
        {
          value: "lighter",
          label: "细体",
        },
      ],
      dataList: []
    };
  },
  computed: {
  },
  methods: {
    getId() {
      return (
        "_" +
        Number(Math.random().toString().substr(3, 3) + Date.now()).toString(36)
      );
    },
    handleSelectionChange(value) {
      console.log("before :>> ", this.multipleSelection);
      this.multipleSelection = value;
      console.log("after :>> ", this.multipleSelection);
    },
    addRow() {
      //添加行默认值
      this.dataList.push({
        id: this.getId(),
        index: "第 " + (parseInt(this.dataList[this.dataList.length - 1]["index"].substr(1)) + 1) + " 组",
        checked: false,
        show: true,
        position: "inside",
        formatter: null,
        color: "#000000",
        fontSize: "12",
        fontWeight: "normal"
      });
    },
    okHandler() {
      let result = [];
      //遍历剔除id、checked，格式化、字体大小默认值
      for (let i in this.dataList) {
        result.push({
          show: this.dataList[i].show,
          position: this.dataList[i].position,
          formatter: this.dataList[i].formatter || "",
          color: this.dataList[i].color,
          fontSize: this.dataList[i].fontSize || 12,
          fontWeight: this.dataList[i].fontWeight || "normal"
        });
      }
      this.$emit("set-value", this.dictCode, JSON.stringify(result));
      this.dialogVisible = false;
    },
    setHandler() {
      this.dialogVisible = true;
      this.dataList = this.initDataList();
    },
    initDataList() {
      let result = [];
        if (this.modelData) {
        let modelDataObj = eval(this.modelData);
        for (var i in modelDataObj) {
          result.push({
            id: this.getId(),
            index: "第 " + (parseInt(i) + 1) + " 组",
            show: modelDataObj[i].show,
            position: modelDataObj[i].position,
            formatter: modelDataObj[i].formatter,
            color: modelDataObj[i].color,
            fontSize: modelDataObj[i].fontSize,
            fontWeight: modelDataObj[i].fontWeight
          });
        }
      }
      console.log("result :>> ", JSON.stringify(result));
      return result;
    },
    delHandler() {
      let me = this;
      if (!this.multipleSelection || this.multipleSelection.length == 0) {
        this.$message.warning("请选择要删除的记录！");
        return;
      }

      me.multipleSelection.forEach(function (item) {
        for (let i = 0; i < me.dataList.length; i++) {
          if (me.dataList[i].id == item.id) {
            me.dataList.splice(i, 1);
            i--;
          }
        }
      });

      me.multipleSelection = [];
      this.$refs.multipleTable.clearSelection();
    },
  },
};
</script>
<style lang="scss">
.pub_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
</style>
