<template>
  <view class="container">
    <image class="bkg" src="~@/static/me/wave.png" mode="widthFix"></image>

    <view class="wrap" v-if="step === 1">
      <view class="year-picker">
        <view class="year-picker__title">报考年份</view>
        <u-input class="year-picker__input"
                 v-model="form.year"
                 type="select"
                 :height="60"
                 border
                 border-color="#b2b2b2"
                 :custom-style="{
                   color: '#6c6f70'
                 }"
                 @click="isShowTime = true"></u-input>
      </view>
      <view class="area-pick">
        <view class="area-pick__title">所在区域</view>
        <view class="area-pick__panel">
          <view v-for="item in areaList" :key="item.id" class="area-item" @click="form.area_id = item.id">
            {{ item.name }}
            <u-icon class="area-item__tag" v-if="form.area_id === item.id " name="checkmark-circle-fill" color="#fff" :size="64" />
          </view>
        </view>
      </view>

      <u-button
          shape="circle"
          ripple
          :custom-style="{
            'background-image': 'linear-gradient(263deg, rgba(31,142,247,0.9) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
            height: '76rpx',
            'line-height': '76rpx',
            'margin-top': '110rpx',
            'width': '450rpx',
            'color': '#fff'
          }"
          @click="() => {
            if (form.area_id) {
              stepClick('next')
            } else {
              $u.toast('请选择区域')
            }
          }">下一步</u-button>
    </view>

    <view class="wrap" v-if="step === 2">
      <view class="picked-data">
        <view>{{ form.year }}年</view>
        <view>{{ formArea }}</view>
      </view>

      <view class="card" style="margin-top: 28rpx;">
        <view class="card__title">
          <scroll-view scroll-x="true" enable-flex style="display: flex;justify-content: center;">
            <view class="batch-sub">
              <view class="batch-sub-item" v-for="item in currentBatchSub" :key="item.id">
                {{ item.name }}
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="card__body">

        </view>
      </view>
    </view>

    <u-picker
        v-model="isShowTime"
        mode="time"
        :params="{
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				}"
        @confirm="e => form.year = e.year"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      step: 1,
      isShowTime: false,
      areaList: [],
      form: {
        area_id: "",
        year: new Date().getFullYear().toString(),
        aspiration_id: ""
      },
      config: null,

      currentBatchId: "",
      aspiration: {},
      batchSub: {}
    };
  },
  methods: {
    async getBatchSub(batchId) {
      this.currentBatchId = batchId
      if (this.batchSub.hasOwnProperty(batchId) && this.batchSub[batchId]) {

      } else {
        try {
          const { batchSubs } = await this.$u.api.batchDetail({ id: batchId })
          this.$set(this.batchSub, batchId, batchSubs)
        } catch (err) {
          console.error(err)
        }
      }
    },
    async getConfig () {
      try {
        const { list } = await this.$u.api.batchIndex({
          area_id: this.form.area_id,
          year: this.form.year
        })
        if (list.length > 0) {
          this.form.aspiration_id = list[0].id

          this.aspiration = list[0]
          this.setTitle()
          if (this.aspiration.batchs[0].id) {
            this.getBatchSub(this.aspiration.batchs[0].id)
          }
        }
      } catch (err) {
        console.error(err)
      }
    },
    stepClick(type='next') {
      if (type === 'next') {
        if (true) {
          this.step = this.step + 1

          if (this.step === 2 && !this.config) {
            this.getConfig()
          }
        }
      } else if (type === 'prev') {
        if (this.step > 1) {
          this.step = this.step - 1
        }
      }
    },
    setTitle() {
      uni.setNavigationBarTitle({
        title: `志愿模拟填报 - Step ${this.step}${ this.step !== 1 ? ('/'+(this.batches.length+1)) : '' }`
      })
    },
    async getArea() {
      try {
        const res = await this.$u.api.area()
        this.areaList = res.list
      } catch (err) {
        console.error(err)
      }
    },
  },
  computed: {
    formArea() {
      return this.areaList?.find(i => i.id === this.form.area_id)?.name
    },
    batches() {
      return this.aspiration.batchs || []
    },
    currentBatchSub() {
      console.log(33, this.batchSub, this.currentBatchId, this.batchSub[String(this.currentBatchId)])
      return this.batchSub[this.currentBatchId]
    }
  },
  watch: {
    step() {
      this.setTitle()
    }
  },
  onShow() {
    this.setTitle()
  },
  created() {
    this.getArea()
  },
}
</script>

