<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-prod-write-off">
    <!-- <pord-title :prodTitle="'运费设置'" :isOpen="isOpen" @close="close" /> -->
    <view class="body">
      <view
        :class="['list',dataForm.writeOffNum===0?'active':'']"
        @tap="dataForm.writeOffNum=0"
      >
        <view class="content">
          <view class="top">
            <text>{{ $t('wuXuHeXiao') }}</text><view class="iconfont option">
              &#xe659;
            </view>
          </view>
        </view>
      </view>
      <view
        :class="['list',dataForm.writeOffNum===1?'active':'']"
        @tap="writeOffNumSelect(1)"
      >
        <view class="content">
          <view class="top">
            <text>{{ $t('danCiHeXiao') }}</text><view class="iconfont option">
              &#xe659;
            </view>
          </view>
          <view
            v-if="dataForm.writeOffNum===1&&dataForm.writeOffTime!==null&&dataForm.writeOffTime!==0"
            class="text"
          >
            ({{ dataForm.writeOffTime===-1?$t('changQiYouXiao'):'' }}
            {{ dataForm.writeOffTime===1?$t('gouMaiHouDangTianYouXiaoMeiTian_24DianQianKeYong'):'' }}
            {{ dataForm.writeOffTime>1?$t('gouMaiHouWriteofftimeTianNeiYouXiao').replace(['writeOffTime'],dataForm.writeOffTime):'' }})
          </view>
          <view
            v-else-if="dataForm.writeOffNum===1&&dataForm.writeOffTime!==null&&dataForm.writeOffTime===0&&dataForm.writeOffStart&&dataForm.writeOffEnd"
            class="text"
          >
            ({{ $t('youXiaoQi') }}{{ timeFormat(dataForm.writeOffStart) }} - {{ timeFormat(dataForm.writeOffEnd) }})
          </view>
          <view
            v-else-if="dataForm.writeOffNum===1&&dataForm.writeOffTime!==null"
            class="text"
          >
            {{ $t('qingXuanZeShiJian') }}
          </view>
        </view>
      </view>
      <view
        :class="['list',dataForm.writeOffNum===-1?'active':'']"
        @tap="writeOffNumSelect(-1)"
      >
        <view class="content">
          <view class="top">
            <text>{{ $t('duoCiHeXiao') }}</text><view class="iconfont option">
              &#xe659;
            </view>
          </view>
          <view
            v-if="dataForm.writeOffNum===-1&&dataForm.writeOffTime!==null&&dataForm.writeOffTime!==0"
            class="text"
          >
            ({{ dataForm.writeOffTime===-1?$t('changQiYouXiao'):'' }}
            {{ dataForm.writeOffTime===1?$t('gouMaiHouDangTianYouXiaoMeiTian_24DianQianKeYong'):'' }}
            {{ dataForm.writeOffTime>1?$t('gouMaiHouWriteofftimeTianNeiYouXiao').replace(['writeOffTime'],dataForm.writeOffTime):'' }})
            <text>{{ (dataForm.writeOffMultipleCount === -1 ? $t('heXiaoWuXianCi') : $t('zuiDuoHeXiaoWriteoffmultiplecountCi').replace('[writeOffMultipleCount]', dataForm.writeOffMultipleCount)) }}</text>
          </view>
          <view
            v-else-if="dataForm.writeOffNum===-1&&dataForm.writeOffTime!==null&&dataForm.writeOffTime===0&&dataForm.writeOffStart&&dataForm.writeOffEnd"
            class="text"
          >
            ({{ $t('youXiaoQi-0') }}{{ timeFormat(dataForm.writeOffStart) }} - {{ timeFormat(dataForm.writeOffEnd) }})
          </view>
          <view
            v-else-if="dataForm.writeOffNum===-1&&dataForm.writeOffTime!==null"
            class="text"
          >
            {{ $t('qingXuanZeShiJian-0') }}
          </view>
        </view>
      </view>
    </view>
    <view class="reminder">
      {{ $t('xuYaoHeXiaoDeShangPinHuiShengChengHeXiaoMaKeTiGongGeiShangJiaXianXiaHeXiao') }}
    </view>
    <view class="footer">
      <button
        type="primary"
        @tap="toPostProd"
      >
        {{ $t('queDing') }}
      </button>
    </view>

    <!-- 选择配送方式 -->
    <uni-popup
      ref="writeOffPopupRef"
      type="bottom"
    >
      <view class="optionType">
        <view class="title">
          <text>{{ $t('xuanZeHeXiaoXinXi') }}</text>
          <view
            class="close iconfont"
            @tap="writeOffPopupRef.close()"
          >
            &#xe60e;
          </view>
        </view>

        <view class="writeOffPopup-title">
          {{ $t('youXiaoQi').replace('：', '') }}
        </view>

        <view
          :class="['list',dataForm.writeOffTime===-1&&!dayIndex?'active':'']"
          @click="select(-1)"
        >
          <view class="left">
            <view>{{ $t('changQiYouXiao') }}</view>
          </view>
          <view class="right iconfont">
            &#xe659;
          </view>
        </view>
        <view
          :class="['list',dataForm.writeOffTime===1&&!dayIndex?'active':'']"
          @click="select(1)"
        >
          <view class="left">
            <view>
              {{ $t('gouMaiHouDangTianYouXiao') }}<text class="text">
                {{ $t('meiTian_24DianQianKeYiShiYong') }}
              </text>
            </view>
          </view>
          <view class="right iconfont">
            &#xe659;
          </view>
        </view>
        <view
          :class="['list',dayIndex?'active':'']"
          @click="daysSelect"
        >
          <view class="left">
            <view class="flex">
              <text>{{ $t('gouMaiHou') }}</text><input
                v-model="day"
                type="number"
                placeholder-class="input-placeholder"
                :placeholder="$t('qingShuRu')"
                @blur="dayChange"
              ><text>{{ $t('tianNeiYouXiao') }}</text>
            </view>
          </view>
          <view class="right iconfont">
            &#xe659;
          </view>
        </view>
        <view
          :class="['list',dataForm.writeOffTime===0&&!dayIndex?'active':'']"
          @click="select(0)"
        >
          <view class="left">
            <view class="flex">
              <text>{{ $t('zai') }}</text><view
                :class="['date',!startTime?'date-hint':'']"
                @click="startTimePopupRef.open('share')"
              >
                {{ dataForm.writeOffStart?dataForm.writeOffStart:$t('xuanZeKaiShiRiQi') }}
              </view><text>{{ $t('zhi') }}</text><view
                :class="['date',!endTime?'date-hint':'']"
                @click="endTimePopupOpen"
              >
                {{ dataForm.writeOffEnd?dataForm.writeOffEnd:$t('xuanZeJieShuRiQi') }}
              </view><text>{{ $t('neiYouXiao') }}</text>
            </view>
          </view>
          <view class="right iconfont">
            &#xe659;
          </view>
        </view>

        <view
          v-if="dataForm.writeOffNum===-1"
          class="writeOffPopup-title"
        >
          {{ $t('youXiaoHeXiaoCiShu') }}
        </view>

        <view
          v-if="dataForm.writeOffNum===-1"
          :class="['list',writeOffMultipleCountSelect===-1?'active':'']"
          @click="changeWriteOffMultipleCount(-1)"
        >
          <view class="left">
            <view>{{ $t('wuXianCi') }}</view>
          </view>
          <view class="right iconfont">
            &#xe659;
          </view>
        </view>
        <view
          v-if="dataForm.writeOffNum===-1"
          :class="['list',writeOffMultipleCountSelect===2?'active':'']"
          @click="changeWriteOffMultipleCount(2)"
        >
          <view class="left">
            <view class="flex">
              <text>{{ $t('zuiDuoHeXiao') }}</text><input
                v-model="writeOffMultipleCount"
                type="number"
                placeholder-class="input-placeholder"
                :disabled="writeOffMultipleCountSelect === -1"
                :placeholder="$t('qingShuRu')"
                @blur="writeOffMultipleCountChange"
              ><text>{{ $t('ci') }}</text>
            </view>
          </view>
          <view class="right iconfont">
            &#xe659;
          </view>
        </view>

        <view class="delivery">
          <button
            type="primary"
            @tap="confirm"
          >
            {{ $t('queDing') }}
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 选择开始日期 -->
    <uni-popup
      ref="startTimePopupRef"
      type="bottom"
    >
      <view class="optionType">
        <view class="title time-title">
          <text>{{ $t('xuanZeKaiShiRiQi-0') }}</text>
          <view
            class="close iconfont"
            @tap="startTimePopupRef.close()"
          >
            &#xe60e;
          </view>
        </view>
        <xp-picker
          ref="startTimeRef"
          v-model="startTimePicker"
          :mode="'ymd'"
          :start-time="curTime"
        />
        <view class="delivery">
          <button
            type="primary"
            @tap="startTimeSbumit"
          >
            {{ $t('queDing') }}
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 选择结束日期 -->
    <uni-popup
      ref="endTimePopupRef"
      type="bottom"
    >
      <view class="optionType">
        <view class="title time-title">
          <text>{{ $t('xuanZeJieShuRiQi-0') }}</text>
          <view
            class="close iconfont"
            @tap="endTimePopupClose"
          >
            &#xe60e;
          </view>
        </view>
        <xp-picker
          ref="endTimeRef"
          v-model="endTimePicker"
          :mode="'ymd'"
          :start-time="curTime"
        />
        <view class="delivery">
          <button
            type="primary"
            @tap="endTimeSbumit"
          >
            {{ $t('queDing') }}
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, onMounted, reactive } from 'vue'

