<template>
  <div>
    <el-dialog :title="props.title" width="1000px" v-model="props.addDiaShow" :before-close="handleClose">
      <!-- 培训计划新增或修改 -->
      <div class="config">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :disabled="!props.saveBtnShow" label-width="135px"
          class="demo-ruleForm.value">
          <el-form-item label="变更类别：" prop="changeType">
            <el-select v-model="ruleForm.changeType" clearable placeholder="请选择变更类别：" style="width: 250px">
              <el-option v-for="item in D_TB_BGLB" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="变更时间：" prop="changeTime">
            <el-date-picker v-model="ruleForm.changeTime" style="width: 250px" type="date" placeholder="请选择变更时间"
              value-format="YYYY-MM-DD" :disabled-date="disablednowDate" />
          </el-form-item>
          <el-form-item label="变更名称：" prop="titlename">
            <el-input v-model="ruleForm.titlename" maxlength="50" autosize show-word-limit placeholder="不能超过50个字"
              style="width: 250px"></el-input>
          </el-form-item>
          <!-- <el-form-item label="项目名称：" prop="projectName">
            <el-input v-model="ruleForm.projectName" maxlength="50" autosize type="textarea" show-word-limit placeholder="不能超过50个字" style="width: 250px"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="占地面积：" prop="coveraera">
            <el-input v-model.number="ruleForm.coveraera" type="number" clearable style="width: 250px">
              <template #append>m²</template>
</el-input>
</el-form-item> -->
          <!-- <el-form-item label="建筑面积：" prop="buildaera">
            <el-input v-model.number="ruleForm.buildaera" type="number" clearable style="width: 250px">
              <template #append>m²</template>
            </el-input>
          </el-form-item> -->
          <!-- <el-form-item label="总投资：" prop="totalinvestment">
            <el-input v-model.number="ruleForm.totalinvestment" type="number" clearable style="width: 250px">
              <template #append>元</template>
            </el-input>
          </el-form-item> -->
          <!-- <el-form-item label="施工状态：" prop="constructionStatus">
            <el-select v-model="ruleForm.constructionStatus" style="width: 250px" clearable placeholder="请选择施工状态">
              <el-option v-for="(item, i) in selOptions1" :key="i" :label="item" :value="item" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="变更内容：" prop="changeContent">
            <el-input v-model="ruleForm.changeContent" maxlength="250" type="textarea" show-word-limit
              placeholder="不能超过250个字" style="width: 745px"></el-input>
          </el-form-item>

          <el-form-item label="变更方案附件：" style="width: 100%">
            <MOSTY.Upload :widthNumber="745" :showinput="true" :limit="4" :nopicer="true" :isImg="false"
              :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
              v-model="ruleForm.files" :delrow="delrow">
            </MOSTY.Upload>
          </el-form-item>
          <el-form-item label="评审记录附件：" style="width: 100%">
            <MOSTY.Upload :widthNumber="745" :showinput="true" :limit="4" :nopicer="true" :isImg="false"
              :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
              v-model="ruleForm.reviewFiles" :delrow="delrow">
            </MOSTY.Upload>
          </el-form-item>
          <el-form-item label="实施资料附件：" style="width: 100%">
            <MOSTY.Upload :widthNumber="745" :showinput="true" :limit="4" :nopicer="true" :isImg="false"
              :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :ShowfileList="true"
              v-model="ruleForm.realFiles" :delrow="delrow">
            </MOSTY.Upload>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">

          <el-button type="primary" :loading="loading" @click="handleSave(ruleFormRef)" v-if="saveBtnShow">
            <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, watchEffect, getCurrentInstance, nextTick } from "vue"
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
import { disablednowDate } from "@/utils/tools.js"
import * as MOSTY from "@/components/MyComponents/index"
import * as rule from "@/utils/rules.js"

const { proxy } = getCurrentInstance()
const { D_TB_BGLB } = proxy.$dict("D_TB_BGLB")
const loading = ref(false) //新增保存按钮截流
const ruleForm = ref({})
//表单数据
const ruleFormRef = ref()
const selOptions1 = ["可研阶段", "设计阶段", "施工阶段", "验收阶段"]
//规则校验
const rules = reactive({
  changeType: [{ required: true, message: "变更类别不能为空", trigger: "blur" }],
  titlename: [{ required: true, message: "变更名称不能为空", trigger: "blur" }],
  changeContent: [{ required: true, message: "变更内容不能为空", trigger: "blur" }],
  projectName: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
  ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 9, lastNum: 2 }, "coveraera"),
  ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 11, lastNum: 2 }, "buildaera"),
  ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 11, lastNum: 2 }, "totalinvestment"),
  changeTime: [{ required: true, message: "变更时间不能为空", trigger: "blur" }],
  constructionStatus: [{ required: true, message: "请选择施工状态", trigger: "blur" }]
})
const props = defineProps({
  addDiaShow: {
    type: Boolean,
    default: false
  },
  rowid: {
    type: String,
    default: null
  },
  title: String,
  saveBtnShow: {
    default: true,
    type: Boolean
  }
})
const emits = defineEmits(["changeAddVi", "changeclose"])

watch(
  () => props.rowid,
  newVal => {
    if (newVal) {
      getxqdata(newVal)
    } else {
      ruleForm.value = {}
    }
  }
)

watch(
  () => props.addDiaShow,
  (n, o) => {
    if (n) {
      nextTick(() => {
        // ruleFormRef.value.reValidate()
        ruleFormRef.value.resetFields()
      })
    }
  },
  { deep: true }
)
onMounted(() => { })

//获取详情
function getxqdata(id) {
  getApi({}, `/mosty-jcgl	/change/getChangeById/${id}`).then(res => {
    if (res) {
      ruleForm.value = res
    }
  })
}

// 关闭
const handleClose = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate()
        emits("changeAddVi", false)
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate()
    emits("changeAddVi", false)
  }

}

// 保存
const handleSave = async ruleFormRef => {
  if (!ruleFormRef) return
  await ruleFormRef.validate(valid => {
    if (valid) {
      if (ruleForm.value) {
        loading.value = true
        ruleForm.value.files = ruleForm.value.files ? ruleForm.value.files.toString() : null
        ruleForm.value.reviewFiles = ruleForm.value.reviewFiles ? ruleForm.value.reviewFiles.toString() : null
        ruleForm.value.realFiles = ruleForm.value.realFiles ? ruleForm.value.realFiles.toString() : null
        if (!ruleForm.value.id) {
          postApi(ruleForm.value, "/mosty-jcgl/change/addChangeOne").then(res => {
            loading.value = false
            ElMessage.success("新增成功")
            emits("changeAddVi", false)
          })
        } else {
          postApi(ruleForm.value, "/mosty-jcgl/change/updateChangeOne").then(res => {
            loading.value = false
            ElMessage.success("修改成功")
            emits("changeAddVi", false)
          })
        }
      }
    } else {
      ElMessage.error("请输入必填项")
    }
  })
}
</script>

<style lang="scss" scoped>
::v-deep .el-collapse {
  width: 100% !important;
}

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

  .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 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

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

.pxdx_box {
  width: 500px;
}

.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 {
  max-height: 300px;
  overflow-y: scroll;
}

.el-table {
  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>
