<template>
  <div class="popup oh_100vh_bgColor" v-show="show">
    <van-nav-bar title="重复" left-arrow :border="true" @click-left="goBack" />

    <van-cell v-for="(item, index) in checkData" :key="`checked_${index}`" :title="item.value">
      <label :class="item.className" @click="onListClick($event)">
        <input type="checkbox" :value="item" v-model="value" />
      </label>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    popupShow: {
      type: Boolean,
      default: false
    },
    checkValue: {
      type: Array
    }
  },
  data() {
    return {
      value: [],
      show: false,
      checkData: [
        { value: '每周一', className: '', id: 1 },
        { value: '每周二', className: '', id: 2 },
        { value: '每周三', className: '', id: 3 },
        { value: '每周四', className: '', id: 4 },
        { value: '每周五', className: '', id: 5 },
        { value: '每周六', className: '', id: 6 },
        { value: '每周日', className: '', id: 7 }
      ]
    };
  },
  methods: {
    goBack() {
      this.show = false;
      this.$emit('emitCheckboxValue', {
        data: this.handleValue(),
        flag: false
      });
    },
    onListClick(e) {
      if (e.target.classList.length == 0) {
        e.target.classList.add('active');
      } else {
        e.target.classList.remove('active');
      }
    },
    handleValue() {
      let val = this.value.map(v => {
        return {
          value: v.value,
          className: 'active',
          id: v.id
        };
      });
      let newVal = val.sort((a, b) => {
        return -(b.id - a.id);
      });
      return newVal;
    },
    changeData(value) {
      this.value = value;
      if (this.value.length != 0) {
        this.value.forEach(val => {
          this.checkData.forEach(v => {
            if (val.id == v.id) {
              v.className = val.className;
            }
          });
        });
      }
    }
  },
  created() {
    this.changeData(this.checkValue);
  },
  watch: {
    popupShow(flag) {
      this.show = flag;
    },
    checkValue: {
      handler(n) {
        console.log('watch handle', n);
        this.changeData(n);
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.popup {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 88;
  .van-cell__value {
    display: flex;
    justify-content: flex-end;
  }
  .van-cell__value label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #999;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    input {
      -webkit-appearance: none;
      display: none;
    }

    &.active {
      border: 1px solid $green;
      background: $green;

      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 1px;
        width: 25px;
        height: 25px;
        @include icon();
        @include icon_position(25, 25, 258, 61);
      }
    }
  }
}
</style>
