<template>
    <div class="form-container">
        <van-form @submit="onSubmit">
            <van-field
                class="field-form-item"
                readonly
                clickable
                name="orgName"
                :value="boxInfo.orgName"
                label="机顶盒所属单位"
                placeholder="请选择组织单位"
                :right-icon="showOrg? 'arrow-up':'arrow-down'"
                @click="showOrg = true"
                :rules="[{ required: true}]"/>
            <van-popup v-model="showOrg" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="orgList"
                    @confirm="onConfirmOrg"
                    @cancel="showOrg = false"
                />
            </van-popup>
            <van-field
                class="field-form-item"
                v-model="boxInfo.macURL"
                name="macURL"
                label="机顶盒Mac地址"
                placeholder="请填写机顶盒Mac地址"
                :rules="[{ required: true }]"
            />
            <div class="form-page-button">
                <van-button type="default" native-type="submit" v-if="actived==='1'">激活</van-button>
                <van-button type="default" native-type="submit" v-if="actived==='2'">上报</van-button>
            </div>
        </van-form>
    </div>

</template>
<script>
    export default {
        props:['actived'],
        data(){
        return {
            boxInfo:{},
            orgList: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
            showOrg: false,
            showUser: false,
        }
        },
        methods:{
            onConfirmOrg(value) {
                this.boxInfo.orgName = value;
                this.showOrg = false;
            },
            onSubmit(values) {
                console.log('submit', values,this.boxInfo);
                if(this.actived==='1'){
                    // 调用激活接口
                    this.$toast.success('提交成功');
                }else{
                    // 调用上报接口
                    this.$toast.success('提交成功');
                }
            },
        }
  }
</script>
<style lang="scss">
 .form-container{
    .van-form {
        padding: 24px;
        background: #FFFFFF;
        border-radius: 0 0 4px 4px;
        .van-field {
            background: #F5F5F5;
            border-radius: 4px;
            .van-field__left-icon {
                margin-right: 12px;
            }
        }
    }
    .form-page-button{
        text-align: center;
        background: #A4151D;
        border-radius: 4px;
        position: absolute;
        bottom: 40px;
        left: 24px;
        right: 24px;
        box-sizing: border-box;
        .van-button {
            font-size: 16px;
            color: #fff;
            background-color: transparent;
            border: none;
        }
    }
    .field-form-item.van-cell{
            display: block;
            padding: 8px 0 16px 0;
            background-color: transparent;
            border-bottom: none;
            .van-field__label{
                width: 100%;
                color: #333;
                font-size: 14px;
                font-weight: normal;
                margin-bottom: 16px;
            }
            .van-field__value{
                background: #F5F5F5;
                border-radius: 4px;
                padding: 8px 20px;
            }
            &::after {
                border: none;
            }
            .van-field__control{
                color: #333;
                font-size: 14px;
                font-weight: normal;
            }
     }

     .van-tabs__nav--card {
        margin: 0;
    }
 }

</style>

