<template>
    <div class='legend-library'>
        <div class='legend-library-top'>
            图例库管理
            <span class='library-btn'>
                <el-button size='small' @click='dumpRules'>图例绘制规则</el-button>
                <el-button size='small' type='primary' @click='add'>添加图例</el-button>
            </span>
        </div>
        <div class='legend-library-bottom'>
            <div class='select-box'>
                <Select
                    width='180'
                    tipPlace='top'
                    caption='所属分类：'
                    v-model='Type'
                    :selectdata='typeOptions'
                    :placeholder='"请选择"'
                    @change='getTableList'
                ></Select>
                <!-- <Select
                    width='180'
                    tipPlace='top'
                    caption='说明书位置：'
                    v-model='position'
                    multiple
                    :selectdata='positionSelect'
                    :placeholder='"请选择"'
                    style='margin:0 12px'
                    @confirm='getTableListPosition'
                ></Select>-->
                <TreeSelect
                    caption='说明书位置：'
                    tipPlace='top'
                    height='180'
                    style='margin:0 12px'
                    :returnParentNode='false'
                    :isShowAllChoice='true'
                    :choseArea='true'
                    :data='positionSelect'
                    @change='treeConfirmPosition'
                />
                <!-- <Select width='180' tipPlace='top' caption='位置/设备分类：' :selectdata='dataSelect2' @change='getTableList' :placeholder='"请选择"'></Select> -->
                <TreeSelect
                    caption='位置/设备分类：'
                    tipPlace='top'
                    height='180'
                    style='margin:0 12px'
                    :returnParentNode='false'
                    :isShowAllChoice='true'
                    :choseArea='true'
                    :data='deviceList'
                    @change='treeConfirmDevice'
                />
                <!-- <Select
                    width='180'
                    tipPlace='top'
                    caption='专业：'
                    :selectdata='dataSelect2'
                    :placeholder='"请选择"'
                    @change='getTableList'
                    style='margin:0 12px'
                ></Select>-->
                <TreeSelect
                    caption='专业：'
                    tipPlace='top'
                    height='180'
                    style='margin:0 12px'
                    :returnParentNode='false'
                    :isShowAllChoice='true'
                    :choseArea='true'
                    :data='majorList'
                    @change='treeConfirmMajor'
                />

                <TreeSelect
                    caption='铺位可视化：'
                    tipPlace='top'
                    height='250'
                    :returnParentNode='false'
                    :isShowAllChoice='true'
                    :choseArea='true'
                    :data='typeVisualization'
                    @change='treeConfirm'
                    @focusChange='focusChange'
                />
                <Select
                    width='180'
                    tipPlace='top'
                    caption='状态：'
                    v-model='state'
                    :selectdata='stateSelect'
                    @change='getTableList'
                    :placeholder='"请选择"'
                    style='margin:0 12px'
                    :hideClear='true'
                ></Select>
                <el-input size='small' @change='getTableList' prefix-icon='el-icon-search' v-model='keyword' style='width:192px;margin-right:12px;'></el-input>
            </div>
            <el-table :data='tableData' :border='true' style='width: 100%'>
                <el-table-column prop='Name' label='图例名称'>
                    <template slot-scope='{row}'>{{row.Name || '--'}}</template>
                </el-table-column>
                <el-table-column prop='style' label='图例样式'>
                    <template slot-scope='{row}'>
                        <img v-if='row.Url' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
                        <span v-else>{{'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop='Unit' label='单位'>
                    <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
                </el-table-column>
                <el-table-column prop='position' label='对应广场说明书的位置'>
                    <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
                </el-table-column>
                <el-table-column label='对应工程信息化' align='center'>
                    <el-table-column prop='type' label='位置/设备分类' width='240'>
                        <template slot-scope='{row}'>{{row.InfoLocal || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='system' label='专业'>
                        <template slot-scope='{row}'>{{row.InfoSystem || '--'}}</template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140'>
                    <template slot-scope='{row}'>{{row.InfoSystem || '--'}}</template>
                </el-table-column>
                <el-table-column label='操作' width='100' v-if='state==1'>
                    <template slot-scope='scope' v-if='state==1'>
                        <el-button @click='modifyClick(scope.row)' type='text' size='small'>修改</el-button>
                        <el-button @click='deleteClick(scope.row)' type='text' size='small'>做废</el-button>
                    </template>
                </el-table-column>
                <el-table-column v-if='state==0' prop='DeleteTime' label='作废时间' width='180'>
                    <template v-if='state==0' slot-scope='{row}'>{{row.DeleteTime || '--'}}</template>
                </el-table-column>
            </el-table>
            <div class='foot'>
                <el-pagination
                    background
                    layout='prev, pager, next'
                    :total='total'
                    :page-size='size'
                    @prev-click='pageChanged'
                    @next-click='pageChanged'
                    @current-change='pageChanged'
                ></el-pagination>
            </div>
        </div>
        <add-legend ref='addLegend' @updateSuccess='updateSuccess' @addSuccess='addSuccess'></add-legend>
    </div>
</template>
<script>
import addLegend from './addLegend'
import Select from '@/components/Select/Select.vue'
import { getLegendTree, queryLegend, deleteLegend, queryTypeId, getVisualization, queryRelation } from '@/api/legendLibrary.js'
export default {
    components: { addLegend, Select },
    data() {
        return {
            tableData: [],
            dataSelect2: [
                { id: 'test1', name: '选择项' },
                { id: 'test2', name: '单平米' },
                { id: 'test3', name: '下级分项' },
                { id: 'test4', name: '滑动平均滑动平均' }
            ],
            stateSelect: [
                { id: '1', name: '正常' },
                { id: '0', name: '已作废' }
            ],
            Type: '', //所属分类
            typeOptions: [
                {
                    id: 'None',
                    name: '非图例'
                },
                {
                    id: 'Zone',
                    name: '区域'
                },
                {
                    id: 'Image',
                    name: '图标'
                },
                {
                    id: 'Line',
                    name: '线条'
                }
            ],
            TypeId: '',
            typeIdSelect: [{ id: 'Zone', name: '铺位面' }],
            size: 10,
            total: 0,
            currentPage: 1,
            state: '1',
            position: [],
            // positionSelect: [
            //     { id: 'GDXT', name: '供电系统-楼层分布' },
            //     { id: 'FZQZL', name: '暖通空调-原理图' },
            //     { id: 'NTXT', name: '暖通空调-楼层分布' },
            //     { id: 'XFBFYCFL', name: '消防系统-系统概况' },
            //     { id: 'XFXT', name: '消防系统-楼层分布' },
            //     { id: 'RDXT', name: '弱电系统-楼层分布' },
            //     { id: 'DTXT', name: '电梯系统-楼层分布' },
            //     { id: 'RQXT', name: '燃气系统-楼层分布' },
            //     { id: 'SCPZ', name: '土建装饰-石材铺装' }
            // ],
            positionSelect: [],
            keyword: '',
            typeVisualization: [],
            visualizationList: [], //已选铺位可视化
            majorList: [], //专业
            deviceList: []
        }
    },
    methods: {
        //说明书位置
        instruction() {
            let getParams = {}
            getLegendTree({ getParams }).then(res => {
                this.positionSelect = res.Content && res.Content.map(i => this.getTree(i))
            })
        },
        dumpRules() {
            this.$router.push('/home/legendRules')
        },
        getTypeId() {
            let postParams = {}
            queryTypeId({ postParams }).then(res => {
                this.typeIdSelect = res.Content
            })
        },
        visualization() {
            getVisualization({}).then(res => {
                this.typeVisualization = res.Data && res.Data.map(i => this.getTree(i))
            })
        },
        getTree(data) {
            let child = data.Children || data.Category
            return {
                id: data.Id,
                name: data.Name,
                children: child ? child.map(i => this.getTree(i)) : []
            }
        },
        add() {
            this.$refs.addLegend.open('', '添加图例库')
        },
        modifyClick(row) {
            this.$refs.addLegend.open(row, '修改图例库')
        },
        deleteClick(row) {
            this.$confirm('作废后则不可更改', '确定要作废图例吗？', {
                confirmButtonText: '作废',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    let postParams = [
                        {
                            Id: row.Id
                        }
                    ]
                    deleteLegend({ postParams }).then(res => {
                        if (res.Result == 'success') {
                            this.$message({
                                type: 'success',
                                message: '作废成功!'
                            })
                            this.getTableList()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        pageChanged(page, size) {
            this.currentPage = page
            this.getTableList()
        },
        getTableListPosition(val) {
            let postParams = val.map(({ id }) => id)
            let data = {}
            queryRelation({ data, postParams }).then(res => {
                this.tableData = res.data.Content
                this.total = res.Total
            })
        },
        getTableList() {
            let postParams = {
                PageNumber: this.currentPage,
                PageSize: this.size,
                // Keyword: this.keyword,
                // Type: this.Type,
                // TypeId: this.TypeId,
                Orders: 'CreateTime desc',
                Filters: ``
            }
            // 状态
            if (this.state == 1) {
                postParams.Filters += `deleted=0`
            } else {
                postParams.Filters += `deleted=1`
            }
            if (this.Type) {
                postParams.Filters += `;Type='${this.Type}'`
            }
            // 位置分类InfoLocal
            //专业 InfoSystem
            // 可视化InfoTypeId
            if (this.visualizationList.length > 0) {
                postParams.Filters += `;InfoTypeId contain '${JSON.stringify(this.visualizationList)}'`
            }
            // 搜索 Name
            if (this.keyword) {
                postParams.Filters += `;Name contain '${this.keyword}'`
            }
            queryLegend({ postParams }).then(res => {
                console.log(res)
                this.tableData = res.Content
                this.total = res.Total
            })
        },
        updateSuccess() {
            this.getTableList()
        },
        addSuccess() {
            this.getTableList()
        },
        // 铺位可视化
        treeConfirm(id, info) {
            // this.visualizationList = info.map(i => i.id)
            console.log(id, 'id')
            // this.getTableList()
        },
        //专业
        treeConfirmMajor(id, info) {
            console.log(id)
        },
        //位置/设备
        treeConfirmDevice(id, info) {
            console.log(id)
        },
        //说明书位置
        treeConfirmPosition(id, info) {
            console.log(id)
        },
        focusChange(status) {
            // console.log('focusChange', status)
        }
    },
    mounted() {
        this.getTypeId()
        this.instruction()
        this.visualization()
        this.getTableList()
    }
}
</script>
<style lang="less" scoped>
.legend-library {
    display: flex;
    flex-direction: column;
    height: 100%;
    .legend-library-top {
        height: 48px;
        background: rgba(247, 249, 250, 1);
        text-align: center;
        line-height: 48px;
        color: #1f2329;
        .library-btn {
            float: right;
            margin-right: 16px;
        }
    }
    .legend-library-bottom {
        flex: 1;
        background: #fff;
        padding: 0 16px;
        .select-box {
            height: 56px;
            line-height: 56px;
            min-width: 1366px;
            display: flex;
            align-items: center;
        }

        .img {
            width: 28px;
            height: 28px;
        }
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
    /deep/ .p-select-input-content {
        line-height: 32px;
    }
}
</style>
<style lang="less">
.legend-library {
    th {
        font-size: 12px;
        color: #646a73 !important;
        padding: 6px 0 !important;
        background: rgba(248, 249, 250, 1);
    }
    td {
        color: #1f2429 !important;
        padding: 6px 0 !important;
    }
    .ant-select {
        margin-right: 12px;
    }
}
.p-select-option-box {
    background: #fff;
    border: 1px solid #ccc;
}
</style>