<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form
        label-width="auto"
        ref="ruleForm"
        inline
        :model="tableData"
        v-show="showSearch"
      >
        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchForm">
            查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="onCheck(3)"
            v-hasPermi="['system:post:add']"
            >新增一级节点</el-button
          >
        </el-col>
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="searchForm"
        ></right-toolbar>
      </el-row>
    </div>
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
      style="margin-top: -10px"
      type="border-card"
    >
      <el-tab-pane
        :label="i.projectTypeName"
        :name="i.id"
        v-for="i in lcProject"
      >
        <todoDon ref="todoDonRef"></todoDon>
      </el-tab-pane>
    </el-tabs>
    <!-- 查看详情弹框 -->
    <el-dialog
      v-model="visible"
      title="项目计划配置一级节点新增"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="50%"
    >
      <tableDalgo
        :typeList="typeList"
        @onModalClose="onModalClose"
        ref="tableDalgoRef"
        :tableData="tableData"
        v-if="visible"
      ></tableDalgo>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit">保存</el-button>
          <el-button @click="visible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, nextTick } from "vue";
import { projectTypeList } from "@/api/xmjhpz";
import tableDalgo from "./tableDalgo.vue";
import todoDon from "./todoDon.vue";
const { proxy } = getCurrentInstance();
const { project_operation_pattern } = proxy.useDict(
  "project_operation_pattern"
);
const todoDonRef = ref();
const lcProject = ref([]);
let typeList = ref({});
const tableDalgoRef = ref();
const showSearch = ref(true);
const activeName = ref();
let visible = ref(false);
//动态组件
let dataForm = reactive({
  tableData: {},
});
let indexI = ref(0);
let { tableData } = toRefs(dataForm);
//切换table
const handleClick = ({ props, index }, event) => {
  console.log(props,99)
  indexI.value = index;
  let params = { projectTypeId: props.name, pageNum: 1, pageSize: 10 };
  tableData.value = params;
  todoDonRef.value[index].getInfoList(params);
};
//搜索
const searchForm = () => {
  let parms = { pageNum: 1, pageSize: 10, projectTypeId: tableData.value.name };
  todoDonRef.value[indexI.value].getInfoList(parms);
};
// 新增
const onCheck = (v) => {
  typeList.value.type = v;
  visible.value = true;
};
const projectTypeListM = async () => {
  let { data } = await projectTypeList();
  lcProject.value = data;
  let curTabIndex = lcProject.value.findIndex(item => item.id === activeName.value)
  if(curTabIndex < 0) {
    curTabIndex = 0
  }
  let { id, projectTypeName } = data[curTabIndex];
  activeName.value = id
  nextTick(() => {
    tableData.value = {
      projectTypeId: id,
      label: projectTypeName,
      name: id,
    };
    todoDonRef.value[indexI.value].getInfoList(tableData.value);
  });
};
//关闭
function onModalClose() {
  visible.value = false;
  typeList.value = {};
  projectTypeListM();
}
function submit() {
  tableDalgoRef.value.submit(tableData.value);
}
onMounted(() => {
  projectTypeListM();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  height: 90vh;

  .top {
   margin-bottom: 15px;
  }
}

:deep(.el-dialog__body) {
  background-color: #eef1fb;
  height: 550px;
  overflow: hidden;
}
</style>