<template>
    <div class="explosion-proof-dust">
        <div style="color:rgba(29, 24, 188, 1);font-size: 4.5vw">防爆粉尘企业</div>
        <ul style="margin: 3vw 0">
            <li class="titleLi">
                <div>
                    粉尘种类
                </div>
                <input
                    type="text"
                    placeholder="请填写"
                    v-model="fcqy.dustType"
                />
            </li>
        </ul>
        <div style="color:rgba(29, 24, 188, 1);font-size: 4.5vw">木质粉尘企业</div>
        <ul style="margin: 3vw 0">
            <li class="titleLi">
                <div>
                    防尘方式
                </div>
                <input
                    type="text"
                    placeholder="请填写"
                    v-model="fcqy.preventionWoodenDustType"
                />
            </li>
            <li class="titleLi titleLiLast" style="height: auto;align-items: center">
                <div>
                    砂光机
                </div>
                <van-collapse v-model="activeNames">
                    <van-collapse-item name="1">
                        <template #title>
                            <van-field placeholder="请选择" readonly v-model="sgj" class="field"/>
                        </template>
                        <ul>
                            <li
                                v-for="(item, index) in batchList"
                                :key="index"
                                class="checkLi"
                                @click="selectBatch(item)">
                                {{item.text}}
                            </li>
                        </ul>
                    </van-collapse-item>
                </van-collapse>
            </li>
            <li class="titleLi titleLiLast" style="height: auto;align-items: center">
                <div>
                    使用油漆
                </div>
                <van-collapse v-model="activeNames">
                    <van-collapse-item name="2">
                        <template #title>
                            <van-field placeholder="请选择" readonly v-model="yq" class="field"/>
                        </template>
                        <ul>
                            <li
                                v-for="(item, index) in batchList"
                                :key="index"
                                class="checkLi"
                                @click="selectBatch2(item)">
                                {{item.text}}
                            </li>
                        </ul>
                    </van-collapse-item>
                </van-collapse>
            </li>
            <li class="titleLi">
                <div>
                    员工总数
                </div>
                <input
                    type="number"
                    placeholder="请填写"
                    v-model="fcqy.employeesCount2"
                />
            </li>
            <li class="titleLi">
                <div>
                    防尘作业人数
                </div>
                <input
                    type="number"
                    placeholder="请填写"
                    v-model="fcqy.dustproofWorkerCount"
                />
            </li>
            <van-button type="primary" block color="rgba(29, 24, 188, 1)" @click="commit">保存</van-button>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'ExplosionProofDust',
    props: ['faMsg'],
    data() {
        return {
            batchList: [
                { text: '是', value: 1 },
                { text: '否', value: 0 }
            ],
            sgj: '',
            yq: '',
            activeNames: ['0'],
            fcqy: {
                dustType: '',
                postData: '',
                sander: '',
                employeesCount2: '',
                dustproofWorkerCount: ''
            }
        }
    },
    mounted() {
        this.getMsg()
    },
    methods: {
        getMsg() {
            this.fcqy = this.faMsg
            if (this.faMsg.sander == 1) {
                this.sgj = '是'
            } else {
                this.sgj = '否'
            }
            if (this.faMsg.paint == 1) {
                this.yq = '是'
            } else {
                this.yq = '否'
            }
        },
        selectBatch(item) {
            this.sgj = item.text
            this.fcqy.sander = item.value
            this.activeNames = ['0']
        },
        selectBatch2(item) {
            this.yq = item.text
            this.fcqy.paint = item.value
            this.activeNames = ['0']
        },
        commit() {
            this.$emit('fcqy', this.fcqy)
        }
    }
}
</script>

<style lang="scss">
.explosion-proof-dust{
    padding:5vw 3vw;
    .field{
        width: 45vw!important;
    }
    .van-collapse-item__content{
        padding: 10px 0 !important;
    }
    .van-cell{
        padding: 0 !important;
    }
    .checkLi {
        padding: 0.5vw 0.5vw;
        border-radius: 0.5vw;
        &:hover {
            color: #fff;
            background: rgba(42, 57, 128, 0.6);
        }
    }
}
</style>
