<template>
  <!-- 该页码为填写信息的组件 -->
  <!-- 只读文件 -->
  <readOnlyInfo
    v-if="isDisable"
    ref="applyInfoRef"
    applyName="zftpay"
  ></readOnlyInfo>

  <view v-if="!isDisable">
    <uni-collapse ref="collapse">
      <uni-collapse-item title="主体信息" class="coll-title" :open="true">
        <view class="content">
          <JeePayForm text="商户类型">
            <uni-data-checkbox
              v-model="applyDetailInfo.merchantType"
              :localdata="merchantTypeList"
            ></uni-data-checkbox>
          </JeePayForm>

          <!-- 个人不需要营业执照 -->
          <template v-if="applyDetailInfo.merchantType != 1">
            <JeePayForm text="营业执照照片">
              <JeepayUpLoad
                ocrFlag="license"
                :imgUrl="applyDetailInfo.licenseImg"
                @uploadSuccess="uploadSuccess($event, 'licenseImg')"
                @clear="clear('licenseImg')"
              />
            </JeePayForm>

            <JeePayForm
              text="营业执照编号"
              v-model:value="applyDetailInfo.licenseNo"
            />
          </template>

          <JeePayForm
            text="用户名称"
            v-model:value="applyDetailInfo.mchFullName"
            tipText="个体工商户请填写法人姓名"
          />

          <JeePayForm text="法人身份证人像面照">
            <JeepayUpLoad
              ocrFlag="idCard"
              :imgUrl="applyDetailInfo.idcard1Img"
              @uploadSuccess="uploadSuccess($event, 'idcard1Img')"
              @clear="clear('idcard1Img')"
            />
          </JeePayForm>

          <JeePayForm
            text="法人身份证姓名"
            v-model:value="applyDetailInfo.idcardName"
          />
          <JeePayForm
            text="法人身份证号"
            v-model:value="applyDetailInfo.idcardNo"
          />

          <JeePayForm text="法人身份证国徽面照片">
            <JeepayUpLoad
              ocrFlag="idCard"
              :imgUrl="applyDetailInfo.idcard2Img"
              @uploadSuccess="uploadSuccess($event, 'idcard2Img')"
              @clear="clear('idcard2Img')"
            />
          </JeePayForm>

          <JeePayForm text="法人身份证起始有效期">
            <termOfValidity
              :defaultDate="applyDetailInfo.idcardEffectBegin"
              @publicSelect="publicSelect($event, 'idcardEffectBegin')"
              :isEnd="false"
            />
          </JeePayForm>

          <JeePayForm text="法人身份证结束有效期">
            <termOfValidity
              :defaultDate="applyDetailInfo.idcardEffectEnd"
              @publicSelect="publicSelect($event, 'idcardEffectEnd')"
            />
          </JeePayForm>
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="经营信息" class="coll-title">
        <view class="content">
          <JeePayForm text="经营类目">
            <jeeDataPicker
              :code="codeBack.mccCode"
              :localdata="mccAli"
              @change="publicSelect($event, 'mccCode')"
              paramType="splicing"
            />
          </JeePayForm>

          <JeePayForm text="资质图片">
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.industryQualificationImage"
              @uploadSuccess="
                uploadSuccess($event, 'industryQualificationImage')
              "
              @clear="clear('industryQualificationImage')"
            />
          </JeePayForm>

          <JeePayForm
            text="商户简称"
            v-model:value="applyDetailInfo.mchShortName"
          />
          <JeePayForm
            text="商户联系人姓名"
            v-model:value="applyDetailInfo.contactName"
          />
          <JeePayForm
            text="商户联系人手机号"
            v-model:value="applyDetailInfo.contactPhone"
          />

          <JeePayForm text="商户经营省市县">
            <jeeDataPicker
              :code="codeBack.areaCode"
              :localdata="address"
              @change="publicSelect($event, 'areaCode')"
              paramType="arr"
            />
          </JeePayForm>

          <JeePayForm text="商户详细地址" v-model:value="applyDetailInfo.address" />

          <JeePayForm text="门头照">
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.storeOuterImg"
              @uploadSuccess="uploadSuccess($event, 'storeOuterImg')"
              @clear="clear('storeOuterImg')"
            />
          </JeePayForm>

          <JeePayForm text="店内环境照">
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.storeInnerImg"
              @uploadSuccess="uploadSuccess($event, 'storeInnerImg')"
              @clear="clear('storeInnerImg')"
            />
          </JeePayForm>
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="结算账户" class="coll-title">
        <view class="content">
          <JeePayForm text="结算类型">
            <uni-data-checkbox
              v-model="applyDetailInfo.defaultSettleType"
              :localdata="defaultSettleTypeList"
            ></uni-data-checkbox>
          </JeePayForm>

          <JeePayForm
            text="结算支付宝账号"
            v-model:value="applyDetailInfo.alipayLogonId"
            v-if="applyDetailInfo.defaultSettleType == 'alipayAccount'"
          />
          <template v-if="applyDetailInfo.defaultSettleType == 'bankCard'">
            <JeePayForm text="账户类型">
              <uni-data-checkbox
                v-model="applyDetailInfo.settAccountType"
                :localdata="settlementTypeList"
              ></uni-data-checkbox>
            </JeePayForm>

            <JeePayForm
              text="银行开户名"
              v-model:value="applyDetailInfo.settAccountName"
            />
            <JeePayForm
              text="银行账号"
              v-model:value="applyDetailInfo.settAccountNo"
            />
            <JeePayForm
              text="银行名称"
              v-model:value="applyDetailInfo.settAccountBankName"
            />
            <JeePayForm
              text="银行简称"
              v-model:value="applyDetailInfo.accountInstId"
            />

            <JeePayForm text="开户行分支行所在地区">
              <jeeDataPicker
                :code="codeBack.bankCode"
                :localdata="address"
                @change="publicSelect($event, 'settAccountBankBranchAreaCode')"
                paramType="arr"
              />
            </JeePayForm>

            <JeePayForm
              text="开户支行名称"
              v-model:value="applyDetailInfo.settAccountBankBranchName"
            />

            <JeePayForm text="授权函照">
              <JeepayUpLoad
                :imgUrl="applyDetailInfo.licenseAuthLetterImage"
                @uploadSuccess="uploadSuccess($event, 'licenseAuthLetterImage')"
                @clear="clear('licenseAuthLetterImage')"
              />
            </JeePayForm>
          </template>
        </view>
      </uni-collapse-item>

      <uni-collapse-item title="签约信息站点资料" class="coll-title">
        <view class="content">
          <view class="item">
            <view class="title"
              ><text class="require">*</text><text>签约支付宝账号</text></view
            >
            <input
              type="text"
              v-model="applyDetailInfo.bindingAlipayLogonId"
              placeholder="请输入签约支付宝账号"
            />
          </view>

          <view class="check">
            <checkbox-group
              @change="publicSelect($event, 'zftService')"
              class="check-box"
            >
              <label v-for="(item, index) in plainOptions" :key="index">
                <view>
                  <checkbox
                    :value="item.value"
                    :checked="applyDetailInfo.zftService.includes(item.value)"
                  />
                </view>
                <view>{{ item.label }}</view>
              </label>
            </checkbox-group>
          </view>

          <view class="site">
            <text class="title">站点信息</text>
            <view class="btn" @click="addSite">
              <text>添加站点</text>
              <text class="add">+</text>
            </view>
          </view>

          <template v-if="applyDetailInfo.siteInfos.length > 0">
            <view
              class="site-list"
              v-for="(item, index) in applyDetailInfo.siteInfos"
              :key="index"
            >
              <view class="site-item" style="padding: 0">
                <view class="title">站点类型</view>
                <radio-group
                  class="radio-group"
                  @change="siteTypeChange($event, index)"
                >
                  <!-- 注意这里也是一个v-for 不能与父元素的冲突 -->
                  <label
                    class="radio"
                    v-for="(siteTtem, siteIndex) in siteInfoList"
                    :key="index"
                    ><radio
                      :value="siteTtem.value"
                      :checked="
                        applyDetailInfo.siteInfos[index].siteType ==
                        siteTtem.value
                      "
                    />
                    {{ siteTtem.label }}
                  </label>
                </radio-group>
              </view>

              <view class="site-item">
                <view class="title">站点地址</view>
                <input
                  type="text"
                  v-model="item.siteUrl"
                  placeholder="请输入站点地址"
                />
              </view>

              <view class="site-item">
                <view class="title">站点名称</view>
                <input
                  type="text"
                  v-model="item.siteName"
                  placeholder="请输入站点名称"
                />
              </view>

              <view class="site-item">
                <view class="title">测试账号</view>
                <input
                  type="text"
                  v-model="item.account"
                  placeholder="请输入测试账号"
                />
              </view>

              <view class="site-item">
                <view class="title">测试密码</view>
                <input
                  type="text"
                  v-model="item.password"
                  placeholder="请输入测试密码"
                />
              </view>

              <view class="site-del" @click="siteDel(index)"> 删除 </view>
            </view>
          </template>
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script setup>
import { ref, reactive, toRaw, onMounted, inject } from "vue";
import address from "@/components/applyJson/address.json"; // 地址
import mccAli from "@/components/applyJson/zftMcc.json"; // 行业
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
import readOnlyInfo from "../components/readOnlyInfo.vue"; // 只读文件
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
import tool from "@/util/tool.js"; // 工具类函数
import termOfValidity from "@/components/applyComponents/termOfValidity.vue"; // 选择证件有效期
import JeeDataPicker from "@/components/applyComponents/dataPicker.vue"; // 通用级联选择
import { filterDcit } from "@/hooks/dict"; // 字典
const merchantTypeList = reactive(filterDcit(["A0", "A1", "A2"])); // 商户类型
const defaultSettleTypeList = reactive(filterDcit(["F0", "F1"])); // 结算类型
const settlementTypeList = reactive(filterDcit(["B0", "B1"])); // 账户类型

