<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="邀请码" prop="invitationCode">
        <el-input
          v-model="queryParams.invitationCode"
          placeholder="请输入邀请码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标签" prop="tagIds">
        <div
          @click="openTagSearchPage(false)"
          style="
            cursor: pointer;
            border: 1px solid #e6e6e6;
            background-color: white;
            overflow: hidden;
            flex-grow: 1;
            width: 250px;
          "
          >
          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
            <el-tag type="success"
              closable
              :disable-transitions="false"
              v-for="list in this.dialog.selectTagForQuery.selected"
              :key="list.id"
              @close="handleCloseTagsForQuery(list)"
              style="margin: 3px;"
            >
              {{ list.name }}
            </el-tag>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="客服" prop="customerIds">
        <div
          @click="openCusSearchPage(false)"
          style="
            cursor: pointer;
            border: 1px solid #e6e6e6;
            background-color: white;
            overflow: hidden;
            flex-grow: 1;
            width: 250px;
          "
        >
          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
            <el-tag type="success"
              closable
              :disable-transitions="false"
              v-for="list in this.dialog.selectCustomerForQuery.selected"
              :key="list.id"
              @close="handleCloseCusForQuery(list)"
              style="margin: 3px;"
            >
              {{ list.memberName }}
            </el-tag>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <div v-if="activeName === 'person'">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['app:invite:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="error"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            v-hasPermi="['app:invite:delete']"
          >删除</el-button>
        </el-col>
      </div>
      <div v-else style="height: 28px;">

      </div>
    </el-row>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<!--      <el-tab-pane label="个人码" name="person">-->
<!--        &lt;!&ndash; 个人邀请码表格 &ndash;&gt;-->
<!--        <el-table-->
<!--          v-loading="loading"-->
<!--          :data="tableInfo.list"-->
<!--          @selection-change="handleSelectionChange"-->
<!--          border-->
<!--        >-->
<!--          <el-table-column type="selection" width="55" align="center" />-->
<!--          <el-table-column label="邀请码" align="center" prop="invitationCode" min-width="150"/>-->
<!--          <el-table-column label="部门" align="left" prop="deptName" min-width="150"/>-->
<!--          <el-table-column label="备注" align="center" prop="remark"/>-->
<!--          <el-table-column label="创建时间" align="center" prop="createTime" min-width="150" />-->
<!--          <el-table-column label="修改时间" align="center" prop="createTime" min-width="150" />-->
<!--          <el-table-column label="客服" align="center" min-width="200px" prop="customerNames">-->
<!--            <template slot-scope="scope">-->
<!--              <div v-for="i in (scope.row.customerNames ? scope.row.customerNames.split(',') : [])" :key="i" style="display: inline;">-->
<!--                <el-tag type="primary" style="margin: 3px;">{{i}}</el-tag>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="标签" align="center" min-width="200" prop="tagsName">-->
<!--            <template slot-scope="scope">-->
<!--              <div v-for="i in (scope.row.tagNames ? scope.row.tagNames.split(',') : [])" :key="i" style="display: inline;">-->
<!--                <el-tag type="success" style="margin: 3px;">{{i}}</el-tag>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="190">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                icon="el-icon-edit"-->
<!--                @click="handleUpdate(scope.row)"-->
<!--                v-hasPermi="['app:invite:edit']"-->
<!--              >修改</el-button>-->
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                icon="el-icon-delete"-->
<!--                @click="handleDelete(scope.row)"-->
<!--                v-hasPermi="['app:invite:delete']"-->
<!--                style="color: red;"-->
<!--              >删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </el-tab-pane>-->
      <el-tab-pane label="公司码" name="company">
        <!-- 公司邀请码表格 -->
        <el-table
          v-loading="loading"
          :data="tableInfo.list"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="公司码（公司ID）" align="center" prop="invitationCode" min-width="150"/>
          <el-table-column label="公司" align="left" prop="companyName" min-width="150"/>
          <el-table-column label="二维码" align="center" prop="qrCode" width="120">
            <template slot-scope="scope">
              <div v-if="getQrCodeUrl(scope.row)" class="qrcode-cell">
                <el-popover placement="right" trigger="hover" width="220">
                  <el-image
                    :src="getQrCodeUrl(scope.row)"
                    style="width: 200px; height: 200px;"
                    fit="contain"
                  />
                  <el-image
                    slot="reference"
                    style="width: 60px; height: 60px; cursor: pointer;"
                    :src="getQrCodeUrl(scope.row)"
                    :preview-src-list="[getQrCodeUrl(scope.row)]"
                    fit="contain"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </el-popover>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark"/>
          <el-table-column label="创建时间" align="center" prop="createTime" min-width="150" />
          <el-table-column label="修改时间" align="center" prop="createTime" min-width="150" />
          <el-table-column label="客服" align="center" min-width="200px" prop="customerNames">
            <template slot-scope="scope">
              <div v-for="i in (scope.row.customerNames ? scope.row.customerNames.split(',') : [])" :key="i" style="display: inline;">
                <el-tag type="primary" style="margin: 3px;">{{i}}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标签" align="center" min-width="200" prop="tagsName">
            <template slot-scope="scope">
              <div v-for="i in (scope.row.tagNames ? scope.row.tagNames.split(',') : [])" :key="i" style="display: inline;">
                <el-tag type="success" style="margin: 3px;">{{i}}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="190">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['app:invite:edit']"
              >
                修改
              </el-button>
              <!-- 公司码不需要删除 -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <pagination
      v-show="tableInfo.total > 0"
      :total="tableInfo.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
    />

    <!-- 新增/修改邀请码弹窗 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.open" v-loading="dialog.loading" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="所属部门" prop="deptId" v-if="activeName === 'person'">
          <treeselect
            v-model="form.deptId"
            :options="deptOptions"
            :normalizer="normalizer"
            placeholder="选择部门"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="邀请码" prop="invitationCode">
          <el-input v-model="form.invitationCode" placeholder="请输入邀请码" :disabled="activeName === 'company'"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark" >
          <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"/>
        </el-form-item>
        <el-form-item label="选择的标签" prop="tags">
          <div @click="openTagSearchPage(true)"
               style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 351px">
            <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
              <el-tag type="success" closable :disable-transitions="false"
                v-for="list in this.dialog.selectTagForEdit.selected" :key="list.id" @close="handleCloseTagsForEdit(list)"
                style="margin: 3px;">{{ list.name }}
              </el-tag>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选择客服" prop="customerIds" style="margin-top: 2%">
          <div>
            <el-button size="medium" icon="el-icon-circle-plus-outline" plain
                       @click="openCusSearchPage(true)">请选择客服</el-button>
          </div>
          <div>
            <el-tag style="margin-left: 5px" size="medium" :key="s.id" v-for="s in dialog.selectCustomerForEdit.selected" closable
                   :disable-transitions="false" @close="handleCloseCusForEdit(s)">
              <span>{{ s.memberName }}</span>
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 标签搜索弹窗 -->
    <el-dialog title="标签搜索"
      :visible.sync="dialog.selectTagForQuery.visible"
      width="1000px"
      custom-class="search-tag-dialog"
      append-to-body
    >
      <select-tag
        :tagSelected="dialog.selectTagForQuery.selected"
        @tagSubmit="tagSubmitForm(false)"
        @tagCancel="tagCancel(false)"
        @tagSelection="tagSelectionForQuery"
      />
    </el-dialog>

    <!-- 新增/编辑页：搜索标签 -->
    <el-dialog title="标签搜索"
      :visible.sync="dialog.selectTagForEdit.visible"
      width="1000px"
      custom-class="search-tag-dialog"
      append-to-body
    >
      <select-tag
        :tagSelected="dialog.selectTagForEdit.selected"
        @tagSubmit="tagSubmitForm(true)"
        @tagCancel="tagCancel(true)"
        @tagSelection="tagSelectionForEdit"
      />
    </el-dialog>

    <!-- 列表页：搜索客服 -->
    <el-dialog title="客服搜索"
      :visible.sync="dialog.selectCustomerForQuery.visible"
      width="1000px"
      append-to-body
    >
      <CusRoleList
        @confirm="customerSubmitCallForQuery"
        @selectionChange="customerSelectionChangeCallForQuery"
        :selected="dialog.selectCustomerForQuery.selected"
      />
    </el-dialog>

    <!-- 新增/编辑页：搜索客服 -->
    <el-dialog title="客服搜索"
      :visible.sync="dialog.selectCustomerForEdit.visible"
      width="1000px"
      append-to-body
    >
      <CusRoleList
        @confirm="customerSubmitCallForEdit"
        @selectionChange="customerSelectionChangeCallForEdit"
        :selected="dialog.selectCustomerForEdit.selected"
      />
    </el-dialog>
  </div>
</template>

<script>
import { findList, save, deleteByIds, getById } from "@/api/app/invitationCode";
import { listRole } from '@/api/app/user/userList';
import { getTagByIds } from "@/api/app/tag/tagGroup";
import { listDept } from '@/api/system/appDept';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import CusRoleList from '@/views/app/user/CusRoleList.vue';
import selectTag from "@/views/app/tagGroup/selectTag.vue";

export default {
  name: "invitationCode",
  components: { CusRoleList, selectTag, Treeselect },
  data() {
    return {
      // 加载状态
      loading: false,
      // 是否显示搜索
      showSearch: true,
      // 部门树形选择器选项
      deptOptions: [],
      // 表格数据
      tableInfo: {
        ids: [],
        list: [],
        total: 0,
      },
      activeName: 'company',
      // 查询参数
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        id: null,
        invitationCode: null,
        tagIds: null,
        customerIds: null,
      },
      // 表单数据
      form: {
        id: null,
        invitationCode: null,
        remark: null,
        deptId: null,
        tagIds: null,
        customerIds: null,
      },
      // 表单校验规则
      rules: {
        invitationCode: [
          {
            trigger: 'blur',
            required: true,
            message: '邀请码不可为空！'
          }
        ],
        deptId: [
          {
            trigger: 'blur',
            required: true,
            message: '所属部门不可为空！'
          }
        ],
      },
      // 弹窗配置
      dialog: {
        title: '',
        open: false,
        loading: false,
        selectTagForQuery: {
          visible: false,
          selected: [],
        },
        selectTagForEdit: {
          visible: false,
          selected: [],
        },
        selectCustomerForQuery: {
          visible: false,
          selected: [],
        },
        selectCustomerForEdit: {
          visible: false,
          selected: [],
        },
      },
    };
  },
  created() {
    this.getList();
    this.getDeptList();
  },
  methods: {
    /**
     * 获取二维码地址
     */
    getQrCodeUrl(row) {
      return row.qrCode || row.qrCodeUrl || row.codeUrl || null
    },

    /**
     * 查询邀请码列表
     */
    getList() {
      this.loading = true;
      let qp = {...this.queryParams};
      qp['tagIds'] = this.dialog.selectTagForQuery.selected.map(s => s.id);
      qp['customerIds'] = this.dialog.selectCustomerForQuery.selected.map(s => s.id);
      qp['activeName'] = this.activeName;
      findList(qp).then(response => {
        this.tableInfo.list = response.rows;
        this.tableInfo.total = response.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    /**
     * 获取部门树形数据
     */
    getDeptList() {
      listDept().then(response => {
        if (response.code === 200) {
          // 转换为树形结构
          this.deptOptions = this.handleTree(response.data, "deptId");
        } else {
          this.deptOptions = [];
        }
      }).catch(() => {
        this.deptOptions = [];
      });
    },

    /**
     * 树形选择器数据格式化
     */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },

    /**
     * 搜索
     */
    handleQuery() {
      this.getList();
    },

    /**
     * 重置搜索
     */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
        id: null,
        invitationCode: null,
        tagIds: null,
        customerIds: null,
      };
      this.dialog.selectTagForQuery.selected = [];
      this.dialog.selectCustomerForQuery.selected = [];
      this.handleQuery();
    },

    /**
     * 多选框选中数据
     */
    handleSelectionChange(selection) {
      this.tableInfo.ids = selection.map(item => item.id);
    },

    /**
     * 新增邀请码
     */
    handleAdd() {
      this.reset();
      this.dialog.title = "新增邀请码";
      this.dialog.open = true;
    },

    /**
     * 修改邀请码
     */
    async handleUpdate(row) {
      this.reset();
      this.dialog.title = "修改邀请码";
      this.dialog.open = true;
      this.dialog.loading = true;
      // 先加载部门数据，确保下拉框有数据
      this.getDeptList();
      let response = await getById({id: row.id, activeName: this.activeName});
      this.form = response.data;
      // 加载标签数据
      if (response.data.tagIds && response.data.tagIds.length > 0) {
        getTagByIds(response.data.tagIds.split(',')).then(tagsRes => {
          this.dialog.selectTagForEdit.selected = tagsRes.data;
        });
      }
      // 加载客服数据
      if (response.data.customerIds && response.data.customerIds.length > 0) {
        listRole({ids: response.data.customerIds.split(',')}).then(customerRes => {
          this.dialog.selectCustomerForEdit.selected = customerRes.rows;
        });
      }
      this.dialog.loading = false;
    },

    /**
     * 删除邀请码
     */
    handleDelete(row) {
      let ids = [];
      if (row) {
        ids = [row.id];
      } else {
        ids = this.tableInfo.ids;
      }
      if (!ids || ids.length === 0) {
        return this.$message.error('请选中需要删除的记录！');
      }
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteByIds(ids).then(() => {
          this.getList();
          this.$message.success('删除成功');
        });
      });
    },
    /**
     * tab切换
     * @param tab
     * @param event
     */
    handleClick(tab, event) {
      this.handleQuery();
    },

    /**
     * 提交表单（新增/修改）
     */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let submitData = {...this.form};
          // 组装标签数据
          if (this.dialog.selectTagForEdit.selected.length > 0) {
            submitData['tagIds'] = this.dialog.selectTagForEdit.selected.map(s => s.id);
          }
          // 组装客服数据
          if (this.dialog.selectCustomerForEdit.selected.length > 0) {
            submitData['customerIds'] = this.dialog.selectCustomerForEdit.selected.map(s => s.id);
          }
          submitData['activeName'] = this.activeName;
          save(submitData).then(response => {
            if (response.code === 200) {
              this.$message.success('保存成功');
              this.dialog.open = false;
              this.getList();
            } else {
              this.$message.error(response.msg);
            }
          });
        }
      });
    },

    /**
     * 取消弹窗
     */
    cancel() {
      this.dialog.open = false;
      this.reset();
    },

    /**
     * 重置表单
     */
    reset() {
      this.form = {
        id: null,
        invitationCode: null,
        remark: null,
        deptId: null,
        tagIds: null,
        customerIds: null,
      };
      this.dialog.selectCustomerForEdit.selected = [];
      this.dialog.selectTagForEdit.selected = [];
      this.resetForm("form");
    },

    /**
     * 打开标签搜索页面
     */
    openTagSearchPage(isEdit) {
      if (isEdit) {
        this.dialog.selectTagForEdit.visible = true;
      } else {
        this.dialog.selectTagForQuery.visible = true;
      }
    },

    /**
     * 确定选择标签
     */
    tagSubmitForm(isEdit) {
      if (isEdit) {
        this.dialog.selectTagForEdit.visible = false;
      } else {
        this.dialog.selectTagForQuery.visible = false;
      }
    },

    /**
     * 取消选择标签
     */
    tagCancel(isEdit) {
      if (isEdit) {
        this.dialog.selectTagForEdit.visible = false;
      } else {
        this.dialog.selectTagForQuery.visible = false;
      }
    },

    /**
     * 列表查询-标签选中切换回调
     */
    tagSelectionForQuery(group, tag) {
      if (!tag.isSelected) {
        this.dialog.selectTagForQuery.selected = this.dialog.selectTagForQuery.selected.filter(item => tag.id != item.id);
      } else {
        if (!this.dialog.selectTagForQuery.selected.some(st => st.id == tag.id)) {
          this.dialog.selectTagForQuery.selected.push(tag);
        }
      }
      this.queryParams.tagIds = this.dialog.selectTagForQuery.selected.map(st => st.id);
    },

    /**
     * 编辑页-标签选中切换回调
     */
    tagSelectionForEdit(group, tag) {
      if (!tag.isSelected) {
        this.dialog.selectTagForEdit.selected = this.dialog.selectTagForEdit.selected.filter(item => tag.id != item.id);
      } else {
        if (!this.dialog.selectTagForEdit.selected.some(st => st.id == tag.id)) {
          this.dialog.selectTagForEdit.selected.push(tag);
        }
      }
    },

    /**
     * 列表查询-删除一些选择的标签回调
     */
    handleCloseTagsForQuery(tagItem) {
      this.dialog.selectTagForQuery.selected = this.dialog.selectTagForQuery.selected.filter(t => t.id != tagItem.id);
    },

    /**
     * 编辑页-删除一些选择的标签回调
     */
    handleCloseTagsForEdit(tagItem) {
      this.dialog.selectTagForEdit.selected = this.dialog.selectTagForEdit.selected.filter(t => t.id != tagItem.id);
    },

    /**
     * 打开客服搜索页面
     */
    openCusSearchPage(isEdit) {
      if (isEdit) {
        this.dialog.selectCustomerForEdit.visible = true;
      } else {
        this.dialog.selectCustomerForQuery.visible = true;
      }
    },

    /**
     * 查询选中客服
     */
    customerSubmitCallForQuery(selected) {
      this.dialog.selectCustomerForQuery.visible = false;
    },

    /**
     * 查询选中客服
     */
    customerSelectionChangeCallForQuery(config) {
      let selected = config.selected;
      if (config.mode === 0) {
        let row = config.row;
        if (selected) {
          if (!this.dialog.selectCustomerForQuery.selected.some(s => s.id == row.id)) {
            this.dialog.selectCustomerForQuery.selected.push(row);
          }
        } else {
          this.dialog.selectCustomerForQuery.selected = this.dialog.selectCustomerForQuery.selected.filter(m => m.id != row.id);
        }
      } else {
        let list = config.rows;
        if (selected) {
          list.map(l => {
            if (!this.dialog.selectCustomerForQuery.selected.some(s => s.id == l.id)) {
              this.dialog.selectCustomerForQuery.selected.push(l);
            }
          });
        } else {
          list.map(l => {
            for (let i = 0; i < this.dialog.selectCustomerForQuery.selected.length; i++) {
              if (l.id == this.dialog.selectCustomerForQuery.selected[i].id) {
                this.dialog.selectCustomerForQuery.selected.splice(i, 1);
              }
            }
          });
        }
      }
    },

    /**
     * 编辑页选中客服
     */
    customerSubmitCallForEdit() {
      this.dialog.selectCustomerForEdit.visible = false;
    },

    /**
     * 编辑页选中客服回调
     */
    customerSelectionChangeCallForEdit(config) {
      let selected = config.selected;
      if (config.mode === 0) {
        let row = config.row;
        if (selected) {
          if (!this.dialog.selectCustomerForEdit.selected.some(s => s.id == row.id)) {
            this.dialog.selectCustomerForEdit.selected.push(row);
          }
        } else {
          this.dialog.selectCustomerForEdit.selected = this.dialog.selectCustomerForEdit.selected.filter(m => m.id != row.id);
        }
      } else {
        let list = config.rows;
        if (selected) {
          list.map(l => {
            if (!this.dialog.selectCustomerForEdit.selected.some(s => s.id == l.id)) {
              this.dialog.selectCustomerForEdit.selected.push(l);
            }
          });
        } else {
          list.map(l => {
            for (let i = 0; i < this.dialog.selectCustomerForEdit.selected.length; i++) {
              if (l.id == this.dialog.selectCustomerForEdit.selected[i].id) {
                this.dialog.selectCustomerForEdit.selected.splice(i, 1);
              }
            }
          });
        }
      }
    },

    /**
     * 列表查询-删除选择的客服回调
     */
    handleCloseCusForQuery(item) {
      this.dialog.selectCustomerForQuery.selected = this.dialog.selectCustomerForQuery.selected.filter(m => m.id != item.id);
    },

    /**
     * 编辑页-删除选择的客服回调
     */
    handleCloseCusForEdit(item) {
      this.dialog.selectCustomerForEdit.selected = this.dialog.selectCustomerForEdit.selected.filter(m => m.id != item.id);
    },

    /**
     * 树形结构转换
     */
    handleTree(data, id, parentId, children) {
      id = id || 'id';
      parentId = parentId || 'parentId';
      children = children || 'children';
      var tree = [];
      var map = {};
      data.forEach(function(item) {
        map[item[id]] = item;
      });
      data.forEach(function(item) {
        var parent = map[item[parentId]];
        if (parent) {
          (parent[children] || (parent[children] = [])).push(item);
        } else {
          tree.push(item);
        }
      });
      return tree;
    },
  }
};
</script>

<style lang="scss" scoped>
.mb8 {
  margin-bottom: 8px;
}

.dialog-footer {
  text-align: center;
}

.dialog-body {
  height: 400px;
  overflow: auto;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.name-background {
  display: inline-block;
  background-color: #abece6;
  padding: 4px 8px;
  border-radius: 4px;
}

.tag-box {
  padding: 8px 12px;
  border: 1px solid #989797;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

.tag-selected {
  background-color: #00bc98;
  color: #fff;
  border-color: #00bc98;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.qrcode-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qrcode-cell .image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 20px;
}
</style>
