<template>
  <SysDialog class="basic-zoning-actions" :visible="dialog.visible" v-bind="getBindValue" @onClose="hanleOnClose"
    @onConfirm="confirm">
    <template #content>
      <el-tabs v-model="activeZoning" type="card" class="demo-tabs">
        <el-tab-pane label="口岸分区" :name="BaseZoning.ZONING_PORT">
          <BasePortZoning ref="portZoningRef" :portWithZipCodeList="zoningState.portWithZipCodeList"
            :action-type="actionType" :partition-list="zoningState.partitionList"></BasePortZoning>
        </el-tab-pane>
        <el-tab-pane label="国家/地区分区" :name="BaseZoning.ZONING_COUNTRY">
          <BaseCountryZoning ref="countryZoningRef" :countryList="countryList" :action-type="actionType"
            :partition-list="zoningState.partitionList"></BaseCountryZoning>
        </el-tab-pane>
        <el-tab-pane label="邮编分区" :name="BaseZoning.ZONING_POSTAL_CODE">
          <BasePostalCode ref="postalCodeZoningRef" :countryList="countryList" :action-type="actionType"
            :partition-list="zoningState.partitionList"></BasePostalCode>
        </el-tab-pane>
      </el-tabs>
    </template>
    <template #defineFooter>
      <div v-if="actionType === BaseZoningAction.ZONING_VIEW">
        <span class="dialog-footer">
          <el-button type="primary" @click="onClose">关闭</el-button>
        </span>
      </div>
      <div v-else>
        <el-button type="danger" @click="onClose">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </template>
  </SysDialog>
</template>
  
<script lang="ts" setup>
import { ref, reactive, provide, unref, readonly } from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import BaseCountryZoning from './components/BaseCountryZoning.vue';
import BasePortZoning from './components/BasePortZoning.vue';
import BasePostalCode from './components/BasePostalCode.vue';
import { BaseZoning, BaseZoningAction } from '@/type/BaseZoningAction';
import { zoningKey } from '@/utils/injectionKey';
import { ListIitem } from '@/api/base/BaseDataModel';
import { useDropDownData } from '@/hooks/useDropDownData';
import { isArrayLength } from '@/utils/is';

//弹框属性
const { dialog, onClose, onShow } = useDialog()
const getBindValue = ref<Recordable>({
  title: '分区管理',
  top: "4vh",
  width: 1200,
  height: 0,
  closeOnClickModal: false,
  isFooter: true
})

// 下拉列表信息
const { countryList } = useDropDownData()
const zoningState = reactive({
  portWithZipCodeList: [] as ListIitem[],
  partitionList: [] as Recordable[]
})
// 口岸分区ref
const portZoningRef = ref<{ clearForm: () => void, zoningData: Recordable }>()
// 邮编分区ref
const postalCodeZoningRef = ref<{ clearForm: () => void, zoningData: Recordable }>()
// 国家/地区分区ref
const countryZoningRef = ref<{ clearForm: () => void, zoningData: Recordable }>()
// 切换分区
const activeZoning = ref<string>(BaseZoning.ZONING_PORT);
// 分区操作状态
const actionType = ref<number>()

// 组件事件
const emit = defineEmits(['saveZoning'])

// 依赖注入
provide(zoningKey, readonly(activeZoning))

// 重置表单
const resetForm = () => {
  portZoningRef.value?.clearForm()
  postalCodeZoningRef.value?.clearForm()
  countryZoningRef.value?.clearForm()
}

// 隐藏操作
const hanleOnClose = () => {
  resetForm()
  onClose()
}

// 获取的数据
const confirm = () => {
  // 整合口岸分区数据
  const zoningData = [
    ...unref(portZoningRef)?.zoningData.partitionList,
    ...unref(countryZoningRef)?.zoningData.partitionList,
    ...unref(postalCodeZoningRef)?.zoningData.partitionList
  ]
  emit('saveZoning', zoningData)
  hanleOnClose()
}

// 弹框显示操作
const show = (portInfos: ListIitem[], partitionList: Recordable[], type: number) => {
  // 操作显示
  actionType.value = type
  zoningState.portWithZipCodeList = portInfos
  activeZoning.value = BaseZoning.ZONING_PORT
  // 分区数据
  isArrayLength(partitionList) ?
    zoningState.partitionList = partitionList : zoningState.partitionList = []
  onShow()
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>
  
<style lang="scss" scoped>
.basic-zoning-actions {
  .el-tabs__header {
    margin-bottom: 10px;
  }
}
</style>