<template>
  <div style="height: 100%" class="flexStar">
    <div class="boxswai" style="width: 26%; padding-left: 0px">
      <div class="boxnei" style="display: flex; flex-direction: column">
        <h3>引用元素表</h3>
        <div style="overflow: auto; flex: 1;height:500px">
          <el-tree
            style="display: inline-block;min-width: 100%;"
            ref="trees"
            :loading="loading"
            :load="loadNode"
            lazy
            :data="data"
            :props="defaultProps"
            @node-click="nodeClick"
            node-key="id"
            :expand-on-click-node="false"
            v-show="!allTreeShow"
            :default-expanded-keys="defaultExpandKey"
            :current-node-key="defaultCheckedKey"
          >
            <span
              class="custom-tree-node"
              slot-scope="{ data ,node }"

              style="box-sizing: border-box;padding-right:70px!important;;"
            >
              <div style="width:100%;">
                <span style="text-overflow: ellipsis;"> {{ data.title }} </span>

                <!-- 调整排序 -->
              <el-link :underline="false">
                <i
                  class="el-icon-sort"
                  @click.stop="sortpai(data, node)"
                  v-if="node.level == 2"
                  title="调整排序"
                ></i>
              </el-link>
              </div>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div
      class="boxswai"
      style="width: 74%; padding-left: 0px; padding-right: 0px"
    >
      <div class="boxnei">
        <div
          class="marleft10"
          style="height: 100%; display: flex; flex-direction: column"
        >
          <div class="martop20" v-if="true" style="flex: 1">
            <avue-crud
              :data="loadData"
              :option="loadOption"
              v-model="obj"
              ref="crud"
              @selection-change="selectionChange"
              :page.sync="page"
              :table-loading="tabloading"
              @on-load="onLoad"
              @current-change="currentChange"
              @size-change="sizeChange"
              @refresh-change="refreshChange"
            >


              <template slot="menuRight">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  @click="quteEle"
                >引用元素表单库
                </el-button>

                <el-button
                  size="small"
                  type="danger"
                  plain

                  @click="handleDelete"
                >删除表单
                </el-button>
              </template>
              <template slot="menuLeft" slot-scope="{size}">
                <div style="display:flex">
                  <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size" clearable
                            @clear="clearinput"></el-input>
                  <el-button type="primary" icon="el-icon-search" size="small" @click="searchChange">搜索</el-button>
                </div>

                <!-- <i  class="el-icon-search" slot="append" @click="searchChange" style=" cursor:pointer;font-size: 16px;"></i> -->
              </template>
              <template slot-scope="{type,size,row}" slot="menu">
                <el-button :size="size" :type="type" @click="Associationlist(row)">关联清表</el-button>
                <el-button :size="size" :type="type" :disabled="row.excelIds == -1" @click="rightClick(row)">编辑元素
                </el-button>
                <el-button :size="size" :type="type" :disabled="row.excelIds == -1"
                           @click="adjustExcel(row.id,row.excelIds)">调整表单
                </el-button>
                <el-button :size="size" :type="type" @click="handleEditFormula(row)">编辑公式</el-button>
                <el-button :size="size" :type="type" @click="allocatWbs(row)">分配WBS</el-button>

              </template>
            </avue-crud>
          </div>
        </div>
      </div>
    </div>
    <Qute ref="Qute" :projectid="projectid" :wbsid="wbsid" :onLoad1="onLoad1" :refreshTree="refreshTree"></Qute>
    <Relation ref="Relation" :GLExcelFrom="GLExcelFrom" :wbsid="wbsid" :onLoad1="onLoad1"
              :refreshTree="refreshTree"></Relation>
    <!-- 分配Wbs -->
    <allocateDialog ref="allocateRef"></allocateDialog>
    <!-- 编辑元素 -->
    <!-- 编辑元素 -->
    <el-dialog
      title="　"
      :visible.sync="editElementVisible"
      fullscreen
      append-to-body
      class="full-dialog"
    >
      <EditElement
        :curEleTable="curEleTable"
        :pkeyId="editElementQuery.pkeyId"
        :id="editElementQuery.id"
        :initTableName="editElementQuery.initTableName"
        :pid="editElementQuery.pid"
        :wbsid="editElementQuery.wbsid"
        :nodeid="editElementQuery.nodeid"
        :initTableId="editElementQuery.initTableId"
        @hideDialog="editElementVisible = false"
        @adjustExcel="adjustExcel"
        v-if="editElementVisible"
        :elementType="true"
        :globaltype='1'
      ></EditElement>
    </el-dialog>
    <!-- 调整表单模板 -->
    <div v-if="excelHtml" class="excelHtml">
      <dynamicExcel
        @remove="removeExcel"
        v-if="excelHtml"
        :pkeyId="GLExcelFrom.id"
        :excelId="GLExcelFrom.excelId"
      />
    </div>
    <!-- 元素公式 -->
    <el-dialog
      title="元素公式3"
      :visible.sync="editEleFormulaVisible"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="flex mg-b-10">
        <el-input
          v-model="formulaInput"
          placeholder="请输入名称"
          size="samll"
          clearable
          @clear="searchFormulaName"
        ></el-input>
        <el-button type="info" class="mg-l-10" @click="searchFormulaName"
        >搜索
        </el-button
        >
      </div>
      <el-table
        :data="editEleListFilter"
        border
        style="width: 100%"
        height="400px"
      >
        <el-table-column align="center" prop="eName" label="字段信息">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-link
              :type="scope.row.globalFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row,1)"
            >全局公式
            </el-link
            >
            <!-- <el-link
              class="mg-l-10"
              :type="scope.row.isSaveFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row,10)"
              >节点公式</el-link
            > -->
            <!-- <el-link
              class="mg-l-10"
              type="danger"
              @click="delEleRowHandle(scope.$index,editEleListFilter)"
            >删除</el-link> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 公式 -->
    <el-dialog
      title="元素公式33"
      :visible.sync="formulaCompVisible"
      fullscreen
      append-to-body
      class="full-dialog"
      @close="closeformulaComp"
    >
      <FormulaEdit
        :fromcurNode="curEleTable"
        :initTableId='curTreeData.id'
        :wbsid="id"
        :nodeid="curTreeData.id"
        :eleid="formulaCurRow.id"
        :projectid="projectid"
        :globaltype="formulaCurRow.globaltype"
        :elementType="formulaCurRow.elementType"
        @hideDialog="formulaCompVisible = false"
        v-if="formulaCompVisible"
      ></FormulaEdit>
    </el-dialog>
    <!-- 排序弹框 -->
    <el-dialog
      title="调整排序"
      :visible.sync="sortTag"
      width="50%"

      append-to-body
    >
      <ManualSorting v-if="sortTag2" @bianhua="bianhua()" :sort="sort"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="(sortTag = false), (sortTag2 = false)"
        >取 消</el-button
        >
        <el-button type="primary" @click="editSort()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分配wbs -->
    <allocateDialog ref="allocateRef" :projectId="projectid" :wbsId="wbsid" :wbsType="wbsType"
                    :id="formId"></allocateDialog>


  </div>
