<!-- 邮编分区 -->
<template>
  <div class="postal-code-zoning">
    <!-- 表单控件 -->
    <BaseForm @register="registerForm" />
    <el-form ref="ruleFormTableRef" class="form-table-postalcode" :model="tableFormPortCodeZoning">
      <BaseTable @register="registerFormTable">
        <!-- 自定义插槽 -->
        <template #startZipCode="scope">
          <el-form-item v-if="scope.$index >= 0" :prop="`dataSource.${scope.$index}.startZipCode`"
            :required="isObjectKeys(scope.row)">
            <el-input v-model="scope.row.startZipCode" @blur="hanleCancelValida" :disabled="showAction" />
          </el-form-item>
        </template>
        <template #endZipCode="scope">
          <el-form-item v-if="scope.$index >= 0" :prop="`dataSource.${scope.$index}.endZipCode`"
            :required="isObjectKeys(scope.row)">
            <el-input v-model="scope.row.endZipCode" @blur="hanleCancelValida" :disabled="showAction" />
          </el-form-item>
        </template>
        <template #zipCodeRegex="scope">
          <el-form-item v-if="scope.$index >= 0" :prop="`dataSource.${scope.$index}.zipCodeRegex`"
            :required="isObjectKeys(scope.row)">
            <el-input v-model="scope.row.zipCodeRegex" @blur="hanleCancelValida" :disabled="showAction" />
          </el-form-item>
        </template>
        <template #address="scope">
          <el-form-item v-if="scope.$index >= 0" :prop="`dataSource.${scope.$index}.address`"
            :required="isObjectKeys(scope.row)">
            <el-input v-model="scope.row.address" @blur="hanleCancelValida" :disabled="showAction" />
          </el-form-item>
        </template>
        <!-- 地址1 -->
        <template #address1="scope">
          <el-form-item v-if="scope.$index >= 0">
            <el-input v-model="scope.row.address1" :disabled="showAction" />
          </el-form-item>
        </template>
        <!-- 表格头部插槽 -->
        <template #header-action>
          <el-button type="primary" class="add-columns" link :icon="Plus" @click="hanleAddColumns" />
        </template>
        <template #action="scope">
          <el-button type="danger" class="add-columns" link :icon="Delete" @click="hanleDeleteColumnsPort(scope)" />
        </template>
      </BaseTable>
    </el-form>
    <div class="flex justify-lr">
      <div class="flex align-end">
        <el-button type="success" @click="openImporCodetPartition" plain>
          快速导入
        </el-button>
      </div>
      <!-- 保存 -->
      <div class="text-right pt-12" v-show="isShowAction">
        <el-button type="danger" @click="clearForm" v-show="zoningData.actionsZoning === EditType.EDIT">
          清空
        </el-button>
        <el-button type="danger" @click="clearFormSource" v-show="zoningData.actionsZoning === EditType.ADD">
          清空
        </el-button>
        <el-button type="success" @click="hanleGetData(BaseZoning.ZONING_POSTAL_CODE, zoningData.actionsZoning)">
          {{ actionsZoningText }}
        </el-button>
      </div>
    </div>
    <!-- 口岸分区列表 -->
    <div class="title">
      分区列表
    </div>
    <!-- 列表数据 -->
    <vxe-table border 
      show-header-overflow 
      show-overflow
      height="340"
      :header-row-style="{ background: '#fff', color: '#909399', borderRight: '1px solid #ccc' }"
      :cell-style="{ height: '48px' }" :row-config="{ isHover: true }" :data="tablePostalCodeZoning.dataSource">
      <vxe-column field="partitionName" title="分区名称">
      </vxe-column>
      <vxe-column field="countryId" title="国家/地区">
        <template #default="{ row }">
          {{ dealCountryIdData(row) }}
        </template>
      </vxe-column>
      <!-- <template #isPartition="scope">
        <div>{{ scope.row.isPartition ? '是' : '否' }}</div>
      </template> -->
      <vxe-column field="orderNumber" title="序号" :width="100"></vxe-column>
      <vxe-column field="zipcode" title="邮编">
        <template #default="{ row }">
          {{ dealWithData(row.countryInfoList, BaseZoning.ZONING_POSTAL_CODE) }}
        </template>
      </vxe-column>
      <vxe-column field="zipCodeRegex" title="邮编正则表达式">
        <template #default="{ row }">
          {{ dealWithPostalCodeStr(row.countryInfoList, 'zipCodeRegex') }}
        </template>
      </vxe-column>
      <vxe-column field="address" title="地址">
        <template #default="{ row }">
          {{ dealWithPostalCodeStr(row.countryInfoList, 'address') }}
        </template>
      </vxe-column>
      <vxe-column field="address1" title="地址1">
        <template #default="{ row }">
          {{ dealWithPostalCodeStr(row.countryInfoList, 'address1') }}
        </template>
      </vxe-column>
      <vxe-column field="action" title="操作" :width="160">
        <template #default="scope">
          <div v-if="showAction">
            <el-button type="success" link
              @click="hanleActionColumns(scope, BaseZoning.ZONING_POSTAL_CODE, EditType.EDIT)">
              查看
            </el-button>
          </div>
          <div v-else>
            <el-button type="success" @click="hanleActionColumns(scope, BaseZoning.ZONING_POSTAL_CODE, EditType.EDIT)">
              编辑
            </el-button>
            <el-button type="danger" @click="hanleActionColumns(scope, BaseZoning.ZONING_POSTAL_CODE, EditType.DELETE)">
              删除
            </el-button>
          </div>
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 导入分区 -->
    <ImportCodePartition ref="importCodePartitionRef" @save-partition="hanleSaveCodePartition" />
  </div>
  <!--  -->
