<template>
  <!-- 商户信息添加|修改 -->
  <div class="merchantSetPage flex-col">
    <s-header :name="$t('merchantManage.merchantInformation')" :noback="false"></s-header>
    <div class="merchantSetBox">
      <div class="Body flex-col">
        <div class="Body flex-col">
          <div class="wrap1 flex-col">
            <div class="section1 flex-row justify-between">
              <span class="word3" :class="{ acttive: tabType === '0' }" @click="tabType = '0'">{{
                $t('merchantManage.essentialInformation') }}</span>
              <span class="info1" :class="{ acttive: tabType === '1' }" @click="tabType = '1'">{{
                $t('merchantManage.withdrawalData') }}</span>
            </div>
            <!-- <div class="section2 flex-col"></div> -->
            <img class="img1" referrerpolicy="no-referrer" src="../../assets/line.png" />
          </div>
          <div v-if="tabType === '0'">
            <!-- <div class="wrap2 l-flex-RC">
              <span class="info2">*</span>
              <span class="info3">{{ $t('merchantManage.region') }}：
              </span>
            </div> -->

            <!-- <span class="info5">{{ $t('merchantManage.subscriptionAdministrator') }}：</span> -->
            <van-form @submit="onSubmit">
              <div class="van-cell van-field">
                <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.accountNumber') }}</span>
                </div>
                <div class="van-field__value o-pt-8" style="text-align: left;">
                  <span> {{ adminObj.username }}</span>
                </div>
              </div>
              <!-- <div class="van-cell van-field">
                <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.relationAdmin') }}</span>
                </div>
                <div class="van-field__value o-pt-8" style="text-align: left;">
                  <span> {{ relationObj.username }}</span>
                </div>
              </div> -->
              <van-field v-model="relationObj.relationUsername" name="password"
                :label="$t('merchantManage.relationAdmin')"
                :placeholder="$t('merchantManage.relationAdminPlaceholder')" />
              <van-field v-model="adminObj.name" name="password" :label="$t('merchantManage.fullNameLabel')"
                :placeholder="$t('merchantManage.fullNamePlaceholder')"
                :rules="[{ required: true, message: $t('merchantManage.fullNamePlaceholder') }]" />
              <van-field v-model="adminObj.password" name="password" type="password" clearable
                :label="$t('merchantManage.passwordLabel')" :placeholder="$t('merchantManage.passwordPlaceholder')" />
              <span class="txt3">{{ $t('merchantManage.leavBlanToIndiNoModi') }}</span>
              <van-field v-model="adminObj.checkPassword" name="password" type="password" clearable
                :label="$t('merchantManage.confirmPasswordLabel')"
                :placeholder="$t('merchantManage.confirmPasswordPlaceholder')" />
              <van-field v-model="adminObj.email" name="password" :label="$t('merchantManage.mailbox')"
                :placeholder="$t('merchantManage.mailboxPlaceholder')" />
              <van-field v-model="adminObj.phone" name="password" :label="$t('merchantManage.telephone')"
                :placeholder="$t('merchantManage.telephonePlaceholder')" />
              <van-field v-model="adminObj.tradeMerchantNo" name="password"
                :label="$t('merchantManage.merchantFilingNumberLabel')"
                :placeholder="$t('merchantManage.merchantFilingNumberPlaceholder')" />
              <div class="van-cell van-field">
                <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.domesticOrNot') }}:</span></div>
                <div class="van-cell__value van-field__value radioBox">
                  <van-radio-group v-model="adminObj.ifForeign" direction="horizontal">
                    <van-radio name="0" icon-size="18px">{{ $t('merchantManage.yes') }}</van-radio>
                    <van-radio name="1" icon-size="18px">{{ $t('merchantManage.no') }}</van-radio>
                  </van-radio-group>
                </div>
              </div>
              <div v-if="adminType === 0 || adminType === 1">
                <div class="van-cell van-field">
                  <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.discountCode') }}</span>
                  </div>
                  <div class="van-cell__value van-field__value radioBox">
                    <van-radio-group v-model="adminObj.promoCodeOpen" direction="horizontal">
                      <van-radio name="0" icon-size="18px">{{ $t('merchantManage.yes') }}</van-radio>
                      <van-radio name="1" icon-size="18px">{{ $t('merchantManage.no') }}</van-radio>
                    </van-radio-group>
                  </div>
                </div>
                <div class="van-cell van-field">
                  <div class="van-cell__title van-field__label"><span>{{ $t('merchantManage.paymentPlatform') }}</span>
                  </div>
                  <div class="van-cell__value van-field__value radioBox">
                    <van-radio-group v-model="adminObj.payPlatform" direction="horizontal">
                      <van-radio name="0" icon-size="18px">{{ $t('merchantManage.convergence') }}</van-radio>
                      <van-radio name="1" icon-size="18px">{{ $t('merchantManage.huifuPaymnt') }}</van-radio>
                    </van-radio-group>
                  </div>
                </div>
              </div>
              <van-row justify="space-around" style="padding: 1em;">
                <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{
                  $t('merchantManage.modificationSubmission') }}
                </van-button>
              </van-row>
            </van-form>
          </div>
          <div v-if="tabType === '1'" class="tab2">
            <div class="kBordBott o-w o-pb-10">
              <span class="info3">{{ $t('merchantManage.merchantType') }}：{{ adminMchObj.altMerchantType == 10 ? "个人" :
                (adminMchObj.altMerchantType == 12 ? "企业" : "") }}</span>
              <span class="info4">{{ $t('merchantManage.contactName') }}：{{ adminMchObj.busiContactName }}</span>
              <span class="word4">{{ $t('merchantManage.cellPhone') }}：{{ adminMchObj.busiContactMobileNo }}</span>
            </div>
            <div class="kBordBott o-w o-pb-10">

              <span class="txt2">{{ $t('merchantManage.nameOfLegalPerson/Individual') }}：{{ adminMchObj.legalPerson
              }}</span>
              <span class="word5">{{ $t('merchantManage.phoneNumberOfLegalPerson/Individual') }}：{{ adminMchObj.phoneNo
              }}</span>
              <span class="word6">{{ $t('merchantManage.legalPerson/IndividualIDNumber') }}：{{ adminMchObj.idCardNo
              }}</span>
              <span class="txt3">{{ $t('merchantManage.validityOfIDCard') }}：{{ adminMchObj.idCardExpiry }}</span>
              <span v-if="adminMchObj.altMerchantType == 12" class="txt4">{{ $t('merchantManage.businessLicenseCode')
              }}：{{ adminMchObj.licenseNo }}</span>
              <span v-if="adminMchObj.altMerchantType == 12" class="word7">{{
                $t('merchantManage.validityOfBusinessLicense') }}：{{ adminMchObj.licenseExpiry
  }}</span>
              <span class="txt5">{{ $t('merchantManage.natureOfBusiness') }}：{{ adminMchObj.manageScope }}</span> <span
                class="word8">{{ $t('merchantManage.businessAddress') }}：{{ adminMchObj.manageAddr }}</span>
            </div>

            <div class="block5 flex-row justify-between">
              <span class="txt6">{{ $t('merchantManage.accountType') }}
                ：{{ adminMchObj.bankAccountType === 1 ? $t('merchantManage.debitCard') : (adminMchObj.bankAccountType ===
                  4
                  ? $t('merchantManage.corporateAccount') : "") }}</span>
              <!-- <span class="word9"></span> -->
            </div>
            <span class="word10">{{ $t('merchantManage.bankAccountName') }}：{{ adminMchObj.bankAccountName }}</span>
            <span class="word11">{{ $t('merchantManage.bankAccount') }}：{{ adminMchObj.bankAccountNo }}</span>
            <span v-if="adminMchObj.bankAccountType == 4" class="word12">{{ $t('merchantManage.bankNo') }}：{{
              adminMchObj.bankChannelNo }}</span>
            <div v-if="adminType < 2">
              <span class="word12">{{ $t('merchantManage.joinpayMch') }}：{{ joinpayState }}</span>
              <span class="word12">{{ $t('merchantManage.huifuMch') }}：{{ huifuState }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getAdmin, getRelation, getAdminMch, updateAdmin, getHuifuMch, getRelationAdminId } from "@/service/merchantManage";
