<template>
  <!-- 工改项目信息 -->
  <div class="publicContainer">
    <el-form :model="queryForm" ref="queryRef" :inline="true">
      <el-form-item label="项目名称:" prop="xmmc">
        <el-input v-model="queryForm.xmmc" placeholder="请输入" clearable style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item label="工程行业分类:" prop="gchyfl">
        <el-select v-model="queryForm.gchyfl" placeholder="请选择">
          <el-option label="全部" value="" />
          <el-option v-for="dict in gchyfl" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="项目标记类型:" prop="hbms">
        <el-select v-model="queryForm.hbms" placeholder="请选择">
          <el-option label="全部" value="" />
          <el-option label="海绵项目" value="1" />
          <el-option label="非海绵项目" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜 索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重 置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="tableLoading" stripe max-height="600">
      <el-table-column label="项目名称" prop="xmmc" width="200" />
      <el-table-column label="项目编码" prop="xmdm" width="220" />
      <el-table-column label="工程行业分类" prop="gchyfl" width="120">
        <template #default="{ row }">
          <dict-tag :options="gchyfl" :value="row.gchyfl" />
        </template>
      </el-table-column>
      <el-table-column label="标记类型" prop="hmbs" width="120">
        <template #default="{ row }">
          {{ row.hmbs == '1' ? '海绵' : row.hmbs == '2' ? '非海绵' : '无标记' }}
        </template>
      </el-table-column>
      <el-table-column label="建设性质" prop="jsxz" width="120">
        <template #default="{ row }">
          <dict-tag :options="jsxz" :value="row.jsxz" />
        </template>
      </el-table-column>
      <el-table-column label="拟开工时间" prop="nkgsj" width="165" />
      <el-table-column label="拟竣工时间" prop="njcsj" width="165" />
      <el-table-column label="用地面积" prop="ydmj" width="120" />
      <el-table-column label="建筑面积" prop="jzmj" width="120" />
      <el-table-column label="投资来源" prop="xmtzly" width="120">
        <template #default="{ row }">
          <dict-tag :options="xmtzly" :value="row.xmtzly" />
        </template>
      </el-table-column>
      <el-table-column label="建设地址详情" prop="jsdd" width="150" />
      <el-table-column label="项目概况" prop="jsgmjnr" width="200" show-overflow-tooltip />
      <el-table-column label="操作" fixed="right" width="240">
        <template #default="{ row }">
          <el-button type="warning" link @click="markHM(row)" v-if="!!!row.hmbs">标记海绵</el-button>
          <el-button type="danger" link @click="markNoHM(row)" v-if="!!!row.hmbs">标记非海绵</el-button>
          <el-button type="primary" link @click="checkDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-model:page="queryForm.pageNum" v-model:limit="queryForm.pageSize" @pagination="getDataList" />
    <!-- 查看详情 -->
    <el-dialog v-model="showDetail" title="工改项目信息附件情况" :close-on-click-modal="false" width="1300px">
      <GGFileList v-if="showDetail" :fileId="fileId"></GGFileList>
    </el-dialog>
  </div>
</template>

<script setup>
import GGFileList from './ggFileList.vue'; //工改数据平台文件
import { spglXmjbxxbPage, markHMBS } from '@/api/project/projectInformationNew';

const { proxy } = getCurrentInstance();
const { gchyfl, jsxz, xmtzly } = proxy.useDict('gchyfl', 'jsxz', 'xmtzly');

const queryForm = ref({
  gchyfl: '',
  xmmc: null,
  hbms: '',
  pageSize: 10,
  pageNum: 1,
});
const total = ref(0);
const showDetail = ref(false);
const tableData = ref([]);
const tableLoading = ref(false);
const fileId = ref(null);

// 搜索
function handleQuery() {
  queryForm.value.pageNum = 1;
  getDataList();
}
// 获取数据
async function getDataList() {
  tableLoading.value = true;
  let res = await spglXmjbxxbPage(queryForm.value);
  if (res && res.code == 200) {
    tableData.value = res.data || [];
    total.value = res.total;
  }
  tableLoading.value = false;
}
// 重置
function resetQuery() {
  proxy.$refs.queryRef.resetFields();
  handleQuery();
}

// 标记为海绵项目
async function markHM(row) {
  let res = await markHMBS({ sid: row.sid, hmbs: '1' });
  if (res && res.code == 200) {
    proxy.$modal.msgSuccess('标记海绵成功');
    getDataList();
  }
}

// 标记为非海绵项目
async function markNoHM(row) {
  let res = await markHMBS({ sid: row.sid, hmbs: '2' });
  if (res && res.code == 200) {
    proxy.$modal.msgSuccess('标记非海绵成功');
    getDataList();
  }
}

// 查看详情
function checkDetail(row) {
  fileId.value = row.gcdm;
  showDetail.value = true;
}

onMounted(() => {
  handleQuery();
});
</script>

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