<template>
    <div class='add-legend'>
        <el-dialog :title='title' :visible.sync='dialogVisible'>
            <add-form
                ref='add'
                :InfosList='InfosList'
                :InfoTypeIdList='InfoTypeIdList'
                :ruleForm='info'
                @addSuccess='addSuccess'
                @updateSuccess='updateSuccess'
                :title='title'
            ></add-form>
            <span slot='footer' class='dialog-footer'>
                <el-button @click='dialogVisible = false,cancal()' size='small'>取 消</el-button>
                <el-button type='primary' @click='save' size='small'>确 定</el-button>
            </span>
        </el-dialog>
        <!-- <Modal :show='dialogVisible' :title='title' mode='middle' @close='dialogVisible=false'>
            <template #content>
                <add-form
                    ref='add'
                    :InfosList='InfosList'
                    :InfoTypeIdList='InfoTypeIdList'
                    :ruleForm='info'
                    @addSuccess='addSuccess'
                    @updateSuccess='updateSuccess'
                    :title='title'
                />
            </template>
            <template #handle>
                <Button @click='dialogVisible = false,cancal()' type='default'>取 消</Button>
                <Button @click='save' type='primary'>确 定</Button>
            </template>
        </Modal>-->
        <TransferSelectModal
            defaultExpandAll
            default-expand-all
            v-if='treeData.length'
            :modalShow='modalShow4'
            placeholder='搜索'
            :linkage='false'
            :lastStage='true'
            :data='treeData'
            @cancel='treeCancel'
            @confirm='treeConfirm'
            :key='new Date().getTime()'
        />
    </div>
</template>

<script>
import addForm from './addForm'
import addList from '../legendRules/addList'
import { groupByCategory, updateRelation } from '@/api/legendLibrary.js'

export default {
    data() {
        return {
            dialogVisible: false,
            InfoTypeIdList: [],
            InfosList: [],

            info: {
                Name: '',
                Type: 'None',
                Unit: '',
                FillColor: '#ffffff',
                Color: '#ffffff',
                Url: '',
                LineWidth: '',
                LineDash: '',
                InfoTypeId: [], //铺位可视化typeid
                InfoLocal: [], //工程信息化位置与设备分类
                InfoSystem: [] //工程信息化专业/系统
            },
            title: '',
            GraphCategoryId: 'DTXT',
            modalShow4: false,
            treeData: []
        }
    },
    components: { addForm, addList },
    methods: {
        open(row, title, GraphCategoryId) {
            this.title = title
            this.GraphCategoryId = GraphCategoryId
            //console.log(title)
            if (GraphCategoryId) {
                groupByCategory({}).then(res => {
                    this.treeData = []
                    this.treeData = res.Data.map(i => this.getTree(i))
                })
                //treeSelect
                this.modalShow4 = true
                this.info = {
                    Name: '',
                    Type: 'None',
                    Unit: '',
                    FillColor: '#ffffff',
                    Color: '#ffffff',
                    Url: '',
                    InfoTypeId: [], //铺位可视化typeid
                    InfoLocal: [], //工程信息化位置与设备分类
                    InfoSystem: [] //工程信息化专业/系统
                }
            } else if (title == '添加图例库') {
                this.dialogVisible = true
                this.InfoTypeIdList = []
                this.InfosList = []
                this.info = {
                    Name: '',
                    Type: 'None',
                    Unit: '',
                    FillColor: '#ffffff',
                    Color: '#ffffff',
                    Url: '',
                    InfoTypeId: [], //铺位可视化typeid
                    InfoLocal: [], //工程信息化位置与设备分类
                    InfoSystem: [] //工程信息化专业/系统
                }
            } else if (title == '修改图例库') {
                this.dialogVisible = true
                this.info = row
                this.InfosList = []
                this.InfoTypeIdList = []

                // this.InfosList = [...row.InfoLocal.map(({ id }) => id), ...row.InfoSystem]
                this.InfosList = [...row.InfoLocal.map(({ id }) => id)]
                this.InfoTypeIdList = row.InfoTypeId
                console.log(this.InfosList, this.InfoTypeIdList)
                console.log(this.info)
                // 图例库规则中的transform
            } else if (title == '' && this.$refs.searchList) {
                this.$refs.searchList.queryAll()
            }
        },
        getTree(data) {
            return {
                id: data.Id,
                name: data.Name,
                children: data.Children && data.Children.length > 0 ? data.Children.map(i => this.getTree(i)) : []
            }
        },
        cancal() {
            this.info = {
                Name: '',
                Type: 'None',
                Unit: '',
                FillColor: '#ffffff',
                Color: '#ffffff',
                Url: '',
                InfoTypeId: [], //铺位可视化typeid
                InfoLocal: [], //工程信息化位置与设备分类
                InfoSystem: [] //工程信息化专业/系统
            }
            this.InfoTypeIdList = []
            this.InfosList = []

            this.$refs.add.fileList = []
        },
        mesg() {
            this.$emit('mesg')
        },
        updateSuccess() {
            this.$emit('updateSuccess')
        },
        addSuccess() {
            this.$emit('addSuccess')
            this.cancal()
        },
        save() {
            // FillColor,Color,Name
            if (this.info.Name == '') {
                this.$message.info('请填写图例名称')
                return false
            } else {
                if (this.info.Type != 'Image' && this.info.Type != 'None') {
                    this.$refs.add.saveImg()
                } else {
                    if (this.title == '添加图例库') {
                        this.$refs.add.create()
                        this.$emit('addSuccess')
                    } else if (this.title == '修改图例库') {
                        this.$refs.add.update()
                        this.$emit('updateSuccess')
                    }
                }
                this.dialogVisible = false
                // if (!this.title || this.info.Type == 'None') {
                //     this.$refs.add.create()
                // }
            }
        },
        treeConfirm(ids, dataObj) {
            let postParams = {
                GraphCategoryId: this.GraphCategoryId.join(' '),
                GraphElementIds: ids
            }
            updateRelation({ postParams }).then(res => {
                if (res.Result == 'success') {
                    this.$message.success('添加成功！')
                    this.$emit('mesg')
                }
            })
        },
        treeCancel() {
            this.modalShow4 = false
        }
    }
}
</script>

<style lang='less' scoped>
.add-legend {
    /deep/ .el-dialog {
        width: 840px;
        height: 509px;
        border-radius: 8px;
        .el-dialog__header {
            border-bottom: 1px solid #e4e5e7;
        }
        .el-dialog__title {
            font-size: 16px;
        }
    }
    /deep/ .el-dialog__footer {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
}
</style>