import { showFailToast, showSuccessToast } from "vant";
import { useRoute } from "vue-router";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import { useI18n } from "vue-i18n";

export default {
  components: { sHeader },
  setup() {
    // 引入语言
    const { t } = useI18n();
    const tabType = ref('0');
    const user = getLoginUser();
    const adminType = ref(user.type);
    const route = useRoute();
    const merchantId = ref('');
    const adminObj = ref({});
    const relationObj = ref({});
    const adminMchObj = ref({});
    const huifuMchObj = ref({});
    const ifForeign = ref('0');
    const huifuState = ref('未入驻');
    const joinpayState = ref('未入驻');
    onMounted(async () => {
      // 加载样式
      styleUrl('merchantManage');
      merchantId.value = route.query.merchantId;
      getAdminFun();
      getRelationFun();
      getAdminMchFun();
      getHuifuMchFun();

    });
    const getAdminFun = async () => {
      const { data } = await getAdmin({ id: merchantId.value });
      if (data.code === "00000") {
        adminObj.value = data.data;
        adminObj.value.password = '';
        adminObj.value.checkPassword = '';
        if (data.data.payPlatform == null) {
          adminObj.value.payPlatform = '0';
        }
        if (data.data.promoCodeOpen == null) {
          adminObj.value.promoCodeOpen = '1';
        }
        ifForeign.value = data.data.ifForeign;
      }
      // else { showFailToast(data.message); }
      // console.log('getAdminFun', data);
    };
    const getRelationFun = async () => {
      const { data } = await getRelation({ adminId: merchantId.value });
      if (data.code === "00000") {
        if (data.data != null) {
          relationObj.value = data.data;
          relationObj.value.relationUsername = data.data.username;
        }
      }
    }
    const getAdminMchFun = async () => {
      const { data } = await getAdminMch({ id: merchantId.value });
      if (data.code === "00000") {
        if (data.data != null) {
          // adminMchObj.signStatus == '签约成功' ?
          //       adminMchObj.signStatus : '未签约'
          adminMchObj.value = data.data;
          if (adminMchObj.value.approveStatus == '审核通过') {
            if (adminMchObj.value.signStatus == '签约成功') {
              joinpayState.value = adminMchObj.value.signStatus;
            } else {
              if (adminMchObj.value.approveNote != null && adminMchObj.value.approveNote != '') {
                joinpayState.value = adminMchObj.value.approveNote;
              }
            }
          } else {
            if (adminMchObj.value.approveNote != null && adminMchObj.value.approveNote != '') {
              joinpayState.value = adminMchObj.value.approveNote;
            }
          }
        }
      }
      // console.log('getAdminMchFun', data);
      // console.log('adminMchObj', adminMchObj.value.signStatus);
    }
    const getHuifuMchFun = async () => {
      const { data } = await getHuifuMch({ adminId: merchantId.value });
      if (data.code === "00000") {
        if (data.data != null) {
          huifuMchObj.value = data.data;
          if (huifuMchObj.value.status == '2') {
            huifuState.value = '签约成功';
          } else {
            if (huifuMchObj.value.auditDesc != null && huifuMchObj.value.auditDesc != '') {
              huifuState.value = huifuMchObj.value.auditDesc;
            }
          }

        }
      }
      // console.log('getHuifuMchFun', data);
    }
    const onSubmit = async () => {
      try {
        if (relationObj.value.relationUsername != null) {
          const result = await getRelationAdminId({ relationUsername: relationObj.value.relationUsername });
          if (result.data.code === "00000") {
            if (result.data.data != null) {
              adminObj.value.relationAdminId = result.data.data;
            }
          }
        }
        // console.log("relationAdminId --> ", adminObj.value.relationAdminId);
        const params = {
          id: adminObj.value.id,
          name: adminObj.value.name,
          username: adminObj.value.username,
          relationAdminId: adminObj.value.relationAdminId,
          ifForeign: adminObj.value.ifForeign,
          phone: adminObj.value.phone,
          email: adminObj.value.email,
          tradeMerchantNo: adminObj.value.tradeMerchantNo,
        };
        if (adminType.value === 0 || adminType.value === 1) {
          params.promoCodeOpen = adminObj.value.promoCodeOpen;
          params.applyStartTime = adminObj.value.applyStartTime;
          params.applyEndTime = adminObj.value.applyEndTime;
          params.payPlatform = adminObj.value.payPlatform;
        }
        if (adminObj.value.password !== '') {
          if (adminObj.value.checkPassword === '') { showFailToast(t('merchantManage.confirmPasswordPlaceholder')); return; }
          if (adminObj.value.password === adminObj.value.checkPassword) {
            params.password = adminObj.value.password;
          } else {
            showFailToast(t('merchantManage.theTwoPasswordsAreDifferent'));
          }
        }
        const { data } = await updateAdmin(params);
        if (data.code === "00000") {
          showSuccessToast(t('merchantManage.modificationSucceeded'));
          setTimeout(() => {
            // router.go(0);
            getAdminFun();
          }, 1500);
        } else { showFailToast(data.message); }
        console.log('onSubmit', data);
      } catch (error) {
        // 如果上面的方法执行失败，会执行到这里
        console.error('提交管理员信息失败', error);
      }
    }
    return {
      tabType,
      adminType,
      adminObj,
      relationObj,
      adminMchObj,
      huifuMchObj,
      onSubmit,
      joinpayState,
      huifuState,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";
@import "../../styles/merchantManage/index.less";
</style>
