<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" :before-leave="beforeTabLeave">
      <el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name">
        <ProductBaseInfo
          :activeName="activeName"
          v-if="tab.name === 'baseInfo'"
          :detailInfo="productBaseInfo"
          @handleSuccess="handleSuccess"
        />
        <div v-if="tab.name === 'comeCommission'">
          <ComeInfo :activeName="activeName"></ComeInfo>
        </div>
        <div v-if="tab.name === 'sendCommission'">
          <SendInfo :activeName="activeName"></SendInfo>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="InsuranceProduct">
import { getProductDetail } from '@/api/product/index'
import { ref } from 'vue'
import ProductBaseInfo from './components/productBaseInfo.vue'
import SendInfo from './components/sendInfo.vue'
import ComeInfo from './components/comeInfo.vue'

const route = useRoute()
const { proxy } = getCurrentInstance()

const activeName = ref('baseInfo')
const productBaseInfo = ref({}) //产品基本信息

const tabsList = ref([
  {
    label: '基础信息',
    name: 'baseInfo',
    key: 'baseInfo',
    id: 1
  },
  {
    label: '来佣管理',
    name: 'comeCommission',
    id: 2,
    key: 'comeCommission'
  },
  {
    label: '发佣管理',
    name: 'sendCommission',
    id: 3,
    key: 'sendCommission'
  }
])
const handleSuccess = (source, id) => {
  if (source === 'baseInfo') {
    getProductInfo('comeCommission', id)
  }
}
// Tab切换前的验证
const beforeTabLeave = (activeTabName, oldTabName) => {
  if (activeTabName !== 'baseInfo' && productBaseInfo.value.apiSpeciesPriceDtoList.length == 0) {
    proxy.$modal.msgError('请先提交产品相关信息，再进行下一步操作！')
    return false
  }
  return true
}
/** 获取产品详情 */
function getProductInfo(tabName, id) {
  let productLaunchBizId = ''
  if (route.query.source && route.query.source == 'copy') {
    productLaunchBizId = id
  } else {
    productLaunchBizId = route.query.productLaunchBizId
  }
  getProductDetail(productLaunchBizId).then(response => {
    if (response.code === 200) {
      productBaseInfo.value = response.data
      activeName.value = tabName
    } else {
      proxy.$modal.msgError(response.msg)
    }
  })
}
if (route.query.source && route.query.source == 'copy') {
  getProductInfo('baseInfo', route.query.productLaunchBizId)
} else {
  getProductInfo('baseInfo')
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 89.8vh !important;
  box-sizing: border-box;
  /* background-color: rgb(247 247 247) !important; */
  /* padding: 0 !important; */
  /* height: 500px !important;
  overflow: hidden;
  overflow-y: scroll; */
}
</style>