const date = new Date()
const curYear = date.getFullYear()
const curMonth = date.getMonth() + 1
const curDate = date.getDate()

const Data = reactive({
  day: null,
  dayIndex: false,
  startTimePicker: '',
  endTimePicker: '',
  startTime: '',
  endTime: '',
  writeOffMultipleCount: '',
  writeOffMultipleCountSelect: -1,
  curTime: [curYear, curMonth, curDate]
})

const { day, dayIndex, startTime, endTime, startTimePicker, endTimePicker, writeOffMultipleCount, writeOffMultipleCountSelect, curTime } = toRefs(Data)

const prodStore = useProdStore()
const dataForm = computed(() => prodStore.dataForm)

onMounted(() => {
  if (prodStore.dataForm.writeOffTime > 1) {
    Data.dayIndex = true
    Data.day = prodStore.dataForm.writeOffTime
  }
  Data.writeOffMultipleCountSelect = prodStore.dataForm.writeOffMultipleCount === -1 ? -1 : 2
  Data.writeOffMultipleCount = prodStore.dataForm.writeOffMultipleCount > -1 ? prodStore.dataForm.writeOffMultipleCount : ''
  uni.setNavigationBarTitle({
    title: $t('heXiaoCiShu-0')
  })
})

const timeFormat = (value) => {
  const str = value.split('-').join('.')
  return str
}

