<template>
    <el-container style="height: 100%;">
        <el-header style="height: auto;position: relative" size="medium">
            <el-button type="primary" size="small" round icon="el-icon-circle-plus" @click="add()">新增
            </el-button>
            <el-button type="danger" size="small" round icon="el-icon-delete" @click="remove()">删除
            </el-button>
            <div style="position: absolute;right: 0;top: 5px">
<!--                <span style="font-weight: bold">显示方式</span>-->
                <el-radio v-model="pl_codeFormatType" label="tag">tag标签</el-radio>
                <el-radio v-model="pl_codeFormatType" label="diy">自定义</el-radio>
            </div>
        </el-header>
        <el-main style="height: 100%;" ref="tableMain">
            <el-table :data="dataRows" ref="tableRef" stripe border
                      style="width: 100%;">
                <el-table-column type="selection" :selectable="selectable" width="40" align="center"></el-table-column>
                <el-table-column label="状态码" prop="code" align="center" min-width="45">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.code" :prop="'dataRows.' +  scope.$index + '.code'" :rules="plValidate('required')"
                                  :disabled="scope.row.code == 'other'" @blur="forbidOther(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="状态值" prop="codeVal" align="center" min-width="50">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.codeVal"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="显示风格" prop="showStyle" align="center" min-width="60" v-if="pl_codeFormatType=='tag'">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.showStyle">
                            <el-option v-for="item in showStyleOption" :key="item.value"
                                       :value="item.value" :label="item.label">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="显示风格" prop="font" align="center" min-width="60" v-if="pl_codeFormatType=='diy'">
                    <template slot-scope="scope">
                        <div class="diy-class">
                            <el-input-number v-model="scope.row.font" :min="1" controls-position="right"></el-input-number>
                            <div style="position: absolute;right: 0;top: 0;bottom: 0;width: 40px">
                                <el-color-picker v-model="scope.row.color"></el-color-picker>
                                <span style="position: absolute;right: -3px;top: -3px;cursor: pointer" :style="{'color':scope.row['font-weight'] == 'bold'?'red':'black'}"
                                      @click="changeDiy(scope.row,'font-weight')">B</span>
                                <span style="position: absolute;left: 18px;top: 18px;cursor: pointer" :style="{'color':scope.row['font-style'] == 'italic'?'red':'black'}"
                                      @click="changeDiy(scope.row,'font-style')">I</span>
                                <span style="position: absolute;right: -4px;top: 18px;text-decoration: underline;cursor: pointer"
                                      :style="{'color':scope.row['text-decoration'] == 'underline'?'red':'black'}"
                                      @click="changeDiy(scope.row,'text-decoration')">U</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>
    import ColumnFormatParentConfig from "./columnFormatParentConfig";
    export default {
        name: "code-formatter-config",
        extends: ColumnFormatParentConfig,
        data(){
            return {
                data:[],
                dataOther:[{
                    "code":"other",
                    "codeVal":"其他",
                    "showStyle":"info",
                    "order":1,
                }],
                dataRows:[],
                showStyleOption:[{
                    "label":"白色",
                    "value":"white"
                },{
                    "label":"蓝色",
                    "value":"primary"
                },{
                    "label":"绿色",
                    "value":"success"
                },{
                    "label":"黄色",
                    "value":"warning"
                },{
                    "label":"红色",
                    "value":"danger"
                },{
                    "label":"灰色",
                    "value":"info"
                },],
                pl_codeFormatType:"tag",
            }
        },
        created() {
            this.initData();
        },
        methods:{
            initData(){
                let configData = JSON.parse(JSON.stringify(this.configData || {}));
                this.pl_codeFormatType = configData['pl_codeFormatType'] || 'tag';
                delete configData['pl_codeFormatType'];
                Object.keys(configData).forEach(key => {
                    let item = configData[key];
                    if(item.code != "other"){
                        this.data.push(item);
                    }else{
                        this.dataOther = [item];
                    }
                })
                this.dataRows = this.data.concat(this.dataOther);
            },
            add(){
                let order = this.getNextOrder();
                this.data.push({
                    "code":"",
                    "codeVal":"",
                    "showStyle":"primary",
                    "color":"#000000",
                    "font":14,
                    "font-weight":"normal",
                    "font-style":"normal",
                    "text-decoration":"normal",
                    "order":order
                });
                this.dataRows = this.data.concat(this.dataOther);
            },
            getNextOrder(){
                let order = 1;
                this.dataRows.forEach(item => {
                    if(Number(item.order) > Number(order)){
                        order = Number(item.order);
                    }
                })
                order++;
                return order;
            },
            selectable(row){
                return row["code"] != "other";
            },
            changeDiy(row,type){
                if(type == 'font-weight'){
                    row['font-weight'] = (row['font-weight'] == 'bold'?'normal':'bold')
                }
                if(type == 'font-style'){
                    row['font-style'] = (row['font-style'] == 'italic'?'normal':'italic');
                }
                if(type == 'text-decoration'){
                    row['text-decoration'] = (row['text-decoration'] == 'underline'?'normal':'underline');
                }
                this.pl_codeFormatType = '';
                this.$nextTick(() => {
                    this.pl_codeFormatType = 'diy';
                })
            },
            forbidOther(row){
                if(row.code == "other"){
                    row.code = "";
                    this.$message.warning("other已存在，不可设置！");
                }
            },
            remove(){
                let selection = this.$refs.tableRef.selection;
                if(selection.length == 0){
                    this.$message.error("未选择需要删除的行！");
                    return
                }
                let arr = [];
                selection.forEach(item => {
                    arr.push(item.order);
                })
                this.dataRows = this.dataRows.filter(item => {
                    return arr.indexOf(item.order) == -1;
                })
                this.data = this.data.filter(item => {
                    return arr.indexOf(item.order) == -1;
                })
            },
            getConfigDatas(){
                let result = {};
                this.dataRows.forEach(item => {
                    if(item.code){
                        result[item.code] = item;
                    }
                })
                result["pl_codeFormatType"] = this.pl_codeFormatType;
                return result;
            },
        }
    }
</script>

<style scoped>
    .diy-class{
        position: relative;
    }
    .diy-class ::v-deep .is-controls-right{
        width: 70px;
    }
    .diy-class ::v-deep .el-input-number__decrease{
        width: 20px;
        left: 24px;
    }
    .diy-class ::v-deep .el-input-number__increase{
        width: 20px;
        left: 24px;
    }
    .diy-class ::v-deep .el-input__inner{
        padding: 0;
        width: 30px;
        position: relative;
        left: -25px;
    }

    .diy-class ::v-deep .el-color-picker__trigger{
        width: 18px;
        height: 18px;
    }
</style>