<template>
  <div class="container">
    <div class="dof-body">
      <div style="width:750px">
        <dof-catalog :title="title"></dof-catalog>
        <dof-radio :list="repeatList" @dofRadioItemChecked="repeatSelect"></dof-radio>
        <option-list-circle
          v-if="isDyMode"
          :cols="cols"
          :customStyles="customStyles"
          :list="dayList"
          @optionClick="dayChange"
        ></option-list-circle>
      </div>
    </div>
  </div>
</template>

<style>
.dof-body {
  flex: 1;
}
</style>

<script>
import DofCatalog from '../dof-catalog'
import DofRadio from '../dof-radio'
import OptionListCircle from './option-list-circle.vue'
export default {
  components: { DofRadio, OptionListCircle, DofCatalog },
  mixins: [],
  props: {
    title: {
      type: String,
      default: '重复周期'
    },
    repeatType: {
      type: String,
      default: '1'
    },
    selectedDays: {
      type: String,
      default: '1E2E370'
    }
  },
  data() {
    return {
      cols: 7,
      customStyles: {
        width: '58px',
        height: '58px',
        borderRadius: '58px',
        marginRight: '46px',
        paddingTop: '300px',
        backgroundColor: '#C7C7CC',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      },
      currentSelectedType: this.repeatType,
      repeatList: [
        { title: '执行一次', value: 0, data: '1E2E370', checked: false },
        { title: '每天', value: 1, data: '1111111', checked: false },
        { title: '工作日', value: 2, data: '1111100', checked: false },
        { title: '周末', value: 3, data: '0000011', checked: false },
        { title: '自定义', value: 4, data: '-1', checked: false }
      ],
      dayList: [
        { title: '一', value: 1, checked: false },
        { title: '二', value: 2, checked: false },
        { title: '三', value: 3, checked: false },
        { title: '四', value: 4, checked: false },
        { title: '五', value: 5, checked: false },
        { title: '六', value: 6, checked: false },
        { title: '日', value: 7, checked: false }
      ],
      checkedList: []
    }
  },
  computed: {
    isDyMode() {
      return this.currentSelectedType == '4'
    }
  },
  methods: {
    repeatSelect(e) {
      const { repeatType } = this
      this.currentSelectedType = e.value
      this.$emit('onRepeatSelect', { value: e.value })
    },
    dayChange(e) {
      this.checkedList = e.checkedList
      this.$emit('onDayChange', { value: this.checkedList })
    },
    init() {
      const { repeatType, selectedDays } = this
      repeatType && (this.currentSelectedType = repeatType)
      // const currentDayList = selectedDays.split('').reverse()   // why do this? add by haironglau
      const currentDayList = selectedDays.split('')
      let isFindItem = false
      this.repeatList.forEach(item => {
        if (item.value == repeatType) {
          item.checked = true
          isFindItem = true
        } else {
          item.checked = false
        }
      })
      if (!isFindItem) {
        // this.repeatList[3].checked = true
        this.currentSelectedType = '4'
      }
      this.dayList.forEach((item, idx) => {
        if (currentDayList[idx] == 1) {
          item.checked = true
        } else {
          item.checked = false
        }
      })
    }
  },
  watch: {
    repeatType: {
      handler(newVal) {
        // this.$MID.alert(newVal)
        newVal && this.init()
      },
      immediate: true
    },
    selectedDays: {
      handler(newVal) {}
    }
  }
}
</script>
