<template>
    <div class="metal-smelting">
        <div style="color:rgba(29, 24, 188, 1);font-size: 4.5vw">金属冶炼企业</div>
        <div style="color: rgba(170, 170, 170, 1);font-size: 3.6vw;margin: 2vw 0">(注：金属冶炼企业，涉及熔炼金属吊运起重机械)</div>
        <ul style="margin: 3vw 0">
            <li class="titleLi">
                <div>
                    吨位：
                </div>
                <input
                    type="text"
                    placeholder="请填写"
                    v-model="jsylqy.metalSmeltingTonnage"
                />
            </li>
            <li class="titleLi">
                <div>
                    台数：
                </div>
                <input
                    type="text"
                    placeholder="请填写"
                    v-model="jsylqy.metalSmeltingCount"
                />
            </li>
            <li class="titleLi titleLiLast" style="height: auto;align-items: center">
                <div>
                    是否冶金吊：
                </div>
                <van-collapse v-model="activeNames">
                    <van-collapse-item name="7">
                        <template #title>
                            <van-field placeholder="请选择" readonly v-model="iss" 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" >
                <div>
                    备注：
                </div>
            </li>
            <li class="areaLi">
                      <textarea
                          type="text"
                          placeholder="请填写"
                          rows="4"
                          class="zycpText"
                          v-model="jsylqy.metalSmeltingRemark"
                      />
            </li>
            <van-button type="primary" block color="rgba(29, 24, 188, 1)" @click="commit">保存</van-button>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'MetalSmelting',
    props: ['faMsg'],
    data() {
        return {
            batchList: [
                { text: '是', value: 1 },
                { text: '否', value: 0 }
            ],
            iss: '',
            activeNames: ['0'],
            jsylqy: {
                metalSmeltingTonnage: '',
                metalSmeltingCount: '',
                isMetallurgicalCrane: '',
                metalSmeltingRemark: ''
            }
        }
    },
    mounted() {
        this.getMsg()
    },
    methods: {
        getMsg() {
            this.jsylqy = this.faMsg
            if (this.faMsg.isMetallurgicalCrane == 1) {
                this.iss = '是'
            } else {
                this.iss = '否'
            }
        },
        selectBatch(item) {
            this.iss = item.text
            this.jsylqy.isMetallurgicalCrane = item.value
            this.activeNames = ['0']
        },
        commit() {
            this.$emit('semlting', this.jsylqy)
        }
    }
}
</script>

<style lang="scss">
.metal-smelting{
    padding:5vw 3vw;
    .titleLi{
        //font-size: 18px !important;
    }
    input{
        width: 55% !important;
        //font-size: 18px !important;
    }
    .van-cell{
        padding: 0 !important;
    }
    .field{
        //width: 50% !important;
    }
    .van-collapse-item__content{
        padding: 10px 0 !important;
    }
    .checkLi {
        padding: 0.5vw 0.5vw;
        border-radius: 0.5vw;
        &:hover {
            color: #fff;
            background: rgba(42, 57, 128, 0.6);
        }
    }
}
</style>
