<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
            style="width: 240px"
            clearable
            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.id"
              :label="item.projectTypeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="建设类别:" props="buildCategory">
          <el-select
            clearable
            v-model="FormList.buildCategory"
            class="m-2"
            placeholder="请选择建设类别"
            size="mini"
          >
            <el-option
              v-for="item in build_category"
              :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 label="本月上报状态:" props="monthReportStatus">
          <el-select
            clearable
            v-model="FormList.monthReportStatus"
            class="m-2"
            placeholder="请选择本月上报状态"
            size="mini"
          >
            <el-option
              v-for="item in statustList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="施工单位:" props="constructUnit">
          <el-input
            style="width: 240px"
            v-model="FormList.constructUnit"
            placeholder="请输入施工单位"
            clearable
          />
          <!-- <el-select
            clearable
            v-model="FormList.constructUnit"
            class="m-2"
            placeholder="请选择施工单位"
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in unit_list"
              :key="item.value"
              :label="item.unitName"
              :value="item.id"
            />
          </el-select> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchClick">
            查询</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</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="55"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        :label="i.label"
        align="center"
        v-for="i in shangbaoCloum"
        :key="i.props"
        :prop="i.props"
        show-overflow-tooltip
      >
      <template #default="{ row }" v-if="i.props == 'projectName'">
          <span class="projectName">
            {{ row.projectName }}</span
          >
        </template>
        <template #default="{ row }" v-if="i.props == 'buildCategory'">
          <dict-tag :options="build_category" :value="row.buildCategory" />
        </template>
      </el-table-column>
      <el-table-column label="本月上报状态" align="center" prop="monthReportStatus">
        <template #default="{ row }">
          <span :style="{ color: row.monthReportStatus == 0 ? 'red' : '' }">{{
            row.monthReportStatus == 0 ? "未完成" : "已完成"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button :disabled="row.monthReportStatus == 1" 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="90%"
    >
      <tableDalgo
        ref="tableDalgoRef"
        v-if="visible"
        :tableList="tableList"
        @closed="closed"
      ></tableDalgo>
      <template #footer>
        <el-button type="primary" @click="submit('ruleFormRef')"
          >保 存</el-button
        >
        <el-button type="" @click="visible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  projectbyUserId,
  projectPlanMonthlyInfolast,
  projectCompany,
  projectTypeList
} from "@/api/shangbao";
import { shangbaoCloum } from "@/utils/cloums";
const { proxy } = getCurrentInstance();
const { build_category } = proxy.useDict("build_category");
// import {
//   deptTreeSelect,
// } from "@/api/system/user";
import tableDalgo from "./tableDalgo";
import { formatMonths } from "@/utils";
const showSearch = ref(true);
let visible = ref(false);
let isFlag = ref(false);
const tableDalgoRef = ref();
let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
console.log(formatMonths(new Date()), " formatMonths(new Date())");
//获取区县列表
let selectList = reactive();
const getProjectCat = async () => {
  // let { data } = await getProjectCategory()
  selectList = [{}];
  isFlag.value = true;
};
let dataForm = reactive({
  tableDateTwo: "",
  tableLoading: true,
  total: 0,
});
const unit_list=ref([])
const projectTypDate=ref([])
const statustList=ref([ { label: "已完成", value: 1 }, { label: "未完成 ", value:0  },])
//获取列表数据
let tableData = ref();
const getInfoList = async (p) => {
  let { data,total } = await projectbyUserId(p);
  console.log(data,'datadata')
  tableData.value = data;
  dataForm.total = total
  dataForm.tableLoading = false;
};
//搜索
let isCheck = ref(0);
const searchClick = () => {
  dataForm.tableLoading = true;
  // isCheck.value = timeFlag.value - now.value
  // console.log(isCheck.value, 888);
  getInfoList(FormList.value);
};
function resetQuery() {
  dataForm.tableLoading = true;
  FormList.value = { pageNum: 1, pageSize: 10 };
  getInfoList(FormList.value);
}
  //获取上月上报数据
let tableList = reactive({});
const checkClick = ({planInfoId, projectNo}) => {
  let parmas={proPlanId: planInfoId, projectNo}
  console.log(parmas)
  projectPlanMonthlyInfolast(parmas).then(({ data }) => {
    tableList = {...data,...parmas}
    visible.value = true;
     nextTick(()=>{
      // tableDalgoRef.value.desertFilds()
    })

  });
};

/** 查询部门下拉树结构 */
let flag = ref(false);
let deptOptions = reactive();
const getDeptTree = async () => {
  // let { data } = await deptTreeSelect()
  deptOptions = [{}];
  flag.value = true;
};
let isKey = ref(0);
const closed = () => {
  visible.value = false;
  getInfoList(FormList.value);
};
let timeFlag = ref(0);
let now = ref(new Date().getMonth() + 1);
function submit() {
  tableDalgoRef.value.checkClick();
}
const projectCompanyM = async () => {
  let { data } = await projectCompany();
  unit_list.value = data;
};
const projectTypeListM = async () => {
  let { data } = await projectTypeList();
  projectTypDate.value = data;
};

onMounted(() => {
  getInfoList(FormList.value);
  projectCompanyM()
  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: 750px;
  overflow: auto;
}
</style>