<template>
  <div style="width: 100%; height: 100vh; overflow-y: scroll">
    <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(ruleFormRef)" v-if="props.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" :disabled="!props.saveBtnShow"
                  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="报告名称:">
                        <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-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-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-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-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-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-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-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-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-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-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-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-col :span="24">
                      <el-form-item label="备注" prop="bz">
                        <el-input readonly v-model="data.formData.bz" type="textarea" :rows="6" show-word-limit
                          maxlength="500" />
                      </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"
                          :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" 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, getCurrentInstance } from "vue";
import { filterYear } from "@/utils/auth.js";
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
  }
});
// 数据
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("");
// 管理ID
const glId = ref("");
// 是否删除
const delTitle = ref("是否确认删除当前项?");
const delContent = ref("删除");
// 分页
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getPcData();
};
// 分页码
const handleCurrentChange = (cur) => {
  listQuery.value.pageCurrent = cur;
  getPcData();
};
const token = ref("");

// 关闭页面
const close = () => {
  comprehensiveShow.value = false;
};
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
// 选择框
const searchFn = (e) => {
  if (e === "3") {
    tableData.value = data2023;
  }
  if (e === "2") {
    tableData.value = data2022;
  }
};

//关闭综合配置表
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 searchHander = () => {
  getPcData();
};
// 获取排查清单列表数据
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);
  });
};

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

  }
);
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.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: 100px;
  width: calc(100% - 200px);
  color: black;
  font-size: 20px;
  padding-bottom: 8vh;
}
</style>