<template>
  <a-table
    :columns="columns.col"
    :data-source="columns.data"
    size="small"
    height="500"
    bordered
    :pagination="pagination.pagination"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'is_illegal'">
        {{ getRecordByColumn(column.dataIndex, record) }}
      </template>
      <template v-if="column.dataIndex === 'weifaleixing'">
        {{ getRecordByColumn(column.dataIndex, record) }}
      </template>
      <template v-if="column.dataIndex === 'measure_name'">
        {{ getRecordByColumn(column.dataIndex, record) }}
      </template>
       <template v-if="column.dataIndex === 'actual_use_to'">
        {{ getRecordByColumn(column.dataIndex, record) }}
      </template>
      <template v-if="column.dataIndex === 'action'">
        <a @click="viewDetail(record)">详情</a>
      </template>
    </template>
  </a-table>

  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="图斑详情"
    :canFullscreen="false"
    :defaultFullscreen="true"
    :showCancelBtn="false"
    :showOkBtn="false"
    :draggable="false"
  >
  </BasicModal>
</template>
<script lang="ts" setup>
  import { reactive, ref, defineProps, watch } from 'vue';
  import { BasicModal, useModal } from '@/components/Modal';
  import { getCaseInfoList } from '@/api/monitor/index';
  import { getLoadCaseInfoListOffence } from '@/api/demo/system';
  import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts';

  const [registerModal, { openModal, setModalProps }] = useModal();

  const props = defineProps<{
    tablist: Object;
    currentListQuery: Object;
  }>();
  const caseId = ref('');
  let columns = reactive({
    data: [],
    col: [
      {
        title: '图斑编号',
        dataIndex: 'case_no',
        ifShow: false,
      },
      {
        title: '县区',
        dataIndex: 'countyname',
      },
      {
        title: '乡镇',
        dataIndex: 'streetname',
      },
      {
        title: '社区/村',
        dataIndex: 'communityname',
      },
      {
        title: '图斑描述',
        dataIndex: 'case_description',
      },
      {
        title: '所属类型',
        dataIndex: 'typename',
      },
      {
        title: '下发时间',
        dataIndex: 'createtime',
      },
      {
        title: '图斑面积',
        dataIndex: 'area',
      },
      {
        title: '耕地面积',
        dataIndex: 'gengdi_area',
      },
      {
        title: '判定结果',
        dataIndex: 'is_illegal',
      },
      {
        title: '图斑状态',
        dataIndex: 'handle_status_name',
      },
      {
        title: '项目名称',
        dataIndex: 'xiangmumc',
      },
      {
        title: '项目主体',
        dataIndex: 'xiangmuzhuti',
      },
      {
        title: '实际用途',
        dataIndex: 'actual_use_to',
      },
      {
        title: '违法类型',
        dataIndex: 'weifaleixing',
      },
      {
        title: '整改措施',
        dataIndex: 'measure_name',
      },
      // {
      //   title: '操作',
      //   dataIndex: 'action',
      // },
    ],
  });
  let total = ref(0);

  function viewDetail(record) {
    console.log(record);
    caseId.value = record.id;
    openModal();
  }

  let current = ref(1);
  let pageSize = ref(10);

  let pagination = reactive({
    pagination: {
      pageSize: pageSize, // 每页显示的条数
      showSizeChanger: true, // 是否可以改变每页显示的条数
      pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
      showQuickJumper: true, // 是否可以快速跳转到指定页
      showTotal: (total) => `共${total}条`,
      current: current, // 当前页数
      total: total, // 总条数
      onChange: handlePageChange,
    },
  });

  function handlePageChange(page, pageSize) {
    props.currentListQuery.page = page;
    props.currentListQuery.limit = pageSize;
    pagination.pagination.pageSize = pageSize;
    pagination.pagination.current = page;
  }

  watch(
    () => props.currentListQuery,
    (newValue, oldValue) => {
      pagination.pagination.pageSize = newValue.limit;
      pagination.pagination.current = newValue.page;
      handleGetList();
    },
    { immediate: true, deep: true },
  );

  function handleGetList() {
    getLoadCaseInfoListOffence(props.currentListQuery).then((res) => {
      res.items.forEach((item) => {
        item.area = dataProcessingCount(item.area);
        item.gengdi_area = dataProcessingCount(item.gengdi_area);
      });
      columns.data = res.items;
      total.value = res.total;
    });
  }

  function getRecordByColumn(dataIndex, record) {
    let result: string = '';
    if (dataIndex == 'is_illegal') {
      // 判定结果
      switch (record.is_illegal) {
        case 0:
          result = '合法';
          break;
        case 1:
          result = '违法';
          break;
        case 2:
          result = '其他';
          break;
      }
    } else if (dataIndex == 'weifaleixing') {
      // 违法类型
      switch (record.weifaleixing) {
        case 0:
          result = '非农化违法用地';
          break;
        case 1:
          result = '非粮化违法用地';
          break;
      }
    } else if (dataIndex == 'measure_name') {
      // 整改措施
      switch (record.measure_name) {
        case '0':
          result = '拆除复耕';
          break;
        case '1':
          result = '补办手续';
          break;
      }
    } else if (dataIndex == 'actual_use_to') {
      // 实际用途
      if (record.is_illegal == 2) {
        switch (record.qita_use_to) {
          case '1':
            result = '不改变原用地性质的光伏用地';
            break;
          case '2':
            result = '设施农业用地';
            break;
          case '3':
            result = '农村道路';
            break;
          case '4':
            result = '实地未变化';
            break;
          case '5':
            result = '临时用地';
            break;
        }
      } else {
        result = record.actual_use_to;
      }
      
    }
    return result;
  }
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }

  ::v-deep .ant-table {
    height: calc(100vh - 230px) !important;
    overflow-x: auto !important;
  }
</style>
