<template>
  <div class="combo-time-box" :style="styleObj">
    <div ref="ClickBox" class="combobox flex-up-down simulate-input pointer" @click="changeState">
      <span class="common-font single-row-ellipsis deep-color">
        {{ text }}
      </span>
      <i class="el-icon-caret-bottom ml-auto" />
    </div>
    <div ref="TriangleBox" class="triangle-box">
      <transition name="fade">
        <div v-show="showFrequency" class="time-frequency-box" :style="boxSize">
          <div class="main-box">
            <div class="general-btn-box flex-box">
              <button v-for="item in generalList"
                      :key="item.key"
                      :class="{'selected-btn': item.id === generalItem}"
                      class="general-btn hide-border"
                      @click="selectGeneral(item.id)">
                {{ item.label }}
              </button>
            </div>
            <div class="between-line" />
            <div v-show="showWeek" class="ml-16">
              <div class="common-font deep-color">
                请选择日期
              </div>
              <div class="flex-start-wrap mt-10">
                <button v-for="(item,index) in weekList"
                        :key="item.wid"
                        :class="{'selected-btn': item.isSelected}"
                        class="week-btn border"
                        @click="selectWeek(index)">
                  {{ item.label }}
                </button>
              </div>
            </div>
            <div v-show="showMonth" class="ml-16">
              <div class="common-font deep-color">
                请选择日期
              </div>
              <div class="flex-start-wrap mt-10">
                <button v-for="(item,index) in monthList"
                        :key="item.mid"
                        :class="{'selected-btn': item.isSelected}"
                        class="month-btn border"
                        @click="selectMonth(index)">
                  {{ item.label }}
                </button>
              </div>
            </div>
          </div>
          <div v-show="showHint" class="hint-box flex-up-down">
            提示:若选择28-31号，当月没有该日期，则默认为当前月份最后一天
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    timeFrequencyObj: {
      type: Object,
      default: () => ({
        type: '',
        value: []
      }),
      require: true
    },
    styleObj: { type: Object, default: () => ({}), require: true }
  },
  data() {
    return {
      showFrequency: false,
      generalList: [
        {
          id: 1,
          label: '每天'
        },
        {
          id: 2,
          label: '每周'
        },
        {
          id: 3,
          label: '每月'
        }
      ],
      weekList: [],
      monthList: [],
      showWeek: false,
      showMonth: false,
      showHint: false,
      generalItem: 0,
      boxSize: {},
      frequencyData: {},
      e: {}
    }
  },
  computed: {
    text() {
      const handleText = text => {
        text = `${text.slice(0, 2)}的${text.slice(2)}`
        text = text.slice(0, text.length - 1)
        return text
      }
      switch (this.generalItem) {
        case 1:
          return '每天'
        case 2: {
          let tmp = '每周'
          if (this.frequencyData.value.length) {
            this.frequencyData.value.forEach(item => {
              tmp += this.weekList[item - 1].label + ','
            })
            tmp = handleText(tmp)
          }
          return tmp
        }
        case 3: {
          let tmp = '每月'
          if (this.frequencyData.value.length) {
            this.frequencyData.value.forEach(item => {
              tmp += this.monthList[item - 1].label + '号,'
            })
            tmp = handleText(tmp)
          }
          return tmp
        }
        default:
          return ''
      }
    }
  },
  created() {
    this.initWeekList()
    this.initMonthList()
  },
  mounted() {
    this.frequencyData = this.timeFrequencyObj
    this.setStyle()
    window.addEventListener('click', e => {
      const [clickBox, triangleBox] = [this.$refs.ClickBox, this.$refs.TriangleBox]
      if (clickBox !== undefined && triangleBox !== undefined) {
        if (!clickBox.contains(e.target) && !triangleBox.contains(e.target)) this.showFrequency = false
      }
    })
  },
  methods: {

    changeState() {
      this.showFrequency = !this.showFrequency
    },

    initWeekList() {
      ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].forEach((item, index) => {
        this.weekList.push({
          wid: index + 1,
          label: item,
          isSelected: false
        })
      })
    },

    initMonthList() {
      for (let i = 0; i < 31; i++) {
        this.monthList.push({
          mid: i + 1,
          label: i + 1,
          isSelected: false
        })
      }
    },

    setStyle() {
      switch (this.frequencyData.type) {
        case 'daily':
          this.selectGeneral(1)
          break
        case 'weekly':
          this.frequencyData.value.forEach(item => {
            this.weekList[item - 1].isSelected = true
          })
          this.selectGeneral(2)
          break
        case 'monthly':
          this.frequencyData.value.forEach(item => {
            this.monthList[item - 1].isSelected = true
          })
          this.selectGeneral(3)
          break
      }
    },

    selectGeneral(id) {
      this.generalItem = id
      switch (id) {
        case 1:
          this.boxSize = {
            '--width': '151px',
            '--height': '116px',
            '--line-height': '0'
          }
          this.showWeek = false
          this.showMonth = false
          this.showHint = false
          break
        case 2:
          this.boxSize = {
            '--width': '403px',
            '--height': '116px',
            '--line-height': '97px'
          }
          this.showWeek = true
          this.showMonth = false
          this.showHint = false
          break
        case 3:
          this.boxSize = {
            '--width': '438px',
            '--height': '265px',
            '--line-height': '205px'
          }
          this.showWeek = false
          this.showMonth = true
          this.showHint = true
          break
      }
      this.splicingData()
    },

    selectWeek(index) {
      this.weekList[index].isSelected = !this.weekList[index].isSelected
      this.splicingData()
    },

    selectMonth(index) {
      this.monthList[index].isSelected = !this.monthList[index].isSelected
      this.splicingData()
    },

    splicingData() {
      const generalEnList = ['daily', 'weekly', 'monthly']
      const value = []
      if (this.generalItem === 2) {
        this.weekList.forEach(item => {
          if (item.isSelected) value.push(item.wid)
        })
      } else {
        this.monthList.forEach(item => {
          if (item.isSelected) value.push(item.mid)
        })
      }
      this.frequencyData = {
        type: generalEnList[this.generalItem - 1],
        value: value
      }
      this.$emit('select', this.frequencyData)
    }

  }
}
</script>

