<template>
  <div class="all">
    <header class="flex-box-ce">
      <div class="flex-1">
        <el-select v-model="type" placeholder="指标类型"  style="width: 200px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="tabIds" multiple placeholder="标签搜索"  style="width: 200px;margin: 0 10px;">
          <el-option v-for="item in tabs" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-input placeholder="搜索指标名称" prefix-icon="el-icon-search"  v-model="keywords" style="width: 200px;" clearable></el-input>
      </div>
      <div class="flex-box-ce">
        <el-button type="primary"  @click="openAdd()">新增指标</el-button>
        <el-button type="success"  @click="dialogVisible = true">标签库</el-button>
        <el-button type="danger"  :disabled="SelectionChange.length == 0" @click="deleteIndex()">删除</el-button>
        <el-button  @click="showMove = true" style="margin-right: 10px;" :disabled="SelectionChange.length == 0">移动到</el-button>
        <el-dropdown @command="handleCommand2">
          <el-button >
            更多
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="A">导入指标</el-dropdown-item>
            <el-dropdown-item command="B">导出指标</el-dropdown-item>
            <el-dropdown-item command="C">指标设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
    <div class="main">
      <div class="flex-box" style="margin-top: 20px;">
        <div class="main-left">
          <div class="flex-box-ce left-title">
            <div class="flex-1">指标分类</div>
            <i class="el-icon-plus" style="cursor: pointer;" @click="showAddCate = true"></i>
          </div>
          <ul class="ul scroll-bar" v-if="indexTypeList.length > 0">
            <li class="flex-box-ce li" v-for="(item, index) in indexTypeList" :key="index" :class="[cate_id == item.id ? 'isActiveLi' : '']" @click="activeLi(item, index)">
              <div class="index-name font-flex-word" v-if="item.id != 0">{{ item.name }}</div>
              <div class="index-name font-flex-word" v-else>
                <i class="el-icon-s-help"></i>
                {{ item.name }}
              </div>
              <div style="width: 14px;" v-if="item.id == 0"></div>
              <el-dropdown @command="handleCommand($event, item)" v-else>
                <i class="el-icon-more" style="cursor: pointer;"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="A">
                    <i class="el-icon-edit"></i>
                    编辑
                  </el-dropdown-item>
                  <el-dropdown-item command="B">
                    <i class="el-icon-delete"></i>
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
          <NoData v-else content="暂无分类" imgW="120px" imgH="80px"></NoData>
        </div>
        <div class="main-right">
          <div class="fontColorB flex-box flex-d-center">
            <div>{{ typeName }}</div>
            <div><el-checkbox v-model="enableDs_checked">只看已开启【加入统计项】的指标</el-checkbox></div>
          </div>
          <el-table :data="indexList" stripe v-loading="loading" class="table-box scroll-bar" @selection-change="handleSelectionChange" @row-click="rowClick">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="enable_ds" label="" width="42px">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.enable_ds == 1" class="item" effect="dark" content="已加入【数据中台】统计项，请谨慎修改此指标" placement="top">
                  <!-- menu_but_icon -->
                  <!-- menu_middle_icon -->
                  <!-- el-icon-loading -->
                  <svg-icon icon-class="menu_middle_icon" class="menu_middle_icon "></svg-icon>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="name"  label="名称">
              <template slot-scope="scope">
                <PreBox :value="scope.row.name"></PreBox>
              </template>
            </el-table-column>
            <el-table-column prop="cate_name"  label="指标分类"></el-table-column>
            <el-table-column prop="type"  label="指标类型">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1">量化指标</span>
                <span v-if="scope.row.type == 2">非量化指标</span>
                <span v-if="scope.row.type == 3">额外加分项</span>
                <span v-if="scope.row.type == 4">额外扣分项</span>
              </template>
            </el-table-column>
            <el-table-column prop="per_remark" label="考核标准" min-width="200">
              <template slot-scope="scope">
                  <PreBox :value="scope.row.per_remark"></PreBox>
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="权重">
              <template slot-scope="scope">
                <span v-if="scope.row.weight">{{ scope.row.weight }}%</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="tag" label="标签">
              <template slot-scope="scope">
                <template v-if="scope.row.tag.length > 0">
                  <el-tag v-for="item in scope.row.tag" :key="item.id">{{ item.name }}</el-tag>
                </template>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
          <Pagination :page="page" :page_size="page_size" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
        </div>
      </div>
    </div>

    <!-- 标签库 -->
    <el-dialog title="标签库" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
      <el-tag :key="index" v-for="(tag, index) in tabs" closable :disable-transitions="false" @close="handleClose(tag)">
        <span v-if="tag.name">{{ tag.name }}</span>
        <span v-else>{{ tag }}</span>
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="mini"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
         maxlength="10"
        show-word-limit
      ></el-input>
      <el-button v-else class="button-new-tag" size="mini" @click="showInput">
        <i class="el-icon-plus"></i>
        添加
      </el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTabs()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 添加分类 -->
    <el-dialog :title="cateTitle" :visible.sync="showAddCate" width="30%" :close-on-click-modal="false">
      <el-form ref="form" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="分类名称"><el-input v-model="cateName"></el-input></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddCate = false">取 消</el-button>
        <el-button type="primary" @click="addCate()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移动 -->
    <BrawerBox drawerTitle="移动到" :showDrawer.sync="showMove">
      <template slot="main">
        <el-input placeholder="请输入分类名称搜索" v-model="cateVal" clearable></el-input>
        <ul style="margin-top: 20px;">
          <li v-for="(item, index) in indexTypeList" :key="index" class="flex-box-ce li" v-if="item.id != 0 && item.name.indexOf(cateVal) >= 0">
            <el-radio v-model="selectCateId" :label="item.id" class="flex-box-ce flex-1" style="padding: 15px 0;">
              <div class="flex-box-ce">
                <div class="flex-1">{{ item.name }}</div>
              </div>
            </el-radio>
          </li>
        </ul>
      </template>
      <template slot="footer">
        <el-button plain @click="showMove = false">取消</el-button>
        <el-button type="primary" @click="Move()">确定</el-button>
      </template>
    </BrawerBox>
    <!-- 导入规则 -->
    <el-dialog title="导入指标" :visible.sync="import_rules_show" width="500px" :close-on-click-modal="false">
      <el-row>
        <el-col :span="12">
          <div class="text-center">
            <p>1、下载指标模版，填写好规则</p>
            <p><img src="@/assets/image/rules_mould.png" alt="" /></p>
            <p>指标表</p>
            <p>
              <a target="_blank" :href="$serverdomain + '/api/download/index/template'"><el-button type="primary">下载模板</el-button></a>
            </p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="text-center">
            <p>2、上传填好的指标表</p>
            <p><img src="@/assets/image/rules_mould1.png" alt="" /></p>
            <p>仅支持xls、xlsx格式文件</p>
            <el-upload
              class="upload-demo"
              :headers="ATOKEN"
              ref="upload"
              :limit="1"
              :action="integralUpload"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-upload="beforeFilesUpload"
              :file-list="fileList"
            >
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
            <!-- <p><el-button type="primary" @click="submitUpload" :loading="save_loading" v-show="import_btn_show" block>导入</el-button></p> -->
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 导入结果 -->
    <el-dialog title="导入结果" :visible.sync="error_list_show" @close="error_list_SX" :append-to-body="true" width="700px" :close-on-click-modal="false">
      <el-table :data="error_list" stripe>
        <el-table-column prop="name" label="指标名称"></el-table-column>
        <el-table-column prop="error" label="错误信息"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 指标等级设置 -->
    <BrawerBox :showDrawer.sync="indexSetting"  drawerTitle="指标等级设置">
      <template slot="main">
        <div>
          <div style="color: #656565;">每项指标评分后，按分数展示对应的评级，此处可设置多项评级标准。<br/>指标设置或新增时自由选择评级方式。</div>
          <el-button type="primary" @click="indexSetNew" plain style="margin: 5px 0;">新增 +</el-button>
        </div>
        <div class="drawer_center" v-loading="indexSerLoad">
          <div class="isList">
            <div v-for="(item,index) in isList" :key="index" @click="isLsI(item)" class="flex-box flex-d-center isListI">
              <span>{{item.name}}</span>
              <div @click.stop="isLIDelete(item)">
                <svg-icon icon-class="delete_jx" style="font-size:16px;margin-bottom:2px"/>
              </div>
            </div>
          </div>
        </div>
      </template>
    </BrawerBox>

    <!-- 等级配置 -->
    <el-dialog title="等级配置" :visible.sync="levelConfigVisible" :close-on-click-modal="false" width="700px">
      <div v-loading="levelConLoad">
        <div style="padding-top: 20px;">
          <span style="margin-right: 15px;font-weight: 600;">名称</span><el-input
            type="text"
            style="width: 200px;"
            placeholder="请输入名称"
            v-model="levelConList.name"
            maxlength="15"
            show-word-limit
          ></el-input>
        </div>
        <ClassSet ref="ClassSet" :inputs="inputs" style="padding-top: 20px;" :inputsStyle="{paddingLeft:'0px',width: '600px'}"></ClassSet>
        <span slot="footer" class="dialog-footer flex-box flex-box-end">
          <el-button @click="levelConfigVisible = false">取消</el-button>
          <el-button type="primary" @click="levelConSave()">保存</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import {_debounce } from '@/api/auth';
