<template>
  <!-- 城市生活污水集中收集率 -->
  <div class="publicContainer">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="统计年份" prop="date">
        <el-date-picker type="year" v-model="queryParams.dataTime" value-format="YYYY" placeholder="请选择统计年份"></el-date-picker>
      </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="dataList" v-loading="loading" stripe :max-height="580">
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column label="统计年份" prop="dataTime" />
      <el-table-column label="城区用水人口(万人)" prop="peopleNumber" />
      <el-table-column label="人均日生活污染排放量(g/人·d)" prop="daySewageEmission" />
      <el-table-column label="目标收集率(%)" prop="targetCollect" />
      <el-table-column label="实际收集率(%)" prop="realCollect" />
      <el-table-column label="达标情况" prop="status">
        <template #default="{ row }">
          <span>{{ row.status == '1' ? '达标' : '不达标' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template #default="scope">
          <el-button link icon="View" type="primary" @click="handleDetail(scope.row, 'view')">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情弹窗 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
      <el-table :data="dataListOne" v-loading="loading" stripe :max-height="580">
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="污水厂名称" prop="sewageName" />
        <el-table-column label="积累处理水量(万t)" prop="waterCollect" />
        <el-table-column label="进水BOD平均浓度(mg/L)" prop="inBod" />
        <el-table-column label="BOD消减量(g)" prop="bodAbatement" />
      </el-table>
      <div style="color: aliceblue">
        佐证材料:
        <ImageFileUpload :limit="1" :saveFileArr="form.coverPhotosFileList" :listType="'picture-card'" :disabled="true"></ImageFileUpload>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="UrbanDomesticSewage">
import { citySewageCollectPage, citySewageCollectXQ } from '@/api/spongePerformance/UrbanDomesticSewage';
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
const { proxy } = getCurrentInstance();
const open = ref(false);
const showSearch = ref(true);
const loading = ref(true);
const total = ref(0);
const title = ref('');
const dataList = ref([]);
const dataListOne = ref([]);
const AllData = reactive({
  form: { coverPhotosFileList: [] },
  queryParams: {
    dataTime: '',
  },
});
const { queryParams, form } = toRefs(AllData);
//搜索
function handleQuery() {
  getList();
}
//重置
function resetQuery() {
  proxy.resetForm('queryRef');
  handleQuery();
}

/** 搜索列表 */
const getList = async () => {
  loading.value = true;
  citySewageCollectPage().then(response => {
    dataList.value = response.data;
    loading.value = false;
  });
};
//查看详情操作
function handleDetail(row) {
  open.value = true;
  title.value = row.dataTime + '城市生活污水收集率详情';
  SjDetail(row.id);
}
// 详情数据
function SjDetail(val) {
  citySewageCollectXQ(val).then(response => {
    dataListOne.value = response.data.citySewageDetail;
    form.value.coverPhotosFileList = response.data.sysFileList;
  });
}

// 取消事件
function cancel() {
  open.value = false;
}
onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.dituclass {
  width: 100%;
  height: 300px;
  // background: red;
  margin-bottom: 10px;
  border: 1px solid #004565;
}
</style>