<template>
  <div class="bigBox" :style="{ height: bigHeight }">
    <div class="left" :style="{ width: lfBoxWid }">
      <div class="title">
        <div style="display: flex; align-items: center;">
          <div style="padding-top: 5px; margin-right: 5px">
            <el-icon style="color: var(--el-color-primary) !important">
              <List />
            </el-icon>
          </div>
          <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
        </div>
        <el-icon @click="handleCollapse" v-show="iconChange">
          <DArrowLeft />
        </el-icon>
        <el-icon @click="handleCollapse" v-show="!iconChange">
          <DArrowRight />
        </el-icon>
      </div>
      <div class="treeBox" :style="{ height: treeHeight }">
        <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable :searchType="'03'"
          @getdeptData="getdeptData" />
      </div>
    </div>
    <div class="right" :style="{ width: rgBoxWid }">
      <div class="head mb5">
        <div class="pt6" style="display: flex;">

          <div class="block" style="margin-right: 10px" v-if="activeName == 'sgsjzl'">

            <el-date-picker v-model="sbsj" type="month" placeholder="请选择上报时间" value-format="YYYY-MM" format="YYYY-MM" />
          </div>
          <el-button type="primary" @click='reach()' v-if="activeName == 'sgsjlb' && showadd">
            <span>刷新</span>
          </el-button>
          <el-button v-if="activeName == 'sgsjlb' && showadd && showkb" @click="addkb"><el-icon size="small">
              <Plus />
            </el-icon>新增快报</el-button>
          <el-button v-if="activeName == 'sgsjlb' && showadd && showaddyb" @click="toAdd"><el-icon size="small">
              <Plus />
            </el-icon>新增月报</el-button>
          <el-button type="primary" @click='seeImg'>
            <span>查看流程</span>
          </el-button>
          <el-button type="primary" @click="onloadExcel" v-loading="loadingShow">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出</span>
          </el-button>
        </div>
      </div>
      <MOSTY.ElTabs v-model="activeName" :titleList="tableTabls" @handleChange="onTabsChange" />
      <div class="bottom">
        <div class="bottomright">
          <div class="table">
            <MyTable v-if="activeName == 'sgsjzl'" :tableData="data.tableData" :tableColumn="data.tableColumn"
              :tableConfiger="data.tableConfiger" :tableloading="tableloading" @chooseData="chooseData">
              <template #status="{ row }">
                <div>
                  <span v-if="row.reject == '2'" class="danger">待重新上报</span>
                  <span v-else class="success">{{ row.status }}</span>
                </div>
              </template>
              <template #time="{ row }">
                <div>
                  <span v-if="row.time" class="danger">{{ row.time }}</span>
                  <span v-else class="success">- -</span>
                </div>
              </template>
            </MyTable>
            <div class="pr10 pb10 tr" v-if="activeName == 'sgsjlb'">
              <el-radio-group v-model="tableType">
                <el-radio label="">全部</el-radio>
                <el-radio label="1">月报</el-radio>
                <el-radio label="2">快报</el-radio>
              </el-radio-group>
            </div>

            <el-table v-if="activeName == 'sgsjlb'" ref="multipleTableRef" :data="data2.tableData" stripe
              style="width: 100%" height="65vh" v-loading="tableloading2" element-loading-text="数据加载中..." border>
              <el-table-column label="上报名称" property="name" width='300'></el-table-column>
              <el-table-column label="添加时间" property="time"></el-table-column>
              <el-table-column label="上报状态" property="state" width='300'>
                <template #default="{ row }">
                  <div>
                    <span v-if="row.reject == '2'" class="danger">待重新上报</span>
                    <span v-else class="success">{{ row.state }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="是否驳回" property="reject" width='280'>
                <template #default="{ row }">
                  <span v-if="row.reject == 1" class="success">否</span>
                  <span v-if="row.reject == 2" class="danger">是</span>
                </template>
              </el-table-column>
              <el-table-column label="驳回原因" property="reason"></el-table-column>
              <el-table-column label="操作" width='280'>
                <template #default="{ row }">
                  <el-popconfirm v-if="showadd && (row.status == '1' || row.reject == 2)" confirm-button-text="是"
                    cancel-button-text="否" icon-color="red" title="确定要上报?" @confirm="onloadfil(row)">
                    <template #reference>
                      <span class="operedown">
                        <el-icon>
                          <Top />
                        </el-icon>
                        上报</span>
                    </template>
                  </el-popconfirm>
                  <span class="operesee" @click="handleSee(row)">
                    <el-icon>
                      <Compass />
                    </el-icon> 查看</span>
                  <span class="operedit" @click="handlexg(row)"
                    v-if="showadd && (row.status == '1' || row.reject == 2)">
                    <el-icon>
                      <EditPen />
                    </el-icon>
                    修改</span>
                  <el-popconfirm v-if="showadd && (row.status == '1' || row.reject == 2)" 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>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="fenye" v-if="activeName == 'sgsjlb'">
            <MOSTY.Pages :pageConfiger="data2.pageConfiger" @changeNo="changeNo" @changeSize="changeSize">
            </MOSTY.Pages>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="ImgShow" title='流程图查看' width="1125px" top="5%" :before-close="handleClose">
      <div class='lctck'>
        <div class='btlct'>事故流程表审核流程图</div>
        <img style='margin: 20px 200px;' :src="getImgUrl('system/lctimg.png')" />
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ImgShow = false"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
    <div v-if="showAddSjkb" class="dialog-box">
      <AddSjkb :editObj="data.sgkbObj" :title='sgtitle' @close="showAddSjkb = false, getTableData()" />
    </div>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import * as MOSTY from "@/components/MyComponents/index";
import AddSjkb from "@/views/sggl/sgbg/sgyb/AddOrEdite/AddSjkb.vue"
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import { getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { formatTime, dateFormat } from "@/utils/tools.js";
import { getItem } from "@/utils/storage";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { onMounted, reactive, ref, watch, defineProps } from "vue";
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const ImgShow = ref(false)
const showkb = ref(false)
const loadingShow = ref(false)
const sgtitle = ref('')
const emit = defineEmits("changePage");
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
const sbsj = ref(formatTime(null, 'ym'));
const iconChange = ref(true);
const showAddSjkb = ref(false);//是否显示新增快报
const tableType = ref("");//事故类型
const tableloading = ref(false);
const showaddyb = ref(false);//是否展示事故月报新增
const timeny = ref(dateFormat({ type: "month" }))
const tableloading2 = ref(false)
const orgCode = ref(null)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
});
const tableTabls = ref([{ value: "sgsjlb", name: "事故事件列表" }, { value: "sgsjzl", name: "事故事件月报总览" }]);//列表选择器
const showadd = ref(false)
const activeName = ref("sgsjlb")
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "单位名称",
      prop: "oname",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "报告名称",
      prop: "name",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "状态",
      prop: "status",
      showOverflowTooltip: false,
      sortable: false,
      showSolt: true
    },
    {
      label: "上报时间",
      prop: "time",
      showOverflowTooltip: false,
      sortable: false,
      showSolt: true
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: "calc(100vh - 240px)"
  },
  sgkbObj: {},//需要查看和修改的事故快报

});
const data2 = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "上报名称",
      prop: "name",
      showOverflowTooltip: true,
      sortable: false,
      width: 400
    },
    {
      label: "添加时间",
      prop: "time",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "上报状态",
      prop: "state",
      showOverflowTooltip: true,
      sortable: false,
      showSolt: true
    },
    {
      label: "是否驳回",
      prop: "reject",
      showOverflowTooltip: false,
      sortable: false,
      showSolt: true
    },
    {
      label: "驳回原因",
      prop: "reason",
      showOverflowTooltip: true,
      sortable: false
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: "calc(100vh - 310px)"
  },
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },

});
onMounted(() => {
  getshow()
  treeHeightFn();
  window.onresize = function () {
    treeHeightFn();
  };

});
//是否展示新增月报
function getshow() {
  getApi({}, '/mosty-jcgl/sgyb/getSfGzr').then(res => {
    //在前五个工作日内新增
    showkb.value = res
  })
}
//刷新
function reach() {
  IsaddData()
  getTableData();
  getidData()
}
//表格切换
const onTabsChange = val => {
  activeName.value = val.name
  if (val.name == "sgsjzl") {
    gettjData()
  } else {
    getTableData();
    getidData()
  }
}
//查看流程
function seeImg() {
  ImgShow.value = true
}
const getdeptData = (val) => {
  if (val.id == getItem('deptId').ssdwid || val.id == getItem('deptId').ssdwid + 'XN') {
    IsaddData()
  } else {
    showadd.value = false
  }
  orgCode.value = val.id;
  activeName.value = "sgsjlb"
  listQuery.code = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
  getidData()
}
//获取根据reportId 查询事故事件
function getidData() {
  getApi({ code: orgCode.value, time: timeny.value }, '	/mosty-jcgl/sgyb/querySgybExist').then(res => {
    //如果有reportId,代表已创建事故月报,如果没有reportId就调新增接口创建一个新的reportId

    if (res && res.id) {
      showaddyb.value = false
    } else {
      showaddyb.value = true
    }
  })
}
function handleClose() {
  ImgShow.value = false
}
//	查询 人员是否可以添加数据
function IsaddData() {
  getApi({}, '/mosty-jcgl/sgyb/judgeSgybPr').then(res => {
    if (res) {
      showadd.value = res.jg
    }
  })
}
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
//新增
const toAdd = () => {
  let obj = {
    type: '01',//01=新增，02=修改，03=详情
    orgCode: orgCode.value,//获取部门
  };
  emit("changePage", "AddOrEdite", obj);
};
//事故月报查看
function handleSee(row) {
  if (row.yblx == "2") {
    sgtitle.value = '事故快报查看'
    data.sgkbObj = { ...row, selectType: "03" }
    showAddSjkb.value = true;
  } else {
    let obj = {
      type: '03',//01=新增，02=修改，03=详情
      orgCode: orgCode.value,//获取部门
      rowid: row.id
    };
    emit("changePage", "AddOrEdite", obj);
  }
}
//修改事故月报
function handlexg(row) {
  if (row.yblx == "2") {
    data.sgkbObj = { ...row, selectType: "02" }
    sgtitle.value = '事故快报修改'
    showAddSjkb.value = true;
  } else {
    let obj = {
      type: '02',//01=新增，02=修改，03=详情
      orgCode: orgCode.value,//获取部门
      rowid: row.id
    };
    emit("changePage", "AddOrEdite", obj);
  }
}
//新增s事故快报
function addkb() {
  data.sgkbObj = {}
  sgtitle.value = '事故快报新增'
  data.sgkbObj.selectType = '02'
  showAddSjkb.value = true
}
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  data.searchObj = obj;
  gettjData()
};
//获取查询 事故月报列表
function getTableData() {
  tableloading2.value = true;
  getApi(listQuery, `/mosty-jcgl/sgyb/queryListSgyb`).then(
    (res) => {
      if (res.records) {
        data2.tableData = res.records;
        tableloading2.value = false;
        data2.pageConfiger.total = res.total;
      } else {
        data2.tableData = [];
        tableloading2.value = false;
      }
    }
  ).catch(err => {
    tableloading2.value = false;
  })
}
//获取事故月报统计
function gettjData() {
  tableloading.value = true
  getApi({ time: sbsj.value }, '/mosty-jcgl/sgyb/queryAllSgyb').then(res => {
    if (res) {
      data.tableData = res;
      tableloading.value = false
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).catch(err => {
    tableloading.value = false;
  })
}
//事故月报上报
function onloadfil(row) {
  getsgybsb(row.id)
}
//改变月报状态
function getsgybsb(id) {
  getApi({ id }, '/mosty-jcgl/sgyb/changeState').then(res => {
    getsbqr(id)
  })
}
//申报确认接口
function getsbqr(id) {
  getApi({ id }, '/mosty-jcgl/sgyb/confirmSgybById').then(res => {
    ElMessage.success("上报成功");
    getTableData()
  })
}
const treeHeight = ref(""); // 树高度
// 树高度计算
const treeHeightFn = () => {
  treeHeight.value =
    window.innerHeight - 187 + "px";
};
//	删除 事故月报
function handledelete(row) {
  getApi({ id: row.id }, `/mosty-jcgl/sgyb/deleteTbSgybOne`).then(res => {
    ElMessage.success("删除成功");
    getTableData()
  })
}
//导出
function onloadExcel() {
  loadingShow.value = true
  if (activeName.value = "sgsjzl") {
    //导出事故月报汇总表
    let title = {
      oname: '单位名称',
      name: '报告名称',
      state: '状态',
      time: '上报时间',
    }
    getApi({ time: sbsj.value }, '/mosty-jcgl/sgyb/queryAllSgyb').then(res => {
      if (res) {
        let data = res
        if (data) {
          data.forEach(el => {
            if (el.status == '1') {
              el.state = '未上报'
            }
          });
          let tablename = `${sbsj.value}事故事件月报总览.xlsx`
          let tabletitle = `${sbsj.value}事故事件月报总览`
          exportXlsx(title, data, tabletitle, tablename);
        }
      }
    }).finally(() => {
      loadingShow.value = false
    })
  } else {
    //导出事故事件月报列表
    let title = {
      name: '上报名称',
      time: '添加时间',
      state: '上报状态',
      reject: '是否驳回',
      reason: '驳回原因',
    }

    getApi({ pageCurrent: 1, pageSize: 1000, code: listQuery.code }, '/mosty-jcgl/sgyb/queryListSgyb').then(res => {
      if (res) {
        let data = res.records
        if (data) {
          data.forEach(el => {
            el.reject = el.reject == 1 ? '否' : '是';
            if (el.status == '1') {
              el.state = '未上报'
            }
          });
          let tablename = `事故事件月报列表.xlsx`
          exportXlsx(title, data, '事故事件月报列表', tablename);

        }
      }
    }).finally(() => {
      loadingShow.value = false
    })
  }
}
watch(() => tableType.value, val => {
  listQuery.pageCurrent = 1
  listQuery.yblx = val
  getTableData();
})
</script>

<style lang="scss" scoped>
.lctck {
  height: 60vh;
  margin: 0 auto;

  .btlct {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: red;
  }
}

.head {
  display: flex;
  justify-content: flex-end;
}

.bigBox {
  display: flex;
  background-color: #fafafa;

  .title {
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .zzjgxx {
      font-size: 18px;
      font-weight: 400;
      color: #0f3916;
      line-height: 24px;
    }

    .el-icon {
      cursor: pointer;
    }
  }
}

.danger {
  color: red !important;
}

.success {
  color: green;
}

.left {
  width: 300px;
  // height: 1030px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;

  .treeBox {
    overflow: auto;
  }
}

.right {
  // width: calc(100% - 300px);
  padding: 0 10px;
  margin: 0px 14px;
  background: #fff;

  .headBox {
    height: 60px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;

    .el-select {
      width: 150px;
    }

    .btnBox {
      display: flex;
      width: 500px;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.xzmb_box {
  display: flex;
  justify-content: space-between;
  padding: 10px;

  >div {
    width: 48%;

    .titles {
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      line-height: 35px;
    }
  }
}

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}

.btn {
  padding: 10px;
  float: right;
}

.hzbbox {
  margin-top: 10px;
  width: 100%;
  background: var(--el-color-primary);
  color: #fff;
  text-align: center;
  height: 32px;
  line-height: 32px;
  border-radius: 5px;
  cursor: pointer;
}
</style>