<template>
  <MOSTY.PageTree :pageTitle="'应急资源管理'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
        <el-button type="primary" @click="export2Excel" v-loading="excelLoading">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </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 #emuses="{ row }">
            <dict-tag v-if="row.emuses" :options="D_TB_YJWZYT" :value="row.emuses" :tag="false" />
            <span v-else>无</span>
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(row)"><el-icon>
                <Compass />
              </el-icon>修改</span>
            <span class="operesee" @click="seeInfo(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>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { postApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const emit = defineEmits("changePage");
const { proxy } = getCurrentInstance();
const { D_TB_YJWZYT } = proxy.$dict("D_TB_YJWZYT");
const tableloading = ref(false);
const excelLoading = ref(false)
const totalHeight = ref()
const searchArr = reactive([
  {
    showType: "input",
    prop: "emname",
    width: '250px',
    placeholder: "请输入应急物资名称"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "应急物资",
      prop: "emname",
      width: "110px"
    },
    {
      title: "规格型号",
      prop: "emspeamod",
    },
    {
      title: "数量",
      prop: "emcount",
    },
    {
      title: "使用条件",
      prop: "conditionsofuse",
    },
    {
      title: "存放位置",
      prop: "emstorage",
    },
    {
      title: "用途",
      prop: "emuses",
      slot: true
    },
    {
      title: "运输",
      prop: "ys",
    },
    {
      title: "管理责任人",
      prop: "responsperson",
    },
    {
      title: "联系电话",
      prop: "responsperphe",
    },
    {
      title: "维护周期",
      prop: "cycle",
    },
    {
      title: "责任人职责",
      prop: "duty",
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

});
onMounted(() => {
  totalHeight.value = `calc(100vh - 330px)`
});
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  listQuery.emname = obj.emname;
  getTableData();
};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.orgname = val.orgname;
  listQuery.pageCurrent = 1;
  getTableData();
};
//选中的数据

//导出表格
const export2Excel = () => {
  excelLoading.value = true
  let title = {
    planname: '预案名称',
    emname: '名称',
    emspeamod: '规格型号',
    emcount: '数量',
    conditionsofuse: '使用条件',
    emstorage: '存放位置',
    emuses: '用途',
    ys: '运输',
    responsperson: '管理责任人',
    responsperphe: '联系电话',
    cycle: '维护周期',
    duty: '责任人职责'
  }
  let qyery = { ...listQuery }
  postApi(qyery, '/mosty-jcgl/emergencysupplies/excelData').then((res) => {
    if (res) {
      let data = res
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].emuses = proxy.$getDictVal(data[i].emuses, D_TB_YJWZYT);
          data[i].ys = '供应商运输到指定地点'
          data[i].cycle = '每月一次'
          data[i].duty = '按维护周期定期开展检查'
        }
        let tablename = `${listQuery.orgname}应急物资清单.xlsx`
        exportXlsx(title, data, `${listQuery.orgname}应急物资清单`, tablename);
        excelLoading.value = false
      }
      excelLoading.value = false
    }
  })
};
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/emergencysupplies/queryEmergencysupplies`).then((res) => {
    if (res.records) {
      res.records.forEach(item => {
        item.ys = "供应商运输到指定地点";
        item.cycle = "每月一次"
        item.duty = "按维护周期定期开展检查"
      });
      data.tableData = res.records;
      tableloading.value = false;
      listQuery.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//新增
const addInfo = () => {
  let arr = {
    title: "新增应急资源",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  };
  emit("changePage", "AddOrEdite", arr);
};
//修改
const editInfo = (row) => {
  let arr = {
    title: "编辑应急资源",
    saveBtnShow: true,
    wbjlShow: true,
    jcrzShow: false,
    id: row.id ? row.id : null
  };
  emit("changePage", "AddOrEdite", arr);
};
const seeInfo = (row) => {
  let arr = {
    title: "查看应急资源",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: false,
    id: row.id ? row.id : null
  };
  emit("changePage", "AddOrEdite", arr);
}
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/emergencysupplies/deleteEmergencysuppliesOne/" + row.id).then(() => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
</script>

<style lang="scss" scoped>
.usermanage {
  display: flex;
  height: calc(100vh - 135px);

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



  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .head {
      display: flex;
      justify-content: space-between;
    }

    .fenye {
      top: 95%;
    }
  }
}
</style>
