<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="160" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.innerRadius"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="外半径(%)" width="160" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.outerRadius"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="玫瑰样式" width="80" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.roseType"></el-switch>
              </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: "NestPieRadius",
  props: {
    dictCode: String,
    modelData: String,
  },
  data() {
    return {
      dialogVisible: false,
      multipleSelection: [],
      dataList: [],
    };
  },
  computed: {
  },
  methods: {
    getId() {
      var s = [];
      var hexDigits = '0123456789abcdef';
      for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = '4';
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);

      return s.join('');
    },
    handleSelectionChange(value) {
      this.multipleSelection = value;
    },
    addRow() {
      //添加行默认值
      this.dataList.push({
        id: this.getId(),
        index: "第 " + (parseInt(this.dataList[this.dataList.length - 1]["index"].substr(1)) + 1) + " 组",
        checked: false,
        roseType: false,
        innerRadius: "",
        outerRadius: "",
      });
    },
    okHandler() {
      for (let i in this.dataList) {
        if (!this.dataList[i].innerRadius || !this.dataList[i].outerRadius) {
          this.$message.warning("所有行记录的内外半径值不能为空！");
          return;
        }
      }
      let result = [];
      //遍历剔除id、checked，格式化、字体大小默认值
      for (let i in this.dataList) {
        result.push({
          roseType: this.dataList[i].roseType,
          innerRadius: this.dataList[i].innerRadius || "",
          outerRadius: this.dataList[i].outerRadius || "",
        });
      }
      this.$emit("set-value", this.dictCode, JSON.stringify(result));
      this.dialogVisible = false;
    },
    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);
            break;
          }
        }
      });

      me.multipleSelection = [];
      this.$refs.multipleTable.clearSelection();
    },
    setHandler() {
      this.dataList = this.initDataList();
      this.dialogVisible = true;
    },
    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) + " 组",
            roseType: modelDataObj[i].roseType,
            innerRadius: modelDataObj[i].innerRadius,
            outerRadius: modelDataObj[i].outerRadius,
          });
        }
      }
      return result;
    }
  },
};
</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>