</template>

<script>
import {tabTypeLazyTree, delAprojectTab} from "@/api/manager/wbsprivate";
import {selectPrivateFormElements} from "@/api/manager/wbstree";
import {getTableElments} from "@/api/manager/wbstree";
import {wbsInfotabSort} from "@/api/manager/wbsinfo";
import {getExcelHtml} from "@/api/exctab/excelmodel"
import Qute from "./qutediaolog/qute1.vue";//引入元素库
import Relation from './qutediaolog/relation.vue'//关联清表
import EditElement from "@/views/manager/projectinfo/editElement/editElement.vue";//编辑元素
import dynamicExcel from "./treeTemplate/dynamicExcel.vue";
import FormulaEdit from "@/views/formula/edit1.vue";
import ManualSorting from '@/components/WbsTree/ManualSorting'
import allocateDialog from "./allocateDialog.vue";//分配WBS


export default {
  components: {dynamicExcel, EditElement, Qute, Relation, FormulaEdit, ManualSorting, allocateDialog},
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.primaryKeyId);
      });
      return ids.join(",");
    }
  },
  data() {
    return {
      input3: '',
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      search: {},
      loading: false,
      tabloading: false,
      dialogVisible: false,
      obj: {},
      data: [],
      defaultProps: {
        children: "children",
        isLeaf: function (data) {
          return !data.hasChildren;
        },
      },
      allTreeShow: false,//是否显示整棵树
      loadData: [],
      loadData1: [
        {
          tableName: "张三",
          formatTableType: "男",
        },
      ],
      loadData2: [
        {
          tableName: "李四2",
          formatTableType: "女",
        },
      ],
      loadOption: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        menu: true,
        menuWidth: 300,
        searchShowBtn: true,

        dialogClickModal: false,
        column: [
          {
            label: "元素表名称",
            prop: "title",
            editDisplay: false,
            addDisplay: false,
          },
          {
            label: "元素表类型",
            prop: "tabType",
            // search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },

          {
            label: "元素总量",
            prop: "elementTotal",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属方",
            prop: "tabOwner",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "填报率",
            prop: "fillRate",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      defaultExpandKey: [],//默认展开的节点
      defaultCheckedKey: '',
      selectionList: [],
      GLExcelFrom: {
        id: "",
        name: "",
        search: "", //搜素框舒服的值
        ids: "",
        excelId: "",
        initTableName: "",
        initTableId: '',
      },
      //编辑元素弹窗
      editElementVisible: false, //编辑元素弹框
      editElementQuery: {
        pkeyId: "",
        excelId: "",
        id: "",
        initTableName: "",
        pid: "",
        wbsid: "",
        nodeid: "",
      }, //
      excelHtml: false,//调整表单

      //#region 调整表单
      adjustmentExcel: "",
      curEleTable: {},//编辑元素公式
      editEleFormulaVisible: false,//元素公式
      formulaInput: "",
      editEleListFilter: [],
      editEleListAll: [],
      formulaCurRow: {}, //当前元素
      formulaCompVisible: false,
      //#region公式
      id: "",
      curTreeData: {},
      projectid: '',
      treeId: "",
      curNode: {},
      sortTag: false,
      sortTag2: false,
      sort: [],
      allocatedialogVisible: false,//分配WBS弹窗
      formId: ''//分配WBS的表单Id


    };
  },
  created() {
    this.projectid = this.$route.query.pid;
    this.wbsid = this.$route.query.wbsid;
    this.wbsType = this.$route.query.wbsType;
  },
  methods: {
    //关闭公式弹窗
    closeformulaComp() {
      console.log('关闭');
      getTableElments(this.curEleTable.initTableId).then((res) => {

        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      })

    },
    async sortpai(data, node) {
      this.curNode = node;
      this.curTreeData = data;
      await this.findWbsTreePrivateSameLevel(node, data)
      this.sortTag = true;
      this.sortTag2 = true;
    },
    editSort() {
      this.wbsInfotabSort();
    },
    bianhua() {
      this.sortTag2 = false;
      this.$nextTick(() => {
        this.sortTag2 = true;
      });
    },
    async wbsInfotabSort() {
      //元素库、独立库节点排序
      console.log(this.sort, 'this.sort');
      var newArr = this.sort.map((v) => {
        return v.id
      })
      newArr = newArr.join(',')
      const {data: res} = await wbsInfotabSort(newArr);
      if (res.code == 200) {
        this.$message.success('操作成功')
        this.sortTag = false;
        this.sortTag2 = false;
        this.refreshTree();
      }
    },
    async findWbsTreePrivateSameLevel(node, data) {
      const {data: res} = await tabTypeLazyTree({
        parentId: node.data.parentId,
        projectId: this.projectid,
        current: 1,
        size: 1000
      })
      if (res.code == 200) {
        console.log(res.data, 'res1111111');
        let tabArr = res.data.records
        tabArr.forEach((item) => {
          item.tableName = item.title
        })
        console.log(tabArr, 'tabArr');
        this.sort = tabArr
      }
    },
    //#region 接口
    async tabTypeLazyTree(parentId, projectId, current, size, titleName) {//清表树
      console.log(parentId, projectId);
      this.loading = true;
      const {data: res} = await tabTypeLazyTree({parentId, projectId, current, size, titleName})
      this.loading = false;
      if (res.code === 200) {
        return res.data;
      }
    },
    loadNode(node, resolve) {
      const parentId = (node.level === 0) ? 12345678910 : node.data.id;
      this.tabTypeLazyTree(parentId, this.projectid, this.page.current, 1000).then(res => {
        resolve(res.records.map(item => {
          return {
            ...item,
            leaf: !item.hasChildren
          }
        }))
      })
    },
    searchChange() {
      if (this.treeId) {
        this.page.current = 1;
        this.page.currentPage = 1
        this.page.size = 10;
        this.onLoad2()
      } else {
        if (this.input3) {
          this.tabloading = true;
          this.page.current = 1;
          this.page.currentPage = 1
          this.page.size = 10;
          this.tabTypeLazyTree(this.curTreeData.id, this.projectid, this.page.current, this.page.size, this.input3).then((res) => {
            console.log(res.records);
            this.loadData = res.records;
            this.page.total = res.total;
            this.tabloading = false;
          })
        } else {
          this.$message.warning('请输入你想搜索的表单名称')
        }

      }


    },
    currentChange(currentPage) {
      this.page.current = currentPage;

      //  this.searchChange();

    },
    sizeChange(pageSize) {
      this.page.size = pageSize;
    },
    refreshChange() {
      this.searchChange();

    },
    clearinput() {
      this.searchChange()

    },
    onLoad2() {

      if (this.curTreeData.hasChildren) {
        this.tabloading = true;
        this.tabTypeLazyTree(this.curTreeData.id, this.projectid, this.page.current, this.page.size, this.input3).then((res) => {
          console.log(res.records);
          this.loadData = res.records;
          this.page.total = res.total;
          this.tabloading = false;
        })
      }
      if (this.curTreeData.hasChildren === false && this.curNode.level == 2) {
        this.tabloading = true;
        let arr = []
        arr.push(this.curTreeData)
        this.loadData = arr
        this.page.total = 1
        setTimeout(() => {
          this.tabloading = false

        }, 1000);
      } else {
        this.tabloading = true;
        this.loadData = []
        this.page.total = 0;
        setTimeout(() => {
          this.tabloading = false

        }, 1000);
      }

    },
    onLoad1() {
      if (this.curNode.level === 1) {
        this.tabloading = true;
        this.tabTypeLazyTree(this.curTreeData.id, this.projectid, this.page.current, this.page.size, this.input3).then((res) => {
          this.loadData = res.records
          this.page.total = res.total
          this.tabloading = false
        })
      } else {

        this.tabTypeLazyTree(this.curTreeData.parentId, this.projectid, this.page.current, 1000, this.input3).then((res) => {
          let faArr = res.records;
          this.loadData = faArr.filter((item) => {
            if (item.id === this.treeId) {
              return item
            }
          })
        })
      }
    },
    onLoad(page) {
      if (this.input3 || this.treeId) {
        this.tabloading = true;
        this.tabTypeLazyTree(this.treeId, this.projectid, page.currentPage, page.pageSize, this.input3).then((res) => {
          this.loadData = res.records
          this.page.total = res.total
          this.tabloading = false

        })
      }

    },


    nodeClick(data, node) {//外层树结构
      console.log(data, node, 'treedata');
      this.curNode = node
      this.treeId = data.id
      this.curTreeData = data;
      this.page.current = 1;
      this.page.currentPage = 1
      console.log(this.page, 'this.page111111');
      if (data.hasChildren) {
        this.onLoad(this.page)
      }
      if (data.hasChildren === false && node.level == 2) {
        this.tabloading = true;
        let arr = []
        arr.push(data)
        this.loadData = arr
        this.page.total = 1
        setTimeout(() => {
          this.tabloading = false

        }, 1000);
      } else {
        this.loadData = []
        this.page.total = 0
      }

    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {
        });
    },
    //引用元素表单库
    quteEle() {
      this.$refs.Qute.show();

    },

    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return delAprojectTab(this.ids, this.projectid);
        })
        .then(() => {
          this.onLoad1()
          this.refreshTree()
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    //关联清表
    Associationlist(row) {
      console.log('关联清表', row);
      this.$refs.Relation.show()
      // this.GLExcelFrom.name = row.title;

      this.GLExcelFrom.id = row.primaryKeyId;
      this.GLExcelFrom.excelId = row.excelIds;
      this.GLExcelFrom.ids = row.id;
      this.GLExcelFrom.initTableName = row.initTableName;
      this.GLExcelFrom.initTableId = row.initTableId;
      this.GLExcelFrom.nodeid = this.curTreeData.id


    },
    //#region 编辑元素
    async rightClick(row) {
      console.log(row, '编辑元素');
      await this.getExcelHtml2(row.primaryKeyId);
      // console.log('编辑元素');
      this.editElementQuery.pkeyId = row.primaryKeyId;
      this.editElementQuery.excelId = row.excelIds;
      this.editElementQuery.id = row.id;
      this.editElementQuery.initTableName = row.initTableName;
      this.editElementQuery.pid = this.$route.query.pid;
      this.editElementQuery.wbsid = this.$route.query.wbsid;
      this.editElementQuery.initTableId = row.initTableId;
      this.editElementQuery.nodeid = this.curTreeData.id;
      this.curEleTable = row;
      this.editElementVisible = true;
    },
    async getExcelHtml2(pkeyId) {
      const {data: res} = await getExcelHtml({pkeyId});
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem("editElement", res.data);
      }
    },
    //#region 调整表单
    adjustExcel(pkeyId, excelIds) {
      console.log(pkeyId, 'pkeyId');
      this.excelHtml = false;
      // //调整表单
      this.GLExcelFrom.id = pkeyId;
      this.GLExcelFrom.excelId = excelIds
      this.getExcelHtml(pkeyId);
    },
    handleEditFormula(row) {
      this.curEleTable = row;
      getTableElments(this.curEleTable.initTableId).then((res) => {
        // selectFormElements(this.curEleTable.id).then((res) => {
        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      });
      this.editEleFormulaVisible = true;
    },
    //搜索 筛选
    searchFormulaName() {
      this.editEleListFilter = this.editEleListAll.filter((ele) => {
        return ele.eName.indexOf(this.formulaInput) > -1;
      });
    },
    async getExcelHtml(pkeyId) {
      const {data: res} = await getExcelHtml({pkeyId});
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem("excelHtml", res.data);
        this.adjustmentExcel = res.data;
        this.excelHtml = true;
      }
    },
    removeExcel() {
      this.excelHtml = false;
    },
    //跳转到公式配置页面
    toFormulaEdit(row, type) {
      this.formulaCurRow = row;
      this.formulaCompVisible = true;
      this.formulaCurRow.globaltype = type;
      this.formulaCurRow.elementType = true;
    },
    //刷新左边树形数据
    refreshTree() {
      //刷新左边树形数据
      if (this.curNode.level === 1) {
        const parentId = 12345678910
        tabTypeLazyTree({parentId, projectId: this.projectid, current: 1, size: 1000}).then(res => {
          this.data = res.data.data.records;
          this.$nextTick(() => {
            this.defaultExpandKey.push(this.curNode.data.id);
            this.$refs.trees.setCurrentKey(this.curNode.data.id);

          })

        });
      } else {
        this.updateTreeNewNode()
      }
    },
    updateTreeNewNode() {
      tabTypeLazyTree(
        {parentId: this.curTreeData.parentId, projectId: this.projectid, current: 1, size: 1000}
      ).then((res) => {
        this.$refs.trees.updateKeyChildren(
          this.curTreeData.parentId,
          res.data.data.records
        );
        this.$refs.trees.setCurrentKey(this.curNode.data.id);
      });
    },
    //分配WBS
    allocatWbs(row) {
      this.$refs.allocateRef.show()
      this.formId = row.id

    }

  },

  mounted() {
    // this.heightss = this.$refs.rulesss.clientHeight
  },
};
</script>

