<template>
  <div class="select-box" :class="isFlex?'selectFlex':''">
    <div class="select-title" v-if="name">
      <span :class="isRedDot?'':'isRedDot'">*</span>
      {{name}}
    </div>
    <!-- style="width: 2.5rem;" -->
    <div class="home">
      <el-date-picker
        :style="{'width' : (type?'1.2rem':'2.5rem')}"
        v-model="value1"
        :type="timeType"
        :disabled='disabled'
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :placeholder="textplaceholder"
        value-format = 'yyyy-MM-dd HH:mm:ss'
        @change="timeChange">
      </el-date-picker>
      <div v-show="showMsg" class="errorMsg">{{msg}}</div>
    </div>
  </div>
</template>


<script>
  export default {
    props:['name','isRedDot','isFlex','isCheck',
    'timeObj','type','value','textplaceholder','disabled',],
    data(){
      return{
        value1: [],
        showMsg:false,
        msg:'1',
        title:'',
        timeType:"datetimerange",
      }
    },
    created(){
      if(this.type){
        this.timeType = this.type
      }else{
        this.timeType = "datetimerange"
      }
      this.setName(this.name)
      this.getTime()
    },
    methods:{
      getTime(){
        if(this.timeObj.startTime&&this.timeObj.endTime){
          this.value1.push(new Date(this.timeObj.startTime),new Date(this.timeObj.endTime))
        }else{
          this.value1 = ''
          this.value1 = this.timeObj.endTime
        }
      },
      // 处理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.value1.length == 0) {
            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,
            });
          }
        }
      },
      timeChange(val){
        if(this.timeType === 'datetimerange'){
          let data
          if(val){
            data = {startTime:val[0],endTime:val[1],}
          }else{
            data = {startTime:'',endTime:'',}
          }
          this.$emit('giveSEtime',data)
        }else{
          this.$emit('giveSEtime',val)
        }

      },
    },
  }
</script>

<style scoped lang="scss">
  .selectFlex{
    display: flex;
  }
  .select-box{
    .home{
      position: relative;
      .errorMsg{
        min-width: 250px;
        color: #E30C0C;
        font-size: 14px;
        position: absolute;
        top: 45px;
      }
    }
    .select-title{
      font-size: 18px;
      margin-bottom: 15px;
      color: #778CA2;
      line-height: 40px;
      span{
        color: #E30C0C;
      }
    }
    .isRedDot{
      display: none;
    }
  }
</style>
