<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">

      <div class="right">
        <!-- 头部 -->
        <div class="titleBox">
          <div class="title">安全生产分析报告上传</div>
          <div class="btnBox">
            <el-button type="primary" @click="addHander" v-if="saveBtnShow">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>保存</span>
            </el-button>
            <el-button type="primary" @click="CloseEvent">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <div class="Box">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="应急预案修订计划" name="1">
              <div style="display: flex; justify-content: center; width: calc(100%-40px); margin-left:20px">
                <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px"
                  class="demo-ruleForm" status-icon :inline="true" label-position="top">
                  <el-row :gutter="80">
                    <el-col :span="8">
                      <el-form-item label="报告名称">
                        <el-input v-model="data.formData.mc" placeholder="请输入报告名称" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="报告年份" prop="nf">
                        <el-date-picker v-model="data.formData.nd" type="year" placeholder="请选择" style="width: 100%" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="报告频次">
                        <el-input v-model="data.formData.yaName" placeholder="请输入报告频次" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="备注">
                        <el-input v-model="data.formData.yaName" placeholder="请输入备注" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>
            <el-collapse-item title="附件" name="2">
              <div style="
                  margin-top: 10px;
                  margin-left: 100px;
                  width: calc(100% - 650px);
                ">
                <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px"
                  class="demo-ruleForm" status-icon :inline="true" label-position="top">
                  <el-row :gutter="80">
                    <el-col :span="24">
                      <el-form-item label="附件">
                        <MOSTY.Upload width="800px" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                          v-model="data.formData.fileId" :delrow="delrow" @filehandleChange="changeFile"></MOSTY.Upload>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, watch, watchEffect, getCurrentInstance } from "vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
// 数据
const activeNames = ref(["1"]);
const ruleFormRef = ref();
const bigHeight = ref(); //整个高度
const tabId = ref("");
const defaultHighlightedKey = ref("1");
const tableData = ref([]);
const comprehensiveShow = ref(false);
// 标识树
const tree = ref();
// 获取树节点的code
const treeCode = ref("JCGLYH-207");
// 控制外层新增弹出框的可见与可不见
const subDiaShow = ref(false);
// 控制表格里管理弹出框可见与不可见
const subDiaShow2 = ref(false);
const data = reactive({
  formData: {
    gwmc: "", //考核岗位名称
    gwfl: "", //岗位分类
    syfw: "" //适用范围
  }
});
const fileEdit = ref(true);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  tname: ""
});
const total = ref(0);
const title = ref("");
const xgName = ref("");
// 外层修改时的id
const xgId = ref("");

const token = ref("");

// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};

//关闭综合配置表
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close");
  }

};

// 获取排查清单列表数据
const getPcData = () => {
  postApi(listQuery.value, "/mosty-jcgl/overalltemplateitem/getListPc").then(
    (res) => {
      tableData.value = res.records;
      total.value = res.total;
    }
  );
};

// 获取排查清单列表数据
const getMbData = () => {
  postApi(
    { Authorization: token.value, pageSize: 10, pageCurrent: 1 },
    "/mosty-jcgl/overalltemplateitem/getListPc"
  ).then((res) => {
    // tableData.value = res;
  });
};
// 外层新增
const addHander = () => {
  title.value = "新增";
  subDiaShow.value = true;
};
// 接收外层新增保存
const save = (val) => {
  if (title.value === "新增") {
    postApi(
      { tname: val },
      "/mosty-jcgl/overalltemplateitem/addNameConfirm"
    ).then((res) => {
      getPcData(treeCode.value);
    });
  }
  if (title.value === "修改") {
    postApi(
      { tname: val },
      "/mosty-jcgl/overalltemplateitem/addNameConfirm"
    ).then((res) => {
      getPcData();
    });
  }
};
// 关闭弹窗(在子组件可以修改父组件的值)
const changeVi = (val) => {
  subDiaShow.value = val;
  xgName.value = "";
};
const changeVi2 = (val) => {
  subDiaShow2.value = val;
};
// 管理
const handleManage = (index, row) => {
  tabId.value = row.id;
  comprehensiveShow.value = true;
};

// 修改
const handleEdit = (index, row) => {
  title.value = "修改";
  subDiaShow.value = true;
  xgName.value = row.tname;
  xgId.value = row.id;
};
// 删除排查清单的某一项(传给子组件)
const Delete = (index, row) => {
  deleteApi({}, `/mosty-jcgl/pcqd/delPcqd/${row.id}`).then((res) => {
    getPcData(treeCode.value);
  });
};
watchEffect(() => {
  if (props.editObj) {
    data.formData = JSON.parse(JSON.stringify(props.editObj));

  }
});
onMounted(() => {
  bigHeightFn();
  getPcData();
  activeNames.value = ["1", "2"];
  getMbData();
  token.value = localStorage.getItem("token");
});
watch(
  () => props.saveBtnShow,
  (val) => {

  }
);
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
  }

  .left {
    width: 300px;
    // height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);

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

  .right {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .btnBox {
    display: flex;
  }
}

.Box {
  border: 1px solid var(--el-color-primary);
  margin-left: 150px;
  width: calc(100% - 300px);
  color: black;
  font-size: 20px;
}
</style>