<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.hazardousOperationsList"
                 :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.refrigerationOperationList"
            :key="index"
            :class="item.isSearch==true?'selectDangerItem':'dangeritem'"
            @click="clickDangerItem2(item)"
        >
            {{item.label}}
          </div>
        </div>
        <van-checkbox v-model="checkboom" 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.dustAreasOperationList"
                :key="index"
                :class="item.isSearch==true?'selectDangerItem':'dangeritem'"
                @click="clickDangerItem3(item)"
            >
                {{item.label}}
            </div>
            <div class="dangeritem">
                <input placeholder="填写其他" style="width: 24vw" @input="handlerChange" v-model="dustAreasOperationOther">
            </div>
        </div>
        <van-button type="primary" block color="rgba(29, 24, 188, 1)" @click="commit">保存</van-button>
    </div>
</template>

<script>
export default {
    name: 'HazardousOperations',
    props: ['faMsg'],
    data() {
        return {
            dangerList: [
            ],
            coldList: [
            ],
            boomList: [
            ],
            checked: false,
            checkboom: false,
            dustAreasOperationOther: '',
            dangerObj: {
                hazardousOperationsList: [],
                refrigerationOperationList: [],
                dustAreasOperationList: [],
                dustAreasOperationOther: ''
            }
        }
    },
    mounted() {
        this.checkSel()
        this.checkSel2()
        this.getShow()
    },
    methods: {
        clickDangerItem(item) {
            item.isSearch = !item.isSearch
            if (item.isSearch == true) {
                const obj = this.dangerObj.hazardousOperationsList.findIndex(x => x === item.value)
                if (obj < 0) {
                    this.dangerObj.hazardousOperationsList.push(item.value)
                }
            } else {
                const obj = this.dangerObj.hazardousOperationsList.findIndex(x => x === item.value)
                if (obj >= 0) {
                    this.dangerObj.hazardousOperationsList.splice(obj, 1)
                }
            }
        },
        clickDangerItem2(item) {
            item.isSearch = !item.isSearch
            if (item.isSearch == true) {
                const obj = this.dangerObj.refrigerationOperationList.findIndex(x => x === item.value)
                if (obj < 0) {
                    this.dangerObj.refrigerationOperationList.push(item.value)
                }
            } else {
                const obj = this.dangerObj.refrigerationOperationList.findIndex(x => x === item.value)
                if (obj >= 0) {
                    this.dangerObj.refrigerationOperationList.splice(obj, 1)
                }
            }
            this.checkSel()
        },
        clickDangerItem3(item) {
            item.isSearch = !item.isSearch
            if (item.isSearch == true) {
                const obj = this.dangerObj.dustAreasOperationList.findIndex(x => x === item.value)
                if (obj < 0) {
                    this.dangerObj.dustAreasOperationList.push(item.value)
                }
            } else {
                const obj = this.dangerObj.dustAreasOperationList.findIndex(x => x === item.value)
                if (obj >= 0) {
                    this.dangerObj.dustAreasOperationList.splice(obj, 1)
                }
            }
            this.checkSel2()
        },
        handlerChange(e) {
            if (this.dustAreasOperationOther) {
                if (this.dustAreasOperationOther.length > 0) {
                    this.faMsg.dustAreasOperationList.forEach(e => {
                        if (e.label === '其他') {
                            e.isSearch = true
                        }
                    })
                }
            } else {
                this.faMsg.dustAreasOperationList.forEach(e => {
                    if (e.label === '其他') {
                        e.isSearch = false
                    }
                })
            }
            this.checkSel2()
        },
        checkSel() {
            if (this.faMsg.refrigerationOperationList.length > 0) {
                if (this.faMsg.refrigerationOperationList.findIndex((target) => target.isSearch === true) == -1) {
                    this.checked = false
                } else {
                    this.checked = true
                }
            }
        },
        checkSel2() {
            if (this.faMsg.dustAreasOperationList.length > 0) {
                if (this.faMsg.dustAreasOperationList.findIndex((target) => target.isSearch === true) == -1) {
                    this.checkboom = false
                } else {
                    this.checkboom = true
                }
            }
        },
        commit() {
            this.dangerObj.dustAreasOperationOther = this.dustAreasOperationOther
            console.log('this.dangerObj', this.dangerObj)
            this.$emit('operations', this.dangerObj)
        },
        // 回显
        async getShow() {
            this.dangerObj.hazardousOperationsList = this.faMsg.hazardousOperations ? this.faMsg.hazardousOperations.split(',') : []
            this.dangerObj.refrigerationOperationList = this.faMsg.refrigerationOperation ? this.faMsg.refrigerationOperation.split(',') : []
            this.dangerObj.dustAreasOperationList = this.faMsg.dustAreasOperation ? this.faMsg.dustAreasOperation.split(',') : []
            // console.log(this.dangerObj.hazardousEquipmentList)
            await this.$nextTick(() => {
                this.dangerObj.hazardousOperationsList.forEach((pa) => {
                    this.faMsg.hazardousOperationsList.forEach((pb) => {
                        if (pa == pb.value) {
                            pb.isSearch = true
                        }
                    })
                })
                this.dangerObj.refrigerationOperationList.forEach((pa) => {
                    this.faMsg.refrigerationOperationList.forEach((pb) => {
                        if (pa == pb.value) {
                            pb.isSearch = true
                        }
                    })
                })
                this.dangerObj.dustAreasOperationList.forEach((pa) => {
                    this.faMsg.dustAreasOperationList.forEach((pb) => {
                        if (pa == pb.value) {
                            pb.isSearch = true
                        }
                    })
                })
                this.dustAreasOperationOther = this.faMsg.dustAreasOperationOther
                console.log('obj', this.dangerObj)
                this.handlerChange()
                this.checkSel()
                this.checkSel2()
            })
        }
    }
}
</script>

<style lang="scss">
.hazardous{
    padding:5vw 3vw;
    .dangerList{
        margin-top:4vw;
        .dangeritem{
            font-size: 3.5vw;
            display: inline-block;
            padding: 2vw 3vw;
            border: 1px solid rgba(204, 204, 204, 1);
            color: rgba(119, 119, 119, 1);
            border-radius: 10px;
            white-space: nowrap;
            //box-sizing: border-box;
            margin:1vw;
        }
        .selectDangerItem{
            font-size: 3.5vw;
            display: inline-block;
            padding: 2vw 3vw;
            color: rgba(29, 24, 188, 1);
            border-radius: 10px;
            white-space: nowrap;
            //box-sizing: content-box;
            border: 1px solid rgba(32, 65, 172, 0.05);
            margin:1vw;
            background: rgba(32, 65, 172, 0.05);
        }
    }
    .coldList{
        margin-top: 0;
        margin-bottom: 3vw;
    }
}
</style>
