<template>
  <MOSTY.PageTree :pageTitle="'应急预案编制列表 '" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <div class="btnBox">
        <el-button @click="addInfo">
          <el-icon size="small">
            <Plus />
          </el-icon>
          新增
        </el-button>
        <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
                     :isSelect="true" :isSort="true">
          <template #sign="{ row }">
            <p style=" width: 12px; height: 12px;border-radius: 50%;margin: 0 auto"
               :style="{'background-color': row?.sign ? '#33CC00' : '#FC5F76'}"
            ></p>
          </template>
          <template #plantype="{ row }">
            <dict-tag v-if="row.plantype" :options="D_TB_YALX" :value="row.plantype" :tag="false" />
            <span v-else>无</span>
          </template>
          <!--操作-->
          <template #actions="{ row }">
            <span class="operesee" @click="seeInfo(row)"><el-icon>
                <Compass />
              </el-icon>查看</span>
            <span class="operedit" @click="editInfo(row)"><el-icon>
                <!-- v-if="data.deptname == row.deptcode" -->
                <EditPen />
              </el-icon>修订</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                           @confirm="handledelete(row)">
              <!-- v-if="data.deptname == row.deptcode"  -->
              <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 { getItem } from "@/utils/storage"
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"
import { arrayFiltering } from "@/utils/tools.js"


const { proxy } = getCurrentInstance()
const { D_TB_YALX } = proxy.$dict("D_TB_YALX")
const emit = defineEmits("changePage")
const tableloading = ref(false)
const loadingShow = ref(false)
let sign = ['planname', 'compilegroup', 'plantype', 'groupusername',]

const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
})
const searchArr = reactive([
  {
    showType: "select",
    prop: "plantype",
    options: D_TB_YALX,
    width: "250px",
    placeholder: "请选择预案类型"
  },
  {
    showType: "input",
    prop: "anyname",
    width: "250px",
    placeholder: "请输入预案名称或小组名称"
  }

])
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "标记",
      prop: "sign",
      sortable: false,
      slot: true
    },
    {
      title: "预案名称",
      prop: "planname"
    },
    {
      title: "所属单位",
      prop: "orgname"
    },
    {
      title: "所属部门",
      prop: "deptname"
    },
    {
      title: "预案类型",
      prop: "plantype",
      slot: true
    },
    {
      title: "编制小组名称",
      prop: "compilegroup"
    },
    {
      title: "编制组长",
      prop: "groupusername"
    },
    {
      title: "编制组长所属部门",
      prop: "groupdeptname"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ]

})
//分页
const changeNo = val => {
  listQuery.pageCurrent = val
  getTableData()
}
const changeSize = val => {
  listQuery.pageSize = val
  getTableData()
}
// 查询数据
const onSearch = obj => {
  listQuery.plantype = obj.plantype
  listQuery.anyname = obj.anyname
  getTableData()
}

//获取部门数据
const getdeptId = val => {
  listQuery.orgcode = val.id
  listQuery.pageCurrent = 1
  data.deptname = getItem("deptId").ssbmid
  getTableData()
}
//导出表格
const export2Excel = () => {
  loadingShow.value = true
  let title = {
    orgname: "所属单位",
    deptname: "所属部门",
    planname: "预案名称",
    plantype: "预案类型",
    compilegroup: "编制小组名称",
    groupusername: "编制组长",
    groupdeptname: "组长所属部门"
  }
  let qyery = { ...listQuery }
  qyery.pageCurrent = 1
  qyery.pageSize = 100000
  postApi(qyery, "/mosty-jcgl/yabz/queryYabz")
    .then(res => {
      if (res) {
        let data = res.records
        if (data) {
          for (let i = 0; i < data.length; i++) {
            data[i].plantype = proxy.$getDictVal(data[i].plantype, D_TB_YALX)
          }
          let tablename = "应急预案编制清单.xlsx"
          exportXlsx(title, data, "应急预案编制清单", tablename)
        }
      }
    })
    .finally(() => {
      loadingShow.value = false
    })
}

// 查询表格数据
function getTableData() {
  tableloading.value = true
  postApi(listQuery, `/mosty-jcgl/yabz/queryYabz`).then(res => {
    if (res.records) {
      // data.tableData = res.records
      data.tableData = arrayFiltering(res.records, sign)
      tableloading.value = false
      listQuery.total = res.total
    } else {
      data.tableData = []
      tableloading.value = false
    }
  }).finally(() => {
    tableloading.value = false
  })
}

//新增预案编制
const addInfo = () => {
  let arr = {
    title: "新增预案编制",
    saveBtnShow: true,
    type: "add"
  }
  emit("changePage", "Details", arr)
}
//修订预案编制
const editInfo = row => {
  let arr = {
    title: "修订预案编制",
    saveBtnShow: true,
    type: "edit",
    id: row.id ? row.id : null
  }
  emit("changePage", "Details", arr)
}
//查看
const seeInfo = row => {
  let arr = {
    title: "查看预案编制",
    saveBtnShow: false,
    id: row.id ? row.id : null
  }
  emit("changePage", "Details", arr)
}

//删除
const handledelete = row => {
  postApi({}, "/mosty-jcgl/yabz/deleteYabzOne/" + row.id).then(res => {
    ElMessage.success("删除成功")
    getTableData()
  })
}

</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
