<config>
{
    "navigationBarTitleText": "指派受理人",
}
</config>
<template>
    <div class="container">
        <div class="top"></div>
        <div v-if="assignFlag">
            <div class="box">
                <div class="box-con">
                    <span class="box-con-assign">受理人</span>
                    <span @click="selectManBtn(false)">{{ selman ? selman : '选择受理人' }} </span>
                </div>
            </div>
            <div v-if="selman" class="container-to" @click="sendBtn()">发送派单</div>
            <div v-else class="container-but">发送派单</div>
            <div class="container-cancel btn2" @click="cancel">取消</div>
        </div>
        <selectman v-else @selectManBtn="selectManBtn"></selectman>
    </div>
</template>
<script>
import selectman from './components/selectman.vue';
export default {
    components: {
        selectman
    },
    data() {
        return {
            assignFlag: true,
            selman: '',
            id: ''
        };
    },

    methods: {
        selectManBtn(flag, value, id) {
            this.assignFlag = flag;
            this.selman = value;
            this.id = id;
        },
        sendBtn() {
            // 改变详情状态
            // this.$http
            //     .post('repairInfo/assign/' + this.$route.query.id, { targetUserId: this.id })
            //     .then(res => {
            //         // 等待后端交互完成后跳转
            //         this.$router.push({
            //             path: `./details?id=${this.$route.query.id}+&tabType=1&`
            //         });
            //     })
            //     .catch(e => {
            //         console.log(e);
            //     });
        },
        cancel() {
            wx.navigateBack(
                {
                    delta: 1
                },
                1000
            );
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    background: #ffffff;
    .top {
        height: 10px;
        background: #f5f7fa;
    }
    .box {
        border-radius: 8px;
        padding: 23px 20px 23px 26px;
        margin-bottom: 118px;
        .box-con {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 8px;
            .box-con-assign {
                color: #abaeb3;
                line-height: 26px;
            }
        }
    }
    .container-but {
        width: 280px;
        height: 48px;
        background: #f7931d;
        border-radius: 24px;
        opacity: 0.2;
        margin: 0 auto;
        cursor: not-allowed;
        line-height: 48px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
    }
    .container-cancel {
        width: 280px;
        height: 48px;
        background: #f0f2f5;
        border-radius: 24px;
        line-height: 48px;
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        font-weight: normal;
        color: #939599;
        &.btn2 {
            margin-top: 12px;
        }
    }
    .container-to {
        width: 280px;
        height: 48px;
        background: #f7931d;
        border-radius: 24px;
        margin: 0 auto;
        line-height: 48px;
        text-align: center;
        font-weight: bold;
        color: #ffffff;
    }
}
</style>
