<!-- 邮编分区 -->
<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>
        <!-- 表格头部插槽 -->
        <template #header-action>
          <el-button type="primary" class="add-columns" link :icon="Plus"
            @click="hanleAddColumns(BaseZoning.ZONING_POSTAL_CODE)" />
        </template>
        <template #action="scope">
          <el-button type="danger" class="add-columns" link :icon="Delete" @click="hanleDeleteColumnsPort(scope)" />
        </template>
      </BaseTable>
    </el-form>
    <!-- 保存 -->
    <div class="text-right pt-12" v-show="isShowAction">
      <el-button type="success" @click="hanleGetData(BaseZoning.ZONING_POSTAL_CODE, zoningData.actionsZoning)">
        {{ actionsZoningText }}
      </el-button>
    </div>
    <!-- 口岸分区列表 -->
    <div class="py-2">
      分区列表
    </div>
    <BaseTable @register="registerPostalCodeZoningTable">
      <template #zipcode="scope">
        <template v-if="scope.$index >= 0">
          <div class="single-line">{{ dealWithData(scope.row.countryInfoList, BaseZoning.ZONING_POSTAL_CODE) }}</div>
        </template>
      </template>
      <template #countryId="scope">
        <template v-if="scope.$index >= 0">
          <div class="single-line">{{ dealCountryIdData(scope.row) }}</div>
        </template>
      </template>
      <template #isPartition="scope">
        <div>{{ scope.row.isPartition ? '是' : '否' }}</div>
      </template>
      <template #action="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>
    </BaseTable>
  </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 { useZoningRote } from '@/composables/business/zoning/useZoningRote';
import { useZoningModel } from '@/composables/business/zoning/useZoningModel';
import { BaseZoning, BaseZoningAction } from '@/type/BaseZoningAction';
import { EditType } from '@/type/BaseEnum';
import { ListIitem } from '@/api/base/BaseDataModel';
import { isArrayLength, isObjectKeys } from '@/utils/is';
import { watchEffect, unref } from 'vue';
import { BasePartitionTypeEnum } from '@/type/BasePartitionTypeEnum';
import { dealWithData } from '@/utils/dealData';

// 接收的参数
const props = defineProps<{ actionType: number | unknown, countryList: ListIitem[], partitionList?: Recordable[], dataPostalCodeZoning?: Recordable[] }>()
// 基础数据
const { ruleForm, showAction, isShowAction, schemasPostalCodeZoning, tableFormPortCodeZoning, tablePostalCodeZoning, dealCountryIdData } = useZoningModel(props)

// 注册新增表单-控件
const [registerForm, methodsForm] = useForm({
  schemas: schemasPostalCodeZoning
})

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

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

// 统一表单事件
const formActionType = {
  methodsForm,
  methodsFormTable,
  methodsTableZoning
}

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

// 处理分区数据
const { hanleAddColumns, hanleGetData, hanleActionColumns, hanleDeleteColumnsPort, clearForm, hanleCancelValida, ruleFormTableRef, zoningData, actionsZoningText, partitionList } = useZoningRote(formActionType, tableFormPortCodeZoning, props)

watchEffect(() => {
  const partitionList_ = unref(partitionList)
  const postalCodeList = partitionList_.filter(item => item.partitionType === BasePartitionTypeEnum.POSTALCODE)
  // console.log(postalCodeList, "邮编分区数据");
  if (isArrayLength(postalCodeList)) {
    zoningData.postalCodeList = postalCodeList
    zoningData.partitionList = postalCodeList
    methodsTableZoning.setDataSource(zoningData.postalCodeList)
    // stop()
  } else {
    zoningData.partitionList = []
    methodsTableZoning.setDataSource([])
  }
}, { flush: "post" })

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

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

  .form-table-postalcode {

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