<template>
  <div>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="栏目名称" prop="columnName">
          <el-input
            v-model="queryParams.columnName"
            placeholder="请输入栏目名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <!-- <el-form-item label="后台排序" prop="sort">
          <el-input
            v-model="queryParams.sort"
            placeholder="请输入后台排序"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" size="mini" @click="handleQuery"
            ><el-icon><Search /></el-icon>搜索</el-button
          >
          <el-button size="mini" @click="resetQuery"
            ><el-icon><RefreshRight /></el-icon>重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['system:column:add']"
            ><el-icon><Plus /></el-icon>新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain size="mini" @click="toggleExpandAll"
            ><el-icon><Sort /></el-icon>展开/折叠</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table
        v-if="refreshTable"
        v-loading="loading"
        :data="columnList"
        row-key="id"
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="栏目名称" prop="columnName" />
        <!-- <el-table-column label="父栏目" align="center" prop="parentId" /> -->
        <el-table-column label="后台排序" align="center" prop="sort" />
        <!-- <el-table-column
          width="320"
          label="手机端排序"
          align="center"
          prop="appSort"
        /> -->
        <el-table-column label="栏目状态" align="center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="1"
              inactive-value="0"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template v-slot="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:column:edit']"
              ><el-icon style="margin-right: 8px"><Edit /></el-icon
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleAdd(scope.row)"
              v-hasPermi="['column:column:add']"
              ><el-icon><Plus /></el-icon>新增</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              style="color: #f56c6c"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:column:remove']"
              ><el-icon style="margin-right: 8px"><Delete /></el-icon
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        style="margin-top: 20px; float: right"
        v-show="total > 0"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="queryParams3.pageNum"
        :limit="queryParams3.pageSize"
        @size-change="handlePagination"
        @current-change="handleCurrentChange"
      /> -->
      <!-- 添加或修改文章所属的栏目对话框 -->
      <el-dialog :title="title" v-model="open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-form-item
            class="item"
            label-width="80px"
            label="父栏目"
            prop="parentId"
          >
            <el-col :span="21">
              <el-tree-select
                style="width: 400px; margin-left: 10px"
                v-model="form.parentId"
                :props="{
                  value: 'id',
                  label: 'columnName',
                  children: 'children',
                }"
                @current-change="parentIdChange"
                :data="columnOptions"
                value-key="id"
                check-strictly
              />
            </el-col>
          </el-form-item>
          <el-form-item label="栏目名称" prop="columnName">
            <el-input
              style="width: 400px"
              v-model="form.columnName"
              placeholder="请输入栏目名称"
            />
          </el-form-item>

          <el-form-item label="栏目编码" prop="columnCode">
            <el-input
              style="width: 400px"
              v-model="form.columnCode"
              placeholder="请输入栏目编码"
            />
          </el-form-item>

          <el-form-item label="后台排序" prop="sort">
            <el-input
              style="width: 400px"
              v-model="form.sort"
              placeholder="请输入后台排序"
            />
          </el-form-item>
          <el-form-item label="手机端排序" prop="appSort">
            <el-input
              style="width: 400px"
              v-model="form.appSort"
              placeholder="请输入手机端排序"
            />
          </el-form-item>
          <el-form-item label="可发布人员" prop="authorizedUserIds">
            <el-input
              type="textarea"
              disabled
              style="width: 330px"
              v-model="nickName"
              placeholder="请选择可在该栏目下发布文章的人员"
            />
            <el-input
              v-model="form.authorizedUserIds"
              v-show="false"
            ></el-input>
            <el-button
              @click="handleSelect"
              style="display: inline-block; margin-left: 10px"
              type="primary"
              >选择</el-button
            >
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="栏目状态" prop="">
              <el-switch
                v-model="form.status"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
            <el-form-item label-width="80" label="目录" prop="">
              <el-switch
                v-model="form.isDir"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
            <!-- <el-form-item
              label-width="185"
              label="河北省卫健委官网栏目"
              prop=""
            >
              <el-switch
                v-model="form.isFlow"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item> -->
          </div>
        </el-form>
        <div style="text-align: right" slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 选择人员 -->
      <el-dialog
        v-model="dialogVisible"
        title="选择人员"
        width="1100px"
        style="height: 780px"
        :before-close="handleClose"
      >
        <el-row :gutter="20">
          <el-col
            style="
              padding: 0;
              width: 250px;
              border: 1px solid #e7eaec;
              border-radius: 5px;
              min-height: 580px;
            "
            :span="4.5"
            :xs="24"
          >
            <div
              style="
                display: flex;
                width: 250px;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #e7eaec;
                margin-bottom: 10px;
              "
            >
              <div
                @click="toggle(0)"
                :class="{ selected: fontIndex === 0 }"
                style="
                  font-size: 17px;
                  margin-left: 15px;
                  padding-left: 10px;
                  height: 40px;
                  width: 110px;
                  border-right: 1px solid #e7eaec;
                  cursor: pointer;
                "
              >
                所属部门
              </div>
              <!-- <div
                @click="toggle(1)"
                :class="{ selected: fontIndex === 1 }"
                style="
                  font-size: 17px;
                  width: 110px;
                  margin-left: 20px;
                  border-right: 0;
                  height: 40px;
                  padding-right: 0;
                  cursor: pointer;
                "
              >
                常用联系组
              </div> -->
            </div>

            <div class="head-container"></div>

            <!-- 部门 -->
            <div v-if="show" class="head-container">
              <el-tree
                :data="deptOptions"
                :props="{ label: 'label', children: 'children' }"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="dept"
                node-key="id"
                highlight-current
                default-expand-all
                @node-click="handleNodeClick"
                :current-node-key="currentNodeKey"
                :default-expanded-keys="expandedKeys"
              />
            </div>
            <!-- 常用联系人 -->
            <div v-if="!show">
              <div style="height: 64vh; min-height: 600px; overflow: auto">
                <div
                  style="cursor: pointer"
                  id="bg"
                  v-for="(item, index) in contactsOptions"
                  :key="index"
                >
                  <div
                    :class="selectedIndex == index ? 'active' : ''"
                    class="lineStyle"
                    style="
                      padding-left: 20px;
                      height: 30px;
                      line-height: 30px;
                      font-size: 14px;
                    "
                    @click="selectItem(item, index)"
                  >
                    {{ item.groupName }}
                    <div
                      style="
                        display: inline-block;
                        float: right;
                        margin-right: 12px;
                        cursor: pointer;
                      "
                      @click="handleDelete1(item)"
                    >
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="删除"
                        placement="bottom"
                      >
                        <el-icon><Close /></el-icon>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <el-tree
                  :data="contactsOptions"
                  node-key="id"
                  :props="{ label: 'label', children: 'children' }"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  ref="tree"
                  default-expand-all
                  @node-click="contactsNodeClick"
                  show-checkbox
                  @check-change="handleCheck2"
                /> -->

              <div style="position: relative; bottom: 0px">
                <el-button
                  @click="addContact"
                  size="large"
                  style="padding: 0 74px; margin-top: 1vh; text-align: center"
                  type="primary"
                  >添加常用联系组</el-button
                >
              </div>
            </div>
          </el-col>
          <!-- 常用联系人 -->
          <el-col
            v-if="!show"
            style="margin-left: 40px; margin-top: 5px"
            :span="17"
            :xs="10"
          >
            <el-button
              @click="addContactPeople"
              type="primary"
              style="margin-bottom: 10px"
              >添加常用联系人</el-button
            >
            <!-- <el-button
                @click="delPeople"
                type="danger"
                style="margin-bottom: 10px"
                >删除</el-button
              > -->
            <el-table
              style="height: 650px; overflow: auto"
              :row-key="getRowKeys"
              v-loading="loading"
              ref="multipleTable"
              :data="contactsList"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                :selectable="getSelectable"
                :reserve-selection="true"
                type="selection"
                width="30"
                align="center"
              />
              <el-table-column
                label="联系人"
                align="center"
                width="280"
                key="nickName"
                prop="nickName"
                v-if="columns[2].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="phonenumber"
                label="联系方式"
              ></el-table-column>
              <el-table-column
                label="所属部门"
                align="center"
                key="deptName"
                prop="dept.deptName"
                v-if="columns[3].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column align="center" label="操作">
                <template #default="scope">
                  <el-button
                    @click="delPeople(scope.row)"
                    type="danger"
                    text
                    plain
                    ><el-icon><Delete /></el-icon>删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <!-- 所属部门 -->
          <el-col
            v-if="show"
            style="margin-left: 40px; margin-top: 5px"
            :span="17"
            :xs="10"
          >
            <el-form
              :model="queryParams3"
              ref="queryRef"
              :inline="true"
              v-show="showSearch"
              label-width="68px"
              style="margin-bottom: 20px"
            >
              <el-form-item label="用户姓名" prop="nickName">
                <el-input
                  v-model="queryParams3.nickName"
                  placeholder="请输入用户姓名"
                  clearable
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery1"
                  >搜索</el-button
                >
                <el-button icon="RefreshRight" @click="resetQuery1"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>

            <el-table
              ref="multipleTable1"
              v-loading="loading"
              :row-key="getRowKeys"
              :data="userList"
              style="height: 47.5vh"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                :selectable="getSelectable"
                :reserve-selection="true"
                type="selection"
                width="50"
                align="center"
              />
              <el-table-column
                label="用户姓名"
                align="center"
                key="nickName"
                prop="nickName"
                v-if="columns[2].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="phonenumber"
                label="联系方式"
              ></el-table-column>
              <el-table-column
                label="所属部门"
                align="center"
                key="deptName"
                prop="dept.deptName"
                v-if="columns[3].visible"
                :show-overflow-tooltip="true"
              />
            </el-table>
            <div style="float: right; margin-top: 20px; margin-right: 20px">
              <el-pagination
                v-model:current-page="queryParams3.pageNum"
                v-model:page-size="queryParams3.pageSize"
                :page-sizes="[10, 20, 30, 50, 100, 300]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total1"
                @size-change="handleSizeChange3"
                @current-change="handleCurrentChange3"
              />
            </div>
          </el-col>
        </el-row>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="this.dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitUserList"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 添加常用联系组 -->
      <el-dialog
        v-model="dialogVisible1"
        title="添加常用联系组"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="groupInfo" label-width="120px">
          <el-form-item label="常用联系组">
            <el-input v-model="groupInfo.groupName" /> </el-form-item
        ></el-form>
        <template #footer>
          <span style="margin-right: 30px" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取消</el-button>
            <el-button type="primary" @click="submitContactGroup">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 选择常用联系人 -->
      <el-dialog
        :append-to-body="true"
        v-model="dialogVisible2"
        title="选择常用联系人"
        width="65%"
        style="height: 850px"
        :before-close="handleClose1"
      >
        <el-row :gutter="20">
          <el-col :span="4" :xs="24">
            <div style="display: flex">
              <div
                style="font-size: 17px; margin-left: 10px; margin-bottom: 10px"
              >
                所属部门
              </div>
            </div>

            <div class="head-container"></div>

            <div class="head-container">
              <el-tree
                :data="deptOptions"
                :props="{ label: 'label', children: 'children' }"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="dept"
                node-key="id"
                highlight-current
                default-expand-all
                @node-click="handleNodeClick"
                :current-node-key="currentNodeKey"
                :default-expanded-keys="expandedKeys"
              />
            </div>
          </el-col>
          <el-col
            style="margin-left: 40px; margin-top: 35px"
            :span="18"
            :xs="10"
          >
            <!-- <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            v-show="showSearch3"
            label-width="68px"
            style="margin-bottom: 20px"
          >
            <el-form-item label="用户昵称" prop="nickName">
              <el-input
                v-model="queryParams3.nickName"
                placeholder="请输入用户昵称"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery3"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery3"
                >搜索</el-button
              >
              <el-button @click="resetQuery3"
                ><el-icon><RefreshRight /></el-icon>重置</el-button
              >
            </el-form-item>
          </el-form> -->
            <!-- 联系人列表 -->
            <!-- <el-table
              v-loading="loading1"
              :row-key="getRowKeys"
              ref="multipleTable3"
              :data="userList"
              @selection-change="handleSelectionChange1"
            >
              <el-table-column
                :selectable="getSelectable"
                :reserve-selection="true"
                type="selection"
                width="50"
                align="center"
              />
              <el-table-column
                label="用户昵称"
                align="center"
                key="nickName"
                prop="nickName"
                v-if="columns[2].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="所属部门"
                align="center"
                key="deptName"
                prop="dept.deptName"
                v-if="columns[3].visible"
                :show-overflow-tooltip="true"
              />
            </el-table>
            <div style="float: right; margin-top: 20px; margin-right: 20px">
              <el-pagination
                v-model:current-page="queryParams.pageNum"
                v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div> -->
          </el-col>
        </el-row>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="submitPeople"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  listColumn,
  getColumn,
  delColumn,
  addColumn,
  updateColumn,
} from "@/api/system/column";
import {
  mail,
  drafts,
  forward,
  editorMail,
  groupList,
  getPeoplegroup,
  addGroup,
  addContacts,
  delPeople,
} from "@/api/email/write";
import {
  delPeoplegroup,
  addPeoplegroup,
  updatePeoplegroup,
  addPeople,
} from "@/api/system/contact";
import { listUser2, deptTreeSelect2 } from "@/api/system/user";
import { selectUsers, idsList } from "@/api/email/drafts";
import { ElMessage, ElMessageBox } from "element-plus";
// import Treeselect from "../../../../node_modules/vue3-treeselect";
// import "../../../../node_modules/vue3-treeselect/dist/vue3-treeselect.css";
import { useDict } from "@/utils/dict";
import selectPeople from "./selectPeople.vue";
export default {
  name: "Column",
  components: {
    selectPeople,
  },
  data() {
    return {
      total: 0,
      loading: false,
      selection1: [],
      groupInfo: {
        groupName: "",
      },

      ruleForm: {
        mailUserIds: [],
        isRead: "N",
        isDel: "N",
        mailState: "1",
        mailType: null,
        sendTime: "",
        files: [],
      },
      userList: [],
      nickName: [],
      selectedIndex: 0,
      show: true,
      peopleInfo: {
        groupId: null,
        userIds: [],
      },
      forwardInfo: {
        mailId: null,
        userIds: [],
      },
      ids: [],
      total1: 0,
      fontIndex: 0,
      contactsList: [],
      deptOptions: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible: false,
      queryParams3: {
        pageNum: 1,
        pageSize: 300,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        nickName: undefined,
      },
      dateRange: [],
      mailUserIds: [],
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
      ],
      ////////////////////////////////////
      column_status: useDict("column_status").column_status,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 文章所属的栏目表格数据
      columnList: [],
      // 文章所属的栏目树选项
      columnOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      articleColumnOptions: [
        { label: "启用", value: "1" },
        { label: "禁用", value: "0" },
      ],
      queryParams1: {
        pageNum: 1,
        pageSize: 50,
      },
      // 查询参数
      queryParams: {
        columnName: null,
        parentId: null,
        sort: null,
        status: null,
        pageNum: 1,
        pageSize: 10,
        deptId: null,
      },
      // 表单参数
      form: {
        status: "",
        authorizedUserIds: "",
        isFlow: "0",
      },
      // 表单校验
      rules: {
        columnName: [
          { required: true, message: "栏目名称不能为空", trigger: "blur" },
        ],
        status: [
          {
            required: true,
            message: "栏目状态 {'0'停用 ， ‘1’启用}不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getList1();
  },
  methods: {
    // //人员
    // async selectUsers() {

    // },
    // /** 节点单击事件 */
    handleNodeClick(data) {
      this.queryParams3.deptId = data.id;
      this.handleQuery1();
    },
    // /** 搜索按钮操作 */
    handleQuery1() {
      this.queryParams3.pageNum = 1;
      this.getList1();
    },
    // // 数据
    async getList1() {
      this.loading = true;
      this.$modal.loading("加载中...");
      await listUser2(
        this.addDateRange(this.queryParams3, this.dateRange)
      ).then((res) => {
        this.loading = false;
        this.userList = res.rows;
        this.total1 = res.total;
        this.$modal.closeLoading();
      });
      // this.selection = [];
    },
    // /** 重置按钮操作 */
    resetQuery1() {
      this.dateRange = [];
      this.resetForm("queryRef");
      this.queryParams3.deptId = undefined;
      this.$nextTick(() => {
        this.$refs.deptTreeRef.setCurrentKey(null);
      });
      this.handleQuery1();
    },
    /** 删除按钮操作 */
    handleDelete1(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否确认删除该常用联系组？")
        .then(function () {
          return delPeoplegroup(ids);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
          this.$nextTick(() => {
            // this.getContactsTree();
            // this.getPeoplegroup();
          });
        })
        .catch(() => {});
    },
    // 勾选常用联系人
    handleSelectionChange1(selection) {
      this.selection1 = [];
      this.selection1 = selection;

      this.ids = [];
      this.ids.push(
        this.selection.map((item) => ({
          userId: item.userId,
          nickName: item.nickName,
        }))
      );
      selection = [];
      this.single = this.selection.length !== 1;
      this.multiple = !this.selection.length;
      // this.$refs.multipleTable.toggleRowSelection(this.selection[0]);
    },
    //确认常用联系人
    async submitPeople() {
      this.peopleInfo.userIds = [];
      // this.contactsList = [];

      for (let i = 0; i < this.selection1.length; i++)
        this.peopleInfo.userIds.push(this.selection1[i].userId);
      let { code } = await addContacts(this.peopleInfo);
      if (code == 200) {
        this.$modal.msgSuccess("添加常用联系人成功");
        this.$refs.multipleTable3.clearSelection();
      }

      this.dialogVisible2 = false;
      // this.getPeoplegroup();
    },
    // 添加常用联系人（回显）
    // addContactPeople() {
    //   this.dialogVisible2 = true;

    //   this.$nextTick(() => {
    //     this.$refs.multipleTable3.clearSelection();
    //     this.contactsList.forEach((item) => {
    //       this.userList.forEach((item1) => {
    //         if (item.userId == item1.userId) {
    //           this.$refs.multipleTable3.toggleRowSelection(item1, true);
    //         }
    //       });
    //     });
    //   });
    // },
    getPeoplegroup() {
      getPeoplegroup(this.peopleInfo.groupId).then((response) => {
        this.contactsList = [];
        this.contactsList = response.contactsList;
      });
    },
    //点击
    selectItem(val, index) {
      this.selectedIndex = index;
      this.peopleInfo.groupId = val.id;
      this.getPeoplegroup();
    },
    //添加常用联系人组
    async submitContactGroup() {
      const isDuplicate = this.contactsOptions.some((v) => {
        return v.groupName === this.groupInfo.groupName;
      });
      if (isDuplicate) {
        this.$modal.msgError("已有该常用联系组，请添加其他常用联系组");
      } else {
        let { code } = await addGroup(this.groupInfo);
        if (code == 200) {
          this.$modal.msgSuccess("添加常用联系组成功");
          this.groupInfo.groupName = "";
          // this.getContactsTree();
          this.dialogVisible1 = false;
        }
      }
    },
    // /** 查询部门下拉树结构 */
    async getDeptTree() {
      await deptTreeSelect2().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // // 多选框选中数据  常用联系人
    handleSelectionChange(selection) {
      this.selection = [];
      this.selection = selection;
      this.ids = [];
      this.delIds = selection.map((item) => item.userId);
      this.ids.push(
        this.selection.map((item) => ({
          userId: item.userId,
          nickName: item.nickName,
        }))
      );
      selection = [];
      this.single = this.selection.length !== 1;
      this.multiple = !this.selection.length;
    },
    //确认收件人
    submitUserList() {
      this.nickName = [];
      this.ruleForm.mailUserIds = [];
      this.form.authorizedUserIds = "";
      for (let i = 0; i < this.ids[0].length; i++) {
        let item = this.ids[0][i];
        this.nickName.push(item.nickName);
        this.ruleForm.mailUserIds.push(item.userId);
        this.form.authorizedUserIds = this.ruleForm.mailUserIds.join(",");
      }
      this.dialogVisible = false;
      this.queryParams3.deptId = undefined;
      this.userList = [];
      this.getList1();
    },
    //分页
    handleSizeChange3(newPage) {
      this.queryParams3.pageSize = newPage;
      this.getList1();
    },
    handleCurrentChange3(val) {
      this.queryParams3.pageNum = val;
      this.getList1();
    },
    addContact() {
      this.dialogVisible1 = true;
    },
    getRowKeys(row) {
      return row.userId;
    },
    handleSelect() {
      this.toggle(0);

      this.queryParams3.deptId = undefined;
      console.log("this.queryParams3", this.queryParams3);
      this.getList1();

      // this.getContactsTree();
      this.dialogVisible = true;
      setTimeout(() => {
        this.$nextTick(() => {
          console.log(
            "this.form.authorizedUserIds111",
            this.form.authorizedUserIds
          );
          this.$refs.multipleTable1.clearSelection();
          let selectArr = [];
          // setTimeout(() => {
          if (this.form.authorizedUserIds != null) {
            selectArr = this.form.authorizedUserIds.split(",");
            console.log("selectArr", selectArr);
            console.log("this.userList", this.userList);
            selectArr.forEach((item) => {
              this.userList.forEach((item1) => {
                if (item1.userId == item) {
                  this.$refs.multipleTable1.toggleRowSelection(item1, true);
                }
              });
            });
          } else {
            this.$refs.multipleTable1.clearSelection();
          }
          // }, 500);
        });
      }, 500);
    },
    //常用联系人
    toggle(numType) {
      this.fontIndex = numType;
      if (numType == 0) {
        this.getDeptTree();
        this.show = true;
      } else if (numType == 1) {
        // this.getContactsTree();
        this.resetQuery1();
        this.show = false;
        // this.getPeoplegroup();
      }
    },
    // 常用联系人分组树形结构
    async getContactsTree() {
      let { rows } = await groupList(this.queryParams2);
      this.contactsOptions = rows;

      this.peopleInfo.groupId = rows[0].id;
      // this.getPeoplegroup();
    },
    ///////////////////////////////////////////////////////////////////////////////

    handleStatusChange(row) {
      let text = row.status === "0" ? "禁用" : "启用";
      this.$modal
        .confirm("确认要" + text + row.columnName + "吗?")
        .then(() => {
          return updateColumn(row);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "1" ? "0" : "1";
        });
    },
    /** 查询文章所属的栏目列表 */
    getList() {
      this.$modal.loading("加载中，请稍后...");
      this.loading = true;
      listColumn(this.queryParams).then((response) => {
        this.columnList = this.handleTree(response.rows, "id", "parentId");
        this.loading = false;
        this.total = response.total;
        this.$modal.closeLoading();
      });
    },
    handlePagination(newPage) {
      this.queryParams.pageSize = newPage;
      this.handleQuery();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.handleQuery();
    },
    /** 转换文章所属的栏目数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.columnName,
        children: node.children,
      };
    },
    /** 查询文章所属的栏目下拉树结构 */
    getTreeselect() {
      this.columnOptions = [];
      listColumn(this.queryParams1).then((response) => {
        const menu = { id: 0, columnName: "主类目", children: [] };
        menu.children = this.handleTree(response.rows, "id");
        this.columnOptions.push(menu);
        this.$modal.closeLoading();
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        columnName: null,
        parentId: null,
        sort: null,
        status: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        authorizedUserIds: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.$modal.loading("加载中，请稍后...");

      this.reset();
      this.getTreeselect();
      if (row != null && row.id) {
        this.form.parentId = row.id;
      } else {
        this.form.parentId = 0;
      }
      this.title = "添加文章所属的栏目";
      setTimeout(() => {
        this.open = true;
      }, 1000);
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    parentIdChange(val) {
      this.$nextTick(() => {
        this.$refs.form.validateField("parentId");
        this.form.parentId = val.id;
      });
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      console.log("11111111", row);
      this.nickName = [];
      console.log("2222");
      this.form.authorizedUserIds = "";
      this.reset();
      this.getTreeselect();
      if (row != null) {
        this.form.parentId = row.parentId;
      }
      this.form.authorizedUserIds = row.authorizedUserIds;
      if (
        this.form.authorizedUserIds != "" &&
        this.form.authorizedUserIds != null &&
        this.form.authorizedUserIds != undefined
      ) {
        let res = await idsList(this.form.authorizedUserIds);
        this.nickName.push(res.map((item) => item.nickName));
      }
      console.log(row.id);
      getColumn(row.id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改文章所属的栏目";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateColumn(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
            this.form.authorizedUserIds = "";
            this.$refs.multipleTable1.clearSelection();
          } else {
            addColumn(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
            this.form.authorizedUserIds = "";
            this.$refs.multipleTable1.clearSelection();
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      if (row.unshakable == null) {
        this.$modal
          .confirm("是否确认删除" + row.columnName + "？")
          .then(function () {
            return delColumn(row.id);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        ElMessage({
          message: "该栏目已发布信息不能删除",
          type: "warning",
        });
      }
    },

    // handleDelete(row) {
    //   ElMessageBox.confirm(`是否确认删除` + row.columnName + `？`, "Warning", {
    //     confirmButtonText: "确认",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //     center: true,
    //   })
    //     .then(function () {
    //       return delColumn(row.id);
    //     })
    //     .then(() => {
    //       this.getList();
    //       this.$modal.msgSuccess("删除成功");
    //     })
    //     .catch(() => {});
    // },
  },
};
</script>
<style lang="scss" scoped>
.selected {
  font-size: 17px;
  margin-left: 25px;
  padding-right: 25px;
  border-right: 1px solid #e7eaec;
  color: #3792f4; // 字体颜色变为蓝色
}
.lineStyle.active {
  background-color: #ebf5ff;
}
#bg:hover {
  background-color: #f5f7fa;
}
::v-deep .el-message-box__btns {
  padding: 5px 15px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
// .center-buttons {
//   display: flex;
//   justify-content: center;
// }

.el-button--medium {
  margin: 0 5px;
}
</style>
