<template>
  <div class="custom-page">
    <el-row :gutter="20">
      <el-col :span="4">
        <custom-table-tree title="土地分类" :data="landTypeData" @node-click="onNodeClick" />
      </el-col>
      <el-col :span="20">
        <avue-crud
          ref="crudRef"
          v-model="state.form"
          v-model:search="state.query"
          v-model:page="state.pageData"
          :table-loading="state.loading"
          :data="state.data"
          :option="state.options"
          @refresh-change="refreshChange"
          @search-reset="searchChange"
          @search-change="searchChange"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @row-del="rowDel"
          @row-save="rowSave"
          @row-update="rowUpdate"
        >
          <template #menu="scope">
            <custom-table-operate :actions="state.options.actions" :data="scope" />
          </template>
        </avue-crud>
      </el-col>
    </el-row>
  </div>

  <custom-info ref="customInfoRef" :row="state.currentRow" />
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';
import { useUserStore } from '@/store/modules/user';
import { CRUD_OPTIONS } from '@/config';
import { mockData, sleep } from '@/utils';
import CustomInfo from './info.vue';

const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
const app = useApp();
const UserStore = useUserStore();
const router = useRouter();
const crudRef = ref(null);
const landTypeData = ref([
  {
    label: '农用地',
    id: '0',
    children: [
      { label: '耕地', id: '01', children: [], pId: '0' },
      { label: '林地', children: [], id: '02', pId: '0' },
      { label: '草地', children: [], id: '03', pId: '0' },
      { label: '农田水利用地', children: [], id: '04', pId: '0' },
      { label: '养殖水面', children: [], id: '05', pId: '0' },
    ],
  },
  {
    label: '建设用地',
    id: '1',
    children: [
      { label: '城乡住宅用地', children: [], id: '11', pId: '10' },
      { label: '公共设施用地', children: [], id: '11', pId: '10' },
      { label: '工矿仓储用地', children: [], id: '11', pId: '10' },
      { label: '交通水利设施用地', children: [], id: '11', pId: '10' },
      { label: '旅游用地', children: [], id: '11', pId: '10' },
      { label: '军事设施用地', children: [], id: '11', pId: '10' },
    ],
  },
  {
    label: '未利用地',
    id: '2',
    children: [],
  },
]);
const state = reactive({
  loading: false,
  query: {
    current: 1,
    size: 10,
  },
  form: {},
  // selection: [],
  options: {
    ...CRUD_OPTIONS,
    addBtnText: '阀值设置',
    addBtn: false,
    selection: false,
    column: [
      {
        label: '地块名称',
        prop: 'p1',
        search: true,
        width: 200,
        rules: {
          required: true,
          message: '请输入',
          trigger: 'blur',
        },
      },
      {
        label: '地点',
        prop: 'p2',
        width: 200,
        // type: 'cascader',
        // hide: true,
        // addDisplay: true,
        // editDisplay: true,
        // viewDisplay: false,
        // props: {
        //   label: 'areaName',
        //   value: 'areaCode',
        //   children: 'areaChildVOS',
        // },
        // dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
        // dicHeaders: {
        //   authorization: UserStore.token,
        // },
        // dicFormatter: (res) => res.data ?? [],
        rules: {
          required: true,
          message: '请选择',
          trigger: 'blur',
        },
      },
      {
        label: '土壤环境报告',
        children: [
          {
            label: '酸碱度(PH值)',
            prop: 'p3',
            width: 150,
          },
          {
            label: '土壤质地',
            prop: 'p4',
            width: 150,
          },
          {
            label: '养分含量',
            prop: 'p5',
            width: 150,
          },
          {
            label: '重金属含量',
            prop: 'p6',
            width: 150,
            overHidden: true,
          },
        ],
      },
      {
        label: '水环境报告',
        children: [
          {
            label: '水温',
            prop: 'p7',
          },
          {
            label: '浑浊度',
            prop: 'p8',
          },
          {
            label: '酸碱度',
            prop: 'p9',
          },
          {
            label: '盐分含量',
            prop: 'p10',
            width: 150,
          },
          {
            label: '重金属和有害物质',
            prop: 'p11',
            width: 150,
            overHidden: true,
          },
        ],
      },
      {
        label: '大气环境报告',
        children: [
          {
            label: '温度',
            prop: 'p12',
          },
          {
            label: '湿度',
            prop: 'p13',
          },
          {
            label: '风速',
            prop: 'p14',
          },
          {
            label: '风向',
            prop: 'p15',
          },
          {
            label: '光照强度',
            prop: 'p16',
            width: 150,
          },
          {
            label: '降雨量',
            prop: 'p17',
          },
          {
            label: '有害气体',
            prop: 'p18',
            width: 150,
          },
        ],
      },
      {
        label: '创建时间',
        prop: 'createTime',
        width: 200,
        search: true,
        display: false,
      },
      {
        label: '更新时间',
        prop: 'updateTime',
        width: 200,
        display: false,
      },
    ],
    actions: [
      {
        name: '查看',
        icon: 'view',
        event: ({ row }) => rowView(row),
      },
      {
        name: '编辑',
        icon: 'edit',
        event: ({ row }) => rowEdit(row),
      },
      // {
      //   type: 'success',
      //   name: ({ row }) => {
      //     return row.status === 1 ? '禁用' : '启用';
      //   },
      //   icon: ({ row }) => {
      //     return row.status === 1 ? 'turnOff' : 'open';
      //   },
      //   event: ({ row }) => rowStatus(row),
      // },
      {
        type: 'danger',
        name: '删除',
        icon: 'delete',
        event: ({ row }) => rowDel(row),
      },
    ],
  },
  pageData: {
    total: 0,
    currentPage: 1,
    pageSize: 10,
  },
  data: [],
  currentRow: {},
});

