<template>
  <div>
    <MOSTY.FromPage :title="props.title" @closeDialog="closeDialog">
      <template #content>
        <div class="config" :style="{ paddingRight: `${ruleForm.id ? 230 : 0}px` }">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :disabled="!props.saveBtnShow"
            class="demo-ruleForm.value">
            <el-form-item label="所属单位：" label-width="230px">
              <el-input v-model="ruleForm.orgname" disabled clearable style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="projectname" label-width="230px">
              <el-input v-model="ruleForm.projectname" :disabled="ruleForm.id" clearable
                style="width: 250px"></el-input>
            </el-form-item>
            <!-- <el-form-item label="施工状态：" prop="status" label-width="230px" v-if="props.title !== '新增'">
              <el-select style="width: 250px" v-model="ruleForm.status" placeholder="请选择施工状态" :disabled="ruleForm.id">
                <el-option v-for="item in props.zdlist.D_BZ_SGZT" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item> -->
            <el-form-item label="归口部门：" prop="countyname" label-width="230px">
              <el-input v-model="ruleForm.countyname" disabled style="width: 250px">
                <template #append> <el-button :disabled="ruleForm.id" class="cursor"
                    @click="ChooesDdld('03')">选择</el-button></template>
              </el-input>
            </el-form-item>
            <el-form-item label="负责人：" prop="liablename" label-width="230px">
              <el-input v-model="ruleForm.liablename" disabled style="width: 250px">
                <template #append> <el-button class="cursor" @click="ChooesDdld('02')"
                    :disabled="ruleForm.id">选择</el-button></template>
              </el-input>
            </el-form-item>
            <el-form-item label="占地面积：" prop="coveraera" label-width="230px">
              <el-input v-model.number="ruleForm.coveraera" type="number" clearable style="width: 250px"
                :disabled="ruleForm.id">
                <template #append>m²</template>
              </el-input>
            </el-form-item>
            <el-form-item label="建筑面积：" prop="buildaera" label-width="230px">
              <el-input v-model.number="ruleForm.buildaera" type="number" clearable style="width: 250px"
                :disabled="ruleForm.id">
                <template #append>m²</template>
              </el-input>
            </el-form-item>
            <el-form-item label="投资金额：" prop="totalinvestment" label-width="230px">
              <el-input v-model.number="ruleForm.totalinvestment" type="number" clearable style="width: 250px"
                :disabled="ruleForm.id">
                <template #append>万元</template>
              </el-input>
            </el-form-item>

            <el-form-item label="最终审批级别：" prop="judgelevel" label-width="230px">
              <el-select style="width: 250px" v-model="ruleForm.judgelevel" placeholder="请选择最终审批级别"
                :disabled="ruleForm.id">
                <el-option v-for="item in props.zdlist.D_BZ_STS_SPJB" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <!--
            <el-form-item label="施工阶段附件：" style="width: 100%" label-width="230px">
              <MOSTY.Upload
                :widthNumber="1205"
                :showinput="true"
                :placeholder="'请上传施工阶段附件（pdf,ofd,doc,docx,xls,xlsx）'"
                :gsgfList="['pdf', 'ofd','doc', 'docx', 'xls', 'xlsx']"
                :limit="1"
                :nopicer="true"
                :isImg="false"
                :ShowfileList="true"
                v-model="ruleForm.constructionfileid"
                :delrow="delrow"
              >
              </MOSTY.Upload>
            </el-form-item> -->
            <!-- <el-form-item label="施工阶段时间：" label-width="230px">
              <el-date-picker
                v-model="ruleForm.constructionDate"
                :disabled-date="disablednowDate"
                type="date"
                placeholder="施工阶段时间"
                value-format="YYYY-MM-DD"
                style="width: 250px"
                @change="changetime"
              />
            </el-form-item>
            <el-form-item label="施工阶段附件：" label-width="230px" style="width: 800px">
              <MOSTY.Upload
                :widthNumber="732"
                :showinput="true"
                :placeholder="'请上传施工阶段附件（pdf,ofd,doc,docx,xls,xlsx）'"
                :limit="1"
                :gsgfList="['pdf', 'ofd','doc', 'docx', 'xls', 'xlsx']"
                :nopicer="true"
                :isImg="false"
                :ShowfileList="true"
                v-model="ruleForm.studyfileid"
                :delrow="delrow"
              >
              </MOSTY.Upload>
            </el-form-item> -->
            <el-form-item label="批复时间：" label-width="230px" prop="approvalDate">
              <el-date-picker v-model="ruleForm.approvalDate" :disabled-date="disabledyssj" type="date"
                placeholder="批复时间" value-format="YYYY-MM-DD" style="width: 250px" :disabled="ruleForm.id" />
            </el-form-item>
            <el-form-item label="批复文件：" style="width: 62%" label-width="230px" prop="approvalFiles">
              <MOSTY.Upload :limit="1" :widthNumber="732" :showinput="true"
                :placeholder="'请上传批复文件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx','wps']" :nopicer="true" :isImg="false"
                :ShowfileList="true" v-model="ruleForm.approvalFiles" :delrow="delrow" :disabled="ruleForm.id">
              </MOSTY.Upload>
            </el-form-item>
            <el-form-item label="可研阶段报告时间：" label-width="230px" v-if="ruleForm.id" prop="studytime">
              <el-date-picker v-model="ruleForm.studytime" :disabled-date="disablednowDate" type="date"
                placeholder="可研阶段报告时间" value-format="YYYY-MM-DD" style="width: 250px" @change="changetime"
                :disabled="stepsData[0].disabled" />
            </el-form-item>
            <el-form-item label="可研阶段综合分析或预评价报告：" label-width="230px" style="width: 62%" v-if="ruleForm.id">
              <MOSTY.Upload :widthNumber="732" :showinput="true"
                :placeholder="'请上传可研阶段综合分析或预评价报告附件（pdf,ofd,doc,docx,xls,xlsx,wps）'" :limit="1"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx','wps']" :nopicer="true" :isImg="false"
                :ShowfileList="true" v-model="ruleForm.studyfileid" :delrow="delrow" :disabled="stepsData[0].disabled">
              </MOSTY.Upload>
            </el-form-item>
            <el-form-item label="设计阶段审查时间：" label-width="230px" v-if="ruleForm.id" prop="designtime">
              <el-date-picker v-model="ruleForm.designtime" :disabled-date="disabledtrsj" type="date"
                placeholder="设计阶段审查时间" value-format="YYYY-MM-DD" style="width: 250px" @change="changetime2"
                :disabled="stepsData[1].disabled" />
            </el-form-item>
            <el-form-item label="设计阶段审查报告：" label-width="230px" style="width: 62%" v-if="ruleForm.id">
              <MOSTY.Upload :widthNumber="732" :showinput="true" :placeholder="'请上传设计阶段审查报告（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx','wps']" :limit="1" :nopicer="true" :isImg="false"
                :ShowfileList="true" v-model="ruleForm.designfileid" :delrow="delrow" :disabled="stepsData[1].disabled">
              </MOSTY.Upload>
            </el-form-item>
            <el-form-item label="施工阶段审批时间：" label-width="230px" v-if="ruleForm.id">
              <el-date-picker v-model="ruleForm.judgetime" :disabled-date="disabledyssj" type="date"
                placeholder="施工阶段审批时间" value-format="YYYY-MM-DD" style="width: 250px"
                :disabled="stepsData[2].disabled" />
            </el-form-item>
            <el-form-item label="施工阶段审批文件：" style="width: 62%" label-width="230px" v-if="ruleForm.id">
              <MOSTY.Upload :limit="1" :widthNumber="732" :showinput="true"
                :placeholder="'请上传施工阶段审批文件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx','wps']" :nopicer="true" :isImg="false"
                :ShowfileList="true" v-model="ruleForm.judgefileid" :delrow="delrow" :disabled="stepsData[2].disabled">
              </MOSTY.Upload>
              <!-- :gsgfList="['pdf', 'ofd','doc', 'docx', 'xls', 'xlsx']" -->
            </el-form-item>

            <el-form-item label="施工阶段图片:" style="width: 100%" label-width="230px" v-if="ruleForm.id">
              <MOSTY.Upload :widthNumber="732" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                v-model="ruleForm.constructionImgId" :nameshow="true" :gsgfList="['jpg', 'png']">
              </MOSTY.Upload>
            </el-form-item>

            <el-form-item label="安全验收阶段报告时间：" label-width="230px" v-if="ruleForm.id" prop="checkfiletime">
              <el-date-picker v-model="ruleForm.checkfiletime" :disabled-date="disabledyssj" type="date"
                placeholder="安全验收阶段报告时间" value-format="YYYY-MM-DD" style="width: 250px"
                :disabled="stepsData[3].disabled" />
            </el-form-item>
            <el-form-item label="安全验收阶段报告附件：" style="width: 62%" label-width="230px" v-if="ruleForm.id">
              <MOSTY.Upload :limit="1" :widthNumber="732" :showinput="true"
                :placeholder="'请上传安全验收阶段报告附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx','wps']" :nopicer="true" :isImg="false"
                :ShowfileList="true" v-model="ruleForm.checkfileid" :delrow="delrow" :disabled="stepsData[3].disabled">
              </MOSTY.Upload>
            </el-form-item>
            <el-form-item label="安全验收阶段报告照片:" style="width: 100%" label-width="230px" v-if="ruleForm.id">
              <MOSTY.Upload :widthNumber="732" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                v-model="ruleForm.checkImgId" :nameshow="true" :gsgfList="['jpg', 'png']">
              </MOSTY.Upload>
            </el-form-item>

            <el-steps style="max-width: 600px" direction="vertical"
              :active="ruleForm.status == '5' && stepsData[3].disabled ? 5 : stepsData.findIndex(item => item.description === '') + 1"
              v-if="ruleForm.id">
              <el-step title="创建项目" icon="Edit" :description="ruleForm.xtCjsj" />
              <el-step :title="item.title" icon="Edit" :description="item.description" v-for="(item, i) in stepsData"
                :key="i" />
            </el-steps>
          </el-form>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" :loading="loading" @click="handleSave(ruleFormRef)" v-if="props.saveBtnShow">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="closeDialog" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>
    <!-- 选择参与部门: -->
    <ChooseDept :formInfo="ruleForm" :showDdld="showJkssbm" @closezzjg="closeJhss" @listdata="getSonValue"
      :zzlx="zzlx" />
    <!-- 选择负责人 :deptId="listQuery.orgCode" -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :deptId="ruleForm.countycode" :data="memberList"
      :leaderid="leaderid" @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits, reactive, getCurrentInstance } from "vue"
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"
import ChooseDept from "@/components/MyComponents/ChooseDept/index.vue"
import { getItem } from "@/utils/storage"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import { disablednowDate } from "@/utils/tools.js"
import * as rule from "@/utils/rules.js"
const { proxy } = getCurrentInstance();
const delrow = ref({}) //删除文件列表
const orgCode = ref(getItem("deptId").ssdwmc) //获取当前登录部门
const chooseUserVisible = ref(false) //选择负责人弹窗
const memberList = ref([]) //成员选择的id回显
const showJkssbm = ref(false) //选择部门
const leaderid = ref("")
const singleShow = ref(true) //单选多选
const loading = ref(false) //新增保存按钮截流
// 数据
const zzlx = ref(null)
const ruleFormRef = ref()
//表单数据
const ruleForm = ref({
  orgcode: getItem("deptId").ssdwid,
  orgname: getItem("deptId").ssdwmc
})
const rules = reactive({
  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"),
  countyname: [{ required: true, message: "归口部门不能为空", trigger: "blur" }],
  liablename: [{ required: true, message: "负责人不能为空", trigger: "blur" }],
  status: [{ required: true, message: "施工状态不能为空", trigger: "blur" }],
  judgelevel: [{ required: true, message: "请选择最终审批级别", trigger: "change" }],
  approvalDate: [{ required: true, message: "请选择批复时间", trigger: "blur" }],
  approvalFiles: [{ required: true, message: "请上传批复文件", trigger: "blur" }],
  studytime: [{ required: true, message: "请选择可研阶段报告时间", trigger: "blur" }],
  designtime: [{ required: true, message: "请选择设计阶段审查时间", trigger: "blur" }],
  judgetime: [{ required: true, message: "请选择施工阶段审批时间", trigger: "blur" }],
  checkfiletime: [{ required: true, message: "请选择安全验收阶段报告时间", trigger: "blur" }]
})
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  },
  zdlist: {
    type: Object,
    default: () => { }
  },
  title: String,
  rowId: String,
  keys: Number,
  saveBtnShow: {
    default: true,
    type: Boolean
  }
})

