<template>
  <!-- 提现账号 -->
  <div class="joinpayMchCheckPage flex-col">
    <s-header :name="$t('taskMessage.joinpayMchCheck.withAccoDetail')" :noback="false"></s-header>
    <div v-if="detailType == 0 && infoData" class="joinpayMchCheckBox flex-col">
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.merchantName') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.altMchName }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.merchantType') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.altMerchantType === 10 ? $t('taskMessage.joinpayMchCheck.personal') : '' }}
            {{ infoData.altMerchantType === 11 ? $t('taskMessage.joinpayMchCheck.indivBusines') : '' }}
            {{ infoData.altMerchantType === 12 ? $t('taskMessage.joinpayMchCheck.enterprise') : '' }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.contactName') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.busiContactName }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.indiOrPersName') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.legalPerson }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.indiOrPersPhone') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.phoneNo }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.indiOrPersPhoneIdCard') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.idCardNo }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.idCardValid') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.idCardExpiry }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.accountType') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.bankAccountType === '1' ? $t('taskMessage.joinpayMchCheck.debitCard') : '' }}
            {{ infoData.bankAccountType === '4' ? $t('taskMessage.joinpayMchCheck.corporateAccount') : '' }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.bankAccountName') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.bankAccountName }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.bankAccount') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.bankAccountNo }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.interBankNo') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.bankChannelNo }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.settlMethod') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.settMode === '1' ? $t('taskMessage.joinpayMchCheck.autoSettByConvergence') : '' }}
            {{ infoData.settMode === '2' ? $t('taskMessage.joinpayMchCheck.manuSettByMercPlatform') : '' }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.settlCycle') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.riskDay }}{{ $t('taskMessage.joinpayMchCheck.day') }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.businessNature') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.manageScope }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.businessAddress') }}:</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.manageAddr }}
          </div>
        </div>
      </div>
      <div v-if="isOper" class="itemRow" style="display: flex; justify-content: center; padding: 0.5rem;">
        <van-button span="5" round type="primary"
          style="height: 2em; padding: 0 2em; margin: 0 1em; background: rgb(255 0 0 / 20%); color: #ff0000; border-color: #ff0000;"
          @click="changeStatusFun('3')">
          {{ $t('taskMessage.refuse') }}
        </van-button>
        <van-button span="5" round type="primary"
          style="height: 2em; padding: 0 2em; margin: 0 1em; background: rgb(25 137 250 / 20%); color: #1989fa;"
          @click="changeStatusFun('1')">
          {{ $t('taskMessage.agree') }}
        </van-button>
      </div>
    </div>
    <div v-if="detailType == 1 && infoData" class="joinpayMchCheckBox flex-col">
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.merchantID') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.adminId }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.merchantType') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.type == 0 ? $t('taskMessage.joinpayMchCheck.personal') :
              $t('taskMessage.joinpayMchCheck.enterprise') }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.merchantName') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.regName }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.shortName') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.shortName }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.contactName') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.name }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.phone') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.phone }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.email') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.email }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.certNo') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.certNo }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.cardName') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.cardName }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.bankAccount') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.cardNo }}
          </div>
        </div>
      </div>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <label for="van-field-3-input">{{ $t('taskMessage.joinpayMchCheck.mp') }}</label>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            {{ infoData.mp }}
          </div>
        </div>
      </div>
      <div v-if="isOper && (infoData.status == '1' || infoData.status == '4')" class="itemRow"
        style="display: flex; justify-content: center; padding: 0.5rem;">
        <van-button span="5" round type="primary"
          style="height: 2em; padding: 0 2em; margin: 0 1em; background: rgb(255 0 0 / 20%); color: #ff0000; border-color: #ff0000;"
          @click="changeStatusFun('3')">
          {{ $t('taskMessage.refuse') }}
        </van-button>
        <van-button span="5" round type="primary"
          style="height: 2em; padding: 0 2em; margin: 0 1em; background: rgb(25 137 250 / 20%); color: #1989fa; border-color: #1989fa;"
          @click="changeStatusFun('1')">
          {{ $t('taskMessage.agree') }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginUser } from "@/common/js/utils";
import { showFailToast, showSuccessToast } from "vant";
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from "vue-router";
import sHeader from "@/components/SimpleHeader";
import { gettJoinpayMchCheckInfo, changetJoinpayMchCheckStatus, auditAddMerchant, auditUpdateMerchant } from "@/service/taskMessage";
import { useI18n } from "vue-i18n";

export default {
  components: { sHeader },
  setup() {
    // 引入语言
    const { t } = useI18n();
    // 获取用户信息
    const user = getLoginUser();
    const route = useRoute();
    const router = useRouter();
    let infoId = '';
    let infoType = '';
    let infoData = ref(null);
    // 是汇聚还是杉德 0 汇聚 1杉德
    const detailType = ref(0);
    // 是否有操作的权限
    const isOper = ref(true);
    // 初始化页面获取列表
    onMounted(async () => {
      infoId = route.query.infoId;
      infoType = route.query.infoType;
      // 根据路由参数赋值
      detailType.value = infoType || '';
      getInfoData();
      // 如果是type大于1，那么不能有操作的权限
      if (user.type > 1) {
        isOper.value = false;
      }
    });
    const getInfoData = async () => {
      const { data } = await gettJoinpayMchCheckInfo({ id: infoId, type: infoType });
      if (data.code === '00000') {
        infoData.value = data.data;
      } else { showFailToast(data.message); }
      console.log('getInfoData', infoData);
      console.log(infoData.value.status);
    }
    const changeStatusFun = async (status) => {
      if (detailType.value == 0) {
        const { data } = await changetJoinpayMchCheckStatus({ type: infoType, id: infoId, status: status, });
        if (data.code === '00000') {
          showSuccessToast(data.message);
          router.push({ path: '/taskJoinPayMchCheck' })
        } else { showFailToast(data.message); }
      } else {
        // 商户入驻
        if (infoData.value.status == '1') {
          const { data } = await auditAddMerchant({ id: infoId, status: status, });
          if (data.code === '00000') {
            showSuccessToast(t('taskMessage.joinpayMchCheck.successful'));
            setTimeout(() => {
              router.go(-1);
            }, 1500);
          } else { showFailToast(data.message); }
        } else if (infoData.value.status == '4') {
          // 商户修改
          const { data } = await auditUpdateMerchant({ id: infoId, status: status, });
          if (data.code === '00000') {
            showSuccessToast(t('taskMessage.joinpayMchCheck.successful'));
            setTimeout(() => {
              router.go(-1);
            }, 1500);
          } else { showFailToast(data.message); }
        }
      }
    }
    return {
      infoData,
      changeStatusFun,
      detailType,
      isOper,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../../../common/style/common.less";
@import "./index.less";
</style>
