<template>
<div>
    <el-button @click="setHandler">设置</el-button>
    <el-dialog :close-on-click-modal="false" title="颜色选择" :visible.sync="dialogVisible" width="50%">
        <div  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 :data="tableData" 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-input-number v-model="scope.row.number" :precision="1" :step="0.1" :min="0.1" :max="1"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="颜色选择" width="150" 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="颜色值" width="200" 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: "GaugeColorpick",
    props: {
        dictCode: String,
        modelData: String,
    },
    data() {
        return {
            dialogVisible: false,
            multipleSelection: [],
            tableData: []
        };
    },
    computed: {},
    methods: {
        getId() {
            return Number(
                Math.random().toString().substr(3, length) + Date.now()
            ).toString(36);
        },
        handleSelectionChange(value) {
            this.multipleSelection = value;
        },
        addRow() {
            this.tableData.push({
                id: this.getId(),
                checked: false,
                number: 0.1,
                color: null,
            });
        },
        delChecked() {
            for (let i in this.multipleSelection) {
                let item = this.multipleSelection[i];
                let findObj = this.tableData.filter((p) => {
                    return p.id == item.id;
                });

                let index = this.tableData.indexOf(findObj[0]);
                index > -1 && this.tableData.splice(index, 1);
            }
        },
        okHandler() {
            let result = [];
            for (let i in this.tableData) {
                if (this.tableData[i].color) {
                    result.push([this.tableData[i].number, this.tableData[i].color]);
                }
            }
            this.$emit("set-value", this.dictCode, window.JSON.stringify(result));
            this.dialogVisible = false;
        },
        setHandler() {
            this.tableData = this.initTableData();
            this.dialogVisible = true;
        },
        initTableData() {
            let result = [];
            if (this.modelData) {
                for (var i = 0; i < eval(this.modelData).length; i++) {
                    result.push({
                        id: this.getId(),
                        checked: false,
                        number: eval(this.modelData)[i][0],
                        color: eval(this.modelData)[i][1],
                    });
                }
            }
            return result;
        }
    },
};
</script>

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