<template>
  <div class="region-mgr g-container">
    <MjTable
      ref="gridRef"
      :grid="grid"
      :service="areaService"
      :edit-form="editForm"
    >
      <template #toolbarButtonsExtra>
        <el-button type="warning" :icon="Refresh" @click="syncData">
          同步数据
        </el-button>
      </template>

      <template #status_default="{ row }">
        <el-tag :type="row.status === 0 ? 'success' : 'danger'">
          {{ row.status === 0 ? '启用' : '禁用' }}
        </el-tag>
      </template>
    </MjTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { Refresh } from '@element-plus/icons-vue'

import { get } from '#/api/http'
import { BasicService } from '#/api/service/basic'
import MjTable, {
  mj_form_input,
  mj_form_switch,
} from '#/components/mj/mj-table'
import type { MjEditFormProps, MjGridProps } from '#/components/mj/mj-table'
import hud from '#/utils/hud'

class AreaService extends BasicService {
  protected findPageUrl(): string {
    return '/xkw/area/list'
  }

  protected removeUrl(): string {
    return '/xkw/area/batch/delete'
  }

  protected saveOrUpdateUrl(): string {
    return '/xkw/area/saveOrUpdate'
  }

  async sync(): Promise<any> {
    return await get<any>('/xkw/area/sync')
  }
}

const areaService = new AreaService()

const gridRef = ref()

function syncData() {
  hud.confirmLoad('确定要同步区域数据吗？', {
    option: '同步',
    hideSuccess: false,
    task: async () => {
      await areaService.sync()
      gridRef.value?.reload()
    },
  })
}

const editForm: MjEditFormProps = {
  form: {
    data: {
      code: '',
      name: '',
      shortName: '',
      level: '',
      ordinal: 0,
      parentId: '',
      status: 1,
    },
    items: [
      {
        field: 'name',
        title: '区域名称',
        required: true,
        span: 12,
        itemRender: { name: mj_form_input },
      },
      {
        field: 'shortName',
        title: '简称',
        span: 12,
        itemRender: { name: mj_form_input },
      },
      {
        field: 'code',
        title: '编码',
        span: 12,
        itemRender: { name: mj_form_input },
      },
      {
        field: 'level',
        title: '级别',
        span: 12,
        itemRender: { name: mj_form_input },
      },
      {
        field: 'parentId',
        title: '父级ID',
        span: 12,
        itemRender: { name: mj_form_input },
      },
      {
        field: 'ordinal',
        title: '排序',
        span: 12,
        itemRender: {
          name: mj_form_input,
          props: { type: 'number' },
        },
      },
      {
        field: 'status',
        title: '状态',
        span: 12,
        itemRender: {
          name: mj_form_switch,
          props: {
            openValue: 0,
            closeValue: 1,
            openLabel: '启用',
            closeLabel: '禁用',
          },
        },
      },
    ],
  },
  addFields: [
    'code',
    'name',
    'shortName',
    'level',
    'ordinal',
    'parentId',
    'status',
  ],
  updateFields: [
    'id',
    'code',
    'name',
    'shortName',
    'level',
    'ordinal',
    'parentId',
    'status',
  ],
}

const grid: MjGridProps = {
  columns: [
    { type: 'seq' },
    { field: 'name', title: '区域名称' },
    { field: 'shortName', title: '简称' },
    { field: 'code', title: '编码' },
    { field: 'level', title: '级别' },
    { field: 'parentId', title: '父级ID' },
    { field: 'ordinal', title: '排序', width: 80 },
    {
      field: 'status',
      title: '状态',
      width: 120,
      slots: { default: 'status_default' },
    },
    // {
    //   title: '操作',
    //   width: 200,
    //   slots: { default: 'operation' },
    //   fixed: 'right',
    // },
  ],
}
</script>

<style scoped>
.region-mgr {
  height: 100% !important;
}
</style>
