<template>
  <div class="prompt-time">
    <div class="title">请设置您希望接收上课提醒的时间</div>
    <div class="tishi-timer">
      <img :src="tishiTimer" alt="">
    </div>
    <div class="time-setting" ref="timeSetting" @click="dateShowClick">
      <div class="time-setting-text">
        当前设定的时间
      </div>
      <div class="time-setting-ti">
        <span>{{ currentTime }}</span>
        <img :src="youjiantou" alt="">
      </div>
    </div>
    <div class="preservation" @click="preservationClick">保存</div>
    <van-popup v-model="dateShow" position="bottom">
      <van-datetime-picker @confirm="dateConfirm" @cancel="dateConfirmNo" v-model="currentTime" type="time"/>
    </van-popup>
  </div>
</template>

<script>
  import { postNotifySettingApi } from "../../service/api";
  import { DatetimePicker, Popup, Toast } from 'vant';
  import tishiTimer from '../../assets/evaluate/tishi_timer.png'
  import youjiantou from '../../assets/evaluate/youjiantou.png'

  export default {
    name: "promptTime",
    data() {
      return {
        currentTime: '',
        dateVal: '',
        dateShow: false,
        selectedValue: '',
        tishiTimer: tishiTimer, // 图
        youjiantou: youjiantou  // 图
      }
    },
    components: {
      [DatetimePicker.name]: DatetimePicker,
      [Popup.name]: Popup,
    },
    methods: {
      dateShowClick() {
        this.dateShow = true;
        this.$nextTick(() => {
          document.querySelectorAll('.van-picker-column')[1].style.display = 'none';
          let oLi = document.querySelectorAll('.van-picker-column')[0].querySelectorAll('li');
          for (var i = 0; i < oLi.length; i++) {
            oLi[i].innerText = oLi[i].innerText + ':00'
          }
        })
      },
      dateConfirm(val) {
        this.currentTime = val == 'aN:aN' ? '00:00' : val
        this.contentFn()
      },
      dateConfirmNo() {
        this.contentFn()
      },
      contentFn() {
        this.dateShow = false;
        this.$refs.timeSetting.style.borderBottom = '1px solid #E2E2E2'
        let oLi = document.querySelectorAll('.van-picker-column')[0].querySelectorAll('li');
        for (var i = 0; i < oLi.length; i++) {
          oLi[i].innerText = oLi[i].innerText.split(':')[0]
        }
      },
      preservationClick() {
        if(this.currentTime) {
          let pushAtData = { time: this.currentTime }
          postNotifySettingApi(pushAtData).then(res => {
            Toast("时间设定完成");
            this.$router.go(-1);
          })
        }else {
          Toast("请先设定时间");
          this.$refs.timeSetting.style.borderBottom = '1px solid red'
        }
      }
    }
  }
</script>

<style lang="less">
  @import "../../util/public";

  .van-picker {
    border-radius: 30 * @toVw 30 * @toVw 0 0;
  }

  .van-picker-column__item {
    color: #666666;
    font-size: 20 * @toVw;
  }

  .van-picker-column__item--selected {
    color: #40A9FF;
    font-size: 26 * @toVw;
  }

  .prompt-time {
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 0 27 * @toVw;
    box-sizing: border-box;

    .title {
      padding-top: 30 * @toVw;
      padding-bottom: 24 * @toVw;
      font-size: 17 * @toVw;
      font-weight: 500;
      letter-spacing: 1px;
      color: #000000;
    }

    .tishi-timer {
      width: 322 * @toVw;
      height: 245 * @toVw;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .time-setting {
      width: 100%;
      overflow: hidden;
      padding-top: 38 * @toVw;
      padding-bottom: 11 * @toVw;
      border-bottom: 1px solid #E2E2E2;

      .time-setting-text {
        float: left;
        font-size: 14 * @toVw;
      }

      .time-setting-ti {
        float: right;

        span {
          font-size: 15 * @toVw;
          padding-right: 10 * @toVw;
          vertical-align: middle;
        }

        img {
          width: 10 * @toVw;
          height: 14 * @toVw;
          vertical-align: middle;
        }
      }
    }

    .preservation {
      width: 330 * @toVw;
      height: 50 * @toVw;
      line-height: 50 * @toVw;
      background: #40A9FF;
      margin-top: 60 * @toVw;
      border-radius: 28 * @toVw;
      text-align: center;
      font-size: 17 * @toVw;
      font-weight: 500;
      color: #ffffff;
    }
  }
</style>