<template>
  <div>
    <MOSTY.PageTree :pageTitle="null" :searchType="'03'" defaultOrg="benji" @getDeptId="getdeptId" :awhType="true">
      <template #table>
        <div>
          <div class="tab-container">
            <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabList" :key="i" />
            </el-tabs>
          </div>
        </div>
        <div v-show="activeTab == 0" class="wyh">
          <div class="head">
            <div class="title">{{ titleName }}</div>
            <div>
              <el-button type="primary" v-if="filterqx('isaqbm') == '1' && !IsShowtz"
                @click="submit(ruleFormRef)">保存</el-button>
              <el-button type="primary" v-if="!IsShowtz" @click="IsShowtz = !IsShowtz"> 关闭</el-button>
              <el-button type="primary" v-if="IsShowtz" @click="IsShowtz = !IsShowtz"> 编辑</el-button>
              <el-button type="primary" v-if="IsShowtz" @click="ylpage"> 下载</el-button>
            </div>
          </div>
          <!-- 内容 -->
          <el-form ref="ruleFormRef" v-if="!IsShowtz" :model="fromObj" :rules="rules" label-width="155px"
            class="from_box" :disabled="filterqx('isaqbm') != '1'">
            <el-form-item v-if="titleName === '安全生产委员会'" label="安全生产委员会标题:" prop="title">
              <el-input v-model="fromObj.title" style="width: 726px" />
            </el-form-item>
            <el-form-item v-else label="安全领导小组标题:" prop="title">
              <el-input v-model="fromObj.title" style="width: 726px" />
            </el-form-item>
            <el-form-item v-if="titleName === '安全生产委员会'" label="主任" prop="pscchairman">
              <el-input v-model="fromObj.pscchairman" disabled style="width: 250px">
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('06')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="组长" prop="pscchairman">
              <el-input v-model="fromObj.pscchairman" disabled style="width: 250px">
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('06')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-if="titleName === '安全生产委员会'" label="常务副主任:" label-width="100px">
              <el-input v-model="fromObj.pscexecutivedeputy" style="width: 250px" disabled>
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('02')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="常务副组长:" label-width="100px">
              <el-input v-model="fromObj.pscexecutivedeputy" style="width: 250px" disabled>
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('02')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-if="titleName === '安全生产委员会'" label="副主任" prop="officevicedirector">
              <el-input v-model="fromObj.officevicedirector" disabled style="width: 726px">
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('03')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="副组长" prop="officevicedirector">
              <el-input v-model="fromObj.officevicedirector" disabled style="width: 726px">
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('03')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="成员" prop="officemembers">
              <el-input v-model="fromObj.officemembers" style="width: 726px" disabled>
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('05')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-if="titleName === '安全生产委员会'" label="安委办主任:" prop="officechairman">
              <el-input v-model="fromObj.officechairman" style="width: 726px" disabled>
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('01')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="安全领导小组办公室主任:">
              <el-input v-model="fromObj.officechairman" style="width: 726px" disabled>
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('01')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-if="titleName === '安全生产委员会'" label="安委办成员" prop="pscmembers">
              <el-input v-model="fromObj.pscmembers" style="width: 726px" disabled>
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('04')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="安全领导小组办公室成员">
              <el-input v-model="fromObj.pscmembers" style="width: 726px" disabled>
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('04')">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="fromObj.bz" type="textarea" style="width: 726px" />
            </el-form-item>
          </el-form>
          <div class="tzBox" v-loading="loadingAwhtz" v-if="IsShowtz" id="htmlsawhtz">
            <header class="flex just-between" style="height: 43px;">
              <div class="imglabox">
                <img :src="getImgUrl('indexImages/logo.png')" style="height: 32px;width: 32px;margin: 5px;" />
                <div>
                  <div style="font-size: 18px; font-weight: 600;">中国烟草</div>
                  <div style="font-size: 9px;">CHINA TOBACCO</div>
                </div>
              </div>
              <div class="Titles">安全管理组织结构图</div>
            </header>
            <div class="xqbox">
              <div class="box_boder top tcen">
                {{ titleName }}主任：{{ fromObj.pscchairman }}
              </div>
              <div class="icon_box"><el-icon>
                  <Bottom />
                </el-icon>
              </div>
              <div class="box_boder wrap " style="width: 80%;">
                {{ titleName }}常务副主任：{{ fromObj.pscexecutivedeputy }} <div>
                  {{ titleName }}副主任：{{ fromObj.officevicedirector }}</div>
              </div>
              <div class="icon_box"><el-icon>
                  <Bottom />
                </el-icon>
              </div>
              <!-- <div class="box_boder wrap tcen">安委会成员</div> -->
              <div class="cyboxs">
                <ul>
                  <li :style="`width: calc(100% / ${awhcybmlist && awhcybmlist.length || 1});`" class="people-li"
                    v-for="it in awhcybmlist" :key="it">
                    <div class="top-line" v-if="awhcybmlist.length > 1"></div>
                    <div class="icon_box"><el-icon>
                        <Bottom />
                      </el-icon>
                    </div>
                    <div class="bmboxs">
                      <span class="bm-mc-txt">{{ it.bmmc }}</span>
                    </div>
                    <span> {{ it.cymc }}</span>
                  </li>
                </ul>
              </div>
              <div class="icon_box"><el-icon>
                  <Bottom />
                </el-icon>
              </div>
              <div class="box_boder wrap ">
                {{ titleName === '安全领导小组' ? '安全领导小组' : '安委会' }}办公室主任：{{ fromObj.officechairman }}
                <div>{{ titleName === '安全领导小组' ? '安全领导小组' : '安委会' }}办公室成员：{{ fromObj.pscmembers }}</div>
              </div>
            </div>
            <!-- <footer class="flex just-between pl20 pr20" style="color: #000;">
              <div class="cqshbox">黔彩生辉 共创共享</div>
              <div><img :src="getImgUrl('system/qclogos.png')" style="height: 32px;width: 70px;margin: 5px;" />
              </div>
            </footer> -->
          </div>
        </div>
        <!-- 安委会会议资料 -->
        <div v-show="activeTab == 1" class="zl">
          <div class="headBox">
            <div class="title">{{ titleName === '安全领导小组' ? '安全领导小组' : '安委会' }}会议资料 <span
                style="font-size: 13px;color: red;">（提示:参会日后 365 日内需上传会议文件，逾期不可上传）</span>
            </div>
            <div class="btnBox">
              <el-select v-model="searchdata.year">
                <el-option v-for="item in filterYear(7)" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-button type="primary" @click="addShow">
                <!-- v-if="filterqx('isaqbm') == '1'" -->
                <el-icon>
                  <CirclePlus />
                </el-icon>
                <span>新增会议</span>
              </el-button>
            </div>
          </div>
          <section class="eltab3">
            <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
              :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;" :actionsW="'350'">
              <template #quarter="{ row }">
                <span>{{ formatQuarter(row.quarter) }}</span>
              </template>
              <template #frequency="{ row }">
                <span>第{{ row.frequency }}次会议</span>
              </template>
              <template #signin="{ row }">
                <!-- <span class="operedown" v-if="row.signin" @click="doPreviewqd(row)"> <el-icon>
                    <Search />
                  </el-icon>预览</span> -->
                <span class="operedown" v-if="row.signin" @click="onloagqdb(row)"> <el-icon>
                    <Download />
                  </el-icon>下载</span>
                <span v-else>-</span>
              </template>
              <template #files="{ row }">
                <span class="operedown" v-if="row.files" @click="doPreviewjy(row)"> <el-icon>
                    <Search />
                  </el-icon>预览</span>
                <span class="operedown" v-if="row.files" @click="onloaghyjy(row)"> <el-icon>
                    <Download />
                  </el-icon>下载</span>
                <span v-else>-</span>
              </template>
              <template #actions="{ row }">
                <span v-if="row.state === '2'" class="operedown" @click="onDownload(row)"> <el-icon>
                    <Download />
                  </el-icon>签到表下载</span>
                <span class="operedit" @click="handleUpdate(row)" v-if="!row.isDue">
                  <!-- && filterqx('isaqbm') == '1' -->
                  <el-icon>
                    <EditPen />
                  </el-icon>编辑</span>
                <!-- </el-icon>上传会议资料</span> -->
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="handledelete(row)">
                  <template #reference>
                    <!--  v-if="filterqx('isaqbm') == '1'" -->
                    <span span class="operdel" size="small">
                      <el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-popconfirm>
                <span class="operesee" @click="handleInfo('view', row)">
                  <el-icon>
                    <View />
                  </el-icon>查看</span>
                <!-- <span class="operesee" v-if="!row.isDue && row.state === '2'">
                  <el-icon>
                    <View />
                  </el-icon>已下发</span> -->
                <el-popconfirm v-if="!row.isDue && row.state === '1' && !row.signin" confirm-button-text="是"
                  cancel-button-text="否" icon-color="red" title="是否会议通知" @confirm="handlissue('add', '新增', '', row)">
                  <template #reference>
                    <span class="operesee">
                      <el-icon>
                        <View />
                      </el-icon>会议通知</span>
                  </template>
                </el-popconfirm>
              </template>
            </MOSTY.Table>
          </section>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="searchdata" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />

          </div>

        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 预览 -->
    <el-dialog v-model="flyldialog" :show-close="false" top="10px" bottom="10px" width="1120px">
      <div style="height: 84vh; text-align: center">
        <Kkfile :files="fileid" @changedialog="changedialog" />
      </div>
    </el-dialog>
    <!-- 新增 -->
    <div v-if="data.comprehensiveShow" class="dialog-box">
      <Addmeeting @close="closeAdd" :rowId="rowid" :title="title" :orgcode="listQuery.orgcode" :isFirstAdd="isFirstAdd"
        :saveBtnShow="saveBtnShow" :frequencyNum="frequencyNum" :isEdit="isEdit" :agencyData="fromObj" :taskId="taskId"
        :type="istype" />
    </div>
    <!-- 选择带队领导 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
      :deptId="listQuery.orgcode" :closeSelect="true" @choosedUsers="getSonValue"></ChooseUser>
    <!-- 下发工作任务新增 -->
    <!-- <AddAndEdit class="dialog-box" v-if="addAndEditShow" :title="title" :type="type" :otherFiles="otherFiles"
      :userid="userid" @close="handleClose" :id="detailId" /> -->
  </div>
