<template>
  <!-- 具体标签 -->
  <div class="tag-some-list">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="标签名称" prop="tagName" min-width="170" fixed>
        <template slot-scope="scope">
          <span class="tag-name">{{ scope.row.tagName }}</span>
          <el-tooltip class="item" effect="dark" content="添加标签" placement="top">
            <i class="iconfont icon-tag-name icon-PlusOutlined" v-if="getCodeAuth" :limit-code="getCode" v-track:common.click="handleTrackParam('addTag', scope.row)" @click="addTag(scope.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="是否实时" prop="isActive" min-width="70">
        <template slot-scope="scope">
          <span :class="['base', scope.row.isActive == 1 ? 'keep-active' : 'no-active']"> {{ scope.row.isActive == 1 ? '实时' : '非实时' }} </span>
        </template>
      </el-table-column>
      <el-table-column label="上级分类名称" min-width="100">
        <template slot-scope="{ row }">
          <span>{{ row.tagLevelGroupName || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标签描述" prop="tagDescribe" min-width="170">
        <template slot-scope="scope">
          <div>{{ scope.row.tagDescribe ? scope.row.tagDescribe : '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="changeMoreUse(row)">{{ row.isMoreUse ? '取消' : '设为常用' }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Emitter from '@/mixins/emitter';
import tagDetails from '@/components/tagDetail/mixin/index';
import { updateMoreUse } from '@/request/api';
export default {
  name: 'tag-container',

  mixins: [tagDetails, Emitter],

  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    refersh: Object
  },

  data() {
    return {
      tableData: [],
      tagData: {}
    };
  },
  methods: {
    addTag(list) {
      this.$emit('addTag', list);
    },
    handleTrackParam(type, data) {
      let fn = {
        addTag: () => {
          return {
            data: { id: data.tagId, name: data.tagName }
          };
        }
      }[type];
      return { fn: () => {}, data: fn ? fn() : {} };
    },
    changeMoreUse(row) {
      const params = { tagId: row.tagId, isMoreUse: row.isMoreUse ? 0 : 1 };
      updateMoreUse(params).then(() => {
        this.$message.success(params.isMoreUse ? '已设为"常用标签"' : '已取消"设为常用标签"');
        row.isMoreUse = row.isMoreUse ? 0 : 1;
      })
    }
  },
  watch: {
    data: {
      immediate: true,
      handler(newval) {
        this.tableData = newval;
      }
    },
    refersh: {
      immediate: true,
      handler(newval) {
        // 刷新
        if (newval.changeRefersh) {
          let index = this.tableData.findIndex(el => newval.tagId === el.tagId);
          this.tableData[index].refersh = true;
        }
      }
    }
  },
  computed: {
    getCodeAuth() {
      let code = 'memberTagCreateGroup';
      return this.$getButtonLimit(this.$buttonCode[code]);
    },
    getCode() {
      let code = 'memberTagCreateGroup';
      return this.$buttonCode[code];
    }
  }
};
</script>

<style lang="scss" scoped>
.tag-some-list {
  margin: 0 20px;
  overflow-y: auto;
}
.tag-name {
  display: inline-block;
  word-break: break-all;
  max-width: 120px;
}
.icon-tag-name {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  cursor: pointer;
  color: #303133;
  transition: all 0.3s;
  color: #2f54eb;
  &:hover {
    transform: scale(1.25);
  }
}
.refresh {
  color: #909399;
  &:hover {
    color: #1890ff;
  }
}
.base {
  font-size: 14px;
}
</style>
