<!--
    会员分组-我的标签列表和暂存架
    <add-tag-view @selectMytag="selectMytag" @selectTempTag="selectTempTag"></add-tag-view>
    import addTagView from '@/components/addTagView.vue';
 -->
<template>
  <div class="addTag-tab" v-if="addTagShow">
    <div class="addTag-tab-wrap">
      <el-tabs v-model="addTagTabActive" @tab-click="addTagTabClick">
        <el-tab-pane label="我的标签列表" name="first">
          <!-- 我的标签列表 -->
          <tag-category-small :tagLibName="tagLibName"></tag-category-small>
          <div class="common-wrap__table">
            <el-table
              ref="multipleTable"
              :data="myTagTableData"
              tooltip-effect="dark"
              style="width: 100%"
              height="425"
              @selection-change="handleSelectChange">
              class="myTagTab-table"
              <el-table-column
                label="标签名称"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="myTagTab-name color-blue" @click="showTagShort(scope.row)">
                    {{ scope.row.name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="tagDescribe"
                label="标签描述"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                label="是否实时"
                class="over-hide">
                <template slot-scope="scope">
                  <div class="tag-select-flag">{{ scope.row.isRealTime == 1? '实时':'非实时' }}</div>
                  <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
                </template>
              </el-table-column>

            </el-table>
          </div>
          <div class="block common-wrap__page text-right" v-if="myTagTableData.length!=0">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="暂存架" name="second">
          <!-- 暂存架 -->
          <el-table
            ref="multipleTable"
            :data="temporaryData"
            tooltip-effect="dark"
            height="510"
            style="width: 100%"
            @selection-change="handleSelectChange">
            <el-table-column
              type="selection"
              >
            </el-table-column>
            <el-table-column
              label="标签名称"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="myTagTab-name color-blue">{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="tagValue"
              label="已选标签值"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="是否实时"
              >
              <template slot-scope="scope">
                {{scope.row.isRealTime == 1? '实时':'非实时'}}
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import tagCategorySmall from '@/components/tagCategorySmall.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: "addTagView",
    props: {
      tagLibName: {
        type: String
      },
      addTagShow: Boolean
    },
    data() {
      return {
        // 我的标签列表和暂存架
        addTagTabActive: 'first',

        // 我的标签列表数据
        myTagTableData:[
          {
            id: 1,
            name: "123",
            tagDescribe: '描述描述，最多200字，一行显示50字，默认显示一行',
            isRealTime: 1
          },
          {
            id: 1,
            name: "123",
            tagDescribe: '描述描述，最多200字，一行显示50字，默认显示一行',
            isRealTime: 1
          },

        ],
        // 分页参数
        currentPage: 1,
        pageSize: 6,
        total: 12,

        // 暂存架
        temporaryData: [
          {
            id: 1,
            name: "123",
            tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
            isRealTime: 1
          },
          {
            id: 1,
            name: "123",
            tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
            isRealTime: 1
          },

        ]
      }
    },
    methods: {
      /**
       * tab-click
       */
      addTagTabClick(tab, event) {
        console.log(tab, event);
      },

      /**
       * 我的标签列表
       */


      /**
       * 分页---页码变化
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      /**
       * 分页---当前页变化
       */
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      /**
       * 获取当前分类下下的标签
       */
      getTagList(val) {
        var that = this

      },

      /**
       * 点击标签名,收起暂存架,显示标签详情缩略版
       */
      showTagShort() {
        const that = this
        that.toggleTagListFlag = false;
        that.$emit('showShortDetail')
      },

      /**
       **************************************
       **************************************
       */

       /**
       * 暂存架
       */
      /**
       * 表格---多选
       */
      handleSelectChange(val) {
        var that = this
        console.log(val);
      },

    },
    mounted() {

    },
    components: {
      tagCategorySmall
    }
  }
</script>
<style lang="scss" scoped>
  .addTag-tab {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 656px;
    height: 671px;
    padding: 15px;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0px 2px 10px 1px rgba(220,220,220,0.50);

    .addTag-tab-wrap {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }

  .myTagTab-name {
    cursor: pointer;
  }

  .el-upload-list__item-status-label {
    display: block;
    position: absolute;
    right: -17px;
    top: -7px;
    width: 46px;
    height: 26px;
    background: #1890ff;
    text-align: center;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 1px 1px #ccc;

    i {
      font-size: 12px;
      color: #fff;
      margin-top: 12px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }
</style>
