<template>
  <div class="manualTagEdit-wrap common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <div class="manualTagEdit-wrap__form">
          <div class="manualTagEdit-wrap__title">
            标签基本信息
            <i class="el-icon-edit" circle @click.stop="changeEditFlag" v-if="!tagEditFlag"> </i>
          </div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
            <el-form-item label="标签名称" prop="tagName" class="w-329">
              <el-input class="w-220" v-model="ruleForm.tagName" @focus="focus('tagName', 10)" @keyup.native="value => toInput(value)" :disabled="!tagEditFlag"> </el-input>
              <label class="input-label">{{ inputNumObj.tagName }}/10</label>
            </el-form-item>
            <el-form-item label="所属分类" prop="tagLevelGroupId">
              <el-select :disabled="!tagEditFlag" v-model="ruleForm.tagTwoLevelGroupId" placeholder="请选择" class="w-220" @change="changeTwo">
                <el-option v-for="item in optionsTwo" :key="item.tagLevelGroupId" :label="item.levelName" :value="item.tagLevelGroupId"> </el-option> </el-select
              ><el-select :disabled="!tagEditFlag" v-model="ruleForm.tagLevelGroupId" placeholder="请选择" class="w-220 m-l-8">
                <el-option v-for="item in optionsThree" :key="item.tagLevelGroupId" :label="item.levelName" :value="item.tagLevelGroupId"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签描述" prop="tagDescribe" class="w-560">
              <el-input :disabled="!tagEditFlag" class="w-447" type="textarea" v-model="ruleForm.tagDescribe" style="height: 96px;" @focus="focus('tagDescribe', 200)" @keyup.native="value => toInput(value)">
              </el-input>
              <template
                ><label class="input-label textarea-label">{{ inputNumObj.tagDescribe }}/200</label></template
              >
            </el-form-item>
            <el-form-item label="" class="font-0">
              <el-button type="primary" @click.stop="confirmSave('ruleForm')" v-if="tagEditFlag">保存</el-button>
              <el-button @click.stop="cancelSave" v-if="tagEditFlag">返回</el-button>
            </el-form-item>
            <!-- <div class="full-div" v-if="!tagEditFlag"></div> -->
          </el-form>
        </div>
        <!-- 如果新增时候,设置标签值不显示 !!currentTagId-->
        <div class="manualTagEdit-wrap__set" v-if="!tagEditFlag">
          <div class="manualTagEdit-wrap__title">标签值设置</div>
          <div class="manualTagEdit-wrap__add">
            <div class="manualTagEdit-wrap__input fl">
              <el-input v-model="addInputValue" placeholder="请输入" class="w-220 m-r-10" @focus="focus('addInputValue', 10)" @keyup.native="value => toInput(value, 'tagVal')"> </el-input
              ><label class="input-label textarea-label"> {{ inputNumObj.addInputValue }}/10 </label
              ><el-button class="middle" type="text" @click.stop="addInputVal">
                添加
              </el-button>
            </div>
            <div class="download-wrap fr">
              <el-button type="primary" @click="handleDownload()"><i class="iconfont icon-icon_yunxiazai"></i>下载 excel 模板</el-button>
            </div>
          </div>

          <div class="manualTagEdit-wrap__table m-t-20">
            <el-table :data="tagValTableData" border>
              <el-table-column label="标签值" class-name="no-right-border">
                <template slot-scope="scope">
                  {{ !scope.row.editAble ? scope.row.tagItemName : '' }}
                  <el-input
                    v-if="scope.row.editAble"
                    size="small"
                    class="h5-el-input w-200"
                    v-model="scope.row.inputValue"
                    type="text"
                    placeholder="请输入标签值"
                    @keyup.native="value => toEditInput(value, scope.$index, scope.row)"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                  <el-button
                    v-if="!scope.row.editAble && scope.row.status != 5"
                    type="text"
                    size="small"
                    class=""
                    :disabled="scope.row.status == 2 || scope.row.status == 4 || scope.row.status == 5 || scope.row.status == 6 ? true : false"
                    @click="toEditTag(scope.$index, scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-if="!scope.row.editAble && scope.row.status != 5"
                    type="text"
                    size="small"
                    class=""
                    :disabled="scope.row.status == 2 || scope.row.status == 4 || scope.row.status == 5 || scope.row.status == 6 ? true : false"
                    @click="confirmDel(scope.$index, scope.row)"
                  >
                    删除
                  </el-button>
                  <!-- <el-popover
                    v-if="!scope.row.editAble && scope.row.status != 5"
                    placement="top"
                    width="160"
                    v-model="scope.row.popVisible">
                    <p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
                    <div style="text-align: right; margin: 0">
                      <el-button size="mini" type="text" @click="cancelDelTag(scope.$index,scope.row)">取消</el-button>
                      <el-button type="primary" size="mini" @click="toDelTag(scope.$index,scope.row)">确定</el-button>
                    </div> -->
                  <!-- <el-button slot="reference" class="p-l-20" type="text">
                      删除
                    </el-button> -->
                  <!-- <el-button type="text" size="small" class="" @click="confirmDel(scope.$index,scope.row)">删除</el-button> -->
                  <!-- </el-popover> -->
                  <el-button v-if="scope.row.status == 5" type="text" size="small" class="">删除中</el-button>

                  <el-button v-if="scope.row.editAble" type="text" @click.stop="confirmEdit(scope.$index, scope.row)">确认</el-button>
                  <el-button v-if="scope.row.editAble" type="text" @click.stop="cancleEdit(scope.$index, scope.row)">取消</el-button>
                </template>
              </el-table-column>

              <el-table-column label=" " width="420px" class-name="no-right-border cell-border">
                <template slot-scope="scope">
                  <template>
                    <upload-excel-component
                      v-show="excelExistIndex != scope.$index"
                      :excelBodyData="currentExcelData"
                      :excelHeader="currentExcelHeader"
                      :currentIndex="scope.$index"
                      :currentExcelTagItemId="scope.row.tagItemId"
                      :status="scope.row.status"
                      @on-selected-file="selectedFile"
                      @selectIndex="setSelectIndex"
                      @clearOldData="clearOldData"
                    >
                      <!-- :failHead="scope.row.header"
                      :failData="scope.row.data" -->
                    </upload-excel-component>
                  </template>
                  <template v-if="excelExistIndex == scope.$index && !!currentExcelHeader.length">
                    <div class="flex excel-upload-content">
                      <i class="iconfont icon-CSV "></i>
                      <div class="flex flex-row p-l-8">
                        <div class="flex-1">
                          <span class="p-r-8 color-303133">{{ currentExcelName }}</span
                          ><span class="p-l-8 border-l-dcdfe6 color-1890ff excel-upload__del" @click.stop="clearOldData(scope.$index, scope.row)">删除</span>
                          <!-- <el-popover
                            v-if="!scope.row.editAble"
                            placement="top"
                            width="160"
                            v-model="scope.row.popVisible">
                            <p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
                            <div style="text-align: right; margin: 0">
                              <el-button size="mini" type="text" @click="cancelDelTag(scope.$index,scope.row)">取消</el-button>
                              <el-button type="primary" size="mini" @click="toDelCate(scope.$index,scope.row)">确定</el-button>
                            </div>
                            <el-button slot="reference" class="p-l-20" type="text">
                              删除
                            </el-button>
                            <el-button slot="reference" type="text" size="small" :disabled="!scope.row.enterpriseId? true: false" class="">删除</el-button>
                          </el-popover> -->
                        </div>
                        <div class="flex-1 color-909399 font-12 m-t-05">已导入会员 {{ currentExcelData.length }} 人</div>
                      </div>
                    </div>
                  </template>
                </template>
              </el-table-column>
              <el-table-column label=" " width="220px" class-name="no-right-border">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.optType">清空标签历史标记会员</el-checkbox>
                  <!-- <el-tooltip class="item" effect="light" content="" placement="top">
                    <div slot="content">勾选此选项之后，此前被本标签标记的会员将移除此标签，此标签标记会员以本次导入为准。
                    </div>
                    <i class="el-icon-question"></i>
                  </el-tooltip> -->
                  <el-popover placement="top-end" width="200" trigger="hover">
                    <span>勾选后，此前被该标签标记的会员将移除此标签，此标签标记会员以本次导入为准。</span>
                    <i slot="reference" class="iconfont icon-xinxixianshi"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label=" " width="100px">
                <template slot-scope="scope">
                  <el-button type="primary" :disabled="scope.$index != excelExistIndex" @click.stop="toUploadFile(scope.$index, scope.row)">
                    {{ scope.row.status == 1 || scope.row.status == 3 || scope.row.status == 7 || scope.row.status == 8 ? '上传' : '' }}
                    {{ scope.row.status == 2 || scope.row.status == 4 || scope.row.status == 5 || scope.row.status == 6 ? '处理中' : '' }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
    <!-- 保存 -->
    <!-- <div class="manualTagEdit-wrap__footer">
      <el-button @click.stop="cancelSave">取消</el-button>
      <el-button type="primary" @click.stop="confirmSave">保存</el-button>
    </div> -->

    <!-- 上传后弹窗 -->
    <!--  <el-dialog
      title="提示"
      :visible.sync="uploadedVisible"
      width="30%"
      :before-close="handleClose">
      <p></p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadedVisible = false">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
/* eslint-disable */
import navCrumb from '@/components/nav/nav.vue';
import uploadExcelComponent from '@/components/uploadExcel/index.vue';
import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
  name: 'manualTagEdit',
  data() {
    return {
      // 编辑标签的时候,获取标签的 id
      currentTagId: '',
      tagEditFlag: true, // 默认标签编辑状态
      // 表单
      ruleForm: {
        tagId: '',
        tagName: '',
        tagTwoLevelGroupId: '',
        tagLevelGroupId: '',
        tagDescribe: ''
      },
      rules: {
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
        tagLevelGroupId: [{ required: true, message: '请选择所属分类', trigger: 'blur' }]
      },
      optionsTwo: [
        // {
        //   value: '1',
        //   label: '二级分类'
        // }
      ],
      optionsThree: [
        // {
        //   value: '1',
        //   label: '未分类'
        // }
      ],
      inputNumObj: {
        tagName: 0,
        tagDescribe: 0,
        addInputValue: 0
      },
      // 输入值
      addInputValue: '',
      // 表格
      limitLength: 10,
      excelExistIndex: null, // 当前上传 excel 的表格索引
      currentExcelName: null, // 当前上传 excel 的表格名字
      currentExcelData: [], // 当前上传 excel 内容的数据
      currentExcelHeader: [], // 当前上传 excel 标题的数据
      tagValTableData: [
        // {
        //   tagItemId: 1,
        //   tagItemName: '标签值1',
        //   inputValue: '', // 编辑输入框的值
        //   editAble: false, // 是否在编辑
        //   optType: true, // 是否选择清空已有标签
        //   status: 0, // 记录上传的状态
        //   popVisible: false
        // },
      ],
      // 上传后
      uploadedVisible: false,
      // 下载
      autoWidth: true, // 下载 excel 参数
      bookType: 'xlsx' // 下载 excel 参数
    };
  },
  computed: {
    // 面包屑参数
    navpath() {
      let that = this;
      return [
        {
          name: '首页',
          path: `${window.origin}/report/#/memberSummary`,
          relocation: true
        },
        {
          name: '会员管理',
          path: ''
        },
        {
          name: '会员标签',
          path: ''
        },
        {
          name: '手工标签列表',
          path: '/manualTagList'
        },
        {
          name: that.$route.query.tagId ? '手工标签编辑' : '新增手工标签',
          path: ''
        }
      ];
    }
  },
  methods: {
    /**
     * 清空已有标签危险提示
     */
    /*eslint-disable*/
    checkTip(obj) {
      let that = this;
      if (obj.optType) {
        that.$confirm('勾选此选项则清空之前有此标签会员身上的标签，以本次导入会员为准；否则本次导入和之前已有数据去重添加。请慎重选择！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {})
        .catch(() => {
          obj.optType = false;
        });
      }
    },

    /**
     * 点击取消
     */
    cancelSave() {
      const that = this;
      that.tagEditFlag = false;
      if (!that.ruleForm.tagId) {
        that.$router.push('/manualTagList');
      }
    },

    /**
     * 点击编辑标签
     */
    changeEditFlag() {
      const that = this;
      that.tagEditFlag = true;
    },

    /**
     * 点击保存
     */
    confirmSave(formName) {
      const that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          that.saveApi();
        }
      })

    },

    /**
     * 点击保存---api
     */
    saveApi() {
      const that = this;
      const para = {
        tagId: that.ruleForm.tagId,
        tagName: that.ruleForm.tagName,
        tagDescribe: that.ruleForm.tagDescribe,
        tagLevelGroupId: that.ruleForm.tagLevelGroupId
      }

      getRequest('/memberTag/saveHandMemberTag',para)
        .then((res) => {
          var resData = res.data
          if (resData.errorCode == 1) {
            showMsg.showmsg('保存成功','success');
            // 保存后修改标签编辑状态,
            that.tagEditFlag = false;
            // 如果新增需要获取 tagId
            that.ruleForm.tagId = resData.result;
            // window.location.href= `${window.location.origin}/member-tag/#/manualTagEdit?tagId=${resData.result}`
            that.$router.push(`/manualTagEdit?tagId=${resData.result}`);
            // 获取标签值列表
            that.getValueData();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    },

    /**
     * 点击输入框
     */
    focus(name,num) {
      const that = this;
      console.log(name,num);
      that.inputFlag = name;
      that.inputFlagNum = num;
    },

    /**
     * 输入
     */
    toInput: function(value,flag) {
      const that = this;
      let temp = '';
      if (that.inputFlag == 'tagDescribe') {
        temp = strLength.getCharVal(value.target.value,that.inputFlagNum);
        that.ruleForm[that.inputFlag] = temp.trim();
        that.inputNumObj[that.inputFlag] = strLength.getByteLen(that.ruleForm[that.inputFlag]);
        return false;
      }
      temp = strLength.getByteVal(value.target.value,that.inputFlagNum);
      if (!!flag) {
        that.addInputValue = temp.trim();
        that.inputNumObj[that.inputFlag] = strLength.getZhLen(that.addInputValue);
        return false;
      }
      that.ruleForm[that.inputFlag] = temp.trim();
      that.inputNumObj[that.inputFlag] = strLength.getZhLen(that.ruleForm[that.inputFlag]);
    },

    /**
     * 添加标签值
     */
    addInputVal: function(value) {
      const that = this;
      if (!that.addInputValue.trim()) {
        that.$message.error({
          duration: 1000,
          message: "请输入标签值"
        })
        return false;
      }
      let tagsMap = null;
      if (!!that.tagValTableData.length) {
        tagsMap = that.tagValTableData.map(item=>item.name);
      }
      if (!!tagsMap&&tagsMap.indexOf(that.addInputValue) !== -1) {
        that.$message.error({
          duration: 1000,
          message: "标签值已存在"
        })
        return false;
      }
      that.addTagItem('',that.addInputValue);
      that.addInputValue = "";
    },

    /**
     * 添加标签值 --- api
     */
    addTagItem(tagItemId,tagItemName,item) {
      const that = this;
      const para = {
        tagItemId: tagItemId,
        tagItemName: tagItemName,
        tagId: that.ruleForm.tagId
      }

      getRequest('/memberTag/saveHandTagItem',para)
        .then((res) => {
          // console.log(res,res.data,res.data.errorCode)
          var resData = res.data;
          if (resData.errorCode == 1) {
            if (!!tagItemId) {
              showMsg.showmsg('保存成功','success');
              item.editAble = false;
            }else {
              showMsg.showmsg('添加成功','success');
            }
            // 获取标签列表
            that.getValueData()
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    },

    /**
     * 判断添加重复字段
     */
    isRepeat(arr) {
      let hash = {};
      for(var i in arr) {
        if(hash[arr[i]]){
          return true;
        }
        hash[arr[i]] = true;
      }
      return false;
    },

    /**
     * 编辑值
     */
    toEditTag(index,item) {
      const that = this;
      console.log(index,item);
      item.editAble = true;
      item.inputValue = item.tagItemName;
    },

    /**
     * 取消
     */
    cancelDelTag(index,item) {
      const that = this;
      item.popVisible = false;
    },

    /**
     * 确认删除标签弹窗
     */
    confirmDel(index, item) {
      let that = this;
      that.$confirm('删除标签后，符合该标签值的会员对应标签值将同步删除。一旦删除将无法恢复，确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
        )
        .then(() => {
        that.toDelTag(index,item);
      });
    },
    /**
     * 删除值
     */
    toDelTag(index,item) {
      const that = this;
      that.delTagApi(index,item);
    },

    /**
     * 删除值---api
     */
    delTagApi(index,item) {
      const that = this;
      const para = {
        tagItemId: item.tagItemId
      }
      getRequest('/memberTag/delHandTagItem',para)
        .then((res) => {
          let resData = res.data
          if (resData.errorCode == 1) {
            item.status = 4; // 删除中
            return;
          }
          errMsg.errorMsg(resData)
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    },

    /**
     * 获取标签值列表---api
     */
    getValueData() {
      const that = this;
      const para = {
        tagId: that.ruleForm.tagId
      }
      getRequest('/memberTag/queryHandTagItem',para)
        .then((res) => {
          let resData = res.data
          if (resData.errorCode == 1) {
            resData.result.forEach(function(ele,index){
              ele.inputValue = ''; // 编辑输入框的值
              ele.editAble = false; // 是否在编辑
              ele.optType = false; // 是否选择清空已有标签
              ele.popVisible = false; // 是否显示 popover
            })
            that.tagValTableData = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    },

    /**
     * 确认编辑标签值
     */
    confirmEdit(index,item) {
      const that = this;
      if (!item.inputValue.trim()) {
        that.$message.error({
          duration: 1000,
          message: "请输入分类名称"
        })
        return false;
      }
      let newtagValTableData = JSON.parse(JSON.stringify(that.tagValTableData));
      newtagValTableData[index].tagItemName = item.inputValue;

      let arrKeys = newtagValTableData.map(item=>item.tagItemName); // 返回对象中键值集合的数组
      if (that.isRepeat(arrKeys)) {
        that.$message.error({
          duration: 1000,
          message: "标签值不能重复"
        })
        return;
      }
      that.addTagItem(item.tagItemId,item.inputValue,item);
    },

    /**
     * 取消编辑值
     */
    cancleEdit(index,item) {
      const that = this;
      item.editAble = false;
    },

    /**
     * 输入编辑的值
     */
    toEditInput: function(value,index,row) {
      const that = this;
      let editTemp = '';
      editTemp = strLength.getByteVal(value.target.value,that.limitLength);
      row.inputValue = editTemp.trim();
    },

    /**
     * 上传后子组件触发的方法-返回 excel 数据
     */
    selectedFile(data) {
      this.currentExcelData = data.results;
      this.currentExcelHeader = data.header;
      this.currentExcelName = data.name;
    },

    /**
     * 上传后子组件触发的方法-返回当前索引
     */
    setSelectIndex(index) {
      this.excelExistIndex = index;
    },

    /**
     * 上传后子组件触发的方法-清空数据
     */
    clearOldData(index) {
      const that = this;
      that.currentExcelData = [];
      that.currentExcelHeader = [];
      that.excelExistIndex = null;
    },

    /**
     * 删除当前 excel 数据,重置索引
     */
    delCurrentExcelData(index,row){
      const that = this;
      that.currentExcelData = [];
      that.currentExcelHeader = [];
      that.excelExistIndex = null;
    },

    /**
     * 导入数据到 后台--- api
     */
    tagItemImport(index,row) {
      const that = this;
      const para = {
        tagItemId: row.tagItemId,
        data: JSON.stringify(that.currentExcelData)
      }
      that.currentExcelData = [];
      postRequest('/memberTag/uploadHandTagItemImport',para)
        .then((res) => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('操作成功','success')
            that.handTagItemImport(row);
            return;
          }
          errMsg.errorMsg(resData)
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    },

    /**
     * 后台处理导入数据--- api
     */
    handTagItemImport(row) {
      const that = this;
      const para = {
        tagItemId: row.tagItemId,
        optType: row.optType == true? 1 : 0, // 0: 不删除, 1: 删除
      }

      getRequest('/memberTag/dealHandTagItemImport',para)
        .then((res) => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('上传中','success');
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    },

    /**
     * 点击上传按钮
     */
    toUploadFile: _debounce(function(index,row){
      const that = this;
      row.status = 2; // 上传中
      that.tagItemImport(index,row);
      that.excelExistIndex = null
    },500),

    /**
     * 导出 excel
     */
    handleDownload() {
      const that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = ['mobile','cardNum'];
        const filterVal = ['mobile','cardNum'];
        const list = [
          {
            cardNum: "jhdm2018071315",
            mobile: "17098078224"
          },
          {
            cardNum: "jhdm20180608000000003",
            mobile: "13100000055"
          }
        ];
        if (!list.length) {
          that.$message.error({
            duration: 1000,
            message: "数据为空"
          })
          return false;
        }
        const data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '导入 excel 模板');
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

    /**
     * 获取二级分类列表
     */
    getSecondLevel() {
      const that = this;
      const para = {};
      getRequest('/tagLevel/handSecondLevel',para)
        .then((res) => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.optionsTwo = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    },

    /**
     * 点击二级分类获取三级分类列表
     */
    changeTwo(e) {
      const that = this;
      that.ruleForm.tagLevelGroupId = '';
      that.getThirdLevel(e);
    },

    /**
     * 获取三级分类列表---api
     */
    getThirdLevel(twoId) {
      const that = this;
      const para = {
        tagLevelGroupId: twoId
      }
      getRequest('/tagLevel/handThirdLevel',para)
        .then((res) => {
          let resData = res.data
          if (resData.errorCode == 1) {
            that.optionsThree = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    },

    /**
     * 编辑时---获取当前标签数据---api
     */
    getTagData(tagId) {
      const that = this
      const para = {
        tagId: tagId
      }
      getRequest('/memberTag/getTagById',para)
        .then((res) => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.ruleForm.tagId = resData.result.tagId;
            that.ruleForm.tagName = resData.result.tagName;
            that.ruleForm.tagLevelGroupId = resData.result.tagLevelGroupId;
            that.ruleForm.tagTwoLevelGroupId = resData.result.tagTwoLevelGroupId;
            that.ruleForm.tagDescribe = resData.result.tagDescribe;
            // 字数控制显示
            if (!!that.ruleForm.tagName) {
              that.inputNumObj.tagName = strLength.getZhLen(that.ruleForm.tagName);
            }
            if (that.ruleForm.tagDescribe) {
              that.inputNumObj.tagDescribe = strLength.getByteLen(that.ruleForm.tagDescribe);
            }
            // 根据已选二级 id 获取三级列表
            that.getThirdLevel(resData.result.tagTwoLevelGroupId);
            // 获取标签值列表
            that.getValueData();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function (error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          })
        });
    }
  },
  mounted() {
    const that = this;
    // 获取二级列表
    that.getSecondLevel();
    // 如果是编辑,获取 tagId
    if (!!that.$route.query.tagId) {
      that.currentTagId = that.$route.query.tagId;
      that.ruleForm.tagId = that.$route.query.tagId;
      that.getTagData(that.currentTagId)
      that.tagEditFlag = false
    }
  },
  components: {
    navCrumb,
    uploadExcelComponent
  }
}
</script>
<style lang="scss">
.manualTagEdit-wrap__title {
  width: 100%;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 24px;
  .el-icon-edit {
    cursor: pointer;
    margin-left: 8px;
    &:hover {
      color: #1890ff;
    }
  }
}

.manualTagEdit-wrap__add {
  overflow: hidden;
}

.icon-xinxixianshi {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: #909399;
  cursor: pointer;
  line-height: 1px;
}

.w-447 {
  width: 447px;
}

.w-560 {
  width: 560px;
}

.manualTagEdit-wrap__form {
  width: 700px;

  .el-form {
    position: relative;

    .full-div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }
}

.manualTagEdit-wrap__table {
  .el-table::before {
    height: 0;
  }
  .no-right-border {
    border-right: none;
  }
  .cell-border {
    padding-right: 20px;
    .cell {
      border-right: 1px solid #ebeef5;
    }
  }
}

.manualTagEdit-wrap__set {
  padding-top: 24px;
  border-top: 1px solid #dcdfe6;
}

.manualTagEdit-wrap__set {
  .manualTagEdit-wrap__input {
    position: relative;
    width: 270px;
  }

  .excel-upload-content {
    .icon-CSV {
      padding-top: 13px;
      font-size: 40px;
      color: #7bc788;
    }

    .flex-1 {
      font-size: 14px;
    }

    .border-l-dcdfe6 {
      border-left: 1px solid #dcdfe6;
    }

    .color-1890ff {
      color: #1890ff;
    }

    .excel-upload__del {
      cursor: pointer;
    }
  }
}

.manualTagEdit-wrap__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  line-height: 56px;
  background: #fff;
  z-index: 2;
  text-align: center;
}
</style>