<style lang="scss" scoped>
.combo-time-box{
  --combo-width: 700px;
  --combo-height: 38px;
  --width: 151px;
  --height: 116px;
  --line-height: 0;
  user-select: none;

  .combobox{
    position: relative;
    padding: 0 8px;
    width: var(--combo-width);
    height: var(--combo-height);
  }

  .triangle-box{
    position: absolute;
    top: calc( var(--combo-height) + 13px );
    z-index: 25;
  }

  .time-frequency-box{

    @mixin triangle {
      content: '';
      position: absolute;
      background-color: #fff;
      z-index: 1;
    }

    @mixin btn{
      border-radius: 5px;
      outline: none;
      font: 400 14px PingFangSC-Regular, PingFang SC;
      color: #1890ff;
      background-color: #f0f8ff;
      cursor: pointer;
    }

    position: relative;
    width: var(--width);
    height: var(--height);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
    background-color: #fff;
    transition: all .3s;

    &::before {
      @include triangle;
      top: -1px;
      left: 30px;
      width: 20px;
      height: 20px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
      transform: rotate(45deg);
    }

    &::after {
      @include triangle;
      top: 0;
      left: 0;
      width: 80px;
      height: 40px;
    }

    .selected-btn{
      color: #f0f8ff!important;
      background-color: #1890ff!important;
    }

    .border{
      border: 1px solid #d1eaff;
      box-sizing: border-box;
    }

    .main-box{
      display: flex;
      padding: 12px 0;

      .general-btn-box{
        flex-direction: column;
        min-width: 151px;
        height: 102px;
        z-index: 2;

        .general-btn{
          @include btn;
          margin-bottom: 6px;
          width: 129px;
          height: 28px;
        }

      }

      .between-line{
        width: 2px;
        height: var(--line-height);
        background-color: #f0f0f0;
      }

      .week-btn{
        @include btn;
        margin: 0 6px 6px 0;
        width: 50px;
        height: 30px;
      }

      .month-btn{
        @include btn;
        margin: 0 6px 6px 0;
        width: 30px;
        height: 30px;
      }

    }

    .hint-box{
      margin-left: 15px;
      padding-left: 8px;
      width: 409px;
      height: 25px;
      border-radius: 5px;
      border: 1px solid #fff1cc;
      font: 400 12px PingFangSC-Regular, PingFang SC;
      color: #df9100;
      background-color: #fff8e7;
    }

  }

}

.fade-enter-active {
  animation: scale-ver-top .3s;
}

.fade-leave-active {
  animation: scale-ver-top .3s reverse;
}

@keyframes scale-ver-top {
  0% {
    transform: scaleY(0.4);
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 0;
  }
}

</style>
