<template>
  <div class="app-container">
    <customForm ref="formRef" :model="queryParams" :config="FormConfig">
      <template #link>
        <el-select
          v-model="pageObj.query_links"
          placeholder="请选择实体关系"
          clearable
        >
          <el-option
            v-for="item in linkList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      <template #action>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </template>
    </customForm>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="行政区" width="150" align="center" />
      <el-table-column label="违法用地" header-align="center">
        <el-table-column prop="name" label="图斑数" align="center" />
        <el-table-column label="面积" align="center">
          <el-table-column prop="state" label="图斑面积" width="120" />
          <el-table-column prop="city" label="耕地面积" width="120" />
          <el-table-column prop="zip" label="永久基本农田面积" />
        </el-table-column>
      </el-table-column>
      <el-table-column label="商业服务用地">
        <el-table-column prop="name" label="图斑数" />
        <el-table-column label="面积">
          <el-table-column prop="state" label="图斑面积" width="120" />
          <el-table-column prop="city" label="耕地面积" width="120" />
          <el-table-column prop="zip" label="永久基本农田面积" />
        </el-table-column>
      </el-table-column>
      <el-table-column label="住宅用地">
        <el-table-column prop="name" label="图斑数" width="120" />
        <el-table-column label="面积">
          <el-table-column prop="state" label="图斑面积" width="120" />
          <el-table-column prop="city" label="耕地面积" width="120" />
          <el-table-column prop="zip" label="永久基本农田面积" />
        </el-table-column>
      </el-table-column>
      <el-table-column label="xx用地">
        <el-table-column prop="name" label="图斑数" />
        <el-table-column label="面积">
          <el-table-column prop="state" label="图斑面积" width="120" />
          <el-table-column prop="city" label="耕地面积" width="120" />
          <el-table-column prop="zip" label="永久基本农田面积" />
        </el-table-column>
      </el-table-column>
    </el-table>
    <!-- 表格数据 -->

    <pagination
      v-show="total > 0"
      :total="total"
      :page="queryParams.pageNum"
      :limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="Role">
import customForm from "@/components/custom-form.vue";

const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const FormConfig = ref([
  [
    {
      label: "行政区",
      prop: "state",
      span: 5,
    },
    {
      label: "监测时相",
      prop: "time",
      span: 5,
    },
    {
      prop: "action",
      span: 5,
    },
  ],
]);
const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",

    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",

    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",

    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",

    zip: "CA 90036",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",

    zip: "CA 90036",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",

    zip: "CA 90036",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",

    zip: "CA 90036",
  },
]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    roleName: undefined,
    roleKey: undefined,
    status: undefined,
  },
  rules: {
    roleName: [
      { required: true, message: "角色名称不能为空", trigger: "blur" },
    ],
    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
    roleSort: [
      { required: true, message: "角色顺序不能为空", trigger: "blur" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询角色列表 */
function getList() {
  // loading.value = true;
  // listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(
  //   (response) => {
  //     roleList.value = response.rows;
  //     total.value = response.total;
  //     loading.value = false;
  //   }
  // );
}

getList();
</script>
