<template>
  <view class="timepage">
    <view class="timeBox">
      <view v-for="(item, index) in timeArr" :key="index" class="timeItem">
        <u-icon
          name="clear"
          color="#FF5C5C"
          :size="40"
          class="left"
          @click="delTime(index)"
        ></u-icon>
        <view class="right" @click="handleTime(index)">
          <text v-if="item">{{ item }}</text>
          <text v-else style="opacity: 0.5">请选择时间段</text>
          <u-icon name="arrow" :size="30"></u-icon>
        </view>
      </view>
    </view>
    <view class="addBox" v-if="timeArr.length < 3">
      <view class="addBtn" @click="addTime">
        <u-icon name="add-o" :size="40" style="margin-right: 10rpx"></u-icon>
        新增时间段
      </view>
    </view>
    <view class="saveBox">
      <view class="saveBtn" @click="save">保存</view>
    </view>
    <u-modal
      v-model="showModel"
      @confirm="confirm"
      :show-cancel-button="true"
      title="筛选时间"
      contentSlot
      width="85%"
    >
      <view class="contentSlot">
        <view class="timeTitle">开始时间</view>
        <view class="time-picker">
          <picker-view
            :value="valueS"
            @change="bindChangeS"
            class="picker-view"
            indicator-style="height: 60rpx"
            :indicator-class="activeClass"
          >
            <picker-view-column>
              <view
                class="picker-item flex-center"
                v-for="(item, index) in h"
                :key="index"
                >{{ item }}</view
              >
            </picker-view-column>
            <view style="line-height: 180rpx">时</view>
            <picker-view-column>
              <view
                class="picker-item flex-center"
                v-for="(item, index) in m"
                :key="index"
                >{{ item }}</view
              >
            </picker-view-column>
            <view style="line-height: 180rpx">分</view>
            <picker-view-column>
              <view
                class="picker-item flex-center"
                v-for="(item, index) in s"
                :key="index"
                >{{ item }}</view
              >
            </picker-view-column>
            <view style="line-height: 180rpx">秒</view>
          </picker-view>
        </view>
        <view class="timeTitle">结束时间</view>
        <view class="time-picker">
          <picker-view
            :value="valueE"
            @change="bindChangeE"
            class="picker-view"
            indicator-style="height: 60rpx"
            indicator-class="activeClass"
          >
            <picker-view-column>
              <view
                class="picker-item flex-center"
                v-for="(item, index) in h"
                :key="index"
                >{{ item }}</view
              >
            </picker-view-column>
            <view style="line-height: 180rpx">时</view>
            <picker-view-column>
              <view
                class="picker-item flex-center"
                v-for="(item, index) in m"
                :key="index"
                >{{ item }}</view
              >
            </picker-view-column>
            <view style="line-height: 180rpx">分</view>
            <picker-view-column>
              <view
                class="picker-item flex-center"
                v-for="(item, index) in s"
                :key="index"
                >{{ item }}</view
              >
            </picker-view-column>
            <view style="line-height: 180rpx">秒</view>
          </picker-view>
        </view>
      </view>
    </u-modal>
  </view>
</template>
<script>
export default {
  data() {
    let h = []; //时
    let m = []; //分
    let s = []; //秒
    for (let i = 0; i <= 23; i++) {
      let n = i;
      h.push(n < 10 ? "0" + n : n);
    }
    for (let i = 0; i <= 59; i++) {
      let n = i;
      m.push(n < 10 ? "0" + n : n);
      s.push(n < 10 ? "0" + n : n);
    }
    return {
      timeArr: [],
      h,
      m,
      s,
      showModel: false,
      valueS: [0, 0, 0],
      valueE: [0, 0, 0],
      curIndex: 0,
      StartStr: "00:00:00",
      EndStr: "00:00:00",
    };
  },
  methods: {
    addTime() {
      this.timeArr.push("");
    },
    handleTime(index) {
      this.showModel = true;
      this.curIndex = index;
    },
    delTime(index) {
      this.timeArr.splice(index, 1);
    },
    // 开始时间
    bindChangeS(e) {
      const val = e.detail.value;
      let H = this.h[val[0]];
      let M = this.m[val[1]];
      let S = this.s[val[2]];
      this.StartStr = H + ":" + M + ":" + S;
    },
    // 结束时间
    bindChangeE(e) {
      const val = e.detail.value;
      let H = this.h[val[0]];
      let M = this.m[val[1]];
      let S = this.s[val[2]];
      this.EndStr = H + ":" + M + ":" + S;
    },
    confirm() {
      this.timeArr[this.curIndex] = this.StartStr + "-" + this.EndStr;
      console.log(159, this.StartStr, this.EndStr);
    },
    save() {
      let pages = getCurrentPages();
      let page = pages[pages.length - 2];
      page.$vm.getTimeArr(this.timeArr);
      uni.navigateBack({
         delta: 1
      });
    },
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "设置时间段",
    });
    let pages = getCurrentPages();
    let page = pages[pages.length - 2];
    this.timeArr = page.$vm.timeArr;
    console.log(41, page.$vm.timeArr);
  },
};
</script>

<style lang="scss" scoped>
.timepage {
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding-bottom: var(–safe-area-inset-bottom);
}
.timeBox {
  margin-bottom: 20rpx;
  .timeItem {
    height: 90rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 0 20rpx;
    .left {
      width: 40rpx;
      margin-right: 20rpx;
    }
    .right {
      width: 640rpx;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2rpx solid #ccced5;
      font-size: 30rpx;
    }
  }
}
.addBox {
  height: 110rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  .addBtn {
    width: 320rpx;
    height: 80rpx;
    border-radius: 40rpx;
    border: 2rpx solid #446dfc;
    color: #446dfc;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.contentSlot {
  background-color: #fff;
  box-sizing: border-box;
  padding: 40rpx;
  border-radius: 20rpx;

  .timeTitle {
    margin: 20rpx 0;
    font-size: 30rpx;
  }
}
.picker-view {
  width: 100%;
  height: 180rpx;
  margin-top: 20rpx;
  .picker-item {
    height: 100rpx;
  }
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.saveBox {
  width: 750rpx;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  .saveBtn {
    width: 700rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #446dfc;
    color: #fff;
    font-size: 36rpx;
  }
}
</style>