<template>
  <Page name="order-insurance" flank>
    <template #header>
      <u-alert type="warning" description="请务必在起运之前投保，否则不予理赔。一经投保，不可取消！" font-size="12"></u-alert>
    </template>
    <template #content>
      <u-form :model="form" ref="uForm" labelWidth="100">
        <view class="card">
          <u-form-item label="起运时间" @click="showLoadTime = true" required border-bottom>
            <u-datetime-picker :show="showLoadTime" :value="loadTimeDef" @cancel="showLoadTime = false" @close="showLoadTime = false" @confirm="loadTimeFormat"></u-datetime-picker>
            <u-input v-model="form.loadTime" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled />
          </u-form-item>
          <u-form-item label="选择方案" required> </u-form-item>
          <u-form-item border-bottom custom-style="paddingTop:0">
            <view class="scheme-box">
              <view v-for="item in schemeList" :key="item.amount" class="scheme-item" :class="item.amount === form.amount ? 'scheme-item-active' : ''" @click="form.amount = item.amount">
                <view class="amount">{{ item.amountStr }}</view>
                <view class="title">{{ item.title }}</view>
                <view class="sub-title">{{ item.subTitle }}</view>
              </view>
            </view>
          </u-form-item>
          <u-form-item label="被保人" label-width="60" border-bottom>
            <span>浙江中邮物流有限公司</span>
          </u-form-item>
          <u-form-item label="保费" label-width="60">
            <text style="font-weight: 400; font-size: 12px"> 运费 * 费率=10000 * 0.0005=<text class="color-red">5元</text>(最低5元每笔)</text>
          </u-form-item>
        </view>
        <view class="tips">
          <u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
            <u-checkbox :customStyle="{ marginBottom: '8px' }" name="agree"> </u-checkbox>
          </u-checkbox-group>
          <span class="tip-text">投保前请仔细阅读并同意</span>
          <view class="file-name" @click="openPreFile">《保价须知及责任免除》</view>
        </view>
      </u-form>
      <u-popup mode="center" :show="fileShow" @close="fileShow = false" closeable :safe-area-inset-bottom="false">
        <view class="popup-file">
          <view class="popup-file-title">保价须知及责任免除</view>
          <view class="popup-file-text"></view>
          <u-button type="primary" @click="agreeFun" :disabled="shengYuTime"
            >已阅读并同意<text v-if="shengYuTime">({{ shengYuTime }}s)</text></u-button
          >
        </view>
      </u-popup>
    </template>
    <template #footer>
      <view style="display: flex; align-items: center; gap: 20rpx">
        <u-button type="primary" plain custom-style="flex:1" @click="fileShow = true">取消</u-button>
        <u-button type="primary" custom-style="flex:2">确定投保</u-button>
      </view>
    </template>
  </Page>
</template>
<script>
import dayjs from 'dayjs';
let popupHandel;
export default {
  props: {
    showChose: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      checkboxValue: [],
      haveAgree: false,
      fileShow: false,
      showLoadTime: false,
      loadTimeDef: new Date(),
      schemeList: [
        {
          title: '货值(赔付限额)',
          amountStr: '100万',
          amount: 1000000,
          subTitle: '',
        },
        {
          title: '货值(赔付限额)',
          amountStr: '200万',
          amount: 2000000,
          subTitle: '不含大宗及冷藏',
        },
        {
          title: '货值(赔付限额)',
          amountStr: '300万',
          amount: 3000000,
          subTitle: '不含大宗及冷藏',
        },
      ],
      form: {
        radio: 'true',
        amount: '',
      },
      shengYuTime: 10,
      popupHandel: null,
    };
  },
  methods: {
    loadTimeFormat({ value }) {
      this.form.loadTime = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
      this.showLoadTime = false;
    },
    openPreFile() {
      if (popupHandel) {
        clearInterval(popupHandel);
      }
      this.fileShow = true;
      if (!this.haveAgree) {
        this.shengYuTime = 10;
        popupHandel = setInterval(() => {
          let i = this.shengYuTime - 1;
          if (i === 0) {
            clearInterval(popupHandel);
          }
          this.shengYuTime = i;
        }, 1000);
      }
    },
    checkboxChange(e) {
      this.$nextTick(() => {
        if (!this.haveAgree) {
          this.checkboxValue = [];
          this.openPreFile();
        }
      });
    },
    agreeFun() {
      this.fileShow = false;
      this.haveAgree = true;
      this.checkboxValue = ['agree'];
    },
  },
};
</script>
<style lang="scss">
.page-order-insurance {
  &__header {
    padding: 0 !important;
  }
  &__content {
    .card {
      color: #999999;
      margin-bottom: $padding-md;
      background-color: $color-white;
      border-radius: $radius-md;
      box-shadow: $shadow-normal;
      .u-form-item {
        padding-left: $padding-md !important;
        padding-right: $padding-sm !important;
      }
      .scheme-box {
        display: flex;
        gap: 20rpx;
        .scheme-item {
          cursor: pointer;
          flex: 1;
          border: #cccccc 1px solid;
          padding: 10rpx;
          background: white;
          .amount {
            font-size: 32rpx;
            font-weight: bold;
            color: #ffcc00;
          }
          .title {
            color: $color-text;
            font-size: 24rpx;
            padding: 20rpx 0;
          }
          .sub-title {
            color: $color-text-caption;
            font-size: 20rpx;
          }
        }
        .scheme-item-active {
          border-color: $color-blue;
          position: relative;
        }
        .scheme-item-active:after {
          content: '✓';
          position: absolute;
          width: 20rpx;
          height: 20rpx;
          top: 0;
          right: 4rpx;
          color: white;
        }
        .scheme-item-active:before {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border-left: 30rpx solid transparent;
          border-right: 30rpx solid $color-blue;
          border-top: 30rpx solid $color-blue;
          border-bottom: 30rpx solid transparent;
          top: 0;
          right: 0;
        }
      }
    }
    .tips {
      padding-left: $padding-xs !important;
      padding-right: $padding-xs !important;
      display: flex;
      font-size: 13px;
      .tip-text {
        color: $color-text-caption;
      }
      .file-name {
        display: inline;
        color: $color-blue;
      }
    }
    .popup-file {
      padding: $padding-sm;
      width: 90vw;
      .popup-file-title {
        font-size: 32rpx;
        font-weight: bold;
        padding-bottom: $padding-sm;
      }
      .popup-file-text {
        background-color: $color-bg-disabled;
        height: 60vh;
        overflow: scroll;
      }
    }
  }
  &__footer {
    background-color: $color-white;
  }
}
</style>