<template>
  <CustomCard>
    <avue-crud
      v-model:page="page"
      v-model:search="searchData"
      :option="option"
      :data="data"
      :table-loading="_loading"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
      @search-change="handleSearch"
      @row-save="handleRowSave"
    >
      <template #menu="{ row }">
        <el-button type="primary" @click="handleInfo(row)">登记处理</el-button>
      </template>
    </avue-crud>
  </CustomCard>
  <Register v-model:visible="caseInfo.visible" />
</template>

<script setup>
import { ref } from 'vue';
import { CRUD_OPTIONS } from '@/config';
import CustomCard from '@/components/CustomCard.vue';
import { useUserStore } from '@/store/modules/user';
import Register from './common/Register.vue';

const { VITE_APP_BASE_API } = import.meta.env;
const UserStore = useUserStore();

/* --------------- data --------------- */
// #region
const searchData = ref({
  code: '',
  process: '',
});
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 3,
});
const _loading = ref(false);
const data = ref([
  {
    id: '1',
    code: '111111111',
    name: '张三',
    unit: '123333333333333333333333333333',
    owner: '张三',
    process: '北京',
    date: '2020-02-02',
  },
  {
    id: '2',
    code: '222222222',
    name: '张三',
    unit: '123333333333333333333333333333',
    owner: '张三',
    process: '北京',
    date: '2020-02-02',
  },
  {
    id: '3',
    code: '333333333333',
    name: '张三',
    unit: '123333333333333333333333333333',
    owner: '张三',
    process: '北京',
    date: '2020-02-02',
  },
]);
const option = ref({
  ...CRUD_OPTIONS,
  refreshBtn: false,
  column: [
    {
      label: '案件编号',
      prop: 'code',
      search: true,
    },
    {
      label: '案件名称',
      prop: 'name',
    },
    {
      label: '关联单位',
      prop: 'unit',
    },
    {
      label: '关联土地·',
      prop: 'land',
      type: 'select',
      addDisplay: true,
      hide: true,
      dicUrl: `${VITE_APP_BASE_API}/land-resource/landManage/page`,
      dicQuery: {
        current: 1,
        size: 9999,
      },
      props: {
        value: 'id',
        label: 'landName',
      },
      dicMethod: 'get',
      dicHeaders: {
        authorization: UserStore.token,
      },
      dicFormatter: (res) => res?.data?.records ?? [],
    },
    {
      label: '联系电话',
      prop: 'phone',
      viewDisplay: true,
      // addDisplay: true,
      hide: true,
    },
    {
      label: '法定代表人',
      prop: 'onwer',
      addDisplay: true,
      hide: true,
    },
    {
      label: '统一社会信用代码',
      prop: 'code',
      addDisplay: true,
      hide: true,
    },
    {
      label: '违法情况',
      prop: 'illegal',
      type: 'textarea',
      addDisplay: true,
      hide: true,
      width: '100%',
      span: 24,
    },
    {
      label: '负责人',
      prop: 'owner',
      display: false,
      addDisplay: true,
    },
    {
      label: '案件进度',
      prop: 'process',
      display: false,
      search: true,
      addDisplay: true,
    },
    {
      label: '案件结果',
      prop: 'result',
      display: false,
      addDisplay: true,
    },
    {
      label: '处理时间',
      prop: 'date',
      display: false,
      addDisplay: false,
      editDisplay: true,
    },
  ],
});
const caseInfo = ref({
  visible: false,
});
// #endregion

/* --------------- methods --------------- */

// #region
function handlePageChange(val) {
  console.log('page', val);
  page.value.currentPage = val;
}
function handleSizeChange(val) {
  page.value.pageSize = val;
  console.log('size', val, page.value);
}
function handleInfo(row) {
  console.log('row', row);
  caseInfo.value.visible = true;
}
function handleSearch(form, done) {
  console.log('search', form);
  let t = setTimeout(() => {
    clearTimeout(t);
    done();
  }, 1000);
}
function handleRowSave(val, done, loading) {
  console.log('val', val);
  console.log('done', done);
  console.log('loading', loading);
  loading();
  let t = setTimeout(() => {
    clearTimeout(t);
    done();
  }, 1000);
}
// #endregion
</script>

<style lang="scss" scoped></style>
