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

    <div class="home">
      <el-select v-model="idData.id" :disabled='disabled'
      :clearable='clearable' placeholder="请选择" :loading="loading" :class="{
          width300: selectWidth == '300',
          width147: selectWidth == '147',
          width280: selectWidth == '280',
          width226: selectWidth == '226',
          width130: selectWidth == '130',
          width170: selectWidth == '170',
        }">
        <el-option v-for="(item, i) in options" :key="i" :label="item.name" :value="item.id" @change="selectChange">
        </el-option>
      </el-select>
      <div v-show="showMsg" class="errorMsg">{{ msg }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [
      "name",
      "isRedDot",
      "isFlex",
      "selectData",
      "value",
      "aloneText",
      "isCheck",
      "selectWidth",
      "isLoading",
      'disabled','clearable',
    ],
    data() {
      return {
        loading: false,
        options: [],
        idData: {
          id: "",
        },
        msg: "",
        showMsg: false,
        title: "",
      };
    },
    created() {
      this.loading = this.isLoading
      this.options = this.selectData;
      this.idData.id = this.value;
      this.setName(this.name);
    },
    watch: {
      value(val){
        this.idData.id = val
      },
      idData: {
        deep: true,
        handler() {
          this.verification();
          this.$emit("input", this.idData.id);
        },
      },
      msg(val){
        if(val!== ''){
          let _that = this
          setTimeout(()=>{
            _that.msg = ''
          },4000)
        }
      },
    },
    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.idData.id == "") {
            if (this.aloneText) {
              this.msg = "请选择" + this.aloneText;
            } else {
              this.msg = "请选择" + this.title;
            }
            return false;
          }
          this.showMsg = false;
          return true;
        } else {
          return true;
        }
      },
      alertMsg() {
        if (this.isCheck) {
          if (this.verification) {
            this.$notify.error({
              title: "提示",
              message: this.msg,
            });
          }
        }
      },
      selectChange(value) {
        this.verification();
        this.$emit("input", this.idData.id);
      },
    },
  };
</script>

<style scoped lang="scss">
  .selectFlex {
    display: flex;
    // line-height: 40px;
  }

  .select-box {
    margin-top: 4px;
    .home {
      position: relative;

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

    .width130 {
      width: 130px;
    }

    .width300 {
      width: 300px;
    }

    .width280 {
      width: 280px;
    }

    .width226 {
      width: 226px;
    }

    .width147 {
      width: 147px;
    }
    .width170{
      width: 170px;
    }

    .select-title {
      font-size: 18px;
      margin-bottom: 15px;
      color: #778ca2;
      padding-top: 3px;
      line-height: 30px;
      span {

        color: #e30c0c;
      }
    }

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