<template>
  <cr-dialog
    v-model="refundImmediately"
    :show-cancel-button="false"
    :show-confirm-button="false"
    title="退款、退货须知"
    custom-class="refund-dialog"
  >
    <div class="refund-content">
      <p class="refund-detail">{{ cashCouponCancelNote }}</p>
      <div class="contract">
        <p>请您勾选协议，生成账单</p>
        <div class="contract-radio">
          <cr-checkbox v-model="checked" shape="round" />
          <div>
            <span @click.stop="() => {}">我已阅读并同意</span>
            <span
              v-for="item in refundContractInfoList"
              :key="item.contractId"
              class="contract-url"
              @click="openContractVisitUrl(item)"
            >
              《{{ item.contractName }}》
              <!-- <a :href="item.contractVisitUrl" target="_blank">《{{ item.contractName }}》</a> -->
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="cr-dialog-btn">
      <button size="large" class="cr-dialog-left" @click="cancelClick">取消</button>
      <button size="large" class="cr-dialog-right" @click="handelConfirm">已了解</button>
    </div>
  </cr-dialog>
</template>
<script>
import localStorage from '@/service/localStorage.service';
export default {
  name: 'RefundDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    refundContractInfoList: {
      type: Array,
      default: () => []
    },
    cashCouponCancelNote: {
      type: String,
      default: ''
    },
    refundStatus: {
      type: Number,
      default: 0 // 0 - 申请退款， 1 - 退换
    }
  },
  data() {
    return {
      refundImmediately: false,
      checked: false
    };
  },
  watch: {
    value(val) {
      this.refundImmediately = val;
      if (val) this.checked = false;
    },
    refundImmediately(val) {
      this.$emit('input', val);
    }
  },
  methods: {
    cancelClick() {
      this.refundImmediately = false;
    },
    handelConfirm() {
      if (this.checked) {
        this.refundImmediately = false;
        if (this.refundStatus === 0) {
          this.$parent.cancelOrder();
        }
        if (this.refundStatus === 1) {
          this.$parent?.goRefundTypePage();
        }
      } else {
        this.$toast('请同意并勾选协议！');
      }
    },
    openContractVisitUrl(item) {
      window.location.href = item.contractVisitUrl?.replace(
        /\{token\}/g,
        localStorage.get('vccToken')
      );
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
