<template>
  <div class="app-container">
    <div class="search_wrap mt-10">
        <div class="gonweibox mr-10">
                <div class="enterstatio pointer" v-if="occupyStatusIms==0" @click="enterbtn()">进入工位</div>
                <div class="outstatio pointer" v-if="occupyStatusIms==1" @click="leavebtn()">离开工位</div>
                <div class="stationbox mt-10" v-if="workStationName"> [ {{workStationName}} ]</div>
                <div class="stationbox mt-10" v-else> [ — — ]</div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="yonghubox ml-10">
            <div class="name">{{userName}}</div>
            <div class="group" v-if='shift'>[ 所属班组：{{shift}} ]</div>
            <div class="group" v-else>[ 所属班组：— — ]</div>
        </div>
    </div>
    <div class="content_wrap mt-10">
        <div class="">
            <span class="table_title  mb-10">数据查询列表</span>
        </div>
    </div>
    <el-dialog title="选择工位" :visible.sync="openchange" width="35%" append-to-body :close-on-click-modal="false">
        <div class="placeOrder">
            <el-radio 
                :disabled="item.occupyStatus" 
                class="mb-10"
                border
                v-model="radio1"
                :label="item.workStation"
                :key="item.workStation"
                v-for="item in worklist"
            >
                <div class="gongweibox">
                    <svg-icon class="gongweiico" icon-class="workstation" />
                    <!-- <i class="el-icon-user-solid gongweiico"></i> -->
                    <span class="gongweiming">{{ item.workStationName }}</span>
                    <br>
                    <span v-if="item.userName" class="yonghuming">{{item.userName}}</span>
                    <span v-else class="yonghuming">[ — — ]</span>
                </div>
                
            </el-radio>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitwork">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>


<style rel="stylesheet/scss" lang="scss" >
// <style scoped="scoped" lang="scss">
    .el-radio.is-bordered + .el-radio.is-bordered{
        margin-left: 0px;
    }
    .el-radio--medium.is-bordered{
        height: 88px;
        width: 180px;
    }
   /* 选中后的字体颜色 */
    .el-radio__input.is-checked + .el-radio__label {
        color: #ffffff !important;
        .svg-icon{
            color: #ffffff;
        }
    }
    .gongweibox{
        .svg-icon{
            color: #0F6EFF;
        }
        .gongweiico{
            font-size: 30px;
            float: left;
        }
        .yonghuming{
            position: relative;
            left: 10px;
            top: 10px;
        }
        .gongweiming{
            position: relative;
            left: 10px;
        }
    }
    
    .el-radio.is-bordered.is-checked{
        background: #0F6EFF;
    }
    /* 选中后小圆点的颜色 */
    .el-radio__input.is-checked .el-radio__inner {
       display: none;
    }
    .el-radio__input .el-radio__inner {
       display: none;
    }
    .el-radio.is-bordered + .el-radio.is-bordered{
        border: 1px solid #DCDFE6;
    }
    
    .gonweibox{
        width: 15%;
        display: inline-block;
        .enterstatio{
            background: #FF0F0F;
            border: 8px solid #FFABAB;
            padding: 5px 20px;
            color: #ffffff;
            text-align: center;
        }
        .outstatio{
            background: #0F6EFF;
            border: 8px solid rgb(168,208,255);
            padding: 5px 20px;
            color: #ffffff;
            text-align: center;
        }
        .stationbox{
            background: #F0F0F0;
            padding: 5px 20px;
            color: #333333;
            text-align: center;
        }
    }
    .yonghubox{
        width: 20%;
        display: inline-block;
        .name{
            padding: 5px 20px;
            border: 8px solid #ffffff;
            font-size: 28px;
            font-weight: bold;
        }
        .group{
            padding: 5px 20px;
            color: #333333;
        }
    }
    
    .el-divider--vertical{
        height: 5.5em;
        position: absolute;
    }
</style>