/**
@author:guoguo
@date:2018.11.30
@info: 对象类型
**/
<template>
    <el-form class='form' :model='ruleForm' ref='ruleForm'>
        <el-form-item
            class='select-left'
            prop='selectValue'
            :rules='hasVerify ? [{ required: true, message: "请选择对象类", trigger: "change" }] : null'
        >
            <!-- 下拉框 -->
            <el-select
                style='width:150px;'
                v-model='ruleForm.selectValue'
                placeholder='对象类'
                @change='selectChange'
                clearable
                :disabled="disabled"
            >
                <el-option v-for='item in selectOpt' :key='item.value' :label='item.label' :value='item.value'></el-option>
            </el-select>
        </el-form-item>
        <el-form-item
            prop='spaceValue'
            v-show='ruleForm.selectValue == "space"'
        >
            <!-- 空间级联 -->
            <el-cascader
                v-show="!isShowSpace"
                clearable
                ref='space'
                change-on-select
                :options='spaceOptions'
                v-model='ruleForm.spaceValue'
                :props='spaceProps'
                @change='spaceChange'
                placeholder="请选择空间类"
                :disabled="disabled"
                :style='"width:" + width'
            ></el-cascader>
        </el-form-item>
        <!-- 系统 -->
        <el-form-item
            prop='sysValue'
            v-show='ruleForm.selectValue == "system"'
            :rules=' hasVerify ? [{ required: true, message: "请选择系统类",  trigger: ["blur","change" ] }] : null'
        >
            <el-cascader ref='sys' :options='sysOptions' v-model='ruleForm.sysValue' @change='sysChange' placeholder="请选择系统类" :disabled="disabled" clearable :style='"width:" + width'></el-cascader>
        </el-form-item>
        <!-- 设备 -->
        <el-form-item
            prop='devValue'
            v-show='ruleForm.selectValue == "facility"'
            :rules=' hasVerify ? [{ required: true, message: "请选择设备类",  trigger: ["blur","change" ] }] : null'
        >
            <el-cascader ref='dev' :options='devOptions' v-model='ruleForm.devValue' @change='devChange' placeholder="请选择设备类" :disabled="disabled" clearable :style='"width:" + width'></el-cascader>
        </el-form-item>
        <!-- <el-button @click='btn'></el-button> -->
    </el-form>
