<template>
  <div class="bigBox" :style="{ height: bigHeight }">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>
        <div class="box_cont">
          <div style="
          font-size: 30px;
          color: black;
          font-weight: 500;
          text-align: center;
        ">
            {{ data.fromObj.year }}年度标准化自评
          </div>
          <div class="fromBoxs">
            <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="155px" :model="data.fromObj" :inline="true"
              :rules="rules" :disabled="!data.config.saveBtnShow">
              <el-form-item label="年度：">
                <el-date-picker style="width: 250px" v-model="data.fromObj.year" type="year" value-format="YYYY"
                  placeholder="请选择年度" />
              </el-form-item>
              <el-form-item label="自评时间：" prop="logisticsname">
                <el-date-picker v-model="data.fromObj.selfevaluationtime" type="daterange" range-separator="至"
                  style="width: 250px" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" />
              </el-form-item>

              <el-collapse v-model="activeNames" style="width:100%">
                <el-collapse-item title="1、安全生产标准化自评要素及分值一览表" name="1">
                  <div style="margin: 10px">
                    <MOSTY.Upload width="600px !important" :widthNumber="800" :limit="4" :nopicer="true" :isImg="false"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
                      v-model="data.fromObj.elementscore" :showinput="false" :disabled='!data.config.saveBtnShow'
                      :delrow="delrow"></MOSTY.Upload>
                  </div>

                </el-collapse-item>
                <el-collapse-item title="2、安全生产标准化评审空项要素统计表" name="2">
                  <div style="margin: 10px">
                    <MOSTY.Upload width="600px !important" :widthNumber="800" :limit="4" :nopicer="true" :isImg="false"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
                      v-model="data.fromObj.elementstatistics" :showinput="false" :disabled='!data.config.saveBtnShow'
                      :delrow="delrow"></MOSTY.Upload>
                  </div>

                </el-collapse-item>
                <el-collapse-item title="3、设备设施和相关现场分布表" name="3">
                  <div style="margin: 10px">
                    <MOSTY.Upload width="600px !important" :widthNumber="800" :limit="4" :nopicer="true" :isImg="false"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
                      v-model="data.fromObj.facilityscene" :showinput="false" :disabled='!data.config.saveBtnShow'
                      :delrow="delrow"></MOSTY.Upload>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="4、安全生产标准化评审各要素考评检查表" name="4">
                  <div style="margin: 10px">
                    <MOSTY.Upload width="600px !important" :widthNumber="800" :limit="4" :nopicer="true" :isImg="false"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
                      v-model="data.fromObj.checkevaluate" :showinput="false" :disabled='!data.config.saveBtnShow'
                      :delrow="delrow"></MOSTY.Upload>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="5、自评不符合项及扣分说明汇总表" name="5">
                  <div style="margin: 10px">
                    <MOSTY.Upload width="600px !important" :widthNumber="800" :limit="4" :nopicer="true" :isImg="false"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
                      v-model="data.fromObj.inconformity" :showinput="false" :disabled='!data.config.saveBtnShow'
                      :delrow="delrow"></MOSTY.Upload>
                  </div>

                </el-collapse-item>
                <el-collapse-item title="6、安全生产标准化自评汇总表" name="6">
                  <div style="margin: 10px">
                    <MOSTY.Upload width="600px !important" :widthNumber="800" :limit="4" :nopicer="true" :isImg="false"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
                      v-model="data.fromObj.collect" :showinput="false" :disabled='!data.config.saveBtnShow'
                      :delrow="delrow"></MOSTY.Upload>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="7、安全生产标准化评审不符合项整改情况汇总表" name="7">
                  <div style="margin: 10px">
                    <MOSTY.Upload width="600px !important" :widthNumber="800" :limit="4" :nopicer="true" :isImg="false"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
                      v-model="data.fromObj.abarbeitung" :showinput="false" :disabled='!data.config.saveBtnShow'
                      :delrow="delrow"></MOSTY.Upload>
                  </div>

                </el-collapse-item>
                <el-collapse-item title="8、自评报告" name="8">
                  <div style="margin: 10px">
                    <MOSTY.Upload width="600px !important" :widthNumber="800" :limit="4" :nopicer="true" :isImg="false"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
                      v-model="data.fromObj.report" :showinput="false" :disabled='!data.config.saveBtnShow'
                      :delrow="delrow"></MOSTY.Upload>
                  </div>

                </el-collapse-item>
              </el-collapse>
            </el-form>
          </div>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" @click="submit(ruleFormRef)" v-if="data.config.saveBtnShow"><el-icon>
            <DocumentChecked />
          </el-icon>
          保存</el-button>
        <el-button @click="black"><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </template>
    </MOSTY.FromPage>


  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  onMounted,
  watch,
  nextTick
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { createAndClickLink } from "@/utils/tools.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const data = reactive({
  fromObj: {},
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  }
});
const activeNames = ref(["1"]);
const ruleForm = ref({

});
const delrow = ref({}); //删除文件列表
const delrow2 = ref({}); //删除文件列表
const delrow3 = ref({}); //删除文件列表
const delrow4 = ref({}); //删除文件列表
const delrow5 = ref({}); //删除文件列表
const delrow6 = ref({}); //删除文件列表
const delrow7 = ref({}); //删除文件列表
const delrow8 = ref({}); //删除文件列表
const emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("标准化自评新增");
const key = ref(1);
const key2 = ref(1);
const key3 = ref(1);
const key4 = ref(1);
const key5 = ref(1);
const key6 = ref(1);
const key7 = ref(1);
const key8 = ref(1);