import ClassSet from '@/components/public/ClassSet';

export default {
  components: { EmployeeSelector, ClassSet },
  name: 'EvaluateSet',
  data() {
    return {
      levelConLoad: false,
      levelConList: {
        name: '',
        id: 0
      },
      inputs: [],//分值区间
      levelConfigVisible: false,//等级配置
      indexSetting: false,
      indexSerLoad: false,
      isList: [],
      total: 0,
      page: 1,
      page_size: 10,
      // 标签库相关
      tabs: [],
      tabsAll: [],
      tabIds: [],
      enableDs_checked: false,
      inputVisible: false,
      inputValue: '',
      typeName: '全部分类',

      type: '0',
      options: [
        {
          value: '0',
          label: '全部'
        },
        {
          value: '1',
          label: '量化指标'
        },
        {
          value: '2',
          label: '非量化指标'
        },
        {
          value: '3',
          label: '额外加分项'
        },
        {
          value: '4',
          label: '额外扣分项'
        }
      ],
      value2: [],
      indexTypeList: [], //指标分类
      indexList: [], //指标列表
      cate_id: 0,
      cateName: '',
      cateId2: '', //编辑分类使用
      cateTitle: '新建分类',
      showMove: false, //

      keywords: '',
      loading: false,
      dialogVisible: false,
      showAddCate: false,
      selectCateId: '', //移动指标用到
      SelectionChange: [], //选择的指标
      cateVal: '',
      // 导入导出相关
      import_rules_show: false,
      ATOKEN: { 'A-TOKEN': this.$getToken() },
      integralUpload: this.$serverdomain + '/api/per/file/import/index',
      save_loading: false,
      import_btn_show: false,
      fileList: [],
      file: null,
      error_list_show: false,
      error_list: [],
      indexSet:'',
    };
  },
  watch: {
    import_rules_show(val) {
      if (!val) {
        this.$refs.upload.clearFiles();
        this.import_btn_show = false;
      }
    },
    dialogVisible(val) {
      if (!val) {
        this.getTagList();
      }
    },
    showMove(val) {
      if (!val) {
        this.selectCateId = '';
        this.cateVal = '';
      }
    },
    showAddCate(val) {
      if (!val) {
        this.cateName = '';
        this.cateId2 = '';
        this.cateTitle = '新建分类';
      }
    },
    type() {
      this.page=1;
      this.getIndexList();
    },
    keywords: {
      deep: true,
      handler: _debounce(function(val) {
        this.page=1;
        this.getIndexList();
      })
    },
    tabIds(val) {
      this.page=1;
      this.getIndexList();
    },
    enableDs_checked(val) {
      this.getIndexList();
    }
  },
  created() {
    this.indexSet=this.$getCache("indexSet")
    this.getTagList();
    this.getIndexType();
    this.getIndexList(true);
  },
  mounted() {
  },
  methods: {
    isSave(){},//指标设置保存
    isCancel(){},//指标设置取消
    //指标等级列表
    gradeSetList(){
      this.indexSetting = true
      this.indexSerLoad = true
      this.$axios('get', '/api/per/index/level/list').then(res => {
        if(res.data.code == 1){
          let list = res.data.data.list
          this.isList = list
        }
      }).finally(()=>{
        this.indexSerLoad = false
      })
    },
    //指标项点击
    isLsI(levels){
      var inputs=[];
      var max=0;//最大值
      levels.scope.forEach((item,index)=>{
        var obj;
        if(index==0){
          obj={name:item.name,max:Number(item.value),min:0};
        }else{
          obj={name:item.name,max:Number(item.value),min:max};//当不是第一个等级时，最小值为上一个的最大值
        }
        max=item.value;
        inputs.push(obj);
      })
      this.levelConfigVisible = true
      this.$nextTick(()=>{
        this.levelConList = {name: levels.name, id: levels.id}
        this.inputs=inputs
      })
    },
    //指标项删除
    isLIDelete(item){
        this.$confirm('确认删除指标等级：'+ item.name +'？', '删除等级', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios('post', '/api/per/index/level_del', {id: item.id}).then(res => {
            if(res.data.code == 1){
              this.$message.success('删除成功');
              this.gradeSetList()
            }
          })
        }).catch(() => {
        });
    },
    //新增
    indexSetNew(){
      if(this.isList.length>=20){
        this.$message.warning('指标等级达上限');
        return
      }
      this.levelConfigVisible = true
      this.$nextTick(()=>{
        this.levelConList = {name: '',id: null}
        this.inputs=[{ name: 'C', min: 0, max: 60 }, { name: 'B', min: 60, max: 80 }, { name: 'A', min: 80, max: 100 }]
      })
    },
    //等级配置保存
    levelConSave(){
      let is=true,level_scope=[];
      let isSave=this.$refs.ClassSet.isSave
      let inputsList=this.$refs.ClassSet.inputsList
      if(!isSave){
        return false
      }
      if(!this.levelConList.name && this.levelConList.name == ''){
        this.$message.warning('请输入名称');
        return
      }
      inputsList.some(item=>{
        if(!item.name){
          this.$message.warning('等级的名称不能为空');
          is=false;
          return true;
        }
        if(item.max==0){
          this.$message.warning('最大值不能为空或者0');
          is=false;
          return true;
        }
        level_scope.push({name:item.name,value:Number(item.max)});
      })

      let data = {
        name: this.levelConList.name,
        scope: JSON.stringify(level_scope)
      }
      if(this.levelConList.id){
        data.id = this.levelConList.id
      }
      if(is){
        this.levelConLoad = true;
        this.$axios('post','/api/per/index/level',data).then(res=>{
            this.$message.success('保存成功');
            this.levelConfigVisible = false
            this.gradeSetList()
        }).finally(()=>{
          setTimeout(()=>{
            this.levelConLoad = false;
          },300)
        })
      }
    },

    //关闭错误信息时的回调
    error_list_SX() {
      this.getIndexList();
    },
    submitUpload() {
      this.save_loading = true;
      let params = {
        file: this.file
      };
      this.$axios('post', '/api/per/file/import/index', params)
        .then(res => {
          if (res.data.code == 1) {

          }
        })
        .finally(() => {
          this.save_loading = false;
        });
    },
    // 上传成功的回调
    handleSuccess(res) {
	console.log(res)
      if (res.code == 1) {
		this.import_rules_show = false;
		this.$message.success({ message: res.msg });
		if (res.data.error.length != 0) {
		  this.error_list_show = true;
		  this.error_list = res.data.error;
		} else {
		  this.getIndexList();
		}
      }else{
		  this.$message.error({ message: res.msg });
	  }
    },
    // 删除文件的回调
    handleRemove(file, fileList) {
      if (fileList !== null && fileList.length != 0) {
        this.import_btn_show = true;
      } else {
        this.import_btn_show = false;
      }
    },
    // 上传前的校验
    beforeFilesUpload(file) {
      const $ext_list = ['xlsx', 'xls'];
      let len = file.name.split('.').length - 1;
      const $ext_name = file.name.split('.')[len];
      if ($ext_list.indexOf($ext_name) != -1) {
        this.import_btn_show = true;
      } else {
        this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls）');
        return false;
      }
    },
    //保持标签
    saveTabs() {
      let tabs = JSON.parse(JSON.stringify(this.tabs));
      let tag = tabs.map(item => {
        let obj = {};
        if (!item.name) {
          obj.id = '';
          obj.tag_name = item;
          return obj;
        } else {
          item.tag_name = item.name;
          return item;
        }
      });
      this.$axios('post', '/api/per/index/tag', { tag: tag }).then(res => {
        this.$message.success('设置成功');
        this.getTagList();
        this.dialogVisible = false;
      });
    },
    //获取标签列表
    getTagList() {
      this.$axios('get', '/api/per/index/tag').then(res => {
        this.tabs = res.data.data.list || [];
      });
    },
    // 编辑指标
    rowClick(e) {
      this.$axios('get', '/api/per/index/info', { index_id: e.id }).then(res => {
        this.$setCache('indexSet',{cate_id:this.cate_id,page:this.page})
        this.$router.push({ path: '/addIndexSet', query: { item: JSON.stringify(res.data.data) } });
      });
    },
    // 移动指标
    Move() {
      if (!this.selectCateId) {
        this.$message.error('请选择分类');
        return false;
      }
      let ids = this.SelectionChange.map(item => {
        return item.id;
      });
      let data = {
        replace_cate: 1,
        cate_id: this.selectCateId,
        index_ids: ids
      };
      this.$axios('post', '/api/per/index/update', data).then(res => {
        this.$message.success('设置成功');
        this.showMove = false;
        this.getIndexList();
      });
    },
    // 删除指标
    deleteIndex() {
      this.$confirm('确定删除选中指标', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let ids = this.SelectionChange.map(item => {
            return item.id;
          });
          this.$axios('post', '/api/per/index/del', { index_ids: ids.toString() }).then(res => {
            this.$message.success('删除成功');
            this.getIndexList();
          });
        })
        .catch(() => {});
    },
    // 添加编辑分类
    addCate() {
      if (!this.cateName) {
        this.$message.error('请输入分类名称');
        return false;
      }
      var url = this.cateId2 ? '/api/per/index/cate/update' : '/api/per/index/cate/add';
      var data = { name: this.cateName };
      this.cateId2 ? (data.cate_id = this.cateId2) : '';
      this.$axios('post', url, data).then(res => {
        this.$message.success(this.cateId2 ? '编辑成功' : '添加成功');
        this.getIndexType();

        this.showAddCate = false;
      });
    },
    handleSelectionChange(e) {
      this.SelectionChange = e;
    },
    //获取指标列表
    getIndexList(is) {
      this.loading = true;
      if(this.indexSet&&is){
        this.page=this.indexSet.page? this.indexSet.page:1
        this.cate_id=this.indexSet.cate_id
      }
      this.$axios('get', 'api/per/index/list', {
        page: this.page,
        page_size: this.page_size,
        cate_id: this.cate_id,
        type: this.type,
        keywords: this.keywords,
        tag_ids: JSON.stringify(this.tabIds),
        enable_ds: this.enableDs_checked ? 1 : null
      })
        .then(res => {
          let data = res.data.data.list;
          data.forEach(item => {
            item.name = this.initData(item.name);
            item.type = this.initData(item.type);
            item.per_remark = this.initData(item.per_remark);
          });
          this.total = res.data.data.total;
          this.indexList = data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //数据初始化，没有值或者空数组的显示-
    initData(str) {
      if (str == null) {
        return str ? str : '-';
      }
      if (typeof str == 'object') {
        return str.length > 0 ? str : '-';
      } else {
        return str ? str : '-';
      }
    },
    //获取指标分类
    getIndexType() {
      this.$axios('get', 'api/per/index/cate/list').then(res => {
        let data = res.data.data.list || [];
        if (data.length > 0) {
          data.unshift({ name: '全部分类', id: 0 });
          this.indexTypeList = data;
          if(this.indexSet){
            this.cate_id=this.indexSet.cate_id
          }
        }
      });
    },
    activeLi(item, index) {
      this.cate_id = item.id;
      this.typeName = item.name;
      this.page = 1;
      this.getIndexList();
    },
    handleCommand2(e, item) {
      if (e == 'A') {
        this.import_rules_show = true;
      } else if (e == 'B'){
        this.$axios('post', '/api/per/user/download_token').then(res => {
		  let token=res.data.data.token
		  window.open(process.env.VUE_APP_BASE_API +'/api/download/export/index?token=' +token,'_blank');
        });
      } else if (e == 'C'){
        this.gradeSetList()
      }
    },
    handleCommand(e, item) {
      if (e == 'A') {
        this.cateName = item.name;
        this.cateId2 = item.id;
        this.cateTitle = '编辑分类';
        this.showAddCate = true;
      } else {
        this.$confirm('确定删除该指标分类', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$axios('post', '/api/per/index/cate/del', { cate_id: item.id }).then(res => {
              this.$message.success('删除成功');
              this.getIndexType();
              if (item.id == this.cate_id) {
                //如果删除的是当前展示的这个
                this.cate_id = 0;
                this.getIndexList();
              }
            });
          })
          .catch(() => {});
      }
    },
    submitForm() {
      this.$router.push({ path: '/evaluate' });
    },
    openAdd() {
      if (this.indexTypeList.length == 0) {
        this.$message.error('请先创建指标分类');
        return;
      }
      this.$setCache('indexSet',{cate_id:this.cate_id})
      this.$router.push({ path: '/addIndexSet',query:{cate_id:this.cate_id? this.cate_id:''}});
    },
    // 标签库相关
    handleClose(tag) {
      this.tabs.splice(this.tabs.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm(e) {
      let is = true;
      this.tabs.some(item => {
        if (item.name == this.inputValue) {
          this.$message.error('标签名称重复');
          this.inputValue = '';
          is = false;
          return true;
        }
      });
      if (!is) {
        return false;
      }
      let inputValue = this.inputValue;
      if (inputValue) {
        this.tabs.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    // 页面变更
    handleCurrentChange(val) {
      this.page = val;
      this.getIndexList();
    },
    // 页面跳转
    handleSizeChange(val) {
      this.page_size = val;
      this.getIndexList();
    }
  }
};
</script>
<style scoped="scoped" lang="scss">
.text-center{
	text-align: center;
}
.text-center p{
	padding: 10px 0;
}
.all {
  padding: 10px;
  min-height: calc(100vh - 210px);
  position: relative;
}
.title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.width-250 {
  width: 250px;
}
.title-f {
  margin-bottom: 20px;
}
.inputDc {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
}
.checkChild {
  background-color: #fbfdff;
  margin-left: 20px;
}
.el-icon-more {
  display: none;
}
.li {
  height: 53px;
  line-height: 53px;
  padding: 0 10px;
  border-bottom: 1px solid #f8f8f8;
  color: #777777;
  width: 100%;
}
.li:hover {
  background-color: #f5f7fa;
}
.li:hover .el-icon-more {
  display: block;
}
.main-left {
  width: 200px;
  margin-right: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 3px;
  box-sizing: border-box;
}
.left-title {
  height: 53px;
  line-height: 53px;
  padding: 0 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #f1f1f1;
  color: #222;
  font-size: 15px;
  font-weight: 600;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.index-name {
  width: 170px;
}
.ul {
  max-height: calc(100vh - 330px);
  overflow: auto;
  width: 200px;
}
.isActiveLi {
  background-color: #f5f7fa;
  color: #409eff !important;
  position: relative;
}
.isActiveLi .el-icon-more {
  display: block;
}
.table-box {
  // max-height: calc(100vh - 330px);
  cursor: pointer;
  overflow: auto;
  .menu_middle_icon{
    width: 1.3em;
    height: 1.3em;
  }
}
.main-right {
  overflow-x: hidden;
  width: 100%;
}
::v-deep .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #f1f1f1;
}
::v-deep .el-dialog__body {
  padding: 20px;
  padding-top: 0px;
}
.el-tag {
  margin-left: 10px;
  margin-top: 10px;
}
.button-new-tag {
  margin-left: 10px;
  margin-top: 10px;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.drawer_center {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 200px);
  .isList{
    padding: 0 0px 0 0;
    .isListI{
      padding: 15px 0;
      border-bottom: 1px solid #D7E2EF;
      background-color: #fff;
      cursor: pointer;
      color: black;
      transition: .5s;
    }
    .isListI:hover{
      transition: .5s;
      background-color: rgb(253, 253, 253);
      color: rgb(55, 154, 247);
    }
}


  /* 滚动条样式 */
  .drawer_center::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .drawer_center::-webkit-scrollbar-track {
    width: 6px;
    background-color: #fff0;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /*滚动条的设置*/
  .drawer_center::-webkit-scrollbar-thumb {
    background-color: #fff0;
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /*滚动条移上去的背景*/
  .drawer_center:hover::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
  }

  .modifyConfigDrawer {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    border-top: 1px solid rgb(233, 233, 233);
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
  }
}
.disnone{
  display: none;
  transition: .5s;
}
</style>