</template>

<script lang="ts" setup>
import { BaseForm, useForm } from '@/components/Form';
import { BaseTable, useTable } from '@/components/Table';
import { Plus, Delete } from '@element-plus/icons-vue'
import { useBasicZoning } from '../basicZoningData';
import { useZoningModel } from '@/composables/business/zoning/useZoningModel';
import { BaseZoning } from '@/type/BaseZoningAction';
import { EditType } from '@/type/BaseEnum';
import { ListIitem } from '@/api/base/BaseDataModel';
import { isArrayLength, isObjectKeys } from '@/utils/is';
import { ref, watch, computed, nextTick } from 'vue';
import { BasePartitionTypeEnum } from '@/type/BasePartitionTypeEnum';
import { dealCountryInfoList, dealWithData, dealWithPostalCodeStr } from '@/utils/dealData';
import ImportCodePartition from './ImportCodePartition.vue';
import { PartitionList } from '@/api/customerfee/CustomerFeeSetModel';

// 接收的参数
const props = defineProps<{ countryList: ListIitem[], actionType?: number, partitionList?: Recordable[], dataPostalCodeZoning?: Recordable[] }>()
// 基础数据
const { showAction, isShowAction, schemasPostalCodeZoning, tableFormPortCodeZoning, tablePostalCodeZoning, dealCountryIdData } = useZoningModel(props)
// 分区数据
const partitionList = computed(() => props.partitionList || [])
// 注册新增表单-控件
const [registerForm, methodsForm] = useForm({
  schemas: schemasPostalCodeZoning
})

// 注册新增表格-控件
const [registerFormTable] = useTable(tableFormPortCodeZoning)

// 注册分区列表-表格-控件：口岸分区列表 
const [registerPostalCodeZoningTable] = useTable(tablePostalCodeZoning)

// 传递事件
// const emit = defineEmits(['getPostalCodeZoning'])

// 处理分区数据
const { hanleAddColumns, hanleGetData, hanleActionColumns, hanleDeleteColumnsPort, clearForm, clearFormSource, hanleCancelValida, ruleFormTableRef, zoningData, actionsZoningText
} = useBasicZoning(tableFormPortCodeZoning, tablePostalCodeZoning, methodsForm)
// 邮编分区快速导入
const importCodePartitionRef = ref<{ show: Fn }>()
// 快速导入分区
const openImporCodetPartition = async () => {
  const form = await methodsForm.getVaule()
  importCodePartitionRef.value?.show(form)
}
const hanleSaveCodePartition = (partitionList: Partial<PartitionList>[]) => {
  tablePostalCodeZoning.dataSource = []
  tablePostalCodeZoning.dataSource = partitionList
  zoningData.partitionList = partitionList
  methodsForm.setDefaultValue({ orderNumber: partitionList.length + 1 })
}
watch(() => partitionList.value, (val) => {
  const postalCodeList = val.filter(item => item.partitionType === BasePartitionTypeEnum.POSTALCODE)
  nextTick(() => {
    console.log(postalCodeList, "邮编分区数据");
    if (isArrayLength(postalCodeList)) {
      zoningData.partitionList = postalCodeList
      tablePostalCodeZoning.dataSource = zoningData.partitionList
    } else {
      zoningData.partitionList = []
      tablePostalCodeZoning.dataSource = []
    }
  })
}, { immediate: true })

//暴露出去给外部使用
defineExpose({
  clearForm,
  zoningData
})
/**
 * 父组件传数据给子组件 ==> 编辑的时候显示
 * 事件给父组件获取: 分区数据
 */
</script>

<style lang="scss" scoped>
.postal-code-zoning {
  .add-columns {
    display: block;
    width: 100%;
  }

  .title {
    padding: 10px 0;
  }

  .form-table-postalcode {

    // 取消提示
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }
}
</style>