<template>
  <div>
      <el-button @click="dialogVisible = true">设置</el-button>
      <el-dialog :close-on-click-modal="false" title="颜色设置" :visible.sync="dialogVisible" width="50%">
          <div height="45px" style="text-align:right;padding-right:6px">
              <el-button type="text" @click="addRow">添加</el-button>
              <el-button type="text" @click="delChecked">删除</el-button>
          </div>

          <el-table ref="multipleTable" :data="dataList" style="width: 100%" highlight-current-row @selection-change="handleSelectionChange" border height="320">
              <el-table-column label="选择" width="80" align="center" type="selection"></el-table-column>
              <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
              <el-table-column label="颜色选择" align="center">
                  <template slot-scope="scope">
                      <el-color-picker v-model="scope.row.color" show-alpha></el-color-picker>
                  </template>
              </el-table-column>
              <el-table-column label="颜色值" align="center">
                  <template slot-scope="scope">
                      <el-input v-model="scope.row.color"></el-input>
                  </template>
              </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer" style="text-align: center;">
              <el-button type="primary" @click="okHandler" size="mini">保 存</el-button>
              <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    name: "ColorpickList",
    props: {
        dictCode: String,
        modelData: String
    },
    data() {
        return {
            dialogVisible: false,
            multipleSelection: [],
            dataList: []
        };
    },
    methods: {
        putDataList() {
            let result = [];
            if (this.modelData) {
                let colorList = new Array();
                if (!this.modelData.startsWith("[") && !this.modelData.endsWith("]")) {
                    colorList.push(this.modelData);
                } else {
                    colorList = JSON.parse(this.modelData);
                }
                for (var i in colorList) {
                    result.push({
                        checked: false,
                        color: colorList[i]
                    });
                }
            }
            this.dataList = result;
        },
        handleSelectionChange(value) {
            this.multipleSelection = value;
        },
        addRow() {
            this.dataList.push({
                checked: false,
                color: null
            });
        },
        delChecked() {
            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].color == item.color) {
                        me.dataList.splice(i, 1);
                        break;
                    }
                }
            });

            me.multipleSelection = [];
            this.$refs.multipleTable.clearSelection();
        },
        okHandler() {
            let result = [];
            for (let i in this.dataList) {
                if (!this.dataList[i].color) {
                    this.$message.warning("所有行记录的颜色值不能为空！");
                    return;
                }
            }

            for (let i in this.dataList) {
                if (this.dataList[i].color) result.push(this.dataList[i].color);
            }
            this.$emit("set-value", this.dictCode, '["' + result.join('","') + '"]');
            this.dialogVisible = false;
        }
    },
    watch: {
        dialogVisible: {
            handler() {
                //删除不保存，重新打开初始化
                this.putDataList();
            },
            deep: true
        }
    },
    created() {
        this.putDataList();
    }
};
</script>

<style lang="scss">
</style>
