<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>
        <div class="fromBoxs">
          <el-form ref="ruleFormRef" :disabled="!data.config.saveBtnShow" :model="data.fromObj" :rules="rules"
            label-width="150px" class="demo-ruleForm" status-icon :inline="true">
            <el-form-item label="预案名称：" prop="planname">
              <el-input v-model="data.fromObj.planname" placeholder="请输入预案名称" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="编制小组名称：" prop="compilegroup">
              <el-input v-model="data.fromObj.compilegroup" placeholder="请输入编制小组名称" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="预案类型：" prop="plantype">
              <el-select v-model="data.fromObj.plantype" placeholder="请选择预案类型" clearable style="width: 220px">
                <el-option v-for="item in D_TB_YALX" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="编制组长：" prop="groupusername">
              <el-input v-model="data.fromObj.groupusername" @click="chooseUser('01')" readonly placeholder="请输入编制组长"
                style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="应对风险类别：" prop="danger">
              <MOSTY.DictTree :zdbh="'D_BZ_SGSJLB'" v-model="data.fromObj.danger" :placeholder='"请选择类别:"'
                :disabled='false' style="width: 220px;" />
              <!-- <el-select v-model="data.fromObj.danger" placeholder="请选择应对风险类别" clearable style="width: 220px">
                <el-option v-for="item in D_BZ_YXKJSGLB" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="修订意见：" prop="revisionopinion" v-if="data.config.type == 'edit'">
              <el-input v-model="data.fromObj.revisionopinion" type="textarea" sutosize show-word-limit maxlength="200"
                style="width: 1002px" />
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="data.fromObj.bz" type="textarea" sutosize show-word-limit maxlength="200"
                style="width: 1002px" />
            </el-form-item>
            <MOSTY.Assort :title="'分析及评估'" />
            <el-form-item label="分析及评估：" style="width: 762px">
              <MOSTY.Upload :widthNumber="610" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                :disabled="!data.config.saveBtnShow" v-model="data.fromObj.fxpg" :showinput="true" :delrow="delrow"
                :placeholder="'pdf,ofd,doc,docx,xls,xlsx,wps'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
              </MOSTY.Upload>
            </el-form-item>
            <div v-if="data.config.saveBtnShow && data.config.type == 'edit'">
              <el-form-item label="历史版本：" style="width: 762px">
                <MOSTY.Upload :widthNumber="610" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                  :disabled="true" v-model="fileData.fxpg" :showinput="true" :delrow="delrow"
                  :placeholder="'请上分析及评估附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
                </MOSTY.Upload>
              </el-form-item>
              <el-form-item label="上传人员：">
                <el-input v-model="data.fromObj.xtCjr" style="width: 220px"></el-input>
              </el-form-item>
              <el-form-item label="上传时间：">
                <el-input v-model="data.fromObj.xtCjsj" style="width: 220px"></el-input>
              </el-form-item>
            </div>
            <MOSTY.Assort :title="'预案编制'" />
            <el-form-item label="预案编制：" style="width: 100%">
              <MOSTY.Upload :widthNumber="610" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                :disabled="!data.config.saveBtnShow" v-model="data.fromObj.yabz" :showinput="true" :delrow="delrow"
                :placeholder="'请上传预案编制附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
              </MOSTY.Upload>
            </el-form-item>
            <div v-if="data.config.saveBtnShow && data.config.type == 'edit'">
              <el-form-item label="历史版本：" style="width: 100%">
                <MOSTY.Upload :widthNumber="610" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                  :disabled="true" v-model="fileData.yabz" :showinput="true" :delrow="delrow"
                  :placeholder="'请上传预案编制附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
                </MOSTY.Upload>
              </el-form-item>
              <el-form-item label="上传人员：">
                <el-input v-model="data.fromObj.xtCjr" style="width: 220px"></el-input>
              </el-form-item>
              <el-form-item label="上传时间：">
                <el-input v-model="data.fromObj.xtCjsj" style="width: 220px"></el-input>
              </el-form-item>
            </div>
            <MOSTY.Assort :title="'预案论证'" />
            <el-form-item label="预案论证：" style="width: 100%">
              <MOSTY.Upload :widthNumber="610" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                :disabled="!data.config.saveBtnShow" v-model="data.fromObj.yalz" :showinput="true" :delrow="delrow"
                :placeholder="'请上传预案论证附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
              </MOSTY.Upload>
            </el-form-item>
            <div v-if="data.config.saveBtnShow && data.config.type == 'edit'">
              <el-form-item label="历史版本：" style="width: 100%">
                <MOSTY.Upload :widthNumber="610" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                  :disabled="true" v-model="fileData.yalz" :showinput="true" :delrow="delrow"
                  :placeholder="'请上传预案编制附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
                </MOSTY.Upload>
              </el-form-item>
              <el-form-item label="上传人员：">
                <el-input v-model="data.fromObj.xtCjr" style="width: 220px"></el-input>
              </el-form-item>
              <el-form-item label="上传时间：">
                <el-input v-model="data.fromObj.xtCjsj" style="width: 220px"></el-input>
              </el-form-item>
            </div>
            <MOSTY.Assort :title="'批准发布信息'" />
            <el-form-item label="批准发布附件：" style="width: 100%">
              <MOSTY.Upload :widthNumber="610" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                :disabled="!data.config.saveBtnShow" v-model="data.fromObj.pzfb" :showinput="true" :delrow="delrow"
                :placeholder="'请上传批准发布附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
              </MOSTY.Upload>
            </el-form-item>
            <el-form-item label="批准发布人：" prop="approvalname" style="width: 100%">
              <el-input v-model="data.fromObj.approvalname" clearable style="width: 220px" @click="chooseUser('02')" />
            </el-form-item>
            <div v-if="data.config.saveBtnShow && data.config.type == 'edit'">
              <el-form-item label="历史版本：" style="width: 100%">
                <MOSTY.Upload :widthNumber="610" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                  :disabled="true" v-model="fileData.pzfb" :showinput="true" :delrow="delrow"
                  :placeholder="'请上传预案编制附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
                </MOSTY.Upload>
              </el-form-item>
              <el-form-item label="上传人员：">
                <el-input v-model="data.fromObj.xtCjr" style="width: 220px"></el-input>
              </el-form-item>
              <el-form-item label="上传时间：">
                <el-input v-model="data.fromObj.xtCjsj" style="width: 220px"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <div v-if="data.config.type != 'add'">
          <MOSTY.Assort :title="'历史版本'" />
          <MyTable class="pt10" :tableData="historyData.tableData" :tableColumn="historyData.tableColumn"
            :tableConfiger="historyData.tableConfiger">
            <!-- 自定义插槽 -->
            <template #plantype="{ row }">
              <dict-tag v-if="row.plantype" :options="D_TB_YALX" :value="row.plantype" :tag="false" />
              <span v-else>无</span>
            </template>
            <!-- 操作 -->
            <template #controls="scoped">
              {{ scoped.row.$index }}
              <span style="color: red; font-weight: 600" v-if="scoped.$index == 0">当前版本</span>
            </template>
          </MyTable>
        </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>

    <!-- 选择编制组长 -->
    <ChooseUser v-model="chooseGroupuser" :Single="singleShow" :leaderid="data.fromObj.groupuserid"
      @choosedUsers="getGroupuser" />

    <!-- 选择批准发布人 -->
    <ChooseUser v-model="chooseApproval" :Single="singleShow" :leaderid="data.fromObj.approvalid"
      @choosedUsers="getApproval" />
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, onMounted } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessage } from "element-plus"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"
import PageTitle from "@/components/PageTitle/PageTitle.vue"
import MyTable from "@/components/aboutTable/MyTable/index.vue"
const { proxy } = getCurrentInstance()
const { D_TB_YALX, D_BZ_YXKJSGLB } = proxy.$dict("D_TB_YALX", "D_BZ_YXKJSGLB")
import { getErrMsg } from '@/utils/tools.js'