const loadData = async () => {
  //state.loading = true;
  // GetEntityList(state.query)
  //   .then((res) => {
  //     if (res.code === 200) {
  //       const { current, size, total, records } = res.data;
  //       state.data = records;
  //       state.pageData = {
  //         currentPage: current || 1,
  //         pageSize: size || 10,
  //         total: total,
  //       };
  //     }
  //   })
  //   .catch((err) => {
  //     app.$message.error(err.msg);
  //     state.data = [];
  //   })
  //   .finally(() => {
  //     state.loading = false;
  //   });

  state.loading = true;
  await sleep(500);
  state.data = mockData(
    {
      p1: '202501号地',
      p2: '耿马县/耿马镇',
      p3: '酸性',
      p4: '正常',
      p5: '正常',
      p7: '正常',
      p6: '正常',
      p8: '正常',
      p9: '正常',
      p10: '正常',
      p11: '铜含量接近阀值',
      p12: '正常',
      p13: '正常',
      p14: '正常',
      p15: '东南风',
      p16: '正常',
      p17: '偏低',
      p18: '正常',
      // status: 1,
      createTime: '2025-01-01',
      updateTime: '2025-01-15',
    },
    10
  );
  state.loading = false;
};

loadData();

const onNodeClick = (data) => {
  console.log('onNodeClick', data);
};

// 页数
const currentChange = (current) => {
  state.query.current = current;
  loadData();
};

// 条数
const sizeChange = (size) => {
  state.query.size = size;
  loadData();
};

// 搜索
const searchChange = (params, done) => {
  if (done) done();
  state.query = params;
  state.query.current = 1;
  loadData();
};

// 刷新
const refreshChange = () => {
  loadData();
  app.$message.success('刷新成功');
};

// 选择
const selectionChange = (rows) => {
  state.selection = rows;
};

// 查看
const customInfoRef = ref(null);
const rowView = (row) => {
  state.currentRow = row;
  customInfoRef.value && customInfoRef.value.show();
};

// 启用、禁用
const rowStatus = (row) => {
  console.info('操作状态');
};

// 新增
const onAdd = () => {
  crudRef.value && crudRef.value.rowAdd();
};

const rowSave = (row, done, loading) => {
  // AddEntity(row)
  //   .then((res) => {
  //     if (res.code === 200) {
  //       app.$message.success('添加成功！');
  //       done();
  //       loadData();
  //     }
  //   })
  //   .catch((err) => {
  //     app.$message.error(err.msg);
  //   })
  //   .finally(() => {
  //     loading();
  //   });
};

// 编辑
const rowEdit = (row) => {
  crudRef.value && crudRef.value.rowEdit(row);
};

const rowUpdate = (row, index, done, loading) => {
  // UpdateEntity(row)
  //   .then((res) => {
  //     if (res.code === 200) {
  //       app.$message.success('更新成功！');
  //       done();
  //       loadData();
  //     }
  //   })
  //   .catch((err) => {
  //     app.$message.error(err.msg);
  //   })
  //   .finally(() => {
  //     loading();
  //   });
};

// 删除
const rowDel = (row) => {};
</script>
