<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate">添加标签</el-button>
    </div>
    <div class="app-container">
        <div style="margin-bottom: 10px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-input style="width: 300px" v-model="listQuery.search" placeholder="请输入您需要搜索的内容"></el-input>
                    <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
            <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
            <el-button size="small" icon="el-icon-delete" @click="openDeleteTags">批量删除</el-button>
        </div>
        <el-table ref="multipleTable"  @selection-change="handleSelectionChange"  :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="tagsData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
            <el-table-column
                align="center"
                type="selection"
                width="55">
             </el-table-column>
            <el-table-column label="标签" align="center">
                <template slot-scope="scope">
                    {{scope.row.tag_name}}
                </template>
            </el-table-column>
            <el-table-column label="会员数" align="center">
                <template slot-scope="scope">
                <span>{{scope.row.member_count}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <el-button size="mini" type="primary" icon="el-icon-edit-outline" @click="openEdit(scope.row, scope.$index)" ></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="openDelete(scope.row, scope.$index)" ></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]"
            :page-size="10"
            background
            style="margin-top:20px;"
            align="right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!--create-tag-form 添加标签-->
        <create-tag-form ref="createTagForm" :tagsData="tagsData" ></create-tag-form>
        <!--edit-tag-form 编辑标签-->
        <edit-tag-form ref="editTagForm" :tagsData="tagsData" :tagIndex="tagIndex" :form="editForm"></edit-tag-form>
    </div>
  </div>
</template>

<script>
  import {GetTags,DeleteTags} from "@/api/member/member";
  import BreadCrumb from '../components/bread-crumb';
  import CreateTagForm from "./components/CreateTagForm";
  import EditTagForm from "./components/EditTagForm";

  export default {
    name: 'memberTagList',
    components:{
      BreadCrumb,
      CreateTagForm,
      EditTagForm,
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '会员管理' },
          { path: false, name: '标签管理' }
        ],
        total:0,
        listQuery:{
            page:1,
            limit:10,
            search:'',
        },
        checkAllStatus:false,
        selectedTags:[],
        tagsData:[],
        tagIndex:-1,
        editForm:{
            id:0,
            tag_name:'',
        },
      }
    },
    methods:{
        openCreate:function(){
          this.$refs.createTagForm.open();
        },
        openEdit:function(row,index){
            this.tagIndex = index;
            this.editForm.id = row.id;
            this.editForm.tag_name = row.tag_name;
            this.$refs.editTagForm.open();
        },
        openDeleteTags:function(){
          if (this.selectedTags.length==0) {
            this.$message.error("请选择要删除的标签");
            return false;
          }

          this.$confirm('确认要删除所选的标签吗？<br>删除后，标签将无法恢复', '删除提示', {
            dangerouslyUseHTMLString:true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var ids = [];
            var idMap = {};
            for (const index in this.selectedTags) {
              ids.push(this.selectedTags[index].id);
              idMap[this.selectedTags[index].id] = this.selectedTags[index].id;
            }
            DeleteTags({ids:ids}).then(response=>{
              var res = response.data;
              if (res.state === 1) {
                var tagsDataLength = this.tagsData.length;
                for (let index = tagsDataLength-1; index >= 0; index--) {
                  if(this.tagsData[index].id in idMap) {
                    this.tagsData.splice(index, 1);
                  }                  
                }
                this.$message.success("删除标签成功");
              }else {
                this.$message.error(res.msg);
              }
            }).catch(e=>{});
          }).catch(() => {
            return false        
          });
        },
        openDelete:function(row,index){
          this.$confirm('确认要删除该标签吗？<br>删除后，该标签将无法恢复', '删除提示', {
            dangerouslyUseHTMLString:true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var ids = [];
            ids.push(row.id);
            DeleteTags({ids:ids}).then(response=>{
              var res = response.data;
              if (res.state === 1) {
                this.tagsData.splice(index, 1);
                this.$message.success("删除标签成功");
              }else {
                this.$message.error(res.msg);
              }
            }).catch(e=>{});
          }).catch(() => {
            return false        
          });
        },
        changeCheck:function(){
          this.$refs.multipleTable.clearSelection();
          if (this.checkAllStatus) {
            this.$refs.multipleTable.toggleAllSelection();
          }
        },
        handleSelectionChange:function (val) {
          this.selectedTags = val;
        },
        handleSizeChange(limit) {
            this.listQuery.limit = limit;
            this.GetTags();
        },
        handleCurrentChange(page) {
            this.listQuery.page = page;
            this.GetTags();
        },
        changeKey(){
            this.GetTags();
        },
        GetTags(){
            GetTags(this.listQuery).then(response=>{
                var res = response.data;
                if(res.state===1) {
                    this.tagsData = res.data.tags;
                    this.total = res.data.total;
                }
            }).catch(e=>{})
        }
    },
    computed:{
        activeTagsData:function(){
        var tags = [];
        
        return tags;
        }
    },
    created(){
        this.GetTags();
    }
  }
</script>

<style scoped>
  /*.app-container .cell.clearfix .time ul li {*/
    /*float: left;*/
    /*list-style: none;*/
    /*cursor: pointer;*/
    /*padding: 6px 20px;*/
    /*color: #606266;*/
    /*border-radius: 4px;*/
    /*margin: 0 8px 0 0;*/
    /*font-size: 14px;*/
    /*text-align: center;*/
  /*}*/
</style>