<template>
  <!-- 单选 -->
  <div class="select-box-1" :class="isFlex?'selectFlex':''">
    <div class="select-title">
      <span :class="isRedDot?'':'isRedDot'">*</span>
      {{name}}
    </div>

    <div class="home" :class="onlyCss?'onlyCss':''">
      <el-radio-group class="content_select_el_set" v-model="radio">
        <el-radio :disabled="disabled" v-for="(item,i) in radioList" :key="i" border :label="item.id"
          v-show="!item.isShow">{{item.name}}</el-radio>
      </el-radio-group>
      <div v-show="showMsg" class="errorMsg">{{msg}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['name', 'isRedDot', 'isFlex', 'value', 'isCheck', 'radioList', 'onlyCss', 'disabled'],
    data() {
      return {
        msg: '',
        showMsg: false,
        title: '',
        radio: null,
      }
    },
    created() {
      this.radio = this.value
      this.setName(this.name)
    },
    watch: {
      value(val) {
        this.radio = val
      },
      radio(val) {
        this.verification()
        this.$emit('input', val)
      },
    },
    methods: {
      // 处理name结尾的冒号
      setName(name) {
        if (this.name) {
          if (name.indexOf('：') != -1) {
            this.title = name.substr(0, name.length - 1)
          } else {
            this.title = name
          }
        }
      },
      verification() {
        if (this.isCheck) {
          this.showMsg = true
          if (this.radio == null) {
            this.msg = "请选择" + this.title;
            return;
          }
          this.showMsg = false
          return true
        } else {
          return true
        }
      },
      alertMsg() {
        if (this.isCheck) {
          if (this.verification) {
            this.$notify.error({
              title: '提示',
              message: this.msg
            });
          }
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  /* @import '@/assets/css/common/common.scss'; */
  
  :deep(.el-radio){
    margin-right: 0;
  }
  
  .onlyCss {
    ::v-deep .el-radio__inner {
      border-radius: 4px;
      width: 20px;
      height: 20px;
    }

    ::v-deep .el-radio.is-bordered {
      margin: 0;
    }

    ::v-deep .el-radio__label {
      font-size: 18px;
      color: #333333;
      padding: 0;
    }

    ::v-deep .el-radio.is-bordered {
      border: 0;
    }

    ::v-deep .content_select_el_set .el-radio.is-bordered+.el-radio.is-bordered {
      background: none;
    }

    ::v-deep .content_select_el_set .el-radio.is-bordered.is-checked {
      background: none;
    }

    ::v-deep .el-radio__input.is-checked .el-radio__inner::after {
      content: "";
      width: 10px;
      height: 5px;
      border: 1px solid white;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 4px;
      left: 4px;
      vertical-align: middle;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }
  }

  .selectFlex {
    display: flex;
  }

  .select-box-1 {
    .home {
      position: relative;

      .errorMsg {
        min-width: 250px;
        color: #E30C0C;
        font-size: 14px;
        position: absolute;
        top: 45px;
      }
    }

    .select-title {
      font-size: 18px;
      margin-bottom: 15px;
      line-height: 32px;
      color: #778CA2;

      span {
        color: #E30C0C;
      }
    }

    .isRedDot {
      display: none;
    }
  }
</style>