const closeJhss = val => {
  showJkssbm.value = val
}
const stepsData = reactive([
  {
    title: "可研阶段",
    description: "",
    disabled: true
  },
  {
    title: "设计阶段",
    description: "",
    disabled: true
  },
  {
    title: "施工阶段",
    description: "",
    disabled: true
  },
  {
    title: "验收阶段",
    description: "",
    disabled: true
  }
])
onMounted(() => {
  if (props.rowId) {
    getxqdata(props.rowId)
  } else {
    ruleForm.value = {}
    ruleForm.value.orgcode = getItem("deptId").ssdwid
    ruleForm.value.orgname = getItem("deptId").ssdwmc
    restfrom()
  }
  ruleForm.value.orgcode = getItem("deptId").ssdwid
  ruleForm.value.orgname = getItem("deptId").ssdwmc
})
const emits = defineEmits(["changeAddVi"])
function disabledtrsj(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(ruleForm.value.studytime).getTime() || time.getTime() > Date.now()
}
function disabledyssj(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(ruleForm.value.designtime).getTime() || time.getTime() > Date.now()
}
function changetime(params) {
  ruleForm.value.designtime = ""
  ruleForm.value.checkfiletime = ""
  ruleForm.value.judgetime = ""
}
function changetime2(params) {
  ruleForm.value.checkfiletime = ""
  ruleForm.value.judgetime = ""
}
//获取详情
function getxqdata(id) {
  getApi({ id }, `/mosty-jcgl/stsFile/queryStsFileById`).then(res => {
    if (res) {
      ruleForm.value = res
      orgCode.value = ruleForm.value.orgname
      if (res.xtCjsj && !res.studytime && !res.designtime && !res.judgetime && !res.checkfiletime) {
        stepsData[0].disabled = false
        stepsData[0].description = res.studytime ? res.studytime : ''
        res.xtCjsj = res.xtCjsj.split(" ")[0]
        ruleForm.value.status = "2"
        rules.designtime[0].required = false
        rules.judgetime[0].required = false
        rules.checkfiletime[0].required = false

      } else if (res.xtCjsj && res.studytime && !res.designtime && !res.judgetime && !res.checkfiletime) {
        stepsData[0].description = res.studytime
        stepsData[1].description = res.designtime
        stepsData[1].disabled = false
        stepsData[2].description = ''
        ruleForm.value.status = "3"
        rules.judgetime[0].required = false
        rules.checkfiletime[0].required = false
      } else if (res.xtCjsj && res.studytime && res.designtime && !res.judgetime && !res.checkfiletime) {
        stepsData[0].description = res.studytime
        stepsData[1].description = res.designtime
        stepsData[2].description = res.judgetime
        stepsData[2].disabled = false
        ruleForm.value.status = "4"
        rules.checkfiletime[0].required = false
      } else if (res.xtCjsj && res.studytime && res.designtime && res.judgetime && !res.checkfiletime) {
        stepsData[0].description = res.studytime
        stepsData[1].description = res.designtime
        stepsData[2].description = res.judgetime
        stepsData[3].description = res.checkfiletime
        stepsData[3].disabled = false
        ruleForm.value.status = "5"
      } else if (res.xtCjsj && res.studytime && res.designtime && res.judgetime && res.checkfiletime) {
        stepsData[0].description = res.studytime
        stepsData[1].description = res.designtime
        stepsData[2].description = res.judgetime
        stepsData[3].description = res.checkfiletime
        ruleForm.value.status = "5"
      }
    }
  })
}

