<template>
  <cacp-search-layout>
    <template #search>
      <cacp-search-panel-layout
        :model="formData"
        ref="formRef"
        label-position="left"
        label-width="auto"
        :rules="rules"
        :gutter="30"
        :colSpan="6"
        @validate="onValidate"
      >
        <el-form-item label="特殊区域代码表" required prop="areaCode">
          <el-select v-model="formData.areaCode" placeholder="请选择" clearable>
            <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="关区代码" prop="code">
          <el-input v-model="formData.code" placeholder="请输入" clearable />
        </el-form-item>
        <template #buttonGroup>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
        </template>
      </cacp-search-panel-layout>
    </template>
    <cacp-complex-table
      :actions="actions"
      :data="tableData"
      :pagination="tablePagination"
      :loading="loading"
      @on-command="handleCommand1"
      @on-page-change="onPageChange"
      @on-size-change="onSizeChange"
    >
      <el-table-column type="selection" width="36" fixed="left" />
      <el-table-column label="状态" width="82" fixed="left">
        <template #default="scope">
          <el-tag effect="plain" :type="scope.row.status ? 'success' : 'warning'">{{
            scope.row.status ? '已发布' : '待发布'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="areaCode" label="国内地区和特殊区域代码" width="230" sortable />
      <el-table-column property="code" label="关区代码" width="120" />
      <el-table-column property="funcType" label="操作类型" width="120" />
      <el-table-column property="operator" label="操作人" sortable width="120" />
      <el-table-column property="createTime" label="创建时间" sortable min-width="160">
        <template #default="scope">{{ scope.row.createTime.toLocaleString() }}</template>
      </el-table-column>
      <el-table-column property="lastModified" label="最后更新时间" min-width="160">
        <template #default="scope">{{ scope.row.lastModified.toLocaleString() }}</template>
      </el-table-column>
    </cacp-complex-table>
  </cacp-search-layout>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules, FormItemProp } from 'element-plus'
import { SuccessResultCode, useLoading, type TableAction, useComplexTable, type TypeDescriptor } from '@cacp/ui'
import { typicalOneQuery, getAreaCodes } from '@/apis/mock'
import type { TypicalOne, TypicalOneFormData } from '@/types/one'
import config from '@/config'

const { loading, setLoading } = useLoading()
const { tableData, tablePagination, setPagination, setPageIndex, setPageSizes } = useComplexTable<TypicalOne>(config)
const formRef = ref<FormInstance>()
const rules = ref<FormRules<TypicalOneFormData>>({
  areaCode: [{ required: true, message: '请选择区域代码', trigger: 'change' }]
})

const formData = ref<TypicalOneFormData>({
  code: '',
  areaCode: ''
})

const options = ref<Array<TypeDescriptor>>([])
const onSearch = async () => {
  await formRef.value?.validate((valid, fields) => {
    if (valid) {
      onPageChange(1)
    } else {
      console.log('error submit!', fields)
    }
  })
}
const onReset = () => {
  formRef.value?.resetFields()
  onPageChange(1)
}
const onValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
  console.log(message)
}

const onSizeChange = (size: number) => {
  setPageSizes(size)
  onQuery()
}
function onPageChange(currentPage: number) {
  setPageIndex(currentPage)
  onQuery()
}

const actions: TableAction[] = [
  {
    key: '0',
    type: 'primary',
    text: '新建',
    onclick: 'create',
    limit: 'none',
    position: 'left',
    children: [
      {
        key: '101',
        text: '选项一',
        onclick: '选项一'
      },
      {
        key: '102',
        text: '选项二',
        onclick: '选项二'
      },
      {
        key: '103',
        text: '选项三',
        onclick: '选项三'
      },
      {
        key: '104',
        text: '选项四',
        onclick: '选项四'
      }
    ]
  },
  {
    key: '1',
    type: 'primary',
    text: '复制',
    onclick: 'copy',
    limit: 'none',
    position: 'left'
  },
  {
    key: '2',
    type: 'primary',
    text: '恢复',
    onclick: 'resume',
    limit: 'none',
    position: 'left'
  },
  {
    key: '3',
    type: 'primary',
    text: '设置表头',
    onclick: 'theader',
    limit: 'none',
    position: 'left'
  },
  {
    key: '4',
    type: 'primary',
    text: '发布',
    onclick: 'publish',
    limit: 'none',
    position: 'left'
  },
  {
    key: 'more',
    text: '更多',
    type: 'primary',
    onclick: 'more',
    position: 'left',
    children: [
      {
        key: '201',
        text: '选项一',
        onclick: '选项一'
      },
      {
        key: '202',
        text: '选项二',
        onclick: '选项二'
      },
      {
        key: '203',
        text: '选项三',
        onclick: '选项三'
      },
      {
        key: '204',
        text: '选项四',
        onclick: '选项四'
      }
    ]
  },
  {
    key: '5',
    text: '刷新',
    type: 'primary',
    plain: true,
    onclick: 'refresh',
    limit: 'none',
    position: 'right'
  },
  {
    key: '6',
    text: '导入',
    type: 'primary',
    plain: true,
    onclick: 'import',
    limit: 'none',
    position: 'right'
  },
  {
    key: '3',
    text: '导出',
    type: 'primary',
    plain: true,
    onclick: 'export',
    limit: 'none',
    position: 'right'
  },
  {
    key: 'more-right',
    text: '更多',
    plain: true,
    type: 'primary',
    onclick: 'more',
    position: 'right',
    children: [
      {
        key: '201',
        text: '选项一',
        onclick: '选项一'
      },
      {
        key: '202',
        text: '选项二',
        onclick: '选项二'
      },
      {
        key: '203',
        text: '选项三',
        onclick: '选项三'
      },
      {
        key: '204',
        text: '选项四',
        onclick: '选项四'
      }
    ]
  },
]

const handleCommand1 = (command: string) => {
  ElMessage.success('点击了' + command)
}

async function onQuery() {
  setLoading(true)
  const res = await typicalOneQuery({
    ...formData.value,
    pageIndex: tablePagination.currentPage,
    pageSize: tablePagination.pageSize
  })
  if (res.code === SuccessResultCode) {
    setPagination(res.data)
  }
  setLoading(false)
}

async function getAreaCodesData() {
  const res = await getAreaCodes()
  if (res.code === SuccessResultCode) {
    options.value = res.data
  }
}

onMounted(() => {
  getAreaCodesData()
  onQuery()
})
</script>