<style lang="scss">
.container {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  background: #eaf8fe;

  .bkg {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
  }

  .wrap {
    z-index: 3;
    position: relative;
    padding-top: 40rpx;

    .year-picker {
      background: #fff;
      display: flex;
      align-items: center;
      margin: 0 24rpx;
      padding: 32rpx 75rpx 32rpx 60rpx;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208, 209, 209, 0.3));

      &__title {
        font-size: 30rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: 500;
      }

      &__input {
        flex: 1;
        margin-left: 32rpx;
      }
    }

    .area-pick {
      margin: 0 24rpx;

      &__title {
        font-size: 30rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: 500;
        padding: 42rpx 0 38rpx 60rpx;
      }

      &__panel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 22rpx 28rpx;

        $colors: linear-gradient(0deg, #309cfe 0%, #58e5ff 100%),
        linear-gradient(0deg, #309cfe 0%, #58e5ff 100%),
        linear-gradient(0deg, #2f69fd 0%, #51bcfe 100%),
        linear-gradient(0deg, #2f69fd 0%, #51bcfe 100%),
        linear-gradient(0deg, #2941fc 0%, #587bff 100%),
        linear-gradient(0deg, #2941fc 0%, #587bff 100%),
        linear-gradient(0deg, #280bb7 0%, #5776fe 100%),
        linear-gradient(0deg, #280bb7 0%, #5776fe 100%);

        .area-item {
          border-radius: 15rpx;
          font-size: 46rpx;
          text-transform: uppercase;
          color: #ffffff;
          font-weight: 500;
          text-align: center;
          padding: 60rpx 0;
          filter: drop-shadow(0 4rpx 2rpx rgba(0, 0, 0, 0.3));
          position: relative;
          overflow: hidden;

          &::before {
            content: '';
            opacity: 0.302;
            width: 192rpx;
            height: 192rpx;
            border-radius: 96rpx;
            background-image: linear-gradient(0deg, #309cfe 0%, #58c2ff 100%);
            position: absolute;
            top: -140rpx;
            right: -38rpx;
          }

          &::after {
            content: '';
            opacity: 0.149;
            width: 192rpx;
            height: 192rpx;
            border-radius: 96rpx;
            background-color: #b9e1fd;
            position: absolute;
            bottom: -148rpx;
            left: -44rpx;
          }

          &__tag {
            z-index: 4;
            position: absolute;
            top: 10rpx;
            right: 10rpx;
          }
        }

        @for $i from 1 through length($colors) {
          .area-item:nth-child(n + #{$i}) {
            background: nth($colors, $i);
          }
        }
      }
    }
    .picked-data {
      display: flex;
      align-items: center;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
      background-color: rgba(255, 255, 255, 0.5);
      margin: 20rpx 24rpx 0;
      padding: 26rpx  160rpx;

      & > view {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: bold;
      }
    }

    .card {
      margin: 0 24rpx;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
      background-color: #ffffff;

      &__title {
        background: #fbf1e8;
        border-radius: 20rpx 20rpx 0 0;
        padding: 30rpx 16rpx;
      }
      &__body {
        padding: 48rpx 30rpx 70rpx 30rpx;
      }
    }
    .batch-sub {
      display: flex;

      &-item {
        text-align: center;
        font-size: 28rpx;
        text-transform: uppercase;
        color: #e77817;
        font-weight: 500;
        padding: 0 20rpx;
        word-break: keep-all;
        flex-shrink: 0;
      }
    }
  }
}
</style>