function ChooesDdld(val) {
  zzlx.value = val
  leaderid.value = ""
  //评审人员
  if (val == "02") {
    if (ruleForm.value.countycode) {
      singleShow.value = true
      chooseUserVisible.value = true
    } else {
      ElMessage.warning("请先选择归口部门！！！")
    }
  }
  if (val == "03") {
    showJkssbm.value = true
  }
}
const getSonValue = value => {
  if (zzlx.value == "02") {
    ruleForm.value.liablename = value[0].userName
    ruleForm.value.liablecount = value[0].id
  }
  if (zzlx.value == "03") {
    ruleForm.value.countyname = value.orgName
    ruleForm.value.countycode = value.id
  }
}
function restfrom() {
  ruleForm.value.orgcode = getItem("deptId").ssdwid
  ruleForm.value.orgname = getItem("deptId").ssdwmc
  ruleForm.value.constructionfileid = null
  ruleForm.value.studyfileid = null
  ruleForm.value.designfileid = null
  ruleForm.value.checkfileid = null
  ruleForm.value.judgefileid = null
  ruleForm.value.approvalFiles = null
}

// 关闭×
const closeDialog = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        loading.value = false
        ruleForm.value = {}
        emits("changeAddVi", false)
      })
      .catch(() => {
        // catch error
      })
  } else {
    loading.value = false
    ruleForm.value = {}
    emits("changeAddVi", false)
  }

}
// 保存
const handleSave = async ruleFormRef => {
  if (!ruleFormRef) return
  await ruleFormRef.validate(valid => {
    if (valid) {
      if (ruleForm.value) {
        ruleForm.value.studyfileid = ruleForm.value.studyfileid ? ruleForm.value.studyfileid.toString() : null
        ruleForm.value.constructionfileid = ruleForm.value.constructionfileid ? ruleForm.value.constructionfileid.toString() : null
        ruleForm.value.designfileid = ruleForm.value.designfileid ? ruleForm.value.designfileid.toString() : null
        ruleForm.value.checkfileid = ruleForm.value.checkfileid ? ruleForm.value.checkfileid.toString() : null
        ruleForm.value.judgefileid = ruleForm.value.judgefileid ? ruleForm.value.judgefileid.toString() : null
        ruleForm.value.approvalFiles = ruleForm.value.approvalFiles ? ruleForm.value.approvalFiles.toString() : null
        ruleForm.value.constructionImgId = ruleForm.value.constructionImgId ? ruleForm.value.constructionImgId.toString() : null
        ruleForm.value.checkImgId = ruleForm.value.checkImgId ? ruleForm.value.checkImgId.toString() : null

        loading.value = true
        if (!ruleForm.value.id) {
          ruleForm.value.orgname = orgCode.value
          ruleForm.value.status = '1'
          ruleForm.value.orgcode = getItem("deptId").ssdwid
          postApi(ruleForm.value, "/mosty-jcgl/stsFile/addStsFileOne")
            .then(() => {
              loading.value = false
              ElMessage.success("新增成功")
              restfrom()
              emits("changeAddVi", false)
            }).finally(() => {
              loading.value = false
            })
        } else {
          postApi(ruleForm.value, "/mosty-jcgl/stsFile/updateStsFileOne")
            .then(() => {
              loading.value = false
              ElMessage.success("修改成功")
              restfrom()
              emits("changeAddVi", false)
            })
            .finally(() => {
              loading.value = false
            })
        }
      }
    } else {
      ElMessage.error("请输入必填项")
    }
  })
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 70vh !important;
}

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

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

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

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

.config {
  width: 100%;

  .el-form {
    width: 1000px;
    margin: 20px auto;
    flex-wrap: wrap;
    justify-content: start;
    position: relative;

    .el-steps {
      position: absolute;
      z-index: 9;
      right: -450px;
      height: 240px;
      top: 160px;
      width: 200px;
    }
  }

  .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 {
  height: 230px !important;
}

.el-table {
  height: 230px !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>
