<template>
  <div>
    <MOSTY.FromPage :title="'制定整改方案'" @closeDialog="CloseEvent">
      <template #content>
        <div style="color: #333" class="box_cont">
          <el-form class="mosty-from-wrap" ref="ruleFormRef" :model="formData" :inline="true" label-width="120px"
            :rules="rules">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="隐患信息" name="1">
                <div class="searchBox">
                  <el-form-item label="隐患描述:">
                    <el-input v-model="formData.pitfallDescribe" type="textarea" :rows="3" show-word-limit
                      style="width: 827px" />
                  </el-form-item>
                  <el-form-item label="隐患级别:" prop="pitfallLevel">
                    <el-select v-model="formData.pitfallLevel" style="width: 300px">
                      <el-option v-for="item in yhdjlist" :disabled="item.disabled" :key="item.value"
                        :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="隐患类别:" prop="pitfallType">
                    <MOSTY.DictTree :zdbh="'D_BZ_SGYHFL'" v-model="formData.pitfallType" :placeholder='"请选择隐患类别"'
                      style="width: 300px;" />
                  </el-form-item>
                </div>
              </el-collapse-item>
              <el-collapse-item title="整改措施(方案)信息" name="2">
                <div class="searchBox">
                  <div class="titl">隐患分析</div>
                  <el-form-item label="原因分析:">
                    <el-input v-model="formData.reformReasonanalysis" type="textarea" :rows="3" show-word-limit
                      maxlength="1000" placeholder="'原因分析请不要超过1000个汉字" style="width: 827px" />
                  </el-form-item>
                  <div class="titl">制定方案</div>
                  <el-form-item label="投入预算：">
                    <el-input v-model.number="formData.reformBudgetamount" type="number" maxlength="12"
                      style="width: 300px"> <template #append>元</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="整改期限:" prop="reformOvertime">
                    <el-date-picker v-model="formData.reformOvertime" type="date" format="YYYY-MM-DD" clearable
                      value-format="YYYY-MM-DD" style="width: 300px" />
                  </el-form-item>
                  <!-- <el-form-item label="整改措施:" prop="reformmeasure">
                      <el-input v-model="formData.reformmeasure" type="textarea" :rows="3" show-word-limit autosize
                        style="width: 827px" />
                    </el-form-item> -->
                  <el-form-item label="上传附件：">
                    <MOSTY.Upload :isAutoWidth="true" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']"
                      v-model="formData.reformUploadfile" :showinput="true" :delrow="delrow"></MOSTY.Upload>
                  </el-form-item>
                  <el-form-item label="整改措施:" prop="reformMeasure">
                    <el-input v-model="formData.reformMeasure" type="textarea" :rows="3" show-word-limit
                      maxlength="1000" placeholder="整改措施请不要超过1000个汉字" style="width: 827px" />
                  </el-form-item>

                </div>
              </el-collapse-item>

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

        <el-button type="primary" :loading="loading" @click="submitEvent(ruleFormRef)">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="CloseEvent" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>


  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, onMounted, watch } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getSysDictByCode } from "@/api/sysDict";
const { proxy } = getCurrentInstance();
import { ElMessage } from "element-plus";
const { D_DBZ_YHDJ, D_BZ_SGYHFL } = proxy.$dict("D_DBZ_YHDJ", "D_BZ_SGYHFL");
// 显示部门弹窗
const activeNames = ["1", "2"];
const loading = ref(false);
const yhdjlist = ref([])
const formData = ref({})
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  Rowobj: {
    type: Object,
    default: {}
  }
});
const ruleFormRef = ref();
const emit = defineEmits("changePage");
//规则校验
const rules = reactive({
  pitfallLevel: [{ required: true, message: "请选择隐患级别", trigger: "blur" }],
  pitfallType: [{ required: true, message: "请选择隐患类别", trigger: "blur" }],
  reformOvertime: [
    {
      trigger: "blur",
      required: true,
      message: "请选择整改期限"
    }
  ],
  reformMeasure: [
    {
      trigger: "blur",
      required: true,
      message: "整改措施不能为空"
    }
  ]
});

watchEffect(() => {
  if (props.Rowobj) {
    formData.value.pitfallDescribe = props.Rowobj.pitfallDescribe;
    formData.value.pitfallLevel = props.Rowobj.pitfallLevel;
    formData.value.hzid = props.Rowobj.hzid;
    formData.value.logid = props.Rowobj.logid;
  }
});
// 初始化
onMounted(() => {
  getSysDictByCode({ dictCode: "D_DBZ_YHDJ" }).then((res) => {
    if (res) {
      res.itemList.forEach((item) => {
        item.label = item.zdmc;
        item.value = item.dm;
        if (item.dm == '4') {
          // filterqx('isaqbm') != '1' &&
          item.disabled = true
        } else {
          item.disabled = false
        }
      });
      yhdjlist.value = res.itemList

    }
  });
});

// 保存
const submitEvent = async (formEl) => {
  if (!formEl) {
    ElMessage.warning('请输入必填项！！！')
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      formData.value.reformUploadfile = formData.value.reformUploadfile ? formData.value.reformUploadfile.toString() : null
      postApi(formData.value, "/mosty-jcgl/overallCheckPitfallHz/addReform")
        .then((res) => {
          loading.value = false;
          ElMessage.success("提交成功");
          emit("changePage", false);
        })
        .catch((err) => {
          loading.value = false;
        });

    }
  })
}

function CloseEvent() {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emit("changePage", false);
    })
    .catch(() => {
      // catch error
    })


}




</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
  color: #fff !important;
  background-color: var(--el-color-primary) !important;
}

.titl {
  text-align: left;
  padding-left: 5px;
  width: 100%;
  border-bottom: 1px dashed #44a48c;
  font-size: 16px;
  color: #44a48c;
  margin: 20px 0px 10px 0px;
}

.box_cont {
  width: 1000px;
  display: flex;
  background: #fff;
  margin: 20px auto;
}

.box-left {
  width: 63%;
}

.pic_left {
  width: 110px;
  height: 130px;
  display: flex;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-left: 15px;
}

.box_right ul li {
  color: #000;
  display: flex;
  padding: 0 20px;
  margin: 20px 0;
  z-index: 99;
  padding-left: 80px;
}

.box_right ul li div {
  margin: 0 20px;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

}

.form_title {}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}



.searchBox {
  width: 1000px;
  margin: 15px auto;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.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-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-radio__label {
  display: none;
}
</style>
