<template>
  <MOSTY.PageTree :pageTitle="'事故调查'" :isShowLeftTree="false">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </MOSTY.Search>
    </template>
    <template #table>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="true" :isSort="true">
          <template #sex="{ row }">
            {{ showSex(row.sex) }}
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(row)"> <el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handledelete(row)">
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operedown" @click="downloaddoc(row)"><el-icon>
                <Bottom />
              </el-icon>下载</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />
      </div>
    </template>
  </MOSTY.PageTree>
  <el-dialog :title=pageTitle width="950px" v-model="showDialo" :before-close="black">
    <div class="formBox">
      <el-form ref="ruleFormRef" :model="fromObj" :rules="rules" label-width="130px" class="demo-ruleForm" status-icon
        :inline="true" label-position="top">
        <el-form-item label="事故事件名称：" prop="sgsjname" style="width: 100%;">
          <el-input v-model="fromObj.sgsjname" placeholder="请输入事故事件名称" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="附件上传：" prop="fileid" style="width: 100%;">
          <MOSTY.Upload :isAutoWidth="true" :showinput="true" :placeholder="'请上传pdf,ofd, doc, docx, xls, xlsx,wps'"
            :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true" v-model="fromObj.fileid" :delrow="delrow"
            :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" @filehandleChange="changeFile">
          </MOSTY.Upload>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="submit(ruleFormRef)" v-if="saveBtnShow"><el-icon>
            <DocumentChecked />
          </el-icon>
          保存</el-button>
        <el-button @click="black"><el-icon>
            <DocumentDelete />
          </el-icon> 关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { createAndClickLink } from "@/utils/tools.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits("changePage");
const pageTitle = ref('新增');
const fromObj = ref({})
const showDialo = ref(false)
const saveBtnShow = ref(false)
const delrow = ref({}); //删除文件列表
const totalHeight = ref()
const searchArr = reactive([
  {
    showType: "input",
    prop: "sgsjname",
    placeholder: "请输入事故名称",
    // label: "请输入事故名称"
  }
]);
const ruleFormRef = ref();
const rules = reactive({
  sgsjname: [{ required: true, message: "请输入事故事件名称", trigger: "change" }],
  fileid: [{ required: true, message: "请上传附件", trigger: "change" }],
});
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "事故事件名称",
      prop: "sgsjname"
    },
    {
      title: "录入时间",
      prop: "xtCjsj"
    },
    {
      title: "录入人",
      prop: "xtCjr"
    },
    {
      title: "附件名",
      prop: "filename"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
});
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
});
onMounted(() => {
  totalHeight.value = `calc(100vh - 330px)`
  getTableData();
});
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  listQuery.sgsjname = obj.sgsjname;
  getTableData();
};

//选中的数据
const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/accidentincidentExamine/queryAccidentincidentExamine`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//新增
const addInfo = () => {
  pageTitle.value = '新增事故调查'
  showDialo.value = true;
  saveBtnShow.value = true

};
//修改
const editInfo = (row) => {
  getmain(row.id)
  pageTitle.value = '事故调查修改'
  showDialo.value = true;
  saveBtnShow.value = true
};
//查看
const seeInfo = (row) => {
  getmain(row.id)
  pageTitle.value = '事故调查详情'
  showDialo.value = true;
  saveBtnShow.value = false
};
//下载
function downloaddoc(row) {
  getfilepach(row.fileid)
  // createAndClickLink(val.url, val.name)
}
async function getfilepach(id) {
  getApi({}, `/mosty-base/minio/file/download/${id}`).then((res) => {
    handledlon(res)
  })
}
function handledlon(val) {
  createAndClickLink(val.url, val.originalName)
}
//获取详情
function getmain(id) {
  if (id) {
    getApi(
      { id: id },
      "/mosty-jcgl/accidentincidentExamine/queryAccidentincidentExamineById"
    ).then((res) => {
      if (res) {
        fromObj.value = res;
      }
    });
  }
}
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/accidentincidentExamine/deleteAccidentincidentExamineOne/" + row.id).then(
    (res) => {
      ElMessage.success("删除成功");
      getTableData();
    }
  );
};
// 新的文件上传返回
const changeFile = (val) => {
  if (val[0]) {
    fromObj.value.filename = val[0].name;
  }
};
//关闭
function black() {
  if (saveBtnShow.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        fromObj.value = {}
        showDialo.value = false;
        saveBtnShow.value = false
      })
      .catch(() => {
        // catch error
      })
  } else {
    fromObj.value = {}
    showDialo.value = false;
    saveBtnShow.value = false
  }

}
// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (fromObj.value) {
        fromObj.value.fileid = fromObj.value.fileid
          ? fromObj.value.fileid.toString()
          : "";
        if (!fromObj.value.id) {
          postApi(
            fromObj.value,
            "/mosty-jcgl/accidentincidentExamine/addAccidentincidentExamineOne"
          )
            .then((res) => {
              ElMessage.success("新增成功");
              fromObj.value = {}
              showDialo.value = false;
              saveBtnShow.value = false
              getTableData();
            })

        } else {
          postApi(
            fromObj.value,
            "/mosty-jcgl/accidentincidentExamine/updateAccidentincidentExamineOne"
          )
            .then((res) => {
              ElMessage.success("修改成功");
              fromObj.value = {}
              showDialo.value = false;
              saveBtnShow.value = false
              getTableData();
            })

        }
      }
    }
  });
};

</script>

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

::v-deep .el-dialog__body {
  height: 30vh !important;
}

::v-deep .el-form--inline.el-form--label-top .el-form-item {
  display: flex !important;
}

::v-deep .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
  width: 120px !important;
}
</style>