<!-- 国家/地区分区 -->
<template>
  <!-- 
    国家/地区分区：
    匹配国家/地区 ==》 三种方式匹配选择国家/地区
               -->
<!-- 
        费用明细设置：
        这里的列内容：区是按照 ==》 分区中的序号排列的
                 -->
  <div class="country-zoning">
    <!-- 表单控件 -->
    <BaseForm @register="registerForm" />
    <!-- 选择国家/地区 -->
    <div class="flex">
      <div class="flex-1 country-left">
        <div class="flex align-center country-title">
          <div><span class="t">*</span>国家/地区</div>
          <el-radio-group v-model="countryZoningState.radioCountry" class="ml-6 country-radio">
            <el-radio :label="CountryChoiseEnum.DROP_DOWN">
              下拉表
            </el-radio>
            <el-radio :label="CountryChoiseEnum.CHECK_BOX">
              复选框
            </el-radio>
          <!-- <el-radio :label="CountryChoiseEnum.INPUT_MATCHING">
              输入匹配
                </el-radio> -->
          </el-radio-group>
        </div>
        <div class="country">
          <div v-show="countryZoningState.radioCountry === CountryChoiseEnum.DROP_DOWN">
            <el-scrollbar height="310px">
              <el-select v-model="countryZoningState.countryListKey" placeholder="请选择" clearable :multiple="true" :filterable="true"
                :filter-method="definFilter" style="width: 100%;" :disabled="showAction">
                <el-option v-for="item in countryList_" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-scrollbar>
          </div>
          <div v-show="countryZoningState.radioCountry === CountryChoiseEnum.CHECK_BOX">
            <div>
              <div class="flex align-center">
                <!-- 回车事件：@keyup.enter="hanleEnterCountry" -->
                <el-input v-model="countryZoningState.inputCountryZoning" placeholder="输入多个国家/地区或关键字匹配,以逗号(,)分开"
                  :clearable="true" @clear="hanleClearInput" style="width: 100%;" />
                  <el-button type="primary" class="ml-4"
                    @click="hanleEnterCountry">搜索</el-button>
              </div>
              <el-checkbox v-model="countryZoningState.checkAllCountry" @change="handleCheckAllChange">
                全选
              </el-checkbox>
              <el-checkbox v-model="countryZoningState.isCheckAllCountry" @change="handleIsCheckAllChange">
                取消全选
              </el-checkbox>
            </div>

            <el-scrollbar height="246px">
              <!-- checkCountryList -->
              <div v-for="item in countryZoningState.checkCountryList" :key="item.value">
                <div class="top-placement">{{ item[0].code }}</div>
                <el-checkbox-group v-model="countryZoningState.countryListKey">
                  <el-checkbox v-for="countryItem in item" :key="countryItem.value" :label="countryItem.value"
                    :checked="countryItem.checked" :disabled="showAction">
                    {{
                      countryItem.label
                    }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </el-scrollbar>
          </div>
          <div v-show="countryZoningState.radioCountry === CountryChoiseEnum.INPUT_MATCHING">
            <el-input v-model="countryZoningState.inputCountryZoning" placeholder="输入多个国家/地区匹配,以逗号(,)分开"
              @keyup.enter="hanleEnterCountry" style="width: 275px;" />
          <!-- <el-select v-model="countryZoningState.countryListKey" placeholder="请选择" clearable multiple :filterable="true"
              :filter-method="definFilter" :collapse-tags="true">
              <el-option v-for="item in countryList_" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->
          </div>
        </div>
        <div class="error" v-show="countryZoningState.isErrorCountry">请选择国家/地区!</div>
      </div>
      <div class="flex-1">
        <div class="country-title">
          已选择的国家/地区
        </div>
        <div>
          <el-scrollbar height="310px">
            <div class="px-6 min-h border-1">
              {{ getCountryChoice }}
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- 保存 -->
    <div class="text-right pt-12" v-show="isShowAction">
      <el-button type="success" @click="hanleGetData(BaseZoning.ZONING_COUNTRY, zoningData.actionsZoning)">
        {{ actionsZoningText }}
      </el-button>
    </div>
    <!-- 国家/地区分区列表 -->
    <div class="zoning-list">
      分区列表
    </div>
    <BaseTable @register="registerPostalCodeZoningTable">
      <template #countryId="scope">
        <template v-if="scope.$index >= 0">
          <div>{{ dealCountryListText(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_COUNTRY, EditType.EDIT)">
            查看
          </el-button>
        </div>
        <div v-else>
          <el-button type="success" @click="hanleActionColumns(scope, BaseZoning.ZONING_COUNTRY, EditType.EDIT)">
          编辑
          </el-button>
          <el-button type="danger" @click="hanleActionColumns(scope, BaseZoning.ZONING_COUNTRY, 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 { useZoningRote } from '@/composables/business/zoning/useZoningRote';
import { useZoningCountryRote } from '@/composables/business/zoning/useZoningCountryRote';
import { useZoningModel } from '@/composables/business/zoning/useZoningModel';
import { BaseZoning, BaseZoningAction } from '@/type/BaseZoningAction';
import { CountryChoiseEnum, EditType } from '@/type/BaseEnum';
import useDefinFilter from '@/hooks/useDefinFilter';
import { watchEffect, unref } from 'vue';
import { isArrayLength } from '@/utils/is';
import { BasePartitionTypeEnum } from '@/type/BasePartitionTypeEnum';

// 传递事件
// const emit = defineEmits(['getCountryZoning'])
// 接收的参数
const props = defineProps<{ actionType: number | unknown, dataCountryZoning?: Recordable[], partitionList?: Recordable[], countryList?: Recordable[] }>()

// 基础数据
const { showAction, isShowAction, schemasPortZoning, tableCountryZoning } = useZoningModel(props)

const { getCountryChoice, hanleCountryChoice, hanleClearInput, dealCountryListText, clearCountry, handleCheckAllChange, handleIsCheckAllChange, hanleEnterCountry, isCountry, countryZoningState } = useZoningCountryRote(props)

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

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

// 统一表单事件
const formActionType = {
  methodsForm,
  methodsFormTable: { getDataSource: hanleCountryChoice, clearSelectedRow: clearCountry, tableElRef: isCountry } as any,
  methodsTableZoning,
}

// 处理分区数据
const { hanleActionColumns, hanleGetData, clearForm, zoningData, actionsZoningText, partitionList } = useZoningRote(formActionType, countryZoningState, props)

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

// 自定义select搜索
const { definFilter, typeList: countryList_ } = useDefinFilter(props, 'countryList')

const allClearForm = () => {
  clearForm()
  clearCountry()
}

//暴露出去给外部使用
defineExpose({
  clearForm: allClearForm,
  zoningData
})

/**
 * 父组件传数据给子组件 ==> 编辑的时候显示
 * 事件给父组件获取: 分区数据
 */
</script>

<style lang="scss" scoped>
.country-zoning {

  .country-left {
    margin-right: 8px;

    .error {
      color: var(--el-color-danger);
      font-size: 12px;
      line-height: 1;
      padding-top: 2px;
    }

    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
      background-color: #409eff;
      border-color: #409eff;
    }
  }

  .min-h {
    min-height: 308px;
    line-height: 1.6;
  }

  .country-radio {
    :deep(.el-radio) {
      margin-right: 15px;
    }
  }

  .country-title {
    position: relative;
    line-height: 32px;

    .t {
      color: var(--el-color-danger);
      margin-right: 4px;
    }
  }

  .top-placement {
    position: sticky;
    top: 0;
    width: calc(100% - 20px);
    z-index: 999;
    padding: 3px 5px;
    background-color: #f2f2f2;
    color: #409eff;
  }

  .zoning-list {
    padding: 5px 0;
  }
}
</style>