<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(FormList)"
        ></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 yzsblishisjCloum"
        :key="i.props"
        :prop="i.props"
          width="220px"
        show-overflow-tooltip
      >
      <template #default="{ row }" v-if="i.props == 'projectName'">
          <span class="projectName" @click="checkClick(row)">
            {{ row.projectName }}</span
          >
        </template>
      <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,projectPlanMonthlyInfo} from "@/api/yzsblishi";
import { yzsblishisjCloum } from "@/utils/cloums";
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 getInfoList = async (prams) => {
  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) => {
  projectPlanMonthlyInfo(row.id).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>