const endTimeRef = ref()
const endTimePopupRef = ref()

const endTimePopupOpen = () => {
  endTimePopupRef.value.open('share')
}

const endTimePopupClose = () => {
  endTimePopupRef.value.close()
}
const endTimeSbumit = async () => {
  await nextTick(() => {
    endTimeRef.value._confirm()
  })
  Data.endTime = Data.endTimePicker + ' 23:59:59'
  // 判断是否小于当前时间
  const myDate = new Date()
  const now = myDate.valueOf()
  const endTime = new Date(Data.endTime).valueOf()
  if (now > endTime) {
    uni.showToast({
      title: $t('jieShuShiJianBuNengXiaoYuDangQianShiJian'),
      icon: 'none'
    })
    return
  }

  // 判断是否小于开始时间
  if (Data.startTime) {
    const startTime = new Date(Data.startTime).valueOf()
    if (startTime > endTime) {
      uni.showToast({
        title: $t('jieShuShiJianBuNengXiaoYuKaiShiShiJian'),
        icon: 'none'
      })
      return
    }
  }
  prodStore.dataForm.writeOffEnd = Data.endTime

  endTimePopupRef.value.close()
}

const startTimeRef = ref()
const startTimePopupRef = ref()
const startTimeSbumit = async () => {
  await nextTick(() => {
    startTimeRef.value._confirm()
  })
  Data.startTime = Data.startTimePicker + ' 00:00:00'
  // 判断是否小于当前时间
  const startTime = new Date(Data.startTime).valueOf()

  // 判断是否小于开始时间
  if (Data.endTime) {
    const endTime = new Date(Data.endTime).valueOf()
    if (startTime > endTime) {
      uni.showToast({
        title: $t('kaiShiShiJianBuNengDaYuJieShuShiJian'),
        icon: 'none'
      })
      return
    }
  }

  prodStore.dataForm.writeOffStart = Data.startTime

  startTimePopupRef.value.close()
}

const writeOffPopupRef = ref()
const writeOffNumSelect = (val) => {
  prodStore.dataForm.writeOffNum = val
  if (val === -1 && !Data.day) {
    Data.day = 2
  }
  writeOffPopupRef.value.open('share')
}

