<template>
  <div>
    <MOSTY.FromPage :title="pageTitle" @closeDialog="black">
      <template #content>
        <div class="formBox">
          <el-form ref="ruleFormRef" :model="listQuery" :rules="rules" status-icon :inline="true" label-width="204px"
            :disabled="!props.savebtn">
            <el-form-item label="驳回原因：" v-if="listQuery.bhyy" style="width: 100%; color: red;">
              <span style="color: red">{{ listQuery.bhyy }}</span>
            </el-form-item>
            <el-form-item label="事故名称：" prop="name" style="overflow-x: scroll;width:100%;">
              <el-input v-model="listQuery.name" clearable type="textarea" autosize maxlength="100"
                placeholder="不能超过100个字" style="width:100%" />
            </el-form-item>
            <el-form-item label="事故类型：" prop="type">
              <MOSTY.DictTree :zdbh="'D_BZ_SGSJLB'" v-model="listQuery.type" :placeholder='"请选择事故类型:"' :disabled='false'
                style="width:337px" />
            </el-form-item>
            <el-form-item label="事故分类：" prop="accidentClassification">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_SGFL" v-model="listQuery.accidentClassification"
                selectType="select" style="width: 337px" />
            </el-form-item>
            <el-form-item label="事故级别：" prop="grade">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_SGDJ" v-model="listQuery.grade" selectType="select"
                style="width: 337px" />
            </el-form-item>
            <el-form-item label="认定状态：" prop="affirm">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_RDZT" v-model="listQuery.affirm" selectType="select"
                style="width: 337px" />
            </el-form-item>
            <el-form-item label="事故发生时间：" prop="time">
              <el-date-picker v-model="listQuery.time" type="datetime" placeholder="请选择事故发生时间"
                value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disablednowDate1"
                style="width:337px" />
            </el-form-item>
            <el-form-item label="事故责任：" prop="duty" v-if="listQuery.affirm == '01'">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_SGRD" v-model="listQuery.duty" selectType="select"
                style="width: 337px" />
            </el-form-item>
            <el-form-item label="轻伤人数：" prop="slight">
              <el-input v-model.number="listQuery.slight" type="number" placeholder="填写整数" clearable
                style="width: 337px" />
            </el-form-item>
            <el-form-item label="重伤人数：" prop="serious">
              <el-input v-model.number="listQuery.serious" type="number" placeholder="填写整数" clearable
                style="width: 337px" />
            </el-form-item>
            <el-form-item label="死亡人数：" prop="dead">
              <el-input v-model.number="listQuery.dead" type="number" placeholder="填写整数" clearable
                style="width: 337px" />
            </el-form-item>
            <el-form-item label="下落不明人数：" prop="missing">
              <el-input v-model.number="listQuery.missing" type="number" placeholder="填写整数" clearable
                style="width: 337px" />
            </el-form-item>
            <el-form-item label="涉险人数：" prop="danger">
              <el-input v-model.number="listQuery.danger" type="number" placeholder="填写整数" clearable
                style="width: 337px" />
            </el-form-item>
            <el-form-item label="直接经济损失：" prop="damageMoney">
              <el-input v-model.Number="listQuery.damageMoney" type="number" placeholder="填写整数" clearable
                style="width: 337px">
                <template #append>
                  <div class="tc">万元</div>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="简要经过：" prop="accidentDetail" style="overflow-x: scroll;width:100%;">
              <el-input v-model="listQuery.accidentDetail" type="textarea" autosize placeholder="请输入简要经过" clearable
                style="width:100%;" />
            </el-form-item>
            <el-form-item label="事故发生地点：" prop="address" style="overflow-x: scroll;width:100%;">
              <el-input v-model="listQuery.address" type="textarea" autosize placeholder="请输入事故发生地点" clearable
                style="width:100%" />
            </el-form-item>
            <el-form-item label="事故原因：" prop="reason" style="overflow-x: scroll;width:100%;">
              <el-input v-model="listQuery.reason" autosize type="textarea" placeholder="请输入事故原因" clearable
                style="width:100%" />
            </el-form-item>
            <el-form-item label="事故人员：" prop="usernames" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" readonly clearable autosize v-model="listQuery.usernames" placeholder="请选择事故人员"
                style="width:90%;margin-right: 10px;">
              </el-input>
              <el-button class='cursor' @click="chooseUserOrDept('01')">选择</el-button>
              <!-- <XiangGFRen style="width:100%" v-model:ids="listQuery.userids" v-model:cName="listQuery.usernames" :relatedid="null"
              /> -->
            </el-form-item>
            <el-form-item label="事故设备：" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" autosize clearable v-model="listQuery.subject" placeholder="请输入事故设备"
                style="width:100%">
              </el-input>
            </el-form-item>
            <el-form-item label="道路情况(交通)：" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" autosize clearable v-model="listQuery.roadSituation" placeholder="请输入道路情况"
                style="width:100%">
              </el-input>
            </el-form-item>
            <el-form-item label="天气情况(交通)：" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" autosize clearable v-model="listQuery.weatherSituation" placeholder="请输入天气情况"
                style="width:100%">
              </el-input>
            </el-form-item>
            <el-form-item label="事故设备车辆损坏情况(交通)：" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" autosize clearable v-model="listQuery.accidentDamage"
                placeholder="请输入事故设备车辆损坏情况" style="width:100%">
              </el-input>
            </el-form-item>
            <el-form-item label="现场勘查人：" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" readonly clearable autosize v-model="listQuery.surveyor" placeholder="请选择现场勘查人"
                style="width:90%;margin-right: 10px;">
              </el-input>
              <el-button class='cursor' @click="chooseUserOrDept('02')">选择</el-button>
            </el-form-item>
            <el-form-item label="政府主管部门处理意见：" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" autosize clearable v-model="listQuery.governmentIdea"
                style="width:100%;margin-bottom: 10px;">
              </el-input>
              <MOSTY.Upload :isAutoWidth="true" v-model="listQuery.governmentIdeaFile" :limit="3" :nopicer="true"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :showbut="true"
                @filehandleChange="changeFile" :ShowfileList="true" :isImg="false" :showinput="true" />
            </el-form-item>
            <el-form-item label="事故基层单位处理意见及员工学习情况：" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" autosize clearable v-model="listQuery.basicLevelIdea"
                style="width:100%;margin-bottom: 10px;">
              </el-input>
              <MOSTY.Upload :isAutoWidth="true" v-model="listQuery.basicLevelIdeaFile" :limit="3" :nopicer="true"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :showbut="true"
                @filehandleChange="changeFile" :ShowfileList="true" :isImg="false" :showinput="true" />
            </el-form-item>
            <el-form-item label="市局公司处理意见：" style="overflow-x: scroll;width:100%;">
              <el-input type="textarea" autosize clearable v-model="listQuery.cityLevelIdea"
                style="width:100%;margin-bottom: 10px;">
              </el-input>
              <MOSTY.Upload :isAutoWidth="true" v-model="listQuery.cityLevelIdeaFile" :limit="3" :nopicer="true"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :showbut="true"
                @filehandleChange="changeFile" :ShowfileList="true" :isImg="false" :showinput="true" />
            </el-form-item>

            <el-form-item label="备注：" style="overflow-x: scroll;width:100%;">
              <el-input v-model="listQuery.bz" clearable autosize type="textarea" placeholder="请输入备注"
                style="width:100%" />
            </el-form-item>
            <el-form-item label="现场图片：" style="width: 100%;">
              <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                v-model="listQuery.img" :nameshow='true' :gsgfList="['jpg', 'png']" @filehandleChange="changeFiles">
              </MOSTY.Upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button v-if="props.savebtn" type="primary" @click="submit(ruleFormRef)" :loading="loading"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="black"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </template>
    </MOSTY.FromPage>
  </div>
  <ChooseUser v-model="chooseUserVisible" :Single="false" :data="memberList" :leaderid="leaderid"
    @choosedUsers="getUserOrDept"></ChooseUser>
  <!-- 选择相关方人员 -->
  <MOSTY.xgfandzzjgry v-model="isXgfShow" :Single="false" :data="memberList" :stlyrylx='stlyrylx' :leaderid="leaderid"
    :relatedid="null" @choosedUsers="getUserOrDept" @changerylx='changerylx' />
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  defineEmits,
  getCurrentInstance,
  onMounted,
} from "vue";
import * as rule from "@/utils/rules.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { disablednowDate1 } from "@/utils/tools.js";
import { ElMessage } from "element-plus";
import XiangGFRen from "@/components/dialog/component/XiangGFRen.vue"

