<template>
    <div class="impotant-equipment">
        <div style="color:rgba(29, 24, 188, 1);font-size: 4.5vw">重要设备</div>
        <div class="dangerList">
            <div
                v-for="(item,index) in faMsg.useHazardousChemicalsList"
                :key="index"
                :class="item.isSearch==true?'selectDangerItem':'dangeritem'"
                @click="clickDangerItem(item)"
            >
                {{item.label}}
            </div>
            <div class="dangeritem">
                <input placeholder="填写其他" style="width: 24vw" @input="handlerChange" v-model="hazardOtherCount">
            </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>
        <li class="titleLi titleLiLast" style="align-items: center">
            <van-checkbox v-model="checked" style="margin-left: 4vw" disabled>
                <div :class="checked?'select':'unselect'">3吨以下</div>
                <template #icon="props">
                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                </template>
            </van-checkbox>
            <input type="text" name="" id="" style="background: rgba(249, 249, 249, 1);padding: 1vw 2vw;width: 50%" @input="threeDown" v-model="hazardLess3tonsCount">
            台
        </li>
        <li class="titleLi titleLiLast titleLiCheckBox" style="align-items: center">
            <van-checkbox v-model="checked2" style="margin-left: 4vw" disabled>
                <div :class="checked2?'select':'unselect'">3吨以上</div>
                <template #icon="props">
                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                </template>
            </van-checkbox>
            <input type="text" name="" id="" style="background: rgba(249, 249, 249, 1);padding: 1vw 2vw;width: 50%" @input="threeUp" v-model="hazardOver3tonsCount">
            台
        </li>
        <van-button type="primary" block color="rgba(29, 24, 188, 1)" style="margin-top: 4vw" @click="commit">保存</van-button>
    </div>
</template>

<script>
export default {
    name: 'ImportantEquipment',
    props: ['faMsg'],
    data() {
        return {
            dangerList: [
            ],
            checkboom: false,
            checked: true,
            checked2: false,
            activeIcon: require('../../../assets/image/selected.png'),
            inactiveIcon: require('../../../assets/image/unselect.png'),
            hazardOtherCount: '',
            dangerObj: {
                useHazardousChemicalsList: [],
                hazardOtherCount: '',
                hazardLess3tonsCount: '',
                hazardOver3tonsCount: ''
            },
            hazardLess3tonsCount: '',
            hazardOver3tonsCount: ''
        }
    },
    mounted() {
        this.handlerChange()
        this.getShow()
        this.threeDown()
        this.threeUp()
    },
    methods: {
        threeDown(e) {
            if (this.hazardLess3tonsCount) {
                this.checkboom = true
                this.checked = true
            } else {
                this.checked = false
                if (!this.hazardOver3tonsCount) {
                    this.checkboom = false
                }
            }
        },
        threeUp(e) {
            if (this.hazardOver3tonsCount) {
                this.checkboom = true
                this.checked2 = true
            } else {
                this.checked2 = false
                if (!this.hazardLess3tonsCount) {
                    this.checkboom = false
                }
            }
        },
        handlerChange(e) {
            if (this.hazardOtherCount) {
                if (this.hazardOtherCount.length > 0) {
                    this.faMsg.useHazardousChemicalsList.forEach(e => {
                        if (e.label === '其他') {
                            e.isSearch = true
                        }
                    })
                }
            } else {
                this.faMsg.useHazardousChemicalsList.forEach(e => {
                    if (e.label === '其他') {
                        e.isSearch = false
                    }
                })
            }
        },
        getShow() {
            this.dangerObj.useHazardousChemicalsList = this.faMsg.useHazardousChemicals ? this.faMsg.useHazardousChemicals.split(',') : []
            this.$nextTick(() => {
                this.dangerObj.useHazardousChemicalsList.forEach((pa) => {
                    this.faMsg.useHazardousChemicalsList.forEach((pb) => {
                        if (pa == pb.value) {
                            pb.isSearch = true
                        }
                    })
                })
                this.hazardLess3tonsCount = this.faMsg.hazardLess3tonsCount
                this.hazardOver3tonsCount = this.faMsg.hazardOver3tonsCount
                this.hazardOtherCount = this.faMsg.hazardOtherCount
                this.handlerChange()
                this.threeDown()
                this.threeUp()
            })
        },
        clickDangerItem(item) {
            item.isSearch = !item.isSearch
            if (item.isSearch == true) {
                const obj = this.dangerObj.useHazardousChemicalsList.findIndex(x => x === item.value)
                if (obj < 0) {
                    this.dangerObj.useHazardousChemicalsList.push(item.value)
                }
            } else {
                const obj = this.dangerObj.useHazardousChemicalsList.findIndex(x => x === item.value)
                if (obj >= 0) {
                    this.dangerObj.useHazardousChemicalsList.splice(obj, 1)
                }
            }
        },
        commit() {
            this.dangerObj.hazardOtherCount = this.hazardOtherCount
            this.dangerObj.hazardLess3tonsCount = this.hazardLess3tonsCount
            this.dangerObj.hazardOver3tonsCount = this.hazardOver3tonsCount
            this.$emit('importantEq', this.dangerObj)
        }
    }
}
</script>

<style lang="scss">
      .impotant-equipment{
          padding:5vw 3vw;
          .dangerList{
              margin-top:4vw;
              .dangeritem{
                  font-size: 3.5vw;
                  display: inline-block;
                  padding: 2vw;
                  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;
                  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);
              }
          }
          .img-icon{
              width: 5vw;
          }
          .select{
              color:rgba(29, 24, 188, 1) ;
          }
          .unselect{
              color: rgba(170, 170, 170, 1);
          }
      }
</style>