const select = (val) => {
  prodStore.dataForm.writeOffTime = val
  Data.dayIndex = false
}
const confirm = () => {
  // 自定义时间非空验证
  if (prodStore.dataForm.writeOffTime === 0 && (!prodStore.dataForm.writeOffStart || !prodStore.dataForm.writeOffEnd)) {
    uni.showToast({
      title: $t('qingXuanZeShiJian-1'),
      icon: 'none'
    })
    return
  }
  if (Data.writeOffMultipleCountSelect !== -1) {
    Data.writeOffMultipleCount = Data.writeOffMultipleCount || 2
    prodStore.dataForm.writeOffMultipleCount = Data.writeOffMultipleCount
  } else {
    prodStore.dataForm.writeOffMultipleCount = -1
  }
  writeOffPopupRef.value.close()
}
const daysSelect = () => {
  Data.dayIndex = true
  if (Data.day < 1) {
    Data.day = 2
  }
  prodStore.dataForm.writeOffTime = Data.day
}
// 选有效核销次数
const changeWriteOffMultipleCount = (val) => {
  Data.writeOffMultipleCountSelect = val
  if (val === -1) {
    Data.writeOffMultipleCount = ''
  }
}
const dayChange = ({ detail }) => {
  if (detail.value < 2) {
    Data.day = 2
  }
  if (detail.value > 9999) {
    Data.day = 9999
  }
  Data.day = Math.floor(Data.day)
  prodStore.dataForm.writeOffTime = Data.day
}
// 输入有效核销次数
const writeOffMultipleCountChange = ({ detail }) => {
  if (+writeOffMultipleCount.value > 9999) {
    writeOffMultipleCount.value = 9999
  }
  if (detail.value < 2 && detail.value !== '') {
    Data.writeOffMultipleCount = 2
  }
}

const toPostProd = () => {
  if (prodStore.dataForm.writeOffNum === 0) {
    prodStore.dataForm.writeOffTime = null
    prodStore.dataForm.writeOffStart = ''
    prodStore.dataForm.writeOffEnd = ''
  }
  if (prodStore.dataForm.writeOffTime !== 0) {
    prodStore.dataForm.writeOffStart = ''
    prodStore.dataForm.writeOffEnd = ''
  }
  uni.redirectTo({
    url: '/package-prod/pages/post-prod/post-prod'
  })
}
</script>

<style lang="scss" scoped>
  .page-prod-write-off{
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    height: 100vh;
    font-size: 28rpx;
    background-color: #f8f8f8;
    color: #333;
    font-family: PingFang SC;

    .body{
      border-radius: 10rpx;
      margin-top: 20rpx;
      background-color: #fff;
      padding: 0 30rpx;

      .list{
        // height: 90rpx;
        border-bottom: 2rpx solid #F2F2F2;

        .content{
          padding: 26rpx 0;
          width: 100%;

          .top{
            display: flex;
            justify-content: space-between;
          }
          .option{
            display: inline-block;
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            border: 2rpx solid #D1D1D1;
            box-sizing: border-box;
            text-align: center;
            font-size: 12rpx;
            line-height: 36rpx;
            color: #fff;
          }

        }
        .right{
          color: #082BA6;
        }
        .text{
            margin-top: 10rpx;
            color: #999999;
            font-size: 24rpx;
          }
      }

      .active{
        .content{

          .option{
            border: none;
            background-color: #082BA6;
          }
        }
      }
    }
    .reminder{
      padding: 0 30rpx;
      margin: 20rpx 0 40rpx;
      font-size: 24rpx;
      color: #999999;
    }
    .footer{
      padding: 0 30rpx;
      button{
        background-color:#082BA6 ;
      }
    }

    .optionType{
    border-radius: 20rpx 20rpx 0px 0px;
    padding: 30rpx;
    background-color: #fff;
    box-sizing: border-box;

    .writeOffPopup-title {
      margin-bottom: 26px;
      font-weight: bold;
    }

    .title{
      text-align: center;
      font-weight: bold;
      position: relative;
      margin-bottom: 54rpx;

      .close{
        width: 36rpx;
        height: 36rpx;
        background: #F5F5F5;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        font-size: 12rpx;
        line-height: 36rpx;
        color: #999999;
      }
    }
    .time-title{
        margin-bottom: 74rpx;
      }

    .list{
      width: 100%;
      display: flex;
      align-items:center;

      justify-content: space-between;
      margin-bottom: 48rpx;

      .left{
        color: #000;
      }
      .right{
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        border: 2rpx solid #D1D1D1;
        box-sizing: border-box;
        text-align: center;
        font-size: 12rpx;
        line-height: 36rpx;
        color: #fff;
      }
    }
    .active{
      .right{
        border: none;
        background-color: #082BA6;
      }
    }
    button{
      margin-top: 150rpx;
      background-color:#082BA6 ;
    }
    .delivery{
      button{
        margin-top: 68rpx;
      }
    }

    .text{
      font-size: 24rpx;
      color: #999999;
    }

    .flex{
      display: flex;
      align-items:center;

      .date{
        width: 194rpx;
        height: 40rpx;
        padding: 8rpx 16rpx;
        text-align: center;
        background-color: #F6F8FA;
        margin: 0 10rpx;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow:ellipsis;
      }

      .date-hint{
        color: #999999;
      }
    }

    input{
      margin: 0 10rpx;
      width: 108rpx;
      height: 56rpx;
      background-color: #F6F8FA;
      text-align: center;
    }
  }
  }

</style>