</template>

<script setup>
// 引入
import { getImgUrl } from "@/utils/tools.js"
import { onMounted, ref, reactive, watch, getCurrentInstance, computed } from "vue";
import Addmeeting from "./commponents/Addmeeting.vue";
import Kkfile from "@/components/MyComponents/kkfile/index.vue";
import { ElMessage } from "element-plus";
import { filterYear, filterqx } from "@/utils/auth.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { createAndClickLink } from "@/utils/tools.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { Html2canvasImg } from "@/utils/html2pdf.js";
import * as MOSTY from "@/components/MyComponents/index";
// import AddAndEdit from '@/views/dutyBook/jgryandzz/issueWorkTasks/AddAndEdit.vue'
// 是否是省账号
const isProvinces = computed(() => {
  return filterqx("isaqbm") == "1" && filterqx("isSgs") == "1"
})
// 是否是市账号
const isAuth = computed(() => {
  return filterqx("isaqbm") == "1" && filterqx("isgs") == "1" ? true : false
})
const IsShowtz = ref(true)
const { proxy } = getCurrentInstance();
const { D_BZ_JDCS } = proxy.$dict("D_BZ_JDCS");
const saveBtnShow = ref(true);
const ruleFormRef = ref()
const flyldialog = ref(false)
const fileid = ref('')
const type = ref("")
const istype = ref("")
const isFirstAdd = ref(true)
const frequencyNum = ref(0)
const params = reactive({
  orgcode: ""
});
const rowid = ref(null);
// 数据
const listQuery = ref({
  deptId: ""
});
const data = reactive({
  comprehensiveShow: false
});
// 上下半年解析
const formatQuarter = (quarter) => {
  const quarterMap = {
    '1': '上半年',
    '2': '下半年',
  };
  return quarterMap[quarter];
};
const isEdit = ref(false)
const title = ref(""); //弹窗标题
const total = ref(0);
const fromObj = ref({
  title: "",
  userList: []
});
const awhcybmlist = ref([])
const tableData = ref([]);
const tableloading = ref(false);
const searchdata = reactive({
  orgcode: "",
  type: "2",
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear(),
  total: 0
});
const zzlx = ref(null);
const memberList = ref([]); //成员选择的id回显
// 表格回显的id
const chooseUserVisible = ref(false);
/**当前激活项 */
const activeTab = ref(0);
const tabList = ref([
  { label: '安全生产委员会', value: 0 },
  { label: '安委会资料', value: 1 },
])
let titleName = ref('安全生产委员会')
const leaderid = ref("");
const singleShow = ref(true); //单选多选
//规则校验
const rules = reactive({
  title: [{ required: true, message: "安全生产委员会/安全领导小组标题", trigger: "blur" }],
  officechairman: [{ required: true, message: "安委办主任不能为空", trigger: "blur" }],
  officevicedirector: [{ trigger: "blur", required: true, message: "副主任/副组长不能为空" }],
  officemembers: [{ trigger: "blur", required: true, message: "成员不能为空" }],
  pscchairman: [{ trigger: "blur", required: true, message: "主任/组长不能为空" }],
  pscmembers: [{ trigger: "blur", required: true, message: "安委办成员不能为空" }]
});
const tableColumn = ref([
  {
    title: "会议标题",
    prop: "meetingname",
    sortable: true
  },
  {
    title: "参会时间",
    prop: "time",
    sortable: true
  },
  {
    title: "上/下半年",
    prop: "quarter",
    slot: true,
    // sortable: true
  },
  {
    title: "会议次数",
    prop: "frequency",
    slot: true,
    // sortable: true
  },
  {
    title: "年度",
    prop: "year",
    sortable: true
  },
  {
    title: "签到表",
    prop: "signin",
    slot: true,
    sortable: true
  },
  {
    title: "会议纪要",
    prop: "files",
    slot: true,
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true,
    width: "300"
  }
])

