<template>
  <div class="water-analysis-page" :key="isKey">
    <div class="top">
      <el-form ref="ruleForm" inline :model="FormList" v-show="showSearch">
        <el-form-item label="项目名称:">
          <el-input
            clearable
            style="width: 240px"
            v-model="FormList.projectName"
            placeholder="请输入项目名称"
          />
        </el-form-item>
        <el-form-item label="项目类别:">
          <el-select
            clearable
            v-model="FormList.projectTypeId"
            class="m-2"
            placeholder="请选择项目类别"
            size="mini"
          >
            <el-option
              v-for="item in projectTypDate"
              :key="item.projectTypeCode"
              :label="item.projectTypeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="建设状态:" props="buildStatus">
          <el-select
            clearable
            v-model="FormList.buildStatus"
            class="m-2"
            placeholder="请选择建设状态"
            size="mini"
          >
            <el-option
              v-for="item in build_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="责任人:" props="chargeUser">
          <el-input
            style="width: 200px"
            v-model="FormList.chargeUser"
            placeholder="请输入责任人"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="Search"
            @click="getInfoList(FormList)"
          >
            查询</el-button
          >
          <el-button icon="Refresh" @click="resectClcik"> 重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="getInfoList"
        ></right-toolbar>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      v-loading="dataForm.tableLoading"
      stripe
      max-height="500"
    >
      <el-table-column
        type="index"
        width="80"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        :label="i.label"
        align="center"
        v-for="i in cloums"
        :key="i.props"
        :prop="i.props"
        width="230px"
        show-overflow-tooltip
      >
        <template #default="{ row }" v-if="i.props == 'buildStatus'">
          <dict-tag :options="build_status" :value="row.buildStatus" />
        </template>
        <template #default="{ row }" v-if="i.props == 'totalProgress'">
         {{ row.totalProgress  || 0}}%
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="本月上报状态"
        width="150px"
        align="center"
        prop="reportState"
      >
        <template #default="{ row }">
          <span :style="{ color: row.reportState == 1 ? 'red' : '' }">{{
            row.reportState == 1 ? "未上报" : "已上报"
          }}</span>
        </template>
      </el-table-column> -->
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button icon="View" link type="primary" @click="checkClick(row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="dataForm.total"
      v-model:page="FormList.pageNum"
      v-model:limit="FormList.pageSize"
      @pagination="getInfoList(FormList)"
    />
    <el-dialog
    v-model="visible"
    title="项目进度汇总详情"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    @close="onModalClose"
    width="85%"
  >
    <tableDalgo
      v-if="visible"
      :tableList="tableList"
      @closed="closed"
    ></tableDalgo>
    <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">关闭</el-button>
        </div>
      </template>
  </el-dialog>
  </div>

</template>
<script setup>
import {
  projectTypeList,
  projectbyUserId,
  projectPlanMonthlyInfoReportDetail,
} from "@/api/xmbglishi";
import tableDalgo from "./tableDalgo";
import { formatMonths } from "@/utils";
const { proxy } = getCurrentInstance();
const { build_category, build_status } = proxy.useDict(
  "build_category",
  "build_status"
);
let visible = ref(false);
let isFlag = ref(false);
const showSearch = ref(true);
const projectTypDate = ref([]);
let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
let tableData = reactive();
let isKey = ref(0);
console.log(formatMonths(new Date()), " formatMonths(new Date())");
let dataForm = reactive({
  tableDateTwo: "",
  tableLoading: true,
  total: 0,
});
const cloums = reactive([
  { label: "项目编号", props: "projectNo" },
  { label: "项目名称", props: "projectName" },
  { label: "项目类别", props: "projectTypeName" },
  { label: "建设状态", props: "buildStatus" },
  // { label: "建设类别", props: "buildCategory" },
  // { label: "月份", props: "month" },
  { label: "建设进度", props: "totalProgress" },
  { label: "完成项目总投资(万元)", props: "completeTotalInvest" },
  { label: "完成海绵相关投资(万元)", props: "completeSpongeInvest" },
  { label: "责任人", props: "chargeUser" },
]);
//获取列表数据
const getInfoList = async (prams) => {
  // let p={...prams,time:Date.parse(prams.time)}
  let { data } = await projectbyUserId(prams);
  tableData = data;
  dataForm.total = tableData.length;
  dataForm.tableLoading = false;
};
function resectClcik() {
  FormList.value = { pageNum: 1, pageSize: 10 };
  getInfoList(FormList.value);
}
// 查看上报数据
let tableList = reactive({});
const checkClick = (row) => {
  projectPlanMonthlyInfoReportDetail(row.projectNo).then(({ data }) => {
    tableList = data;
    visible.value = true;
  });
};
const closed = () => {
  visible.value = false;
  getInfoList(FormList.value);
};
const projectTypeListM = async () => {
  let { data } = await projectTypeList();
  projectTypDate.value = data;
}

onMounted(() => {
  getInfoList(FormList.value);
  projectTypeListM();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  border: 1px solid #ddd;
  height: 90vh;
  .top {
    margin-bottom: -5px;
  }
  :deep(.el-dialog__body) {
    // background-color: #eef1fb;
    height: auto;
      height: 750px;
    overflow: auto;
  }
}


</style>