<template>
  <MOSTY.PageTree :pageTitle="'其它安全管理机构'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <div class="btnBox">
        <el-button @click="addShow">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true" :actionsW="250">
          <template #type="{ row }">
            <dict-tag :options="D_BZ_QTAQJGLX" :value="row.type" :tag="false" />
          </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 span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="handlexq(row)">
              <el-icon>
                <View />
              </el-icon>查看</span>
            <span class="operesee" @click="seeInfo(row)">
              <el-icon>
                <Compass />
              </el-icon>会议</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 新增 -->
  <div v-if="data.comprehensiveShow" class="dialog-box">
    <AddQt @close="closeAdd" :rowData="rowData" :title="title" :saveBtnShow="saveBtnShow"
      :dictList="{ D_BZ_QTAQJGLX }" />
  </div>

  <!-- 会议 -->
  <div v-if="data.meetingShow" class="dialog-box">
    <Meeting @close="closeAdd" :rowData="rowData" :saveBtnShow="saveBtnShow" />
  </div>

  <!-- 选择带队领导 -->
  <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
    :deptId="listQuery.orgcode" @choosedUsers="getSonValue"></ChooseUser>
</template>

<script setup>
// 引入
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import AddQt from "./addQt.vue";
import Meeting from "./meeting.vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_QTAQJGLX } = proxy.$dict("D_BZ_QTAQJGLX");
const saveBtnShow = ref(true);
const rowData = ref({});
const searchArr = reactive([
  {
    showType: "select",
    width: '250px',
    prop: "type",
    options: D_BZ_QTAQJGLX,
    placeholder: '请选择'
  }
])
const tableColumns = reactive([
  {
    title: "所属单位",
    prop: "orgname",
    showOverflowTooltip: true
  },
  {
    title: "机构名称",
    prop: "title",
  },
  {
    title: "小组成员",
    prop: "skzmembers",
  },
  {
    title: "类型",
    prop: "type",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
// 数据
const data = reactive({
  comprehensiveShow: false,
  meetingShow: false
});
const title = ref(""); //弹窗标题
const total = ref(0);
const tableData = ref([]);
const tableloading = ref(false);
const listQuery = reactive({
  orgid: "",
  type: "",
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});
const memberList = ref([]); //成员选择的id回显
// 表格回显的id
const chooseUserVisible = ref(false);
const leaderid = ref("");
const singleShow = ref(true); //单选多选

//选择右侧部门
const getdeptId = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};

// 搜索
const onSearch = (obj) => {
  listQuery.orgid = obj.orgid;
  listQuery.type = obj.type;
  listQuery.pageCurrent = 1;
  getListData();
}

//获取列表数据
function getListData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/double/getDoubleOrgInfo`).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      listQuery.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//关闭新增弹窗
const closeAdd = () => {
  data.comprehensiveShow = false;
  data.meetingShow = false;
  getListData();
};
//新增
const addShow = () => {
  tableloading.value = false;
  rowData.value = {};
  data.comprehensiveShow = true;
  title.value = "添加其它安全机构";
  saveBtnShow.value = true;
};
// 查看会议
const seeInfo = (row) => {
  data.meetingShow = true;
  rowData.value = row
}
//修改
const editInfo = (row) => {
  rowData.value = { ...row };
  data.comprehensiveShow = true;
  saveBtnShow.value = true;
  title.value = "修改其它安全机构";
};
const handlexq = (row) => {
  rowData.value = { ...row };
  data.comprehensiveShow = true;
  saveBtnShow.value = false;
  title.value = "其它安全机构详情";
};
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/double/deleteDouble/" + row.id).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};
</script>
<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>