const ruleFormRef = ref()
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
})
const rules = reactive({
  plantype: [{ required: true, message: "请选择预案类型", trigger: "change" }],
  // danger: [{ required: true, message: "请选择应对风险类别", trigger: "change" }],
  compilegroup: [{ required: true, message: "请输入编制小组名称", trigger: "blur" }],
  planname: [{ required: true, message: "请输入预案名称", trigger: "blur" }],
  groupusername: [{ required: true, message: "请选择编制组长", trigger: "change" }],
  revisionopinion: [{ required: true, message: "请输入修订意见", trigger: "blur" }]
})
const historyData = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "版本号",
      prop: "versionnumber",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "预案名称",
      prop: "planname",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "预案类型",
      prop: "plantype",
      showOverflowTooltip: true,
      sortable: false,
      showSolt: true
    },
    {
      label: "编制小组名称",
      prop: "compilegroup",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "编制组长",
      prop: "groupusername",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "修订意见",
      prop: "revisionopinion",
      showOverflowTooltip: true,
      sortable: false
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: 400
  }
})
const data = reactive({
  fromObj: {},
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true,
    type: ""
  }
})
// 点击编制组长
const chooseGroupuser = ref(false)
// 点击批准发布人
const chooseApproval = ref(false)
// 单选多选
const singleShow = ref(true)
//修改的时候附件的保存位置
const fileData = ref({})
const emit = defineEmits("changePage")