// 初始化
onMounted(() => {
});
// 选择框
watch(
  () => searchdata.year,
  (val) => {
    if (val) {
      getListData();
    }
  }
);
//选择部门
const getdeptId = (val) => {
  listQuery.value.orgcode = val.id;
  listQuery.value.orgname = val.orgname;
  params.orgcode = val.id;
  searchdata.orgcode = val.id;
  searchdata.pageCurrent = 1;
  if (ruleFormRef.value) {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
  }
  if (val.orgname === "机关服务中心") {
    tabList.value[0].label = '安全领导小组'
    tabList.value[1].label = '安全领导小组资料'
    titleName.value = '安全领导小组'
  } else {
    if (val.orglevel === '30' && val.orgcode.slice(-2) != 'XN') {
      tabList.value[0].label = '安全领导小组'
      tabList.value[1].label = '安全领导小组资料'
      titleName.value = '安全领导小组'
    } else {
      tabList.value[0].label = '安全生产委员会'
      tabList.value[1].label = '安委会资料'
      titleName.value = '安全生产委员会'
    }
  }
  // 获取会议内容
  getListData();
  // 获取安委会成员内容
  awhcybmlist.value = []
  loadingAwhtz.value = true
  getawhtz();
};
const onTabClick = (tab) => {

  // listQuery.value.levelType = activeTab.value;
  // listQuery.value.pageCurrent = 1;
  // listQuery.value.userName = ""
  // tableData.value = []
  // setTimeout(() => {
  // }, 40);
  // getListData();
  // getTotalCount();
  // isShowLeftTree.value = ['02','04'].includes(activeTab.value)

};
//获取列表数据
function getListData() {
  tableloading.value = true;
  getApi(searchdata, `/mosty-jcgl/meeting/getMeetingPage`).then((res) => {
    if (res.records) {
      // 判断是否超过会议资料上传时限 次月30日之前
      res.records.forEach(item => {
        item.isDue = false
        if (item.time) {
          let time = new Date(item.time)
          time.setMonth(time.getMonth() + 1)
          time.setDate(365);
          let now = new Date()
          if (now > time) {
            item.isDue = true
          }
        }
      });
      tableData.value = res.records;
      searchdata.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//关闭新增弹窗
const closeAdd = () => {
  rowid.value = null;
  data.comprehensiveShow = false;
  getListData();
};
//新增
const addShow = () => {
  istype.value = 'add';
  tableloading.value = false;
  rowid.value = null;
  isEdit.value = false;
  isFirstAdd.value = true
  data.comprehensiveShow = true;
  title.value = titleName.value === '安全领导小组' ? "添加安全领导小组会议资料" : "添加安委会会议资料";
  saveBtnShow.value = true;
};
const taskId = ref(null);  //督办任务id

// 会议详情
const handleInfo = (type, row) => {
  istype.value = type;
  taskId.value = row.taskId
  rowid.value = row.id;
  isFirstAdd.value = false
  data.comprehensiveShow = true;
  saveBtnShow.value = false;
  title.value = titleName.value === '安全领导小组' ? "安全领导小组会议资料详情" : "安委会会议资料详情";
}
//修改
const handleUpdate = (row) => {
  rowid.value = row.id;
  frequencyNum.value = row.frequency;
  data.comprehensiveShow = true;
  isFirstAdd.value = false
  saveBtnShow.value = true;
  isEdit.value = true;
  title.value = titleName.value === '安全领导小组' ? "安全领导小组会议资料修改" : "安委会会议资料修改";
};
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/meeting/delMeeting/" + row.id).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
};
//点击下载
function handledlon(id) {
  if (id) {
    getApi({}, `/mosty-base/minio/file/download/${id}`).then((res) => {
      if (res) {
        createAndClickLink(res.url, res.originalName)
      }
    });
  }
}
function onloagqdb(row) {
  handledlon(row.signin)
}
function onDownload(row) {
  if (row.id) {
    getApi({}, `/mosty-jcgl/meeting/download/${row.id}`)
      .then((res) => {
        if (res) {
          const base64String = res;
          const cleanBase64 = base64String.replace(/^data:.+;base64,/, '');
          try {
            const byteCharacters = atob(cleanBase64);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
              byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], {
              type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            });
            const fileName = `甘肃烟草安委会会议签到表.docx`;
            downloadFile(blob, fileName)
            console.log('文件下载成功:', fileName);
          } catch (error) {
            console.error('Base64解码失败:', error);
            ElMessage.error('文件处理失败');
          }
        }
      });
  }
}
function downloadFile(blob, fileName) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');

  link.href = url;
  link.download = fileName;
  link.style.display = 'none';

  document.body.appendChild(link);
  link.click();

  // 清理
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }, 100);
}
function onloaghyjy(row) {
  handledlon(row.files)
}
function changedialog() {
  flyldialog.value = false
}
function doPreviewqd(row) {
  fileid.value = row.signin;
  flyldialog.value = true
}
function doPreviewjy(row) {
  fileid.value = row.files;
  flyldialog.value = true
}
const loadingAwhtz = ref(true)
// 获取安委会成员内容
function getawhtz() {
  var awcyArray = []
  var awcygsArray = []
  var awcygs = ''
  getApi(params, `/mosty-jcgl/secureagency/getCommittee`).then((res) => {
    if (res) {
      fromObj.value = res;
      fromObj.value.title = res.orgname + titleName.value
      awcyArray = res.officemembers ? res.officemembers.split(',') : []
      awcygsArray = res.officemembersDept ? res.officemembersDept.split(',') : []
      awhcybmlist.value = awcyArray.map((item, index) => {
        awcygs = awcygsArray[index] === '-' ? '' : '—' + awcygsArray[index]
        return { 'bmmc': item.match(/\((.*?)\)/)[1] + awcygs, 'cymc': item.match(/^(.*?)\s*\(/)[1] }
      })
      loadingAwhtz.value = false
      IsShowtz.value = true
    } else {
      fromObj.value = {}
      fromObj.value.title = listQuery.value.orgname + titleName.value
      fromObj.value.orgcode = listQuery.value.orgcode
      loadingAwhtz.value = false
      IsShowtz.value = true
    }


  });
}
const SortChange = () => { }; // 不写会有警告,这里填上这个方法
//点击带队领导选择按钮
function ChooesDdld(val) {
  memberList.value = []
  zzlx.value = val;
  if (val == "01" || val == "02" || val == "06") {
    leaderid.value = "";
    if (val == "01") {
      leaderid.value = fromObj.value.officechairmanid;
    }
    if (val == "02") {
      leaderid.value = fromObj.value.pscexecutivedeputyid;
    }
    if (val == "06") {
      leaderid.value = fromObj.value.pscchairmanid;
    }
    singleShow.value = true;
    chooseUserVisible.value = true;
  } else {
    // 成员list用作表格回显
    if (fromObj.value.userList) {
      memberList.value = fromObj.value.userList.map((item) => {
        return item.userId;
      });
    }
    if (val == "03" && fromObj.value.officevicedirectorid) {
      memberList.value = fromObj.value.officevicedirectorid.split(',')
    }
    if (val == "05" && fromObj.value.officemembersid) {
      memberList.value = fromObj.value.officemembersid.split(',')
    }
    if (val == "04" && fromObj.value.pscmembersid) {
      memberList.value = fromObj.value.pscmembersid.split(',')
    }
    chooseUserVisible.value = true;
    singleShow.value = false;
  }
}
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    fromObj.value.officechairman = value[0].userName;
    fromObj.value.officechairmanid = value[0].id;
    fromObj.value.officechairmanOrgcode = value[0].deptId;
  } else if (zzlx.value == "02") {
    fromObj.value.pscexecutivedeputy = value[0].userName;
    fromObj.value.pscexecutivedeputyid = value[0].id;
    fromObj.value.pscexecutivedeputyOrgcode = value[0].deptId;
  } else if (zzlx.value == "06") {
    fromObj.value.pscchairman = value[0].userName;
    fromObj.value.pscchairmanid = value[0].id;
    fromObj.value.pscchairmanidOrgcode = value[0].deptId;
  } else if (zzlx.value == "03") {
    let arr = [];
    let arrid = [];
    for (let i = 0; i < value.length; i++) {
      const element = value[i];
      element.zzlx = zzlx.value;
      arr.push(element.userName);
      arrid.push(element.id);
    }
    memberList.value = value.map((item) => {
      return item.id;
    });
    fromObj.value.officevicedirectorlist = value.map((item) => {
      return {
        officevicedirectorid: item.id,
        officevicedirector: item.userName
      };
    });
    fromObj.value.officevicedirector = arr.join(",");
    fromObj.value.officevicedirectorid = arrid.join(",");
  } else if (zzlx.value == "05") {
    let arr = [];
    let arrid = [];
    for (let i = 0; i < value.length; i++) {
      const element = value[i];
      element.zzlx = zzlx.value;
      arr.push(element.userName + "(" + element.deptName + ")");
      arrid.push(element.id);
    }
    memberList.value = value.map((item) => {
      return item.id;
    });
    fromObj.value.officememberslist = value.map((item) => {
      return {
        officemembersid: item.id,
        officemembers: item.userName
      };
    });
    fromObj.value.officemembers = arr.toString(",");
    fromObj.value.officemembersid = arrid.toString(",");
  } else if (zzlx.value == "04") {
    let arr = [];
    let arrid = [];
    for (let i = 0; i < value.length; i++) {
      const element = value[i];
      element.zzlx = zzlx.value;
      arr.push(element.userName + "(" + element.deptName + ")");
      arrid.push(element.id);
    }
    memberList.value = value.map((item) => {
      return item.id;
    });
    fromObj.value.pscmemberslist = value.map((item) => {
      return {
        pscmembersid: item.id,
        pscmembers: item.userName
      };
    });
    fromObj.value.pscmembers = arr.toString(",");
    fromObj.value.pscmembersid = arrid.toString(",");
  }
};
//点击预览跳转页面
const ylpage = () => {

  Html2canvasImg("htmlsawhtz", "安全管理组织结构图");
};
const submit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      fromObj.value.deptid = listQuery.value.orgcode;
      postApi(fromObj.value, "/mosty-jcgl/secureagency/addCommittee").then(() => {
        ElMessage.success("修改成功");
        // 获取安委会成员内容
        getawhtz();

      })
    }
  })
}

