<template>
  <div class="Mall4j app-container page-shop-detail">
    <!-- DJEAN -->
    <div class="tabs-con">
      <el-tabs v-model="activeName">
        <el-tab-pane
          :label="$t('multishop.shopInformation.baseInfo')"
          name="1"
        >
          <div v-if="activeName==='1'">
            <alertTips
              :audit-status="auditStatus"
              :company-info-process-status="companyInfoProcessStatus"
              :status-remark="statusRemark"
              :supplier-status="supplierStatus"
              :id-card-collect-process-status="idCardCollectProcessStatus"
            />
            <!-- 查看页 -->
            <base-info-show
              v-if="isBaseInfoShow"
              @close-browse="baseClose"
              @business-close="businessClose"
            />
            <!-- 修改页 -->
            <base-info
              v-else
              @close-browse="baseInfoClose"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('multishop.shopInformation.businessInfo')"
          name="2"
        >
          <div v-if="activeName==='2'">
            <!-- 查看页 -->
            <business-info-show
              v-if="isBusinessInfoShow"
              @close-browse="businessClose"
            />
            <!--修改页-->
            <business-info
              v-else
              @close-browse="businessInfoClose"
              @set-active-name="setActiveName"
              @getmodify-information="getmodifyInformation"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('multishop.shopInformation.contractInfo')"
          name="3"
        >
          <contract-info v-if="activeName==='3'" />
        </el-tab-pane>
        <el-tab-pane
          :label="$t('multishop.shopInformation.financialInfo')"
          name="4"
        >
          <alertTips
            :audit-status="auditStatus"
            :company-info-process-status="companyInfoProcessStatus"
            :status-remark="statusRemark"
            :supplier-status="supplierStatus"
            :id-card-collect-process-status="idCardCollectProcessStatus"
          />
          <financial-info v-if="activeName==='4'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { updateShopAccountProtocolNo, getAuditInfo } from '@/api/multishop/shop-process'
import { useAllinpayStore } from '@/stores/modules/allinpay.js'
import { ElMessage } from 'element-plus'
import businessInfo from './components/business-info/index.vue'
import baseInfoShow from './components/base-info-show/index.vue'
import baseInfo from './components/base-info/index.vue'
import businessInfoShow from './components/business-info-show/index.vue'
import contractInfo from './components/contract-info/index.vue'
import financialInfo from './components/financial-info/index.vue'
import alertTips from './components/alert-tips/index.vue'

// 基本信息查看显示
// 工商信息查看显示
const isBusinessInfoShow = ref(true)
// DJEAN
const route = useRoute()
const activeName = ref(route.query.activeName || '1')
const statusRemark = ref('') // 审核失败原因
const paySettlementType = useAllinpayStore.paySettlementType // 1：通联支付

const companyInfoProcessStatus = computed(() => {
  return useAllinpayStore.companyInfoProcessStatus // 企业信息审核状态 0.未提交 1.待审核 2.审核成功 3.审核失败
})

const auditStatus = computed(() => {
  return useAllinpayStore.auditStatus // 企业信息审核状态
})

const supplierStatus = computed(() => {
  return useAllinpayStore.supplierStatus // 店铺状态 -1:已删除 0: 停业中 1:营业中 2:平台下线 3:待审核 4:店铺申请中 5:申请失败 6:上线申请中
})

const idCardCollectProcessStatus = computed(() => {
  return useAllinpayStore.idCardCollectProcessStatus // 影印件采集审核状态 0.未上传 1.待审核 2.只有工商认证通过 3.只有法人信息通过 4.均审核通过
})

watch(() => companyInfoProcessStatus.value, () => {
  if ((companyInfoProcessStatus.value === 3 && auditStatus.value === -1) && paySettlementType === 1) {
    getmodifyInformation()
  }
})

watch(() => auditStatus.value, () => {
  if ((auditStatus.value === 3 && auditStatus.value === -1) && paySettlementType === 1) {
    getmodifyInformation()
  }
})
const router = useRouter()
onMounted(() => {
  if (paySettlementType === 1 && route.query.isSuccess === '1') {
    // 通联支付签约成功，则保存签约协议号
    const signAcctType = route.query.signAcctType ? Number(route.query.signAcctType) : '' // 签约类型 2.法人 3.企业
    const bizContent = route.query.bizContent ? JSON.parse(route.query.bizContent) : {}
    router.push({ query: {} })
    if (signAcctType && (bizContent && bizContent.acctProtocolNo)) {
      updateAcctProtocalNo(signAcctType, bizContent.acctProtocolNo)
    }
  } else if (route.query.isSuccess === '0') {
    ElMessage.error('签约失败')
    router.push({ query: {} })
  }
})
const isBaseInfoShow = ref(true)
const baseClose = () => {
  isBaseInfoShow.value = false
}
const baseInfoClose = () => {
  isBaseInfoShow.value = true
}
const businessInfoClose = () => {
  isBusinessInfoShow.value = true
}
const businessClose = () => {
  isBusinessInfoShow.value = false
}

const setActiveName = (val) => {
  activeName.value = val
}

// 调用接口保存签约协议号
const updateAcctProtocalNo = (signAcctType, acctProtocolNo) => {
  updateShopAccountProtocolNo({
    signAcctType,
    acctProtocolNo: acctProtocolNo + ''
  }).then(() => {})
}

// 获取申请审核情况
const getmodifyInformation = () => {
  // 走接口拿数据
  nextTick(() => {
    getAuditInfo().then(data => {
      statusRemark.value = data.remarks
    })
  })
}

</script>
<style lang="scss" scoped>
@use "index.scss";
</style>