onMounted(() => {
  if (props.editObj) {
    data.config = props.editObj
  }
  // 获取详情
  getmain(props.editObj.id)
  // 获取历史版本
  getHistoryList(props.editObj.id)
})
// 选择编制组长
const getGroupuser = value => {
  data.fromObj.groupusername = value[0].userName
  data.fromObj.groupuserid = value[0].id
}
// 选择批准发布人
const getApproval = value => {
  data.fromObj.approvalname = value[0].userName
  data.fromObj.approvalid = value[0].id
}
//点击编制组长
function chooseUser(val) {
  if (val == "01") {
    singleShow.value = true
    chooseGroupuser.value = true
  } else if (val == "02") {
    singleShow.value = true
    chooseApproval.value = true
  }
}
// 保存
const submit = async ruleFormRef => {
  if (!ruleFormRef) return
  await ruleFormRef.validate((valid,fields) => {
    if (valid) {
      if (data.fromObj) {
        data.fromObj.fxpg = data.fromObj.fxpg ? data.fromObj.fxpg.toString() : null
        data.fromObj.yabz = data.fromObj.yabz ? data.fromObj.yabz.toString() : null
        data.fromObj.yalz = data.fromObj.yalz ? data.fromObj.yalz.toString() : null
        data.fromObj.pzfb = data.fromObj.pzfb ? data.fromObj.pzfb.toString() : null
        if (!data.fromObj.id) {
          postApi(data.fromObj, "/mosty-jcgl/yabz/addYabzOne")
            .then(() => {
              ElMessage.success("新增成功")
              emit("changePage", "Main")
            })
            .catch(err => {

            })
        } else {
          postApi(data.fromObj, "/mosty-jcgl/yabz/updateYabzOne").then(() => {
            ElMessage.success("修订成功")
            emit("changePage", "Main")
          })
        }
      }
    } else {
      const errMsg = getErrMsg(fields);
      ElMessage.warning(errMsg || "请检查表单!");
    }
  })
}
// 获取历史记录
function getHistoryList(id) {
  if (id) {
    getApi({}, "/mosty-jcgl/yabzHistory/getYabzByPlanid?planid=" + id).then(res => {
      if (res) {
        historyData.tableData = res
        data.fromObj.xtCjr = res[0].xtCjr
      }
    })
  }
}
// 获取详情
function getmain(id) {
  if (id) {
    getApi({ id: id }, "/mosty-jcgl/yabz/queryYabzById").then(res => {
      if (res) {
        data.fromObj = res
        data.fromObj.xtCjr = res.xtCjr
        if (data.config.type == "edit") {
          fileData.value.fxpg = data.fromObj.fxpg
          fileData.value.yabz = data.fromObj.yabz
          fileData.value.yalz = data.fromObj.yalz
          fileData.value.pzfb = data.fromObj.pzfb
        }
      }
    })
  }
}
// 返回主页
const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emit("changePage", "Main")
      })
      .catch(() => {
        // catch error
      })
  } else {
    emit("changePage", "Main")
  }

}
</script>

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

.Box {
  height: calc(100vh - 23vh);
  overflow-y: scroll;
}

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

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

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: start;
  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-upload-list {
  width: 50%;
}

::v-deep .el-collapse {
  width: 100% !important;
}
</style>
