<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.startDate" 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, index) in schemeList" :key="item.amount" class="scheme-item" :class="index === choseSchemeIndex ? 'scheme-item-active' : ''" @click="choseSchemeFun(index)">
                <view class="amount">{{ item.coverageLimit }}万</view>
                <view class="title">货值(赔付限额)</view>
                <view class="sub-title">{{ item.remark }}</view>
              </view>
            </view>
          </u-form-item>
          <u-form-item label="被保人" label-width="60" border-bottom>
            <span>{{ frightInfo.name }}</span>
          </u-form-item>
          <u-form-item label="保费" label-width="60">
            <text style="font-weight: 400; font-size: 12px" v-if="choseScheme && paidAmount">
              运费 * 费率 = {{ paidAmount }} * {{ choseScheme.receiveRate }} = <text class="color-red">{{ form.receiveInsuranceAmount }}元</text>(最低{{ choseScheme.minReceiveFee }}元每笔)
            </text>
          </u-form-item>
        </view>
        <view class="tips">
          <u-checkbox-group v-model="checkboxValue" placement="column">
            <u-checkbox :customStyle="{ marginBottom: '8px' }" name="agree"> </u-checkbox>
          </u-checkbox-group>
          <span class="tip-text">投保前请仔细阅读并同意</span>
          <view class="file-name" @click="openWebView">《保价须知及责任免除》</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="cancelInsurance">取消投保</u-button>
        <u-button type="primary" custom-style="flex:2" @click="submitInsurance" :disabled="checkboxValue.length === 0">确定投保</u-button>
      </view>
    </template>
  </Page>
</template>
<script>
import dayjs from 'dayjs';
let popupHandel;
export default {
  props: {
    showChose: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      pdfFile0: 'https://zeyi-tms-product.oss-cn-hangzhou.aliyuncs.com/file/tms/a15401e7-3d44-41ab-9302-39c6574a1233.pdf',
      pdfFile: 'https://zeyi-tms-product.oss-cn-hangzhou.aliyuncs.com/file/tms/71c2d1ff-0ea1-491b-b387-d2f18de0b19d.html',
      paidAmount: '',
      checkboxValue: [],
      haveAgree: false,
      fileShow: false,
      showLoadTime: false,
      loadTimeDef: new Date(),
      choseSchemeIndex: -1,
      schemeList: [],
      form: {
        startDate: '',
        receiveInsuranceAmount: '',
        insuranceProgramCode: '',
        coverageLimit: '',
      },
      shengYuTime: 10,
      popupHandel: null,
      choseScheme: null,
      frightInfo: {},
    };
  },
  onLoad(option) {
    this.paidAmount = option.paidAmount;
    this.initData();
  },
  methods: {
    initData() {
      uni.$u.api.freightOrder.freightInsuranceList({}).then(res => {
        this.schemeList = res.result || [];
      });
      uni.$u.api.freightOrder.currentFreight({}).then(res => {
        this.frightInfo = res.result || {};
      });
    },
    loadTimeFormat({ value }) {
      this.form.startDate = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
      this.showLoadTime = false;
    },
    openWebView() {
      uni.navigateTo({ url: '/pages/common/webview?url=' + this.pdfFile });
    },
    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'];
    },
    cancelInsurance() {
      let form = {
        startDate: '',
        receiveInsuranceAmount: '',
        insuranceProgramCode: '',
        coverageLimit: '',
      };
      uni.$emit('buy-insurance', form);
    },
    submitInsurance() {
      if (!this.form.startDate) {
        return uni.showToast({ title: '起运时间不能为空', icon: 'none' });
      }
      if (!this.form.insuranceProgramCode) {
        return uni.showToast({ title: '请选择方案', icon: 'none' });
      }
      uni.$emit('buy-insurance', { ...this.form, programName: this.choseScheme.programName });
    },
    getReceiveInsuranceAmount(choseScheme, paidAmount) {
      if (!paidAmount || !choseScheme) return '';
      let v1 = Number(paidAmount) * Number(choseScheme.receiveRate);
      return v1 >= Number(choseScheme.minReceiveFee) ? Number(v1 + 0.004).toFixed(2) : choseScheme.minReceiveFee;
    },
    choseSchemeFun(index) {
      this.choseSchemeIndex = index;
      let choseScheme = this.schemeList[index];
      this.form = {
        insuranceProgramCode: choseScheme.code,
        coverageLimit: choseScheme.coverageLimit,
        receiveInsuranceAmount: this.getReceiveInsuranceAmount(choseScheme, this.paidAmount),
        startDate: this.form.startDate,
      };
      this.choseScheme = choseScheme;
    },
  },
};
</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>