<!--
    公共暂存架组件
    <tag-temporary @showShortDetail="showShortDetail"></tag-temporary>
    import tagTemporary from '@/components/tagTemporary.vue';
 -->
<template>
  <div class="common-wrap__fix">
    <div class="common-wrap__fix__div">
      <div class="common-wrap__fix__showSection clearfix">
        <div class="common-wrap__fix__left" @click.stop="toggleTagList"><i class="iconfont icon-17 inline-block"></i><span class="inline-block">已选择<i class="p-lr-4 font-18">{{selectTag.length}}</i>个标签</span></div>
        <el-button type="primary" class="fr" @click.stop="toMemberGroupEdit">新增会员组<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </div>
      <div :class="['common-wrap__fix__hideList',!toggleTagListFlag? 'hide':'']" ><!-- v-if="toggleTagListFlag" -->
        <div class="common-wrap__fix__title">已选标签</div>
        <div class="common-wrap__fix__table">
          <el-table
            ref="multipleTable"
            :data="tagListData"
            tooltip-effect="dark"
            height="333"
            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="pointer" @click="showTagShort(scope.row)">{{ scope.row.tagName }}</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-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" class="" @click="toDelTag(scope.row.id,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: "TagTemporary",
      props: {

      },
      data() {
        return {
          // 暂存架参数
          toggleTagListFlag: false, // 是否显示参数
          selectTag: [],// 已选择标签数据
          tagListData: [
            {
              id: 1,
              tagName: "123",
              tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
              isRealTime: 1
            },
            {
              id: 1,
              tagName: "123",
              tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
              isRealTime: 1
            },
            {
              id: 1,
              tagName: "123",
              tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
              isRealTime: 1
            },
            {
              id: 1,
              tagName: "123",
              tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
              isRealTime: 1
            },
            {
              id: 1,
              tagName: "123",
              tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
              isRealTime: 1
            },
            {
              id: 1,
              tagName: "123",
              tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
              isRealTime: 1
            },
            {
              id: 1,
              tagName: "123",
              tagValue: '描述描述，最多200字，一行显示50字，默认显示一行',
              isRealTime: 1
            }
          ]
        }
      },
      methods: {
        /**
         * 路由跳转
         */
        changeRoute(route) {
          this.$router.push(route);
        },

        /**
         * 显示隐藏暂存架标签列表
         */
        toggleTagList() {
          const that = this
          that.toggleTagListFlag = !!that.toggleTagListFlag? false: true;
        },

        /**
         * 表格---多选
         */
        handleSelectChange(val) {
          const that = this
          console.log(val);
          that.selectTag = val;
        },

        /**
         * 表格---删除
         */
        toDelTag(id,index) {
          const that = this
          console.log(id,index)
          that.tagListData.splice(index,1)
        },

        /**
         * 表格---删除 API
         */
        delTag(id) {
          const that = this
          const para = {

          }

          getRequest('/member-tag-value/delete.json',para)
          .then((res) => {
            // console.log(res,res.data,res.data.errorCode)
            var resData = res.data
            if (resData.errorCode == 1) {
              // showMsg.showmsg('保存成功','success')
              return;
            }

            errMsg.errorMsg(resData)

          })
          .catch(function (error) {
            console.log(error);

            that.$message.error({
              duration: 1000,
              message: error.message
            })
          });
        },

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

        /**
         * 跳转会员分组
         */
        toMemberGroupEdit() {
          const that = this
          that.changeRoute('/memberGroupEdit')
        },

        /**
         * 获取暂存架列表 API
         */
        getTagList() {
          const that = this
          const para = {

          }

          getRequest('/member-tag-value/findList.json',para)
          .then((res) => {
            // console.log(res,res.data,res.data.errorCode)
            var resData = res.data
            if (resData.errorCode == 1) {
              // showMsg.showmsg('保存成功','success')
              return;
            }

            errMsg.errorMsg(resData)

          })
          .catch(function (error) {
            console.log(error);

            that.$message.error({
              duration: 1000,
              message: error.message
            })
          });
        }

      },
      watch:{

      },
      mounted() {
        const that = this
        console.log()
      },
      components: {

      }
    }
</script>
<style lang="scss" scoped>

</style>
