<template>
    <div class="hazardous">
        <div style="color:rgba(29, 24, 188, 1);font-size: 4.5vw">较大危险设备</div>
        <div class="dangerList">
            <div
                v-for="(item,index) in faMsg.hazardousEquipmentList"
                :key="index"
                :class="item.isSearch==true?'selectDangerItem':'dangeritem'"
                @click="clickDangerItem(item)"
            >
                {{item.label}}
            </div>
        </div>
        <van-checkbox v-model="checked" shape="square" icon-size="18px" style="font-size: 3.7vw;color:rgba(119, 119, 119, 1);margin: 2vw">金属熔炼炉</van-checkbox>
        <div class="dangerList coldList">
            <div
                v-for="(item,index) in faMsg.metalMeltingFurnaceList"
                :key="index"
                :class="item.isSearch==true?'selectDangerItem':'dangeritem'"
                @click="clickDangerItem2(item)"
            >
                {{item.label}}
            </div>
        </div>
        <div style="display: flex">
        <van-checkbox v-model="checked2" shape="square" icon-size="18px" style="font-size: 3.7vw;color:rgba(119, 119, 119, 1);margin: 2vw">其他</van-checkbox>
        <input placeholder="请填写" style="font-size: 3.6vw;background:rgba(249, 249, 249, 1);width: 70%;padding:0.5vw 2vw" v-model="hazardousEquipmentOther" @input="handlerChange">
        </div>
        <van-button type="primary" block color="rgba(29, 24, 188, 1)" @click="commit">保存</van-button>
    </div>
</template>

<script>
export default {
    name: 'HazardousEquipment',
    props: ['faMsg'],
    data() {
        return {
            dangerList: [
            ],
            coldList: [
            ],
            checked: false,
            checked2: false,
            hazardousEquipmentOther: '',
            dangerObj: {
                hazardousEquipmentList: [],
                metalMeltingFurnaceList: [],
                hazardousEquipmentOther: ''
            }
        }
    },
    mounted() {
        this.checkSel()
        this.getShow()
    },
    methods: {
        handlerChange(e) {
            if (this.hazardousEquipmentOther) {
                if (this.hazardousEquipmentOther.length > 0) {
                    this.checked2 = true
                    this.faMsg.hazardousEquipmentList.forEach(e => {
                        if (e.label === '其他') {
                            e.isSearch = true
                        }
                    })
                }
            } else {
                this.checked2 = false
                this.faMsg.hazardousEquipmentList.forEach(e => {
                    if (e.label === '其他') {
                        e.isSearch = false
                    }
                })
            }
            this.checkSel()
        },
        checkSel() {
            if (this.faMsg.metalMeltingFurnaceList.length > 0) {
                if (this.faMsg.metalMeltingFurnaceList.findIndex((target) => target.isSearch === true) == -1) {
                    this.checked = false
                } else {
                    this.checked = true
                }
            }
        },
        async getShow() {
            this.dangerObj.hazardousEquipmentList = this.faMsg.hazardousEquipment ? this.faMsg.hazardousEquipment.split(',') : []
            this.dangerObj.metalMeltingFurnaceList = this.faMsg.metalMeltingFurnace ? this.faMsg.metalMeltingFurnace.split(',') : []
            console.log(this.dangerObj.hazardousEquipmentList)
            await this.$nextTick(() => {
                this.dangerObj.hazardousEquipmentList.forEach((pa) => {
                    this.faMsg.hazardousEquipmentList.forEach((pb) => {
                        if (pa == pb.value) {
                            pb.isSearch = true
                        }
                    })
                })
                this.dangerObj.metalMeltingFurnaceList.forEach((pa) => {
                    this.faMsg.metalMeltingFurnaceList.forEach((pb) => {
                        if (pa == pb.value) {
                            pb.isSearch = true
                        }
                    })
                })
                this.hazardousEquipmentOther = this.faMsg.hazardousEquipmentOther
                this.handlerChange()
                this.checkSel()
            })
        },
        clickDangerItem(item) {
            item.isSearch = !item.isSearch
            if (item.isSearch == true) {
                const obj = this.dangerObj.hazardousEquipmentList.findIndex(x => x === item.value)
                if (obj < 0) {
                    this.dangerObj.hazardousEquipmentList.push(item.value)
                }
            } else {
                const obj = this.dangerObj.hazardousEquipmentList.findIndex(x => x === item.value)
                if (obj >= 0) {
                    this.dangerObj.hazardousEquipmentList.splice(obj, 1)
                }
            }
        },
        clickDangerItem2(item) {
            item.isSearch = !item.isSearch
            if (item.isSearch == true) {
                const obj = this.dangerObj.metalMeltingFurnaceList.findIndex(x => x === item.value)
                if (obj < 0) {
                    this.dangerObj.metalMeltingFurnaceList.push(item.value)
                }
            } else {
                const obj = this.dangerObj.metalMeltingFurnaceList.findIndex(x => x === item.value)
                if (obj >= 0) {
                    this.dangerObj.metalMeltingFurnaceList.splice(obj, 1)
                }
            }
            this.checkSel()
        },
        commit() {
            this.dangerObj.hazardousEquipmentOther = this.hazardousEquipmentOther
            this.$emit('equipment', this.dangerObj)
        }
    }
}
</script>

<style scoped>

</style>
