<template>
  <view class="read-page">
    <!-- 本页面为只读信息页面 -->
    <!-- 双重for循环 -->
    <view class="box" :class="{ fold: isFold }" ref="boxRef">
      <view v-for="(item, index) in applyInfoList" :key="index" class="list">
        <view v-for="(val, valIndex) in item" :key="valIndex">
          <!-- 只有标题 -->
          <view v-if="val.title" class="title">{{ val.title }}</view>

          <!-- 文字回显 -->
          <view v-if="val.value" class="item-text">
            <text class="grey">{{ val.text }}</text>
            <view style="white-space: pre-wrap; word-wrap: break-word">{{
              val.value
            }}</view>
          </view>

          <!-- 图片回显 -->
          <view v-if="val.src" class="item-img">
            <text class="grey">{{ val.text }}</text>
            <image
              :src="val.src"
              mode="aspectFit"
              @click="openBackImg(val.src)"
            ></image>
          </view>

          <!-- 支付通站点回显 -->
          <template v-if="val.type == 'siteInfos'">
            <view v-for="(siteTtem, siteIndex) in val.typevalue" :key="siteIndex">
              <view class="item-img"
                ><text class="grey">站点类型</text>
                <text> {{ siteTypeHandle(siteTtem.siteType) }}</text></view
              >
              <view class="item-img"
                ><text class="grey">站点地址</text>
                <text> {{ siteTtem.siteUrl }}</text></view
              >
              <view class="item-img"
                ><text class="grey">站点名称</text>
                <text> {{ siteTtem.siteName }}</text></view
              >
              <view class="item-img"
                ><text class="grey">站点账号</text>
                <text> {{ siteTtem.account }}</text></view
              >
              <view class="item-img"
                ><text class="grey">站点密码</text>
                <text> {{ siteTtem.password }}</text></view
              >
            </view>
          </template>

          <!-- 受益人卡片 -->
          <view v-if="val == 'owner' && val[0].idcard1Img" class="title"
            >受益人信息</view
          >
          <view v-if="Array.isArray(val) && val[0].idcard1Img">
            <view v-for="(ownerItem, ownerIndex) in val" :key="ownerIndex">
              <view class="item-img margin-b-20">
                <text class="grey">受益人身份证人像面照</text>
                <image
                  :src="ownerItem.idcard1Img"
                  mode="aspectFit"
                  @click="openBackImg(ownerItem.idcard1Img)"
                />
              </view>
              <view class="item-img margin-b-20">
                <text class="grey">受益人身份证国徽面照</text>
                <image
                  :src="ownerItem.idcard2Img"
                  mode="aspectFit"
                  @click="openBackImg(ownerItem.idcard2Img)"
                />
              </view>
              <view class="item-img margin-b-20">
                <text class="grey">受益人身份证姓名</text>
                <text>{{ ownerItem.idcardName }}</text>
              </view>
              <view class="item-img margin-b-20">
                <text class="grey">受益人身份证号</text>
                <text>{{ ownerItem.idcardNo }}</text>
              </view>
              <view class="item-img margin-b-20">
                <text class="grey">受益人身份证起始有效期</text>
                <text>{{ ownerItem.idcardEffectBegin }}</text>
              </view>
              <view class="item-img margin-b-20">
                <text class="grey">受益人身份证结束有效期</text>
                <text>{{ ownerItem.idcardEffectEnd }}</text>
              </view>
              <view class="item-img margin-b-20">
                <text class="grey">受益人身份证居住地址</text>
                <text>{{ ownerItem.idcardAddress }}</text>
              </view>
            </view>
          </view>

          <!-- 只有标题 -->
          <view v-if="val == 'fee'" class="title">费率信息</view>
          <!-- 费率回显 -->
          <view v-if="Array.isArray(val) && val[0].wayCode">
            <view
              v-for="(feeItem, index) in val"
              :key="index"
              class="margin-30"
            >
              <view class="name grey">{{ feeItem.wayCode }}</view>
              <view v-if="feeItem.feeType == 'SINGLE'" class="item-text">
                <text class="grey">单笔费率:</text>
                <text>{{ (feeItem.feeRate * 100).toFixed(2) }} %</text>
              </view>

              <view v-if="feeItem.feeType == 'LEVEL'">
                <!-- 银联模式的阶梯费率 -->
                <template v-if="feeItem.creditCardPaywayFee">
                  <view
                    >借记卡（储蓄卡）: [ 保底费用：{{
                      feeItem.minFee / 100
                    }}
                    元, 封顶费用：{{ feeItem.maxFee / 100 }} 元 ]</view
                  >
                  <template
                    v-for="(levelItem, i) in feeItem.levelList"
                    :key="i"
                  >
                    <view style="margin: 10rpx 0"></view>
                    {{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
                    费率： {{ (levelItem.feeRate * 100).toFixed(2) }}%
                  </template>

                  <view style="margin-top: 20rpx"
                    >贷记卡（信用卡）: [ 保底费用：{{
                      feeItem.creditCardPaywayFee.minFee / 100
                    }}
                    元, 封顶费用：{{
                      feeItem.creditCardPaywayFee.maxFee / 100
                    }}
                    元 ]</view
                  >
                  <template
                    v-for="(levelItem, i) in feeItem.creditCardPaywayFee
                      .levelList"
                    :key="i"
                  >
                    <view style="margin: 10rpx 0"></view>
                    {{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
                    费率： {{ (levelItem.feeRate * 100).toFixed(2) }}%
                  </template>
                </template>

                <!-- 普通模式的阶梯费率 -->
                <template v-else>
                  阶梯费率: [ 保底费用：{{ feeItem.minFee / 100 }} 元,
                  封顶费用：{{ feeItem.maxFee / 100 }} 元 ]
                  <template
                    v-for="(levelItem, i) in feeItem.levelList"
                    :key="i"
                  >
                    <view style="margin: 10rpx 0"></view>
                    {{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
                    费率： {{ (levelItem.feeRate * 100).toFixed(2) }}%
                  </template>
                </template>
              </view>
            </view>
          </view>
        
					<!-- POS信息回显 -->
					<template v-if="val.type == 'posInfo'">
						<view v-for="(posItem, posIndex) in val.typevalue" :key="posIndex">
							<view class="item-img margin-b-20"
								><text class="grey">pos安装地址</text>
								<text> {{ posItem.areaText }}</text></view
							>
							<view class="item-img margin-b-20"
								><text class="grey">具体位置</text>
								<text> {{ posItem.terminalDetailAddress }}</text></view
							>
							<view class="item-img margin-b-20"
								><text class="grey">小票名称</text>
								<text> {{ posItem.ticketName }}</text></view
							>
							<view class="item-img margin-b-20">
								<text class="grey">终端数量</text>
								<text> {{ posItem.terminalCount }}</text>
							</view>
							
						</view>
					</template>
					
					
				</view>
      </view>

			
      <!-- 挑高用 -->
      <view v-if="!isFold" style="height: 70rpx"></view>
      <!-- 上下拉 -->
      <view class="btn-box">
        <!-- <view v-if="isFold" class="btn-back"></view> -->
        <view v-if="false" class="btn-back"></view>
        <view class="btn" @click="changeHeight">
          {{ isFold ? "查看全部" : "收起" }}
          <image
            v-if="isFold"
            src="../../static/img/jt-btm.svg"
            style="transform: rotate(180deg)"
            mode=""
          ></image>
          <image
            v-if="!isFold"
            src="../../static/img/jt-btm.svg"
            mode=""
          ></image>
        </view>
      </view>
    </view>

    <!-- 支付宝待签约二维码 -->
    <view
      class="box wx-open"
      v-if="channelInfo.state == 5 && channelInfo.applyName == 'alipay'"
    >
      <view class="down-img">
        <image :src="vdata.contractImg" mode="aspectFit"></image>
        <view style="margin-top: 30rpx"
          >请使用支付宝扫描二维码，根据页面指引完成签约</view
        >
        <view class="down" @click="down(vdata.contractImg)">保存至相册</view>
      </view>
    </view>

    <!-- 微信待签约二维码 -->
    <view
      class="box wx-open"
      v-if="channelInfo.state == 5 && channelInfo.applyName == 'wxpay'"
    >
      <view class="down-img">
        <image :src="channelInfo.img" mode="aspectFit"></image>
        <view style="margin-top: 30rpx"
          >请超级管理员使用微信扫描二维码，根据页面指引完成签约</view
        >
      </view>
    </view>

    <!-- 收付通待签约二维码 -->
    <view
      class="box wx-open"
      v-if="channelInfo.state == 5 && channelInfo.applyName == 'sftpay'"
    >
      <view class="down-img">
        <image :src="vdata.contractImg" mode="aspectFit"></image>
        <view style="margin-top: 30rpx"
          >请超级管理员使用微信扫描二维码，根据页面指引完成签约</view
        >
        <view class="down" @click="down(vdata.contractImg)">保存至相册</view>
      </view>
    </view>

    <!-- 图片预览（手写非原生） -->
    <enlarge
      v-if="isPreview"
      :imgs="imgBackUrl"
      @enlargeClose="enlargeClose"
      :changeIsShow="false"
    />
  </view>
</template>

<script setup>
import qrcode from "@/util/qrcode.js";
import { ref, onMounted, reactive, inject } from "vue";
import {
  $elecContractGenerate,
  $elecContractSign,
  $fuiouUpload,
} from "@/http/apiManager.js";
import { saveHeadImgFile } from "@/util/saveImg.js"; // 用于base64图片下载
import enlarge from "@/components/JeepayUpLoad/enlarge.vue"; // 图片预览
import useBackPress from "@/hooks/useBackPress.js"; // 返回阻断函数
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
import echo from "./dataEcho/dataEcho";

const channelInfo = inject("channelInfo");

const vdata = reactive({
  contractImg: "", // 签约图片
});

let applyInfoList = ref([]); // 信息列表

// 高度切换
let isFold = ref(true);
const changeHeight = () => {
  isFold.value = !isFold.value;
};

let isPreview = ref(false); // 图片预览是否展示
let imgBackUrl = ref(""); // 图片预览大图
const openBackImg = (url) => {
  isPreview.value = true;
  imgBackUrl.value = url;
  // #ifdef H5 || APP-PLUS
  active();
  // #endif
};
// 关闭图片预览
const enlargeClose = () => {
  isPreview.value = false;
  // #ifdef H5 || APP-PLUS
  inactive();
  // #endif
};
const { active, inactive } = useBackPress(enlargeClose); // onBackPress 阻断返回

// 在这里处理不同进件渠道的签约
onMounted(() => {
  if (channelInfo.applyName == "alipay") {
    vdata.contractImg = drawQRcode(channelInfo.img); // 生成支付宝签约图片
  }
});
// 保存待签约图片
const down = (url) => {
  // #ifdef  APP-PLUS
  saveHeadImgFile(url, 80)
    .then((success) => {
      uni.showToast({ title: "保存成功", icon: "none" });
    })
    .catch((err) => {
      uni.showToast({ title: "保存失败,请重试", icon: "none" });
    });
  // #endif
  //#ifdef MP-WEIXIN
  var aa = wx.getFileSystemManager();
  aa.writeFile({
    filePath: wx.env.USER_DATA_PATH + "/ali.png",
    data: url.slice(22),
    encoding: "base64",
    success: (res) => {
      wx.saveImageToPhotosAlbum({
        filePath: wx.env.USER_DATA_PATH + "/ali.png",
        success: function (res) {
          wx.showToast({ title: "保存成功" });
        },
      });
    },
  });
  //#endif
};

// 制作图片
const drawQRcode = (url) => {
  return qrcode.drawImg(url, {
    typeNumber: 4, // 密度
    errorCorrectLevel: "Q", // 纠错等级
    size: 175, // 白色边框
  });
};

// 用于甄选数据
const getApplyInof = (val) => {
  // vdata.applyDetailInfo = val;
  applyInfoList.value = echo[channelInfo.code](val);
};

// 转换站点类型
const siteTypeHandle = (val) => {
  let text;
  switch (val) {
    case "01":
      text = "微信";
      break;
    case "02":
      text = "APP";
      break;
    case "03":
      text = "服务窗";
      break;
    case "04":
      text = "公众号";
      break;
    case "05":
      text = "其他";
      break;
    case "06":
      text = "支付宝小程序";
      break;
  }
  return text;
};

defineExpose({ getApplyInof });
</script>

<style scoped lang="scss">
.page-only {
  box-sizing: border-box;
}
.box {
  height: auto;
  transition: 0.3s;
  position: relative;
  border-radius: 20rpx;
  background: #fff;
  padding: 0rpx 40rpx;
  box-sizing: border-box;
}
.list {
  & > view {
    margin: 30rpx 0;
  }
  .title {
    font-weight: 600;
    color: #000;
  }
  .item-text {
    display: flex;
    justify-content: space-between;
  }
  .item-img {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    image {
      width: 120rpx;
      height: 120rpx;
    }
  }
}

// 微信签约
.wx-open {
  margin-top: 30rpx;
  padding: 40rpx;
  .first-title {
    font-size: 28rpx;
    color: #18191d;
    font-weight: bold;
  }
  .tips {
    font-size: 25rpx;
    color: #7e7e80;
    margin: 20rpx 0 40rpx;
  }
  .state {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
  }
  .second-title {
    font-size: 27rpx;
    color: #000;
  }
  .wx-img {
    width: 300rpx;
    height: 300rpx;
    margin: 30rpx 0 20rpx;
  }
}

// 灰色文字/
.grey {
  white-space: nowrap;
  color: #a3a3a5;
  margin-right: 20rpx;
}
// 下拉按钮
.btn {
  height: 100rpx;
  color: #3981ff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  image {
    width: 20rpx;
    height: 20rpx;
    margin-left: 20rpx;
  }
}
.btn-back {
  background: linear-gradient(transparent, #f5f6fc);
  height: 100rpx;
}
.fold {
  height: 460rpx;
  overflow: hidden;
}
.btn-box {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

// 图片预览
.preview-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
}

.margin-30 {
  margin: 30rpx 0;
}
.margin-b-20 {
  margin-bottom: 20rpx;
}
</style>
