<!-- 口岸分区 -->
<template>
    <div class="port-zoning">
        <!-- 表单控件 -->
        <BaseForm @register="registerForm" ref="baseFormRef" />
        <!-- 动态表格表单 -->
        <el-form ref="ruleFormTableRef" class="form-table-port" :model="tableFormPortZoning">
            <BaseTable :span-method="spanMethod" @register="registerFormTable">
                <!-- 自定义插槽 -->
                <!-- 口岸编号 -->
                <template #portCode="scope">
                    <el-form-item v-if="scope.$index >= 0" :prop="`dataSource.${scope.$index}.portCode`"
                        :rules="ruleForm.portCode">
                        <el-select v-model="scope.row.portCode" :disabled="showAction">
                            <el-option v-for="item in portWithZipCodeList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </template>
                <!-- 起始邮编 -->
                <template #startZipCode="scope">
                    <el-form-item v-if="scope.$index >= 0">
                        <el-input v-model="scope.row.startZipCode" :disabled="showAction" />
                    </el-form-item>
                </template>
                <!-- 结束邮编 -->
                <template #endZipCode="scope">
                    <el-form-item v-if="scope.$index >= 0">
                        <el-input v-model="scope.row.endZipCode" :disabled="showAction" />
                    </el-form-item>
                </template>
                <!-- 邮编正则表达式 -->
                <template #zipCodeRegex="scope">
                    <el-form-item v-if="scope.$index >= 0">
                        <el-input v-model="scope.row.zipCodeRegex" :disabled="showAction" />
                    </el-form-item>
                </template>
                <!-- 地址 -->
                <template #address="scope">
                    <el-form-item v-if="scope.$index >= 0">
                        <el-input v-model="scope.row.address" :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="success" link :icon="Plus" @click="hanleAddColumnsPort(scope)" />
                    <el-button type="danger" link :icon="Delete" @click="hanleDeleteColumnsPort(scope)" />
                </template>
            </BaseTable>
        </el-form>
        <!-- 新增/编辑 -->
        <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_PORT, zoningData.actionsZoning)">
                {{ actionsZoningText }}
            </el-button>
        </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="tablePortZoning.dataSource">
            <vxe-column field="partitionName" title="分区名称" :width="180">
            </vxe-column>
            <vxe-column field="portCode" title="国家/地区">
                <template #default="{ row }">
                    {{ dealWithPortCodeData(portWithZipCodeList, row.portWithZipCodeList) }}
                </template>
            </vxe-column>
            <!-- <template #isPartition="scope">
                <div>{{ scope.row.isPartition ? '是' : '否' }}</div>
            </template> -->
            <vxe-column field="orderNumber" title="序号" :width="100"></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_PORT, EditType.EDIT)">
                            查看
                        </el-button>
                    </div>
                    <div v-else>
                        <el-button type="success" @click="hanleActionColumns(scope, BaseZoning.ZONING_PORT, EditType.EDIT)">
                            编辑
                        </el-button>
                        <el-button type="danger"
                            @click="hanleActionColumns(scope, BaseZoning.ZONING_PORT, EditType.DELETE)">
                            删除
                        </el-button>
                    </div>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, nextTick } from 'vue';
import { BaseForm, useForm } from '@/components/Form';
import { BaseTable, useTable } from '@/components/Table';
import { getRowspanMethod } from '@/utils/getRowspanMethod';
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 { BasePartitionTypeEnum } from '@/type/BasePartitionTypeEnum';
import { isArrayLength } from '@/utils/is';

// 传递事件
// const emit = defineEmits(['getPortZoning'])
// 接收的参数
const props = defineProps<{
    portWithZipCodeList: ListIitem[],
    actionType?: number,
    partitionList?: Recordable[],
    dataPortZoning?: Recordable[]
}>()
const baseFormRef = ref()
// 分区数据
const partitionList = computed(() => props.partitionList || [])
// 基础数据
const {
    ruleForm,
    showAction,
    isShowAction,
    tablePortZoning,
    tableFormPortZoning,
    schemasPortZoning
} = useZoningModel(props);

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

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

// 对应表格行内容合并 
const spanMethod = computed(() => getRowspanMethod(tableFormPortZoning.dataSource, ['portCode']))

// 处理分区数据
const {
    hanleAddColumns,
    hanleGetData,
    hanleDeleteColumnsPort,
    hanleActionColumns,
    hanleAddColumnsPort,
    clearForm,
    clearFormSource,
    dealWithPortCodeData,
    ruleFormTableRef,
    zoningData,
    actionsZoningText,
    zoningstore,
    orderNumber
} = useBasicZoning(tableFormPortZoning, tablePortZoning, methodsForm)

watch(() => partitionList.value, (val) => {
    const portList = val.filter(item => item.partitionType === BasePartitionTypeEnum.PORT)
    nextTick(() => {
        // console.log(portList, "口岸分区数据");
        if (isArrayLength(portList)) {
            zoningData.partitionList = portList
            tablePortZoning.dataSource = zoningData.partitionList
        } else {
            zoningData.partitionList = []
            tablePortZoning.dataSource = []
        }

        // 判断form表单组件是否挂载
        if (baseFormRef.value && baseFormRef.value.$el) {
            zoningstore.addOrderNumber(zoningData.partitionList.length)
            methodsForm.setDefaultValue({ orderNumber: orderNumber.value })
        }
    })
}, { immediate: true })

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

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

    .el-table {

        // 新增：表格行内边距
        :deep(td.el-table__cell) {
            // padding-bottom: 0;
            // padding: 6px;
        }
    }

    .title {
        padding: 10px 0;
    }
    .form-table-port {
        // 取消提示
        :deep(.el-form-item) {
            margin-bottom: 0;
        }
    }
}
</style>