</template>
<script>
import fixApi from '@/api/alarm/alarm'
import utils from './utils'
import { mapGetters } from 'vuex'
export default {
    name: 'obj-type',
    data() {
        return {
            isShowSpace: false,
            ruleForm: {
                selectValue: '',
                spaceValue: [],
                sysValue: [],
                devValue: []
            },
            /****************左侧下拉***************** */
            selectOpt: [
                {
                    value: 'building',
                    label: '建筑'
                },
                {
                    value: 'floor',
                    label: '楼层'
                },
                {
                    value: 'space',
                    label: '空间'
                },
                {
                    value: 'system',
                    label: '系统类'
                },
                {
                    value: 'facility',
                    label: '设备类'
                }
            ],
            selectValue: '',
            /*****************右侧级联******************* */
            // 空间
            spaceOptions: [],
            spaceValue: [],
            spaceProps: {
                value: 'code',
                label: 'name',
                children: 'content'
            },
            // 系统
            sysOptions: [],
            sysValue: [],
            // 设备
            devOptions: [],
            devValue: [],
            //Dict
            spaceDict: {},
            spaceNameDict: {}
        }
    },
    props: {
        objType: {},
        hasVerify: {
            default: false
        },
        disabled: {
            default: false
        },
        width: {
            default: "200px",
            type: String
        }
    },
    computed: {
        ...mapGetters('alarm', ['index'])
    },
    methods: {
        // 下拉框
        selectChange(val) {
            this.isShowSpace = false
            this.ruleForm.spaceValue = []
            this.ruleForm.sysValue = []
            this.ruleForm.devValue = []
            if (val == 'building' || val == 'floor') {
            } else if (val == 'space') {
                this.$refs.space.handleClick()
            } else if (val == 'system') {
                this.$refs.sys.handleClick()
            } else if (val == 'facility') {
                this.$refs.dev.handleClick()
            } else {
            }
            if (val) {
                this.$emit('change', [val])
            } else {
                this.$emit('change', [])
            }
        },
        spaceChange(val) {
            let arr = [this.ruleForm.selectValue, ...val]
            this.$emit('change', arr)
        },
        sysChange(val) {
            let arr = [this.ruleForm.selectValue, ...val]
            this.$emit('change', arr)
        },
        devChange(val) {
            let arr = [this.ruleForm.selectValue, ...val]
            this.$emit('change', arr)
        },
        change(val) {},
        async getSpace() {
            // 获取空间的级联
            let spaceRes = await fixApi.getObjTypeSpace()
            this.spaceOptions = spaceRes
            this.spaceDictHandle(spaceRes)
            // 获取name的dict
            this.spaceNameDictHandle(spaceRes)
            // 获取code的子集
            this.spaceCodeDictHandle(spaceRes)
        },
        spaceNameDictHandle(spaceRes) {
            if (spaceRes.length) {
                let obj = {}
                spaceRes.forEach(item => {
                    obj[item.code] = item.name
                    if (item.content) {
                        item.content.forEach(item1 => {
                            obj[item1.code] = item1.name
                            if (item1.content) {
                                item1.content.forEach(item2 => {
                                    obj[item2.code] = item2.name
                                })
                            }
                        })
                    }
                })
                this.$store.commit('alarm/SPACE_NAME_OBJ', obj)
            }
        },
        spaceCodeDictHandle(spaceRes) {
            let res = utils.getSpaceSonCode(spaceRes)
            this.$store.commit('alarm/SPACE_CODE_OBJ', res)
        },
        spaceDictHandle(spaceRes) {
            // 做dict   spaceDict
            let obj = {}
            if (spaceRes.length) {
                // let cur = spaceRes
                spaceRes.forEach(item => {
                    obj[item.code] = [item.code]
                    if (item.content) {
                        item.content.forEach(item1 => {
                            obj[item1.code] = [item.code, item1.code]
                            if (item1.content) {
                                item1.content.forEach(item2 => {
                                    obj[item2.code] = [item.code, item1.code, item2.code]
                                })
                            }
                        })
                    }
                })
            }
            this.spaceDict = obj
        },
        async getSysDev() {
            // 获取系统和设备的级联
            let sysDevRes = await fixApi.getObjectType()
            this.sysOptions = sysDevRes.sysArr
            this.devOptions = sysDevRes.devArr
        },
        async init() {
            this.getSpace()
            this.getSysDev()
        },
        // 校验，return 【true or false】
        verify() {
            let flag = false
            this.$refs['ruleForm'].validate(valid => {})
            if (this.ruleForm.selectValue) {
                let selectValue = this.ruleForm.selectValue
                if (selectValue == 'building' || selectValue == 'floor') {
                    flag = true
                } else if (selectValue == 'space') {
                    flag = true
                } else if (selectValue == 'system') {
                    if (this.ruleForm.sysValue.length) {
                        flag = true
                    } else {
                        flag = false
                    }
                } else if (selectValue == 'facility') {
                    if (this.ruleForm.devValue.length) {
                        flag = true
                    } else {
                        flag = false
                    }
                }
            } else {
                flag = false
            }
            return flag
        },
        btn() {
            this.verify()
        },
        // 处理回填值
        async handleObjType() {
            await this.getSpace()
            if (this.objType.length) {
                this.ruleForm.selectValue = this.objType[0]
                let arr = JSON.parse(JSON.stringify(this.objType))
                if (this.objType[0] == 'space') {
                    if(this.objType.length == 1) {
                        this.isShowSpace = true
                    }else {
                        this.isShowSpace = false
                        this.ruleForm.spaceValue = this.spaceDict[arr[1]]
                    }                    
                } else if (this.objType[0] == 'system') {
                    this.ruleForm.sysValue = arr.splice(1)
                } else if (this.objType[0] == 'facility') {
                    this.ruleForm.devValue = arr.splice(1)
                }
            }
        }
    },
    created() {
        this.init()
    },
    watch: {
        objType: {
            handler() {
                this.handleObjType()
            }
        },
        index : {
            handler() {
                this.init()
            }
        }
    }
}
</script>
<style scoped lang="less">
.form {
    display: flex;
    .select-left {
        margin-right: 5px;
    }
}
</style>
