/**
*@author:Guoxiaohuan
*@date:2020.05.27
*@info：图例编辑状态
*/
<template>
    <div class='view'>
        <div class='legend-tab2'>
            <div class='legend-table2-box'>
                <div class='legend-table2' v-if='editTable.length>0'>
                    <el-table
                        v-loading='loading'
                        :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
                        ref='multipleTable'
                        height='430px'
                        :data='editTable'
                        tooltip-effect='dark'
                        width='100%'
                        @selection-change='handleSelectionChange'
                    >
                        <el-table-column prop label='项目' :show-overflow-tooltip='true'>
                            <template slot-scope='{row}'>{{row.Name||'--'}}</template>
                        </el-table-column>
                        <el-table-column prop label='数量'>
                            <template slot-scope='{row}'>
                                <div v-if='row.IsModify'>
                                    <div v-if='row.Num!=row.RealNum ' class='redData'>
                                        <el-tooltip
                                            class='item'
                                            effect='dark'
                                            :content='`当前图例 ${row.Name} 与平面图中的不一致，平面图中为${row.RealNum}`'
                                            placement='top'
                                        >
                                            <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
                                        </el-tooltip>
                                    </div>
                                    <div v-else-if='!row.Num' class='nullData'>
                                        <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
                                    </div>
                                    <div v-else style='width：50px'>
                                        <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
                                    </div>
                                </div>

                                <!-- 第二部分数据 -->
                                <div v-else>
                                    <el-tooltip
                                        v-if='!row.IsModify'
                                        class='item'
                                        effect='dark'
                                        :content='`当前图例 ${row.Name},从平面图中直接获取，如需编辑请修改平面图`'
                                        placement='top'
                                    >
                                        <div class='dataTwo'>{{row.Num}}</div>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop label='单位'>
                            <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
                        </el-table-column>
                        <el-table-column prop label='图例' align='center'>
                            <template slot-scope='{row}'>
                                <div v-if='row.Url' class='Url-img'>
                                    <img :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
                                </div>
                                <div v-else>{{'--'}}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- <div class='legend-table2' v-if='tbData2.length>0'>
                    <el-table ref='multipleTable' height='430px' :data='tbData2' tooltip-effect='dark' @selection-change='handleSelectionChange'>
                        <el-table-column prop='project' label='项目' width='100'></el-table-column>
                        <el-table-column prop='num' label='数量'>
                            <template slot-scope='{row}'>
                                <div style='width：50px'>
                                    <el-input v-model='row.num' size='mini'></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop='type' label='单位' width='60'></el-table-column>
                        <el-table-column prop='lege' label='图例'>
                            <template slot-scope='scope'>{{ scope.row.lege }}</template>
                        </el-table-column>
                    </el-table>
                </div>-->
                <!-- <div class='legend-table2' v-if='tbData3.length>0'>
                    <el-table ref='multipleTable' height='430px' :data='tbData3' tooltip-effect='dark' @selection-change='handleSelectionChange'>
                        <el-table-column prop='project' label='项目' width='100'></el-table-column>
                        <el-table-column prop='num' label='数量'>
                            <template slot-scope='{row}'>
                                <div style='width：50px'>
                                    <el-input v-model='row.num' size='mini'></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop='type' label='单位' width='60'></el-table-column>
                        <el-table-column prop='lege' label='图例'>
                            <template slot-scope='scope'>{{ scope.row.lege }}</template>
                        </el-table-column>
                    </el-table>
                </div>-->
            </div>

            <div class='swich'>
                <el-switch v-model='value' @change='changeSwitch'></el-switch>
                <span>隐藏数量为0的项目</span>
            </div>
            <div class='legendFoot'>
                <el-button size='mini' @click='cancel'>取消</el-button>
                <el-button size='mini' v-if='editNum.length==0' type='primary' disabled style='opacity: 0.5'>保存</el-button>
                <el-button size='mini' v-else @click='save' type='primary'>保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { updateStatis } from '@/api/public.js'