const channelInfo = inject('channelInfo')

const emit = defineEmits(["applyHandle"]);
// 商户进件详细信息（JSON类型字符串）
const applyDetailInfo = reactive({
  merchantType: 3, // 商户类型 默认为3 代表企业
  productType: 1, //产品类型
  defaultSettleType: "bankCard", // 结算类型
  siteInfos: [], // 选择站点
  zftService: [], // 选择服务
});

// 状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
// 状态为 1,2,4,5 开启disable  (也就是状态不为 0 3)
let isDisable = ref(false);
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;

// 通用radio checkbox选择事件 回调函数
const publicSelect = (e, key) => {
  applyDetailInfo[key] = e.detail.value;
  if (key == "merchantType") applyDetailInfo[key] = Number(e.detail.value);
};

// 服务选项
const plainOptions = ref([
  { label: "当面付", value: "当面付" },
  { label: "APP支付", value: "app支付" },
  { label: "WAP支付", value: "wap支付" },
  { label: "电脑支付", value: "电脑支付" },
  { label: "小程序支付", value: "小程序支付" },
]);

// 选择站点下拉选择内容
const siteInfoList = ref([
  { value: "01", label: "微信" },
  { value: "02", label: "APP" },
  { value: "03", label: "服务窗" },
  { value: "04", label: "公众号" },
  { value: "05", label: "其他" },
  { value: "06", label: "支付宝小程序" },
]);

