<template>
  <view>
    <uni-popup ref="note-pop" type="dialog">
      <view class="dialog">
        <view class="dialog_title">退款、退货须知</view>
        <view class="note">
          <view class="note-content">{{ info.cashCouponCancelNote }}</view>
          <!-- 勾选合同 根据noteNeedContract -->
          <view v-if="info.noteNeedContract" class="note-treaty" @click="select">
            <view class="note-treaty_top">请您勾选协议，生成账单：</view>
            <view class="note-treaty_bottom">
              <radio color="#EC1500" :checked="isSelect" />
              <view>
                <text>我已经阅读并同意</text>
                <text
                  v-for="(item, index) in info.contractInfoList"
                  :key="index"
                  @click.stop="goUrl(item.contractVisitUrl)"
                >
                  <text class="NTR_red">{{ item.contractName }}</text>
                  {{ Number(index) !== info.contractInfoList.length - 1 ? "和" : "。" }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="dialog_button">
        <view class="uni-dialog-button cancel" @click="close">
          <text class="uni-dialog-button-text">取消</text>
        </view>
        <view class="uni-dialog-button confirm uni-border-left" @click="goClick">
          <text class="uni-dialog-button-text uni-button-color">已了解</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
  name: "CouponPop",
  components: {
    uniPopup
  },
  props: {
    info: {
      type: Object,
      default() {
        return {};
      }
    },
    value: {
      type: Boolean,
      dafault() {
        return false;
      }
    }
  },
  data() {
    return {
      isSelect: false
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          val ? this.open() : this.close();
        });
      },
      deep: true
    }
  },
  methods: {
    select() {
      this.isSelect = !this.isSelect;
    },
    open() {
      this.$refs["note-pop"].open();
    },
    close() {
      this.$emit("child-event", false);
      this.$refs["note-pop"].close();
      this.isSelect = false;
    },
    goClick() {
      if (this.info.noteNeedContract && !this.isSelect) {
        uni.showToast({ title: "请同意并勾选协议", icon: "none" });
        return;
      }
      this.close();
      this.$emit("confirm");
      this.isSelect = false;
    },
    goUrl(url) {
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(url))}`
      });
    }
  }
};
</script>

<style scoped lang="scss">
.dialog {
  padding: 48rpx 48rpx 0 48rpx;
  width: 622rpx;
  &_title {
    font-size: 32rpx;
    text-align: center;
    color: #323233;
  }
  &_button {
    display: flex;
    flex-direction: row;
    border-top-color: #ebedf0;
    border-top-style: solid;
    border-top-width: 0.5rpx;
    margin-top: 48rpx;
  }
}
.note {
  &-content {
    font-size: 28rpx;
    color: #969799;
    text-align: center;
    padding-top: 20rpx;
  }
  &-treaty {
    border-radius: 16rpx;
    background: #f7f8fa;
    font-size: 26rpx;
    color: #666666;
    padding: 16rpx;
    margin-top: 24rpx;
    &_top {
      padding-bottom: 16rpx;
    }
    &_bottom {
      display: flex;
      align-items: center;
      radio {
        transform: scale(0.6);
      }
      .NTR_red {
        color: #ec1500;
      }
    }
  }
}
.uni-dialog-button {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 96rpx;
}

.uni-border-left {
  border-left-color: #ebedf0;
  border-left-style: solid;
  border-left-width: 0.5rpx;
}

.uni-dialog-button-text {
  font-size: 32rpx;
}

.uni-button-color {
  color: $uni-color-primary;
}

.uni-dialog-input {
  flex: 1;
  font-size: 14px;
}

.uni-popup__success {
  color: $uni-color-success;
}

.uni-popup__warn {
  color: $uni-color-warning;
}

.uni-popup__error {
  color: $uni-color-error;
}

.uni-popup__info {
  color: #909399;
}
.uni-dialog-tip {
  font-size: 32rpx;
  line-height: 44rpx;
  color: #333;
}
</style>
