<template>
  <div class="time_types">
    <div v-for="(item, index) in typeList" :key="index" :class="{'active_type': item.id == nowType}" :style="cssVars"
         class="single_time_type" @click="changeType(item)">{{ item.name }}
    </div>
    <el-dialog :visible.sync="selectTime" append-to-body class="customize_time" title="选择自定义时间" top="50vh"
               width="437px">
      <!-- <div>
        <el-date-picker
          v-model="datess"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div> -->
      <el-form ref="form" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择时间" prop="name">
              <el-date-picker
                  v-model="datess"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  style="width: 100%"
                  type="daterange"
                  value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  props: {
    typeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      nowType: 1,
      nowValue: 1,
      selectTime: false,
      datess: []
    }
  },
  computed: {
    ...mapGetters(["theme"]),
    cssVars() {
      return {
        "--color": this.theme
      };
    },
  },
  methods: {
    changeType(val) {
      if (val.id == 666) {
        this.selectTime = true
        this.nowType = val.id
        this.nowValue = val.value
      } else {
        this.nowType = val.id
        this.nowValue = val.value
        this.datess = []
        this.$emit('setType', this.nowValue)
      }

    },
    cancel() {
      this.selectTime = false
      this.datess = []
    },
    submit() {
      this.selectTime = false
      const obj = {
        value: this.nowValue,
        dates: this.datess
      }
      this.$emit('selectTime', obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.time_types {
  display: flex;
  align-items: center;

  .single_time_type {
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0 12px;
    background: #FFFFFF;
    border-radius: 4px;
    font-size: 14px;
    line-height: 32px;
    font-weight: 400;
    color: #666666;
    margin-right: 8px;
    cursor: pointer;
  }

  .single_time_type:last-of-type {
    margin-right: 20px;
  }

  .active_type {
    border-color: #81abfd;
    color: #3399FF;
  }
}

.customize_time {
  ::v-deep.el-dialog {
    .el-dialog__body {
      padding: 20px !important;
    }

    .el-dialog__footer {
      padding-top: 0px !important;
    }
  }
}
</style>
