<template>
  <div>
    <el-dialog :title="props.title" width="600px" top="10%" v-model="props.addDiaShow" :before-close="handleClose">
      <!-- 检查配置信息 -->
      <div class="config">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm.value">
          <el-form-item label="限期整改时间：" prop="planOvertime" v-if="type == '01'" style="width: 1100px">
            <el-date-picker v-model="ruleForm.planOvertime" type="date" format="YYYY-MM-DD" clearable
              :disabled-date="disablednowDates" value-format="YYYY-MM-DD" style="width: 100%" />
          </el-form-item>
          <el-form-item label="整改建议：" prop="reformAdvise" style="width: 1100px" v-if="type == '01'">
            <el-input v-model="ruleForm.reformAdvise" :rows="8" type="textarea" style="width: 100%" />
          </el-form-item>
          <el-form-item label="归口部门" v-if="type == '02'" style="width: 1100px">
            <el-select v-model="ruleForm.deptid" style="width: 300px">
              <el-option v-for="item in gkbmlist" :key="item.deptname" :label="item.deptname"
                :value="item.deptid"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="submitForm(ruleFormRef)" v-if="type == '01'">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>下发</span>
          </el-button>
          <el-button type="primary" :loading="loading" @click="submitForm(ruleFormRef)" v-if="type == '02'">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  getCurrentInstance
} from "vue";
import { getItem } from "@/utils/storage";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter } from "vue-router";
import { disablednowDates } from '@/utils/tools.js'
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_TB_JCLX } = proxy.$dict("D_TB_JCLX");
const loading = ref(false); //新增保存按钮截流
const ruleFormRef = ref()
const router = useRouter();
const type = ref('')
const dialogForm = ref({});
const gkbmlist = ref([])
const upload = ref({}); //上传
// const formSize = ref('default')
const addShow = ref(false);
const fromObj = ref({}); //检查小组编辑
const Domai = ref(1);
//表单数据
const ruleForm = ref({

});

//规则校验
const rules = reactive({
  reformAdvise: [{ required: true, message: "整改建议不能为空", trigger: "blur" }],
  planOvertime: [
    {
      trigger: "blur",
      required: true,
      message: "请选择限期整改时间"
    }
  ]
});
const props = defineProps({
  addDiaShow: {
    type: Boolean,
    default: false
  },
  title: String,
  type: String,
  Rowobj: {
    type: Object,
    default: {}
  }
});

watch(
  () => props.Rowobj,
  (val) => {
    if (val) {
      type.value = props.type
      if (props.type == '01') {
        ruleForm.value.reformAdvise = val.reformAdvise
        ruleForm.value.pitfallId = val.id
      }
      if (props.type == '02') {
        ruleForm.value.pitfallId = val.id
        getgkbmlist(val.countryId)
      }
    } else {

    }
  }
);

const emits = defineEmits(["changeAddVi", "changeclose"]);
onMounted(() => {

});
//线-查询可设置的归口部门
function getgkbmlist(countryId) {
  getApi({ countryId }, '/mosty-jcgl/overallCheckPitfallHz/getDepByUnit').then(res => {
    gkbmlist.value = res
  })
}
const diaShow = ref(false);

// 关闭
const handleClose = () => {
  if (['01', '02'].includes(type.value)) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("changeAddVi", false);
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("changeAddVi", false);
  }

};


// 关闭×
const closeDialog = () => {
  loading.value = false;
  ruleForm.value = {}
  emits("changeAddVi", false);
  emits("changeclose", false);
};
// 保存
const submitForm = async (formEl) => {
  if (!formEl) {
    ElMessage.warning('请输入必填项！！！')
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      if (props.type == '01') {
        //点-整改设置保存
        postApi(ruleForm.value, "/mosty-jcgl/overallCheckPitfallHz/saveAndSend")
          .then((res) => {
            loading.value = false;
            ElMessage.success("下发成功");
            closeDialog()
          })
          .catch((err) => {
            loading.value = false;
          });
      } else if (props.type == '02') {
        //	线-设置归口部门
        postApi(ruleForm.value, "/mosty-jcgl/overallCheckPitfallHz/setSendDept")
          .then((res) => {
            loading.value = false;
            ElMessage.success("设置成功");
            closeDialog()
          })
          .catch((err) => {
            loading.value = false;
          });
      }

    }
  })
}



</script>

<style lang="scss" scoped>
.fj {
  .el-form {
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    // width: 1170px;
    justify-content: flex-end;
  }

  .from_fix {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: 10px;

    // .el-form-item--default .el-form-item__content {
    //   flex-wrap: nowrap !important;
    // }

    .el-input {
      width: 100%;
    }
  }
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.config {
  .el-form {
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
    width: 350px;
  }

  .el-input {
    width: 350px;
  }
}

.titleBox {
  align-items: center;
  margin: 0;
  padding: 0;
  height: 60px;
  border: 1px solid rgb(32, 75, 54);
  padding: 20px;
}

.form>div {
  position: relative;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;

    .el-select {
      width: 65%;
    }
  }
}

.el-input {
  width: 75%;
}

.two .el-input {
  width: 65%;
}

.three {
  justify-content: flex-start !important;

  .el-select {
    width: 15%;
  }
}

.four {
  display: flex;
  align-items: center;

  span {
    width: 5%;
  }

  .el-textarea__inner {
    width: 95%;
  }
}

.group {
  margin-top: 50px;
  // background-color: red;
  position: relative;
}

.fj {
  margin-top: 50px;
  width: 100%;

  .content {
    width: 100%;
    display: flex;
    padding: 20px;

    div {
      display: flex;
      width: 85%;
      align-items: center;
    }

    justify-content: space-between;
  }
}

.jc {
  margin-top: 50px;
}

.tabBox {
  height: 300px !important;
}

.el-table {
  height: 300px !important;
  border: 1px solid var(--el-color-primary);
}

.el-form-item__content {
  flex-wrap: nowrap;
}

.el-collapse {
  border-color: var(--el-color-primary);
  height: 460px;
}

::v-deep .el-collapse-item__header {
  border-bottom-color: var(--el-color-primary);
  color: #000 !important;
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}
</style>