//分页
const handleSizeChange = (currentSize) => {
  searchdata.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  searchdata.pageCurrent = currentPage;
  getListData();
}
const detailId = ref("")

const addAndEditShow = ref(false)
const otherFiles = ref("")
const userid = ref("")
// const taskIds = ref("")
// 工作任务状态
const issueState = ref(false)
// 下发工作任务
const handlissue = (val, _title, _id, row) => {
  getApi({}, `/mosty-jcgl/meeting/issueMeetingTask/${row.id}`)
    .then((res) => {
      setTimeout(() => {
        getListData();
      }, 10)
      ElMessage.success("下发任务成功！");
    })
    .catch(() => {
      // ElMessage.error("下发任务失败！")

    })
  // userid.value = row.id
  // otherFiles.value = row.otherFiles
  // title.value = "督办任务" + _title
  // type.value = val
  // detailId.value = _id
  // addAndEditShow.value = true
}
// 关闭弹窗
const handleClose = (data) => {
  addAndEditShow.value = false
  getListData()
}
</script>

<style lang="scss" scoped>
@import "@/views/dutyBook/jgryandzz/talentPool/tabContainer.scss";

.tab-container {
  margin-top: 15px;
}

.wyh {
  border: 1px solid var(--el-color-primary);
  width: 100%;
  // height: 50vh;
  height: calc(100vh - 200px);
  overflow: auto;

  .head {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--el-color-primary);
    padding: 10px;
    box-sizing: border-box;
  }

  .el-form {
    width: 900px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;

    .el-form-item {
      display: flex;
      align-items: center;
    }
  }
}