// 添加站点
const addSite = () => {
  applyDetailInfo.siteInfos.push({
    siteType: "", // 站点类型
    siteUrl: "", // 站点地址
    siteName: "", // 站点名称
    account: "", // 站点账号
    password: "", // 站点密码
  });
};

// 删除站点
const siteDel = (index) => applyDetailInfo.siteInfos.splice(index, 1);

// 切换站点类型
const siteTypeChange = (e, index) =>
  (applyDetailInfo.siteInfos[index].siteType = e.detail.value);

// 上传图片成功
const uploadSuccess = (res, name) => {
  applyDetailInfo[name] = res.data;
  if (name === "licenseImg") {
    applyDetailInfo.licenseNo = res.ocrInfo.licenseNo;
    applyDetailInfo.licenseEffectEnd = res.ocrInfo.licenseEffectEnd; // 有效期end
  } else if (name == "idcard1Img") {
    applyDetailInfo.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
    applyDetailInfo.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
  } else if (name == "idcard2Img") {
    applyDetailInfo.idcardEffectBegin = res.ocrInfo.idcardEffectBegin; // 有效期
    applyDetailInfo.idcardEffectEnd = res.ocrInfo.idcardEffectEnd; // 有效期end
  }
};

// 清除图片  仅前端
const clear = (name) => (applyDetailInfo[name] = "");

