<template>
  <MOSTY.PageTree :pageTitle="'应急演练列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <section class="btnBox">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </section>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="true" :isSort="true" :actionsW="250">
          <!-- 自定义插槽 -->
          <template #sex="{ row }">
            {{ showSex(row.sex) }}
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <!-- <span class="operedit" @click="ss(row)" v-if="row.state == '00'">
              <el-icon>
                <Connection />
              </el-icon>实施
            </span>
            <span class="operedit" @click="rowUpdate(row)" v-if="row.state != '00'">
              <el-icon>
                <DocumentAdd />
              </el-icon>评估资料上传
            </span> -->
            <span class="operesee" @click="seeInfo(row)">
              <el-icon>
                <Compass />
              </el-icon>查看</span>
            <span class="operedit" @click="editInfo(row)" v-if="row.state == '00'"><el-icon>
                <Compass />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handleDelete(row)">
              <template #reference>
                <span span class="operdel"><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 { filterYear } from "@/utils/auth.js";
import * as MOSTY from "@/components/MyComponents/index";
import { postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
const emit = defineEmits("changePage");
const tableloading = ref(false);
// 搜索参数
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    options: filterYear(7),
    placeholder: "请选择年份",
    defaultVal: new Date().getFullYear()
  },
  {
    showType: "input",
    prop: "planname",
    width: '250px',
    placeholder: "请输入应急预案名称"
  }
]);
// 查询参数
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  year: new Date().getFullYear()
});
// 组件参数
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "预案名称",
      prop: "planname",
    },
    {
      title: "主要内容",
      prop: "content",
    },
    {
      title: "计划演练时间",
      prop: "playdate",
    },
    {
      title: "演练组织部门",
      prop: "deptname",
    },
    {
      title: "演练参与部门",
      prop: "cydepnames",
    },
    {
      title: "预计参演人数",
      prop: "yjcyrs",
    },
    {
      title: "操作",
      prop: "actions",
      slot: true

    }
  ],

});
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  listQuery.planname = obj.planname;
  listQuery.year = obj.year;
  getTableData();
};
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};
// 查询列表数据
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/yjyl/queryYjyl`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      listQuery.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//新增
const addInfo = () => {
  let obj = {
    title: "新增演练",
    type: 'add',
    saveBtnShow: true
  };
  emit("changePage", "AddOrEdite", obj);
};
// 实施
const ss = (row) => {
  let obj = {
    title: "演练计划实施",
    saveBtnShow: true,
    pingGSaveBtnShow: true,
    type: 'ss',
    id: row.id ? row.id : null
  };
  emit("changePage", "AddOrEdite", obj);
}
/**评估资料上传*/
const rowUpdate = (row) => {
  let obj = {
    title: "演练计划实施",
    saveBtnShow: false,
    pingGSaveBtnShow: true,
    type: 'update',
    id: row.id ? row.id : null
  };
  emit("changePage", "AddOrEdite", obj);
}
//修改
const editInfo = (row) => {
  let obj = {
    title: "编辑演练",
    saveBtnShow: true,
    type: 'edit',
    id: row.id ? row.id : null
  };
  emit("changePage", "AddOrEdite", obj);
};
//查看
const seeInfo = (row) => {
  let obj = {
    title: "查看演练",
    saveBtnShow: false,
    type: 'show',
    id: row.id ? row.id : null
  };
  emit("changePage", "AddOrEdite", obj);
};

//删除
const handleDelete = (row) => {
  postApi({}, "/mosty-jcgl/yjyl/deleteYjylOne/" + 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>
