<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>
        <div>
            <el-table :data="tableData" style="width: 100%" highlight-current-row @selection-change="handleSelectionChange" border height="320">
                <el-table-column label="选择" width="50" align="center" type="selection"></el-table-column>
                <el-table-column label="序号" width="50" align="center" type="index"></el-table-column>
                <el-table-column label="起始颜色选择" width="110" align="center">
                    <template slot-scope="scope">
                        <el-color-picker v-model="scope.row.startColor" 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.startColor"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="中心颜色选择" width="110" align="center">
                    <template slot-scope="scope">
                        <el-color-picker v-model="scope.row.centerColor" 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.centerColor"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="结束颜色选择" width="110" align="center">
                    <template slot-scope="scope">
                        <el-color-picker v-model="scope.row.endColor" 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.endColor"></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <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: "GradientsColorpicker",
    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,
                startColor: null,
                centerColor: null,
                endColor: 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() {
            for (let i in this.tableData) {
                if (
                    !this.tableData[i].startColor ||
                    !this.tableData[i].centerColor ||
                    !this.tableData[i].endColor
                ) {
                    this.$message.warning("所有行记录的样色值不能为空！");
                    return;
                }
            }

            let result = [];
            for (let i in this.tableData) {
                if (
                    this.tableData[i].startColor &&
                    this.tableData[i].centerColor &&
                    this.tableData[i].endColor
                ) {
                    result.push([
                        this.tableData[i].startColor,
                        this.tableData[i].centerColor,
                        this.tableData[i].endColor,
                    ]);
                }
            }
            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,
                        startColor: eval(this.modelData)[i][0],
                        centerColor: eval(this.modelData)[i][1],
                        endColor: eval(this.modelData)[i][2],
                    });
                }
            }
            return result;
        }
    },
};
</script>

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