<template>
    <div class='add-legend'>
        <el-dialog :title='title' :visible.sync='dialogVisible'>
            <add-list v-if='title==""' ref='searchList' :GraphCategoryId='GraphCategoryId' @mesg='mesg'></add-list>
            <add-form v-else ref='add' :ruleForm='info' @addSuccess='addSuccess' @updateSuccess='updateSuccess'></add-form>
            <span slot='footer' class='dialog-footer'>
                <el-button @click='dialogVisible = false' size='small'>取 消</el-button>
                <el-button type='primary' @click='save' size='small'>确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import addForm from './addForm'
import addList from '../legendRules/addList'
export default {
    data() {
        return {
            dialogVisible: false,
            info: {
                Name: '',
                Type: 'None',
                Unit: '',
                FillColor: '',
                Url: ''
            },
            title: '',
            GraphCategoryId: ''
        }
    },
    components: { addForm, addList },
    methods: {
        open(row, title, GraphCategoryId) {
            this.dialogVisible = true
            this.title = title
            this.GraphCategoryId = GraphCategoryId
            if (title == '新增图例库') {
                this.info = {
                    Name: '',
                    Type: '',
                    Unit: ''
                }
            }
            if (title == '修改图例库') {
                this.info = row
            }
            if (!title && this.$refs.searchList) {
                this.$refs.searchList.queryAll()
            }
        },
        cancal() {
            this.info = {
                Name: '',
                Type: 'None',
                Unit: '',
                FillColor: '',
                Url: ''
            }
        },
        mesg() {
            this.$emit('mesg')
        },
        updateSuccess() {
            this.$emit('updateSuccess')
        },
        addSuccess() {
            this.$emit('addSuccess')
            this.cancal()
        },
        save() {
            this.$refs.add.saveImg()
            console.log('go')
            return
            // this.dialogVisible = false
            // if (this.title == '添加图例库') {
            //     this.$refs.add.create()
            // }
            // if (this.title == '修改图例库') {
            //     this.$refs.add.update()
            // }
            // if (!this.title) {
            // this.$refs.searchList.save()
            // }
        }
    }
}
</script>

<style lang='less' scoped>
.add-legend {
}
</style>
<style lang='less'>
.add-legend {
    .el-dialog {
        width: 840px;
        height: 509px;
    }
    .el-dialog__footer {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
}
</style>