<template>
  <CustCard>
    <el-radio-group v-model="searchCondition.landType" class="lands_types" style="margin-bottom: 30px" @change="getList()">
      <el-radio-button v-for="item in landsType" :key="'landsType_' + item.value" :value="item.value">
        {{ item.label }}
      </el-radio-button>
    </el-radio-group>
    <el-form ref="searchRef" :model="searchCondition">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="土地名称:" prop="landName">
            <el-input v-model="searchCondition.landName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属网格" prop="gridName">
            <el-input v-model="searchCondition.gridName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产权人" prop="owner">
            <el-input v-model="searchCondition.owner" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getList()">查询</el-button>
          <el-button type="" @click="handleResetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="options_btns">
      <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
        {{ item.label }}
      </el-button>
    </div>
    <el-table :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="100"> </el-table-column>
      <el-table-column label="地块名" prop="landName" width="240" show-overflow-tooltip />
      <el-table-column label="地址" prop="address" show-overflow-tooltip />
      <el-table-column label="产权人" prop="owner" show-overflow-tooltip />
      <el-table-column label="所属网格" prop="gridName" show-overflow-tooltip />
      <el-table-column label="农用地分类" prop="landClassificationType" show-overflow-tooltip />
      <el-table-column label="面积" prop="978.2" show-overflow-tooltip />
      <el-table-column label="坐标" prop="coordinate" show-overflow-tooltip />
      <el-table-column label="是否土地流转" prop="landTransfer" width="110">
        <template #default="{ row }">
          {{ !row.landTransfer ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="产权编号" prop="landCode" show-overflow-tooltip />
      <el-table-column label="土壤类型" prop="soilType" show-overflow-tooltip />
      <el-table-column label="是否上传附件" prop="isUpload" width="110">
        <template #default="{ row }">{{ !row.isUpload ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
        <template #default="{ row }">
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
          <el-button type="info" link @click="handleInfo(row)">详情</el-button>
          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <Pagina :page-data="pageData" @page-change="(v) => handlePaginaChange(v, true)" @size-hange="(v) => handlePaginaChange(v)" />
  </CustCard>
  <CreateLand :visible="addFlag" :row-data="rowData" :land-type="searchCondition.landType" @close="addFlag = false" />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Pagina from '@/components/pagina.vue';
import CustCard from '@/components/CustCard.vue';
import { getLandsList, exportLands } from '@/apis/land.js';
import CreateLand from './common/CreateLand.vue';

onMounted(() => {
  getList();
});

/* --------------- data --------------- */
// #region
const addFlag = ref(false);
const landsType = ref([
  {
    value: '0',
    label: '农用地',
  },
  {
    value: '1',
    label: '住宅用地',
  },
  {
    value: '2',
    label: '园林',
  },
]);
const searchCondition = reactive({
  landType: '0',
  landName: '',
  gridName: '',
  owner: '',
});
const searchRef = ref();
const pageData = reactive({
  page: 1,
  size: 10,
  total: 0,
});

const list = ref([]);
const selectRowKeys = ref([]);
const btns = reactive([
  {
    label: '新增土地',
    method: function () {
      console.log('add');
      addFlag.value = true;
    },
  },
  // {
  //   label: '审核',
  //   disabled: true,
  //   method: function () {
  //     console.log('examine');
  //   },
  // },
  {
    label: '导入',
    method: function () {
      console.log('import');
    },
  },
  {
    label: '导出',
    method: handleExport,
  },
]);

// #endregion

/* --------------- methods --------------- */
// #region

async function getList() {
  const params = {
    current: pageData.page,
    size: pageData.size,
    ...searchCondition,
  };
  let res = await getLandsList(params);
  console.log('res ---------', res);
  if (res.code == 200) {
    list.value = res.data.records;
    pageData.total = res.data.total;
  }
}
function handleResetSearch() {
  console.log('searchRef', searchRef.value);
  searchRef.value && searchRef.value.resetFields();
  getLandsList();
}
function handleSelectionChange(val) {
  console.log(val);
  selectRowKeys.value = val.map((item) => item.id);
  btns.forEach((item) => {
    if (item.needKey) {
      item.disabled = !selectRowKeys.value.length;
    }
  });
}
function handlePaginaChange(v, t = false) {
  if (t) pageData.page = v;
  else {
    pageData;
    pageData.size = v;
  }
  getList();
}
const attrNames = ref(['农用地', '住宅用地', '园林']);
async function handleExport() {
  let res = await exportLands({
    landType: searchCondition.landType,
  });
  if (res) {
    let a = document.createElement('a');
    a.download = attrNames.value[Number(searchCondition.landType)] + '.xlsx';
    let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    let link = window.URL.createObjectURL(blob);
    a.href = link;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(link);
  }
  console.log('res', res);
}
// #endregion
</script>

<style lang="scss" scoped>
.lands_types {
  justify-content: center;
  width: 100%;
  > label {
    width: 12%;
    ::v-deep() {
      .el-radio-button__inner {
        width: 100%;
      }
    }
  }
}
.options_btns {
  margin-bottom: 12px;
  .el-button {
    width: 120px;
  }
}
</style>
