<template>
  <div class="alarm-update">
    <div class="alarm-title">{{title}}</div>
    <div class="alarm-form">
      <div class="alarm-form-time">
        <div class="alarm-form-time__lable">提醒时间</div>
        <van-picker
          v-model="ruleForm.time"
          :columns="timeColumns"
          :item-height="30"
          :default-index="defaultIndex"
          @change="onChangeTime"
        />
      </div>
      <div class="alarm-form-item">
        <div class="alarm-form-item-hd">
          <div class="alarm-form-item-hd__lable">重复</div>
          <div class="alarm-form-item-hd__aside">每周重复</div>
        </div>
        <div class="alarm-form-item-content">
          <van-checkbox-group v-model="ruleForm.week_json" direction="horizontal">
            <van-checkbox v-for="(item, index) in weeks" :name="index + 1" :key="index">{{item}}</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
      <van-button type="primary" :loading="submitLoading" @click="onSubmit">确定</van-button>
    </div>
  </div>
</template>

<script>
import { isEqual } from 'lodash'
import * as api from '../api'
export default {
  name: 'AlarmUpdate',
  props: {
    isUpdate: { type: Boolean, default: false },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      ruleForm: {
        time: '06:30',
        week_json: [],
        status: 1
      },
      weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      defaultIndex: 13,
      submitLoading: false
    }
  },
  watch: {
    data: {
      immediate: true,
      handler(data) {
        if (!data || !this.isUpdate) {
          return
        }
        const weeks = data.week_json ? JSON.parse(data.week_json) : []
        this.defaultIndex = this.timeColumns.findIndex(item => item === data.time)
        this.ruleForm = Object.assign({}, this.ruleForm, data, {
          week_json: weeks
        })
      }
    }
  },
  computed: {
    title() {
      return this.isUpdate ? '修改提醒时间' : '新增提醒时间'
    },
    // 时间选择项
    timeColumns() {
      return this.genTimeColumns()
    },
    // 重复类型
    selectedResultType() {
      const weeks = this.ruleForm.week_json.sort()
      if (isEqual(weeks, [1, 2, 3, 4, 5, 6, 7])) {
        return 1
      } else if (isEqual(weeks, [1, 2, 3, 4, 5])) {
        return 3
      } else {
        return 2
      }
    },
    // 重复类型显示文本
    selectedResultText() {
      if (this.selectedResultType === 1) {
        return '每天'
      } else if (this.selectedResultType === 3) {
        return '工作日'
      } else {
        return this.selectedWeek.length ? '每周' + this.selectedWeek.join('、') : '永不'
      }
    },
    selectedWeek() {
      const weeks = ['一', '二', '三', '四', '五', '六', '日']
      const nums = this.ruleForm.week_json
      return nums.map(item => weeks[item - 1])
    }
  },
  methods: {
    onSubmit() {
      if (!this.ruleForm.week_json.length) {
        this.$notify('不选择星期，不能进行保存')
        return
      }
      this.isUpdate ? this.handleUpdate() : this.handleAdd()
    },
    // 添加
    handleAdd() {
      const params = Object.assign({}, this.ruleForm)
      params.type = this.selectedResultType
      params.week_json = JSON.stringify(this.ruleForm.week_json.sort())
      this.submitLoading = true
      api
        .addAlarm(params)
        .then(response => {
          if (response.success) {
            this.handleSuccess(response)
          } else {
            this.$toast(JSON.stringify(response.errors))
          }
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    // 更新
    handleUpdate() {
      const params = Object.assign({}, this.ruleForm)
      params.type = this.selectedResultType
      params.week_json = JSON.stringify(this.ruleForm.week_json.sort())
      this.submitLoading = true
      api
        .updateAlaram(params)
        .then(response => {
          if (response.success) {
            this.handleSuccess(response)
          } else {
            this.$toast(JSON.stringify(response.errors))
          }
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    handleSuccess(response) {
      this.$emit('success', response)
    },
    filter(type, options) {
      if (type === 'minute') {
        return options.filter(option => option % 30 === 0)
      }
      return options
    },
    // 生成提醒时间数据
    genTimeColumns() {
      const columns = []
      for (let i = 0; i <= 23; i++) {
        const temp = i < 10 ? `0${i}` : i
        columns.push(`${temp}:00`)
        columns.push(`${temp}:30`)
      }
      return columns
    },
    onChangeTime(picker, value, index) {
      this.ruleForm.time = value
    }
  }
}
</script>

<style lang="scss" scoped>
.alarm-update {
  padding: 20px;
}
.alarm-title {
  margin-bottom: 20px;
  font-size: 18px;
  color: #222;
  line-height: 1;
  text-align: center;
}
.alarm-form {
  padding-bottom: env(safe-area-inset-bottom);
}
.alarm-form-time {
  position: relative;
  margin-bottom: 20px;
}
.alarm-form-time__lable {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1;
}
.alarm-form-item {
  margin-bottom: 20px;
}
.alarm-form-item-hd {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.alarm-form-item-hd__lable {
  font-size: 15px;
}
.alarm-form-item-hd__aside {
  font-size: 15px;
  color: #a7a6a7;
}
::v-deep .van-picker__frame {
  display: none;
}
::v-deep .van-checkbox {
  width: 34px;
  height: 34px;
  justify-content: center;
  font-size: 12px;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 50%;
  box-sizing: border-box;
  &:last-child {
    margin-right: 0;
  }
}
::v-deep .van-checkbox[aria-checked='true'] {
  background-color: #c62245;
  border: 0;
  .van-checkbox__label {
    color: #fff;
  }
}
::v-deep .van-checkbox__icon {
  display: none;
}
::v-deep .van-checkbox__label {
  margin: 0;
  color: #a7a6a7;
}
::v-deep .van-button {
  margin-top: 40px;
  display: block;
  width: 100%;
  height: 40px;
  background-color: #c62245;
  border: 0;
  border-radius: 6px;
}
</style>