.eltab3 {
  height: calc(100vh - 300px);
}


.zl {
  // height: 50vh;
  height: calc(100vh - 300px);

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

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

      .el-select {
        width: 150px;
      }
    }
  }
}


.btn_box {
  float: right;
}

.dialog-box {
  height: 100%;
  z-index: 3;
}

.from_box {
  margin: 5px auto;
}

.el-textarea__inner {
  width: 98% !important;
}

.Titles {
  font-size: 22px;
  font-weight: 800;
  line-height: 40px;
  margin-right: 10px;
}

.cqshbox {
  font-size: 15px;
  line-height: 37px;
}

.imglabox {
  width: 200px;
  display: flex;
  justify-content: start;
}

.tzBox {
  width: 100%;
  min-width: 800px;
  margin: 5px auto;
  // border: 2px solid #b7b4b4;

  .xqbox {
    width: 100%;
    margin: 5px auto;
    padding: 0 10px;
    text-align: center;
    padding-bottom: 5px;
    // border-bottom: 3px solid var(--el-color-primary);

    .box_boder {
      padding: 5px 30px;
      line-height: 37px;
      background: var(--el-table-cell-bmx-backgroundcolor);
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      font-size: 14px;
      color: #0e1e04;
      border-radius: 5px;
      margin: 0 auto;
      text-align: center;
    }

    .wrap {
      width: 100%;
      word-wrap: break-word;
    }

    .top {
      width: 500px;
    }

    .icon_box {
      text-align: center;

      .el-icon {
        height: 1.2em;
        width: 5em;
        color: #939292;

        >svg {
          height: 1.2em;
          width: 5em;
        }

      }
    }
  }
}

.cyboxs {
  ul {
    display: flex;
    justify-content: space-between;
    color: #000;

    li {
      text-align: center;
      font-size: 14px;

      .top-line {
        width: 100%;
        border-top: 1px solid #aeaeae;
        margin-bottom: -2px;
      }

      &:first-child .top-line {
        width: 50%;
        margin-left: auto
      }

      &:last-child .top-line {
        width: 50%;
      }

      .bmboxs {

        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 15px;

        .bm-mc-txt {
          display: block;
          padding: 10px 10px;
          // writing-mode: vertical-rl;
          width: 2.3em;
          background: var(--el-table-cell-bmx-backgroundcolor);
          // border: 2px dashed var(--el-color-primary);
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
          border-radius: 5px;
        }

      }
    }
  }
}

.tcen {
  text-align: center;
}

.tlef {
  text-align: left;
}
</style>
