<template>
  <div class="component" style="width: 30%;">
    <el-radio-group v-if="qtbs" class="radio-group-label" v-model="data.zyType" @change="changePage" :style="{width: zyTypeWidth}">
      <el-radio class="custom-radio-green" label="0" style="color: white">派工</el-radio>
      <el-radio class="custom-radio-red" v-if="!ljbs" label="1" style="color: white">报工</el-radio>
      <el-radio class="custom-radio-green" v-if="ljbs" label="10" style="color: white">坡口报工</el-radio>
      <el-radio class="custom-radio-red" v-if="ljbs" label="11" style="color: white">曲面报工</el-radio>
      <el-radio class="custom-radio-red" v-if="ljbs" label="12" style="color: white">打磨报工</el-radio>
    </el-radio-group>
    <el-radio-group class="radio-group-label1" v-model="data.bzType" @change="init">
      <el-radio class="custom-radio-green" label="一班" style="color: white">一班</el-radio>
      <el-radio class="custom-radio-red" label="二班" style="color: white">二班</el-radio>
      <el-radio class="custom-radio-red" label="三班" style="color: white">三班</el-radio>
      <el-radio class="custom-radio-red" label="四班" style="color: white">四班</el-radio>
      <el-radio v-if="data.zyq==='四区'" class="custom-radio-red" label="五班" style="color: white">五班</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name:"ZyjhSelectComp",
  data(){
    return {
      qtbs:true,
      ljbs:false,
      deviceId:null,
      zyTypeWidth:'31%',
      data:{
        zyType:'0',
        bzType:'一班',
        zyq:null,
      },
      nextPath:'',
      nextPathName: {
        sliao:{path:''},
        pwpg:{path:'/pwfk'},
        pwfk:{path:'/pwpg'},
        llfk:{path:'/'},
        hxpg:{path:'/hxfk'},
        hxfk:{path:'/hxpg'},
        qgpg:{path:'/qgfk'},
        qgfk:{path:'/qgpg'},
        ljian:{path:'/baogong'},
        baogong:{path:'/ljian'},
      },
    }
  },
  created(){
    this.deviceId=this.$route.query.deviceId||''
    this.data.zyType=this.$route.query.zyType||'0'
    this.data.zyq=this.$route.query.zyq||''
    const path=this.$route.path.replace('/','')
    this.nextPath=this.nextPathName[path]?.path
    if (path==='sliao'||path==='llfk'||path==='bfang'){
      this.qtbs=false
    }
    if (path==='ljian'){
      this.zyTypeWidth='43%'
      this.ljbs=true
    }
    if (path==='baogong'){
      this.zyTypeWidth='43%'
      this.ljbs=true
    }
  },
  methods:{
    changePage(){
      this.$emit('clear')
      this.$router.push(`${this.nextPath}?zyq=${this.$route.query.zyq}&zyType=${this.data.zyType}&deviceId=${this.deviceId}`)
    },
    init(){
      this.$emit('initWorkers',this.data.bzType)
    },
    getData(){
      return this.data
    }
  }
}

</script>

<style scoped>
.radio-group-label1{
  margin-left: 0px;
}

::v-deep{
  .custom-radio-green{
    .el-radio__input.is-checked + .el-radio__label{
      color: white;
    }
    .el-radio__inner {
      border-color: white; /* 默认边框颜色 */
    }
    .el-radio__inner::after {
      background-color: blue; /* 默认选中状态的背景颜色 */
    }
    .is-checked .el-radio__inner {
      border-color: blue; /* 选中状态的边框颜色 */
    }
    .is-checked .el-radio__inner::after {
      background-color: #FFFFFF; /* 选中状态的背景颜色 */
    }
    .el-radio__input.is-checked .el-radio__inner{
      background: blue; /*圆圈里面背景色*/
    }
  }
  .custom-radio-red {
    .el-radio__input.is-checked + .el-radio__label{
      color: white;
    }
    .el-radio__inner {
      border-color: white; /* 默认边框颜色 */
    }
    .el-radio__inner::after {
      background-color: blue; /* 默认选中状态的背景颜色 */
    }
    .is-checked .el-radio__inner {
      border-color: blue; /* 选中状态的边框颜色 */
    }
    .is-checked .el-radio__inner::after {
      background-color: #FFFFFF; /* 选中状态的背景颜色 */
    }
    .el-radio__input.is-checked .el-radio__inner{
      background: blue; /*圆圈里面背景色*/
    }
  }
}
</style>