<style lang="scss" scoped>
//调整表单样式
.excelHtml {
  position: absolute;
  z-index: 999999;
  top: 50px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.marleft10 {
  margin-left: 10px;
}
::v-deep .el-tree-node__expand-icon {
  font-size: 16px;
}
.colorblue {
  color: rgb(0, 82, 217);
}

.treecontent ::v-deep .el-scrollbar {
  height: 100%;
}

.el-scrollbar {
  height: 100%;
}

.rightHeader {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  background-color: #fff;

  .excelname {
    box-sizing: border-box;
    min-width: 200px;
    height: 28px;
    border: 1px solid rgb(220, 220, 220);
    padding: 0 10px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.dialogModel {
  .dialogBox {
    .middle {
      display: flex;

      .left {
        border: 1px solid rgb(220, 220, 220);
        border-radius: 3px;
        height: 500px;
        width: 49%;

        .select {
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          padding: 5px 0;
          border-bottom: 1px solid #e0e0e0;
        }
        .leftscroll {
          height: 450px;
          overflow-y: scroll;
        }
      }

      .right {
        height: auto;
        height: 60px;
        max-height: 500px;
        margin-left: 2%;
        // height: 500px;
        border-radius: 3px;
        td {
          box-sizing: border-box;
          padding: 5px 10px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }

  .btbox {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

.rightBox {
  flex: 1;
}

.boxswai {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}
::v-deep .avue-crud__left {
  width: 65%;
}
::v-deep .el-input-group__append {
  background-color: #ecf5ff;
  color: #409EFF;
}
::v-deep .el-input-group__append:hover {
  background-color: #409EFF;
  color: white;
}
::v-deep .el-input-group__prepend:hover {
  background-color: #409EFF;
  color: white;
}
::v-deep .el-input-group__append:active {
  background-color: #9dc5ee;
  color: white;
}
::v-deep .el-input-group__prepend:active {
  background-color: #9dc5ee;
  color: white;
}
</style>
