<template>
  <div class="common-wrap syncTag">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <div class="title">
          <el-input class="w220" v-model="searchVal" placeholder="请输入标签分类名称" prefix-icon="el-icon-search" />
          <el-button type="primary" class="add-btn" @click="dialogData.dialogVisible = true">添加标签分类</el-button>
          <span>添加标签分类后，分类下面所有会员标签均会同步至微盟</span>
        </div>
        <div class="sync-content">
          <el-table :data="tableData">
            <el-table-column label="标签分类" prop=""></el-table-column>
            <el-table-column label="标签分组" prop=""></el-table-column>
            <el-table-column label="添加时间" prop=""></el-table-column>
            <el-table-column label="操作">
              <template><el-button type="text" @click="cancelSync">取消同步</el-button></template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="text-align: right;padding: 28px 0"
            hide-on-single-page
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 40, 60, 80]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogData.dialogVisible" width="1000px">
       <template slot="title">
         <p class="el-dialog__title">添加分类标签<span class="tip">仅查询未同步的标签</span></p>
       </template>
        <div class="dialog_contetn">
          <el-input class="w220 mb20" prefix-icon="el-icon-search" v-model="dialogData.searchTagVal" placeholder="请输入标签分类名称"></el-input>
          <el-table :data="dialogData.tagTableData">
            <el-table-column label="序号" prop=""></el-table-column>
            <el-table-column label="标签分类" prop=""></el-table-column>
            <el-table-column label="标签分组" prop=""></el-table-column>
            <el-table-column label="操作">
              <el-button type="text">添加</el-button>
            </el-table-column>
          </el-table>
          <el-pagination
            hide-on-single-page
            style="text-align: right;margin: 28px 0 8px"
            layout="prev, pager, next"
            :current-page="dialogData.currentPage"
            :page-size="5"
            @current-change="onDialogPageChange"
            :total="dialogData.total">
          </el-pagination>
        </div>
       <template slot="footer">
         <el-button type="primary" @click="dialogData.dialogVisible = false">关闭</el-button>
       </template>
    </el-dialog>
  </div>
</template>

<script>
import navCrumb from '@/components/nav/nav.vue';
import { dateformat } from '@/utils/formatTime';
export default {
  name: 'syncTagHistory',
  data() {
    return {
      navpath: [
        {
          name: '首页',
          path: `${window.location.origin}/report/#/memberSummary`,
          relocation: true
        },
        {
          name: '会员管理',
          path: ''
        },
        {
          name: '会员标签',
          path: `/member-tag`
        },
        {
          name: '同步标签',
          path: ''
        }
      ],
      // -----------------pageData---------------------
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      searchVal: '',
      dateformat,
      // -----------------dialogData---------------------
      dialogData: {
        dialogVisible: false,
        tagTableData: [],
        total: 0,
        currentPage: 1,
        searchTagVal: ''
      }
    };
  },
  components: {
    navCrumb
  },
  methods: {
    // ----------------------Page-----------------------
    cancelSync() {
      this.$confirm('取消同步后，该分类下的标签将不会再同步至微盟，并且该分类下已同步至微盟侧的会员标签将同步从微盟侧删除，是否继续取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(_ => {
          this.$message.success('取消成功');
        }).catch(_ => {});
    },
    getTableData() {
      console.log('111');
    },
    onCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    onSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getTableData();
    },
    // ----------------------dialog---------------------
    // 获取dialog表格数据
    getDiaglogTableData() {
      // this.dialogData
    },
    onDialogPageChange(val) {
      this.currentPage = val;
      this.getDiaglogTableData();
    }
  },
  watch: {
    'dialogData.dialogVisible' (newVal) {
      if(newVal) {
        this.dialogData.searchTagVal = '';
        this.getDiaglogData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.syncTag {
  .w220 {
    width: 220px;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  span {
    font-size: 14px;
  }
  .right-box {
    padding: 0 !important;
  }
  .title {
    padding: 22px 24px 18px;
    border-bottom: 2px solid #edeff2;
    .add-btn {
      margin: 0 6px;
    }
  }
  .sync-content {
    padding: 24px;
  }
  .tip {
    color: #909399;
    margin-left: 10px;
  }
}
</style>
