<template>
  <div class="renewal " :class="isOpened ? 'renewal_open' : 'renewal_closed'">
    <p class="renewal-status">{{ statusText }}</p>
    <p class="renewal-desc">次年自动续保</p>
    <div class="renewal-container">
      <p class="renewal-container-title">{{ enjoyText }}</p>
      <div class="renewal-container-content">
        <div class="Rc-content-item">
          <svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
          <span class="Rcc-item-text">无需次年自己手动操作续保</span>
        </div>
        <div class="Rc-content-item">
          <svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
          <span class="Rcc-item-text">本功能无额外费用，可随时取消</span>
        </div>
        <div class="Rc-content-item">
          <svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
          <span class="Rcc-item-text">续保保费按照续保应交保费，自动扣款</span>
        </div>
      </div>
      <p class="renewal-container-read" @click="popupShow = true">
        阅读并同意《<span>次年自动续保服务协议</span>》
      </p>
      <div class="renewal-container-detail" v-if="!isOpened"></div>
      <div class="renewal-container-detail" v-if="isOpened">
        <div class="Rc-detail-item">
          <span>次年保单生效时间</span>
          <span>{{ nextYear }}</span>
        </div>
        <div class="Rc-detail-item">
          <span>扣款方式</span>
          <span>按微信默认顺序依次扣款</span>
        </div>
      </div>
      <cr-button class="renewal-container-button" @click="submit">{{ buttonText }}</cr-button>
    </div>
    <popup-with-iframe v-model="popupShow" :title="pupopData.title" :url="pupopData.url" />
  </div>
</template>
<script>
import PopupWithIframe from "@/components/PopupWithIframe";
import { getPolicyDetail, updateRenewal } from "@/api/policy";
import settings from "@/api/settings";

export default {
  name: "Renewal",
  components: {
    PopupWithIframe
  },
  data() {
    return {
      isOpened: false,
      nextYear: "-",
      popupShow: false,
      pupopData: settings.renewalAgreement
    };
  },
  async created() {
    const detail = await getPolicyDetail(this.$route.params.orderNo);
    if (detail.autoRenewPolicy) {
      this.isOpened = true;
    }
    this.nextYear = detail.nextYearEffectiveDate || "-";
  },
  computed: {
    statusText() {
      return this.isOpened ? "该保单已开通" : "该保单未开通";
    },
    enjoyText() {
      return this.isOpened ? "现在已享受" : "开通后享受";
    },
    buttonText() {
      return this.isOpened ? "取消续保" : "免费开通次年自动续保";
    }
  },
  methods: {
    async submit() {
      await updateRenewal(this.$route.params.policySecId, !this.isOpened);
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