// 发起进件
const launchApply = (isTempData) => {
  emit("applyHandle", {
    name: "zftpay",
    isTempData,
    applyDetailInfo,
    formCheck: [
      applyDetailInfo.defaultSettleType,
      applyDetailInfo.merchantType,
    ],
  });
};

// 行业类型，地理位置回显
let codeBack = reactive({
  areaCode: "", // 商户地理位置回显
  bankCode: "", // 银行地址回显
  mccCode: "", // 行业回显
});

const applyInfoRef = ref();

// 合并信息方法, 智能读取，和信息回显，通过此方法合并
const assignObj = (obj) => {
  // 开启只读模式
  if (isDisable.value) {
    // 开启只读默认需要将 mcc码，地址码，银行地址码转为文字
    let mccCodeText, areaCodeText, bankCodeText, code, mccInfo;

    // mcc文字回显
    if (obj.mccCode) code = obj.mccCode.split("_")[1];
    for (var i = 0; i < mccAli.length; i++) {
      mccInfo = mccAli[i].children.find((val) => val.value == code);
      if (mccInfo) break;
    }
    obj.mccCodeText = obj.mccCode.split("_")[0] + "/" + mccInfo.text;

    obj.areaCodeText = tool.addressBack(obj.areaCode, address); // 地理位置文字回显
    obj.bankCodeText = tool.addressBack(
      obj.settAccountBankBranchAreaCode,
      address
    ); // 银行地理位置文字回显

    // 传给只读组件
    applyInfoRef.value.getApplyInof(obj);
  }

  Object.assign(applyDetailInfo, obj);

  codeBack.mccCode = obj.mccCode;
  obj.areaCode ? (codeBack.areaCode = obj.areaCode[2]) : null;
  applyDetailInfo.mccCode
    ? (codeBack.mccCode = applyDetailInfo.mccCode.split("_")[1])
    : null;
};

defineExpose({ launchApply, assignObj });
</script>

<style scoped lang="scss">
@import "../static/information.scss";
.check-box {
  display: flex;
  flex-wrap: wrap;
  padding: 35rpx 30rpx 35rpx 30rpx;
}
.uni-label-pointer {
  margin-right: 20rpx;
}
.site {
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  color: #666f80;
  .title {
    font-size: 28rpx;
  }
  .btn {
    .add {
      border: 1px dashed #ddd;
      display: inline-block;
      width: 16px;
      height: 16px;
      text-align: center;
      line-height: 16px;
      margin-left: 10px;
      color: #666f80;
    }
  }
}
.site-list {
  border: 1px solid #ddd;
  border-radius: 20rpx;
  margin: 30rpx;
  padding: 30rpx;
  .site-item {
    display: flex;
    padding: 20rpx 0;
    .title {
      text-align: left;
      font-weight: 500;
      font-size: 28rpx;
      color: #666f80;
      margin-right: 20rpx;
      white-space: nowrap;
    }
  }
  .site-del {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 280rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 10rpx;
    background: #f00;
    font-weight: 500;
    font-size: 30rpx;
    color: #fff;
  }
}
input,
textarea {
  flex-grow: 1;
  text-align: right;
  font-size: 28rpx;
}
</style>