export default {
    props: ['editTable', 'loading'],
    data() {
        return {
            value: false,
            tbData1: [],
            tbData2: [],
            tbData3: [],
            editNum: []
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 编辑图例取消
        cancel() {
            if (this.editNum.length > 0) {
                this.$confirm('图例中的数据发生变化, 是否需要保存?', {
                    confirmButtonText: '保存',
                    cancelButtonText: '放弃修改',
                    type: 'warning'
                })
                    .then(() => {
                        this.$emit('saveNum', this.editNum)
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已放弃修改'
                        })
                        this.editNum = []
                        this.$emit('saveNum', this.editNum)
                        this.$store.commit('SETSHOWVIEW', 1)
                    })
            } else {
                this.$store.commit('SETSHOWVIEW', 1)
            }
        },
        // 编辑图里保存
        save() {
            this.queryEdit(this.editNum)
        },
        // 编辑数量
        queryEdit(val) {
            let params = {
                postParams: {
                    Content: val
                }
            }
            updateStatis(params).then(res => {
                if (res.Result == 'success') {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                    this.$store.commit('SETSHOWVIEW', 1)
                } else {
                    this.$message({
                        message: '操作失败',
                        type: 'error'
                    })
                }
            })
        },
        // 修改图例数量
        changeTable(val) {
            this.editNum.push(val)
            let result = [],
                obj = {}
            for (var i = 0; i < this.editNum.length; i++) {
                if (!obj[this.editNum[i].GraphElementId]) {
                    result.push(this.editNum[i])
                    obj[this.editNum[i].GraphElementId] = true
                }
            }
        },
        // 修改隐藏为0的项目的开关
        changeSwitch(val) {
            this.$emit('handleSwich2', val)
        }
        // init() {
        // this.tbData1 = []
        // this.tbData2 = []
        // this.tbData3 = []
        // if (this.editTable.length > 0) {
        //     this.tbData1 = this.editTable
        // 以下不要动 不要删
        // let len = this.tableData.length
        // if (len <= 10) {
        //     this.tbData1 = this.tableData
        // } else if (len > 10 && len <= 20) {
        //     this.tbData1 = this.tableData.slice(0, 10)
        //     this.tbData2 = this.tableData.slice(10, len)
        // } else if (len > 10 && len <= 30) {
        //     this.tbData1 = this.tableData.slice(0, 10)
        //     this.tbData2 = this.tableData.slice(10, 20)
        //     this.tbData3 = this.tableData.slice(20, len)
        // } else {
        //     this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
        //     this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
        //     this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
        // }
        // }
        // }
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
.view {
    position: relative;
    .legend-tab2 {
        position: absolute;
        top: -44px;
        right: 47px;
        width: 385px;
        // width: 420px;
        height: 535px;
        // min-width: 350px;
        // width: auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
        border-radius: 2px;
        border: 1px solid rgba(228, 229, 231, 1);
        .legend-table2-box {
            display: flex;
            justify-content: flex-end;
            .legend-table2 {
                padding: 16px 10px;
                height: 430px;
                width: 100%;
            }
        }
    }

    .dataTwo {
        padding: 0 5px;
        cursor: pointer;
    }
    .swich {
        position: absolute;
        right: 16px;
        bottom: 56px;
        span {
            margin-left: 8px;
        }
    }
    .Url-img {
        width: 20px;
        height: 22px;
        line-height: 20px;
        margin: 0 auto;
        img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
        }
    }
    .legendFoot {
        position: absolute;
        right: 16px;
        bottom: 12px;
    }
}
</style>
<style lang="less">
.view {
    .el-input--mini .el-input__inner {
        width: 50px;
    }
    .el-input__inner {
        padding: 0 5px;
    }
    .legend-container .el-table td,
    .legend-container .el-table th {
        padding: 3px 0 !important;
    }
    .nullData {
        .el-input__inner {
            color: #ccc !important;
        }
    }
    .redData {
        .el-input__inner {
            border: 1px solid rgba(255, 77, 79, 0.5) !important;
        }
    }
}
</style>