<template>
    <div class="useDanger">
        <div style="color:rgba(29, 24, 188, 1);font-size: 4.5vw">使用危化品情况</div>
        <ul style="margin: 3vw 0 0 0" v-for="(item,index) in safetyList" :key="index">
            <li class="titleLi titleLiLast" >
                <div>
                    名称：
                </div>
                <input
                    type="text"
                    placeholder="请填写"
                    v-model="item.name"
                />
            </li>
            <li class="titleLi">
                <div>
                    年使用量：
                </div>
                <input
                    type="number"
                    placeholder="请填写"
                    v-model="item.annualUsage"
                />
            </li>
        </ul>
        <ul>
            <li class="titleLi titleLiLast">
                <div style="display: flex;align-items: center">
                    <div style="margin-right: 2vw;">储存方式</div>
                        <van-checkbox v-model="cangku" style="font-size: 3.6vw" icon-size="18" @click="clickCk">仓库</van-checkbox >
                        <van-checkbox v-model="chuguan" style="margin-left: 3vw;font-size: 3.6vw" icon-size="18" @click="clickCg">储罐</van-checkbox >
                </div>
            </li>
            <li class="titleLi titleLiLast">
                <van-checkbox v-model="checked" style="margin-left: 4vw" @click="clickA">
                    <div :class="checked?'select':'unselect'">是否构成重大危险源</div>
                    <template #icon="props">
                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                    </template>
                </van-checkbox>
            </li>
            <li class="titleLi titleLiLast titleLiCheckBox">
                <van-checkbox v-model="checked2" style="margin-left: 4vw" @click="clickB">
                    <div :class="checked2?'select':'unselect'">是否构成重点危险工艺</div>
                    <template #icon="props">
                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                    </template>
                </van-checkbox>
            </li>
            <li class="titleLi titleLiLast titleLiCheckBox">
                <van-checkbox v-model="checked3" style="margin-left: 4vw" @click="clickC">
                    <div :class="checked3?'select':'unselect'">是否构成重点监管危化品</div>
                    <template #icon="props">
                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                    </template>
                </van-checkbox>
            </li>
            <van-button type="primary" block color="rgba(29, 24, 188, 1)" style="margin-top: 4vw" @click="commit">保存</van-button>
        </ul>
    </div>
</template>

<script>
import {
    getSafetyCompanyInfoHazardousListBySafetyCompanyInfoId
} from '@/service/api_savety'
export default {
    name: 'UseDanger',
    props: ['faMsg'],
    data() {
        return {
            cangku: true,
            chuguan: false,
            checked: true,
            checked2: false,
            checked3: false,
            checkBox: {
            },
            activeIcon: require('../../../assets/image/selected.png'),
            inactiveIcon: require('../../../assets/image/unselect.png'),
            safetyList: [],
            storageMethod: []
        }
    },
    mounted() {
        this.getMsg()
        this.getCcfs()
    },
    methods: {
        getMsg() {
            // 获取主要原辅料
            getSafetyCompanyInfoHazardousListBySafetyCompanyInfoId({ id: this.faMsg.resId }).then(res => {
                this.safetyList = res
                this.storageMethod = this.faMsg.storageMethod ? this.faMsg.storageMethod.split(',') : []
                const cangku = this.storageMethod.findIndex(x => x === '1')
                if (cangku < 0) {
                    this.cangku = false
                } else {
                    this.cangku = true
                }
                const chuguan = this.storageMethod.findIndex(x => x === '2')
                if (chuguan < 0) {
                    this.chuguan = false
                } else {
                    this.chuguan = true
                }
                this.checked = this.faMsg.isHazardSource == '1'
                this.checked2 = this.faMsg.isHazardousProcesses == '1'
                this.checked3 = this.faMsg.isHazardousChemicals == '1'
            })
        },
        getCcfs() {
            console.log('getCcfs', this.faMsg)
            this.checkBox = this.faMsg
        },
        clickCk() {
            if (this.cangku == true) {
                const obj = this.storageMethod.findIndex(x => x === true)
                if (obj < 0) {
                    this.storageMethod.push('1')
                }
            } else {
                const obj = this.storageMethod.findIndex(x => x === true)
                if (obj > 0) {
                    this.storageMethod.splice(obj, 1)
                }
            }
            console.log(this.storageMethod)
        },
        clickCg() {
            if (this.chuguan == true) {
                const obj = this.storageMethod.findIndex(x => x === true)
                if (obj < 0) {
                    this.storageMethod.push('2')
                }
            } else {
                const obj = this.storageMethod.findIndex(x => x === true)
                if (obj > 0) {
                    this.storageMethod.splice(obj, 1)
                }
            }
            console.log(this.storageMethod)
        },
        clickA() {
            if (this.checked) {
                this.checkBox.isHazardSource = '1'
            } else {
                this.checkBox.isHazardSource = '0'
            }
        },
        clickB() {
            if (this.checked2) {
                this.checkBox.isHazardousProcesses = '1'
            } else {
                this.checkBox.isHazardousProcesses = '0'
            }
        },
        clickC() {
            if (this.checked3) {
                this.checkBox.isHazardousChemicals = '1'
            } else {
                this.checkBox.isHazardousChemicals = '0'
            }
        },
        commit() {
            this.checkBox.storageMethod = this.storageMethod.toString()
            this.checkBox.safetyList = JSON.stringify(this.safetyList)
            console.log(this.checkBox)
            this.$emit('useDan', this.checkBox)
        }
    }
}
</script>

<style lang="scss">
.useDanger{
    padding:5vw 3vw;
    .titleLi {
        font-size: 3.5vw;
        //font-weight: 700;
        white-space: nowrap;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 8vw;
        padding: 1vw 0 2vw 0;
        border-bottom: 1px solid rgb(243, 236, 236);
        input{
            width: 65vw !important;
        }
        .required {
            color: red;
        }
    }
    .titleLiLast {
        border-bottom: none;
        padding: 2vw 0 0 0;
        align-items: flex-end;
    }
    .titleLiCheckBox{
        padding: 0 !important;
    }
    .img-icon{
        width: 5vw;
    }
    .select{
        color:rgba(29, 24, 188, 1) ;
    }
    .unselect{
        color: rgba(170, 170, 170, 1);
    }
}

</style>