const { proxy } = getCurrentInstance();
const { D_BZ_SGDJ,D_BZ_SGFL, D_BZ_SGRD, D_BZ_RDZT } = proxy.$dict("D_BZ_SGDJ","D_BZ_SGFL", "D_BZ_SGRD", "D_BZ_RDZT");
const props = defineProps({
  title: String,
  zbId: String,
  savebtn: Boolean,
  rowobj: {
    type: Object,
    default: () => { }
  },

});
const stlyrylx = ref('01')
const isXgfShow = ref(false)
const loading = ref(false); //新增保存按钮截流
const listQuery = ref({
})
const chooseUserVisible = ref(false);
const memberList = ref([]); //成员选择的id回显
const emits = defineEmits("close", "getList", 'changetable');
const ruleFormRef = ref();
let pageTitle = ref("事故事件月报新增");
const zzlx = ref(null);
const rules = reactive({
  name: [{ required: true, message: "请输入事故名称", trigger: "change" }],
  grade: [{ required: true, message: "请选择事故级别", trigger: "change" }],
  affirm: [{ required: true, message: "请选择认定状态", trigger: "change" }],
  duty: [{ required: true, message: "请选择事故责任", trigger: "change" }],
  time: [{ required: true, message: "请选择时间", trigger: "change" }],
  type: [{ required: true, message: "请选择事故类型", trigger: "change" }],
  accidentClassification: [{ required: true, message: "请选择事故分类", trigger: "change" }],
  address: [{ required: true, message: "请输入事故发生地点", trigger: "blur" }],
  accidentDetail: [{ required: true, message: "请输入简要经过", trigger: "blur" }],
  reason: [{ required: true, message: "请输入事故原因", trigger: "blur" }],
  usernames: [{ required: true, message: "请选择事故人员", trigger: "blur" }],
  ...rule.intfsRule({ require: true, validator: true }, "slight"),
  ...rule.intfsRule({ require: true, validator: true }, "serious"),
  ...rule.intfsRule({ require: true, validator: true }, "dead"),
  ...rule.intfsRule({ require: true, validator: true }, "missing"),
  ...rule.intfsRule({ require: true, validator: true }, "danger"),
  ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 11, lastNum: 4 }, "damageMoney"),
});
onMounted(() => {

  pageTitle.value = props.title
  listQuery.value = {}
  if (props.rowobj.id) {
    //判断是否是历史记录
    if (props.rowobj.isLsjl) {
      getlsjlxqData(props.rowobj.id)
    } else {
      if (props.zbId) {
        getsjxqData(props.rowobj.id)
      } else {
        getkbxqData(props.rowobj.id)
      }
    }
  } else {
    listQuery.value = JSON.parse(JSON.stringify(props.rowobj))
  }

});
//获取人员类型
function changerylx(val) {
  stlyrylx.value = val
}
//事故快报详情
function getkbxqData(id) {
  getApi({ id }, '/mosty-jcgl/accidentKb/getInfo').then(res => {
    listQuery.value = res
  })
}
//事故月报详情
function getsjxqData(id) {
  getApi({ id }, '/mosty-jcgl/accident/getInfo').then(res => {
    listQuery.value = res
  })
}
//查询历史修改记录详情
function getlsjlxqData(id) {
  getApi({ id }, '/mosty-jcgl/accident/getJlbInfo').then(res => {
    listQuery.value = res
  })
}
const chooseUserOrDept = (val) => {
  zzlx.value = val
  if (val == '01') { // 事故人员：
    memberList.value = listQuery.value.userids ? listQuery.value.userids.split(',') : []
    isXgfShow.value = true
  } else {
    memberList.value = listQuery.value.surveyorId ? listQuery.value.surveyorId.split(',') : []
    chooseUserVisible.value = true;
  }


};
const getUserOrDept = (val) => {
  if (zzlx.value == '01') {
    listQuery.value.usernames = val.map(it => { return it.userName }).toString();
    listQuery.value.userids = val.map(it => { return it.id }).toString();
  } else {
    listQuery.value.surveyor = val.map(it => { return it.userName }).toString();
    listQuery.value.surveyorId = val.map(it => { return it.id }).toString();


  }
};
// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      listQuery.value.img = listQuery.value.img ? listQuery.value.img.toString() : null
      listQuery.value.governmentIdeaFile = listQuery.value.governmentIdeaFile ? listQuery.value.governmentIdeaFile.toString() : null
      listQuery.value.basicLevelIdeaFile = listQuery.value.basicLevelIdeaFile ? listQuery.value.basicLevelIdeaFile.toString() : null
      listQuery.value.cityLevelIdeaFile = listQuery.value.cityLevelIdeaFile ? listQuery.value.cityLevelIdeaFile.toString() : null
      if (props.zbId) {
        //新增不对接口，修改要对接口
        listQuery.value.reportId = props.zbId
        if (listQuery.value.id) {
          postApi(listQuery.value, '/mosty-jcgl/accident/edit').then(res => {
            ElMessage.success("修改成功");
            emits("changetable")
          }).finally(() => {
            loading.value = false
          })
        } else {
          postApi(listQuery.value, '/mosty-jcgl/accident/add').then(res => {
            ElMessage.success("新增成功");
            emits("changetable")
          }).finally(() => {
            loading.value = false
          })
        }

      } else {
        emits("getList", listQuery.value);
        emits("close")
        loading.value = false
      }

    } else {
      proxy.$message.warning('请输入必填项！！！')
    }
  });
};
const black = () => {
  if (props.savebtn) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close")
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close")
  }

}



</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
  margin-bottom: 8px;
  line-height: 22px;
  width: 120px;
  text-align: right;
}

// ::v-deep .el-textarea__inner {
//   min-height: 32px !important;
// }

.el-form--inline.el-form--label-top .el-form-item {
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  margin: 10px auto;
}

.el-form {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.formBox {
  margin: 0 20px;
  padding: 30px 20px;
  background-color: #fff;
  overflow: auto;
}
</style>