// 保存
const submit = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      if (data.fromObj) {
        data.fromObj.selfevaluationtime = data.fromObj.selfevaluationtime || []
        data.fromObj.elementscore = data.fromObj.elementscore ? data.fromObj.elementscore.toString() : "";
        data.fromObj.elementstatistics = data.fromObj.elementstatistics ? data.fromObj.elementstatistics.toString() : "";
        data.fromObj.facilityscene = data.fromObj.facilityscene ? data.fromObj.facilityscene.toString() : "";
        data.fromObj.checkevaluate = data.fromObj.checkevaluate ? data.fromObj.checkevaluate.toString() : "";
        data.fromObj.inconformity = data.fromObj.inconformity ? data.fromObj.inconformity.toString() : "";
        data.fromObj.collect = data.fromObj.collect ? data.fromObj.collect.toString() : "";
        data.fromObj.abarbeitung = data.fromObj.abarbeitung ? data.fromObj.abarbeitung.toString() : "";
        data.fromObj.report = data.fromObj.report ? data.fromObj.report.toString() : "";
        data.fromObj.starttime = data.fromObj.selfevaluationtime[0]
        data.fromObj.endtime = data.fromObj.selfevaluationtime[1]
        data.fromObj.selfevaluationtime = data.fromObj.selfevaluationtime ? data.fromObj.selfevaluationtime.toString() : "";
        if (!data.fromObj.id) {
          postApi(data.fromObj, "/mosty-jcgl/standardization/addTbStandardizationDto")
            .then((res) => {
              ElMessage.success("新增成功");
              emit("changePage", "Main");
            })

        } else {
          postApi(data.fromObj, "/mosty-jcgl/standardization/updateTbStandardizationDto")
            .then((res) => {
              ElMessage.success("修改成功");
              emit("changePage", "Main");
            })

        }
      }
    } else {
      ElMessage.error("表单验证失败，请检查输入内容");
    }
  });
};

//获取详情
function getmain(id) {
  if (id) {
    getApi(
      {},
      "/mosty-jcgl/standardization/getTbStandardizationDtoById/" + id
    ).then((res) => {
      if (res) {
        data.fromObj = res;
        data.fromObj.selfevaluationtime = data.fromObj.selfevaluationtime.split(',')
      }
    });
  }
}
const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emit("changePage", "Main");
  }

};
onMounted(() => {
  activeNames.value = ["1", "2", "3", "4", "5", "6", "7", "8"]
  getmain(props.editObj.id);
});
watchEffect(() => {
  if (props.editObj) {
    data.config = JSON.parse(JSON.stringify(props.editObj));
  }
});
</script>

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

.box_cont {
  background: #fff;
}

.fromBoxs {
  width: 1200px;
  margin: 20px auto;
}

.ld_box {
  display: flex;
  margin-right: 30px;
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-date-editor .el-range-input {
  color: black;
}

::v-deep .el-date-editor .el-range-separator {
  color: black;
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}
</style>
