<template>
    <div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="企微公司" prop="corpId">
            <el-select v-model="queryParams.corpId" placeholder="企微公司" size="small" @change="updateCorpId()">
              <el-option
                v-for="dict in myQwCompanyList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="规则名称:" prop="ruleName">
          <el-input
            v-model="queryParams.ruleName"
            placeholder="请输入规则名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="生效成员:" prop="appleUserOne">
          <el-select v-model="queryParams.appleUserOne" filterable clearable placeholder="选择成员" size="small">
            <el-option
              v-for="dict in userList"
              :key="dict.id"
              :label="dict.qwUserName"
              :value="dict.id"
            />
          </el-select>
        </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-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-plus"
            @click="handleAdd"
            v-hasPermi="['qw:autoTags:add']"
          >添加规则</el-button>
        </el-form-item>

      </el-form>
<!--      <div style="padding:0 0 15px 0">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          size="small"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['shop:tags:add']"-->
<!--        >添加规则</el-button>-->
<!--      </div>-->
      <el-table v-loading="loading" :data="dayPartingIndexList" border height="550px" >
        <el-table-column label="规则名称" align="center" prop="ruleName" />
        <el-table-column label="已打标签总数" align="center" prop="totalNumTagsCount" />
        <el-table-column label="生效成员" align="center">
          <template slot-scope="scope">
               <span v-for="userId in JSON.parse(scope.row.applyUsers)" :key="userId" style="display: inline;width: 300px">
                <el-tag :disable-transitions="false"  v-for="list in userList" :key="list.id" style="margin: 3px;" v-if="list.id==userId">{{list.qwUserName}}({{list.nickName}})</el-tag>
              </span>
          </template>
        </el-table-column>
        <el-table-column label="添加的标签" align="center" prop="tagIdsName">
          <template slot-scope="scope">
            <div v-for="name in scope.row.tagIdsName" style="display: inline;">
              <el-tag type="success">{{ name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="规则状态" align="center" prop="isApply">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isApply"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="2"
              @change="switchChange(scope.row)">
            </el-switch>
            <span v-if="scope.row.isApply == '1'" style="margin-left: 10px;color: #13ce66">已启用</span>
            <span v-if="scope.row.isApply == '2'" style="margin-left: 10px;color: #ff4949">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDetails(scope.row)"
              v-hasPermi="['qw:autoTags:query']"
            >详情</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['qw:autoTags:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改自动打标签主对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-position="left"  label-width="120px">
          <div class="app-container">
            <div>
              <span style="font-size: 15px">规则基础信息</span>
              <el-divider></el-divider>
            </div>
            <el-alert
              title="根据规则，当客户在设定时间段内成为企业微信客户，将自动被打上标签"
              type="warning"
              style="font-size: 15px;margin-bottom: 2%;"
              :closable="false"
              show-icon>
            </el-alert>
            <el-form-item label="规则名称:" prop="ruleName" style="width: 400px">
              <el-input v-model="form.ruleName" placeholder="请输入规则名称(内部可见)" />
            </el-form-item>

            <el-form-item label="生效成员:" prop="applyUsers">
              <div>
                <el-button
                  size="medium"
                  icon="el-icon-circle-plus-outline"
                  plain
                  @click="handlelistUser">请选择使用成员</el-button>
              </div>
              <div>
                <el-tag
                  style="margin-left: 5px"
                  size="medium"
                  :key="list.id"
                  v-for="list in userSelectList"
                  closable
                  :disable-transitions="false"
                  @close="handleClosegroupUser(list)">
                  {{list.qwUserName}}({{list.nickName}})
                </el-tag>
              </div>
            </el-form-item>
            <div style="margin-top: 5%">
              <span style="font-size: 15px">设置打标签的规则</span>
              <el-divider></el-divider>
            </div>

            <div  v-for="(item, index) in form.rulesTags"    :key="index" >
                <div style="background-color: #fbfbfb;padding: 10px;  border: 1px solid #e6e6e6; margin-bottom: 10px;">
                  <el-form ref="rulesTagsFrom" :rules="rulesTagsRules" :model="item" >
                    <div>
                      <div style="display: flex; align-items: center; flex-wrap: nowrap;">
                        <span style="margin-right: 10px;">规则 {{ index + 1 }}：</span>
                        <el-form-item label="为每:" prop="week" style="flex: 8;margin-bottom: 0">
                          <el-select v-model="item.week" remote multiple placeholder="请选择时间" filterable style="width: 350px;">
                            <el-option v-for="dict in weekOptions" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item prop="startTime" style="margin:0 5px 0 5px">
                          <el-time-select style="width: 120px;" placeholder="起始时间" v-model="item.startTime" :picker-options="{
                              start: '00:00',
                              step: '00:15',
                              end: '24:00'
                            }"></el-time-select>
                        </el-form-item>
                        <el-form-item prop="endTime" style="margin:0 5px 0 5px">
                          <el-time-select style="width: 120px;" placeholder="结束时间" v-model="item.endTime" :picker-options="{
                              start: '00:00',
                              step: '00:15',
                              end: '24:00',
                              minTime: item.startTime
                            }"></el-time-select>
                        </el-form-item>
                        <div style="display: flex; align-items: center;width: 100px">
                          <span>添加的客户</span>
                        </div>
                      </div>

                      <el-form-item prop="tags" style="width: 500px;margin:5px 0 0 8%">
                        <div style="display: flex; align-items: center;">
                          <div style="width: 50px">
                            <span>打上</span>
                          </div>
                          <div @click="handleChangeTags(item,index)" style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 390px">
                            <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
                              <el-tag type="success"
                                      closable
                                      :disable-transitions="false"
                                      v-for="list in tagListFormIndex[index]"
                                      :key="list.tagId"
                                      @close="handleCloseTag(list,index)"
                                      style="margin: 3px;"
                              >{{list.name}}
                              </el-tag>
                            </div>
                          </div>
                          <div style="width: 70px">
                            <span style="margin:0px 10px;">的标签</span>
                          </div>
                        </div>
                      </el-form-item>

                      <el-form-item prop="remark" style="width: 500px;margin:5px 0 0 8%">
                        <div style="display: flex; align-items: center;margin-top: 1%">
                          <div style="width: 50px">
                            <span>并备注</span>
                          </div>
                          <el-input v-model="item.remarks" style="width: 300px" placeholder="请输入备注(选填)"></el-input>
                          <div style="width: 70px">
                            <el-link v-if="form.rulesTags.length>1" icon="el-icon-delete-solid" @click="delItemList(index)" type="text" style="color: rgb(24, 144, 255);margin-left:10px;height: 40px " ></el-link>
                          </div>
                        </div>
                      </el-form-item>
					<el-form-item label="备注日期"   prop="isDay" style="width: 500px;margin:5px 0 0 8%">
					  <el-switch
					    v-model="item.isDay"
					    :active-value="1"
					    :inactive-value="0"
					    >
					  </el-switch>
					</el-form-item>
                    </div>
                  </el-form>
                </div>
            </div>
            <div>
              <el-link type="primary" class="el-icon-plus" :underline="false" @click='addItemList()'>添加其他时段规则(最多7条)</el-link>
            </div>
          </div>
        </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="listUser.title" :visible.sync="listUser.open" style="width: 1600px;height: 100%" append-to-body>
        <qwUserList ref="QwUserList" @selectUserList="selectUserList"></qwUserList>
      </el-dialog>

      <el-dialog title="添加标签" :visible.sync="tagChange.open" width="800px" append-to-body>
        <div>搜索标签：
          <el-input v-model="queryTagParams.name" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags">搜索</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
        </div>
        <div v-for="item in tagGroupList" :key="item.id" >
          <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
            <span class="name-background">{{ item.name }}</span>
          </div>
          <div class="tag-container">
            <a
              v-for="tagItem in item.tag"
              class="tag-box"
              @click="tagSelection(tagItem)"
              :class="{ 'tag-selected': tagItem.isSelected }"
            >
              {{ tagItem.name }}
            </a>
          </div>
        </div>
        <pagination
          v-show="tagTotal>0"
          :total="tagTotal"
          :page.sync="queryTagParams.pageNum"
          :limit.sync="queryTagParams.pageSize"
          @pagination="getPageListTagGroup"
        />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addTagSubmitForm(tagChange.index)">确 定</el-button>
          <el-button @click="addTagCancel(tagChange.index)">重 置</el-button>
        </div>
      </el-dialog>

    <!-- 分时段详   -->
      <el-drawer :title="detailFrom.title" :visible.sync="detailFrom.open" size="75%" style="font-weight: bolder">
        <dayPartingIndexDetails :groupIndexFrom="detailListFrom"></dayPartingIndexDetails>
      </el-drawer>



    </div>
</template>

<script>
import { listTags,delTags, addTags, updateTags } from "../../../api/qw/autoTags";
import qwUserList from '@/views/qw/user/qwUserList.vue'
import {listTag, searchTags} from '@/api/qw/tag'
import dayPartingIndexDetails from '@/views/qw/autoTags/dayPartingIndexDetails.vue'
import { allListTagGroup } from '@/api/qw/tagGroup'
import { listUser } from '@/api/qw/user'
import { getMyQwUserList,getMyQwCompanyList } from "../../../api/qw/user";
export default {
  name: "autoTags",
  components: { dayPartingIndexDetails, qwUserList },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      activeName:'2',
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      tagTotal:0,
      // 自动打标签主表格数据
      dayPartingIndexList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      myQwCompanyList:[],
      //所有的标签组-标签
      tagGroupList:[],

      //所有标签
      tagList:[],

      //选择的标签
      tagListFormIndex:[],

      //成员信息
      userList:[],

      //标签弹窗选择
      tagChange:{
        open:false,
        index:null,
      },

      queryTagParams: {
        pageNum: 1,
        pageSize: 10,
        total:0,
        name:null,
        corpId:null,
      },
      //选择成员列表
      listUser:{
        title:"",
        open:false
      },
      //选择成员列表
      userSelectList:[],

      //详情表单参数
      detailListFrom:{},

      //详情抽屉
      detailFrom:{
        open:false,
        title:'',
      },

      weekOptions: [{
        value: 1,
        label: '星期一'
      }, {
        value: 2,
        label: '星期二'
      }, {
        value: 3,
        label: '星期三'
      }, {
        value: 4,
        label: '星期四'
      }, {
        value: 5,
        label: '星期五'
      }
      , {
        value: 6,
        label: '星期六'
      }
      , {
        value: 7,
        label: '星期天'
      }],


      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 3,
        createName: null,
        applyUsers: null,
        appleUserOne:null,
        ruleName: null,
        rulesTags: null,
        totalNumTags: null,
        numTagsTaday: null,
        isApply: null,
        corpId: null,
        companyId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        ruleName:[{ required: true, message: "规则名称不能为空", trigger: "blur" }],
        applyUsers:[{ required: true, message: "成员不能为空", trigger: "blur" }],
      },

      //规则验证
      rulesTagsRules:{
        week: [
          { required: true, message: '请选择发起时间的星期', trigger: 'submit' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'submit' },
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'submit' },

        ],
        tags: [
          { required: true, message: '标签不能为空', trigger: 'submit' }
        ],

      },

    };
  },

  watch:{
    // 监听 userSelectList 的变化，并同步更新 form.userIdsSelectList
    userSelectList(newList) {
      this.form.applyUsers = newList.map(item => item.id);
    },
    tagListFormIndex: {
      handler(newList) {
        // 遍历 tagListFormIndex 并将 tagId 放入对应位置的 tags
        newList.forEach((tags, index) => {
          if (!this.form.rulesTags[index]) {
            this.$set(this.form.rulesTags, index, {tags:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null,remarks:null});
          }

          // 确保清空原来的 tags 数组
          this.form.rulesTags[index].tags = [];

          tags.forEach(item => {
            // 将 tagId 放入对应位置的 rulesTags 中的 tags 数组
            this.form.rulesTags[index].tags.push(item.tagId);
          });
        });
      },
      deep: true
    }
  },
  created() {

    getMyQwCompanyList().then(response => {
        this.myQwCompanyList = response.data;
        if(this.myQwCompanyList!=null){
          this.queryParams.corpId=this.myQwCompanyList[0].dictValue

          this.afreshData(this.queryParams.corpId);

          this.getList();
        }
    });
  },
  methods: {
    updateCorpId(){

      this.afreshData(this.queryParams.corpId);

      this.getList();
     },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加规则";

      this.getPageListTagGroup()

      //所有的标签
      listTag(this.queryTagParams).then(response => {
        this.tagList = response.rows;
      });

    },

    /**
    * 重新获取 部分数据
    */
    afreshData(value){

      this.resetSearchQueryTag()
      this.queryTagParams.corpId=value;

      //所有的员工
      listUser({corpId:value}).then(res=>{
        this.userList=res.rows;
      })

    },

    resetSearchQueryTag(){

      this.queryTagParams= {
        pageNum: 1,
        pageSize: 10,
        total:0,
        name:null,
      };
    },

    //选择群发的企业成员账号
    handlelistUser(){
      setTimeout(() => {
          this.$refs.QwUserList.getDetails(this.queryParams.corpId);
      }, 1);
      this.listUser.title="选择企业成员"
      this.listUser.open=true;
    },
    //选择的成员账号列表
    selectUserList(list){

      this.listUser.open=false;
      //用于显示
      // this.userSelectList=list;

      list.forEach(obj => {
        if (!this.form.applyUsers.some(item => item == obj.id)) {
          this.userSelectList.push(obj);
        }
      });


    },
    handleSearchTags(){

      this.queryTagParams.corpId=this.queryParams.corpId;
      searchTags(this.queryTagParams).then(response => {
        this.tagGroupList = response.rows;
      });

    },

    getPageListTagGroup(){

      this.queryTagParams.corpId=this.queryParams.corpId;

      allListTagGroup(this.queryTagParams).then(response => {
        this.tagGroupList = response.rows;
        this.tagTotal = response.total;
      });
    },



    cancelSearchTags(){
      this.afreshData(this.queryParams.corpId)
    },
    //删除一些选择了的账号
    handleClosegroupUser(list){

      // 假设 list 对象具有一个 id 属性
      const index = this.userSelectList.findIndex(t => t.id === list.id);
      if (index !== -1) {
        this.userSelectList.splice(index, 1);
      }
    },

    /** 查询自动打标签主列表 */
    getList() {
      this.loading = true;
      listTags(this.queryParams).then(response => {

        this.dayPartingIndexList = response.rows;
        // this.dayPartingIndexList.forEach(item => {
        //   const tagsSet = new Set(); // 为每个项目创建一个新的 Set
        //   try {
        //     const data = JSON.parse(item.rulesTags); // 将每个 rulesTags JSON 字符串解析为 JavaScript 对象
        //     data.forEach(entry => {
        //       entry.tags.forEach(tag => {
        //         tagsSet.add(tag); // 将每个 tag 添加到 Set 中
        //       });
        //     });
        //   } catch (error) {
        //     this.$message.error("Error parsing JSON:",error)
        //   }
        //   item.tagsSet = Array.from(tagsSet); // 将 Set 转换为数组并添加到当前项目
        // });

        this.total = response.total;
        this.loading = false;
      });
    },
    //开关
    switchChange(row){
      updateTags(row).then(response => {
        this.msgSuccess("修改成功");
      });
    },

    //添加其他的规则
    addItemList(){
      if (this.form.rulesTags.length >=7) {
        return this.$message.error('当前规则已达上限，无法添加规则');
      }
      this.form.rulesTags.push({tags:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null,remarks:null})
    },

    //选择标签弹窗
    handleChangeTags(item,index){

      for (let i = 0; i < this.tagGroupList.length; i++) {
        for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
          this.tagGroupList[i].tag[x].isSelected=false;
        }
      }

      this.tagChange.open=true;
      this.tagChange.index=index;

    },

    //标签的选择
    tagSelection(row){
      row.isSelected= !row.isSelected;
      this.$forceUpdate();
    },

    //选择标签
    addTagSubmitForm(index){

      for (let i = 0; i < this.tagGroupList.length; i++) {
        for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
          if (this.tagGroupList[i].tag[x].isSelected === true) {
            if (!this.tagListFormIndex[index]) {
              this.$set(this.tagListFormIndex, index, []);
            }

            // 检查当前 tag 是否已经存在于 tagListFormIndex[index] 中
            let tagExists = this.tagListFormIndex[index].some(
              tag => tag.id === this.tagGroupList[i].tag[x].id
            );

            // 如果 tag 不存在于 tagListFormIndex[index] 中，则新增
            if (!tagExists) {
              this.tagListFormIndex[index].push(this.tagGroupList[i].tag[x]);
            }
          }
        }
      }
      if (!this.tagListFormIndex[index] || this.tagListFormIndex[index].length === 0) {
        return this.$message('请选择标签');
      }

      this.tagChange.open = false;
    },
    //取消选择标签
    addTagCancel(index){
      this.tagChange.open = false;
      this.tagListFormIndex[index]=[];
    },
    //删除一些已经选择了的标签
    handleCloseTag(list,index){

      // 假设 list 对象具有一个 id 属性
      const ls = this.tagListFormIndex[index].findIndex(t => t.tagId === list.tagId);
      if (ls !== -1) {
        this.tagListFormIndex[index].splice(ls, 1);
        // 使用 Vue.set 方法
        this.$set(this.tagListFormIndex, index, [...this.tagListFormIndex[index]]);
      }
    },

    //删除某一个规则
    delItemList(index){
      this.form.rulesTags.splice(index,1)
      this.tagListFormIndex.splice(index,1)
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        type: 3,
        createName: null,
        applyUsers: null,
        ruleName: null,
        rulesTags: [{tags:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null,remarks:null}],
        totalNumTags: null,
        numTagsTaday: null,
        isApply: null,
        createTime: null,
        companyId: null,
        remarks: null
      };
      //选择的成员
      this.userSelectList=[];
      //选择的标签
      this.tagListFormIndex=[];

      //规则
      this.form.rulesTags=[{tags:[],week:[1,2,3,4,5,6,7],startTime:null,endTime:null,remarks:null}];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.corpId= this.myQwCompanyList[0].dictValue
      this.afreshData(this.queryParams.corpId)
      this.handleQuery();
    },


    /** 详情按钮操作 */
    handleDetails(row) {

      this.reset();

      // 深拷贝表单数据
      const requestData = { ...row };
      // 将 `数据` 转为 JSON
      requestData.rulesTags = JSON.parse(row.rulesTags);
      requestData.applyUsers = JSON.parse(row.applyUsers);

      this.detailListFrom = requestData;
      this.detailFrom.open=true;
      this.detailFrom.title='规则详情';
    },



    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const itemForms = this.$refs.rulesTagsFrom;
          if (Array.isArray(itemForms)) {
            let allValid = true;

            itemForms.forEach((itemFormRef, index) => {
              itemFormRef.validate((itemValid) => {
                allValid = itemValid;

                if (index === itemForms.length - 1 && allValid) {
                  //全表单验证通过
                  this.commitForm();
                }
              });
            });
          }
        }
      });
    },

    //提交form表单
    commitForm(){
      // 深拷贝表单数据
      const requestData = { ...this.form };
      // 将 `form.rulesTags` 转为 JSON 字符串
      requestData.rulesTags = JSON.stringify(this.form.rulesTags);
      requestData.applyUsers = JSON.stringify(this.form.applyUsers);
      requestData.corpId=this.queryParams.corpId;

      console.log("requestData",requestData)

      if (this.form.id != null) {
        updateTags(requestData).then(response => {
          this.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addTags(requestData).then(response => {
          this.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除自动打标签主编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delTags(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },

  }
};
</script>
<style scoped>
/* CSS 样式 */
.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;
}


.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.text-container {
  max-height: 5em; /* 设置最大高度为6行，根据字体大小调整 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  line-height: 1.5em; /* 行高设置，确保每行高度一致 */
}
</style>
