<template>
  <div class="common-wrap syncTag">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content" v-loading="loading">
      <div class="right-box">
        <div class="title">
          <el-input class="w220" @change="onSearch" 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="levelName"></el-table-column>
            <el-table-column label="标签分组" prop="">
              <template slot-scope="{ row }"> {{ row.parentLevelGroupId ? groupName(row.parentLevelGroupId) : "--" }} </template>
            </el-table-column>
            <el-table-column label="添加时间" prop="flagUpdateTime">
              <template slot-scope="{ row }">{{ row.flagUpdateTime ? dateformat(new Date(row.flagUpdateTime), 'yyyy-MM-dd hh:mm:ss') : '--' }}</template>
            </el-table-column>
            <el-table-column label="操作" v-if="false">
              <template slot-scope="{ row }"><el-button type="text" @click="cancelSync(row)">取消同步</el-button></template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="text-align: right;padding: 28px 0"
            background
            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" v-loading="dialogData.loading">
          <el-input class="w220 mb20" prefix-icon="el-icon-search" @change="onDialogSearch" v-model="dialogData.searchTagVal" placeholder="请输入标签分类名称" />
          <el-table :data="dialogData.tagTableData">
            <el-table-column label="序号" prop="index"></el-table-column>
            <el-table-column label="标签分类" prop="levelName"></el-table-column>
            <el-table-column label="标签分组" prop="">
              <template slot-scope="{ row }"> {{ row.parentLevelGroupId ? groupName(row.parentLevelGroupId) : "--" }} </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button type="text" @click="addSyncTag(row)">添加</el-button>
              </template>
            </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';
import { getSyncTag, updateSyncTag } from '@/request/api';
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: '',
      loading: false,
      dateformat,
      // -----------------dialogData---------------------
      dialogData: {
        dialogVisible: false,
        tagTableData: [],
        total: 0,
        currentPage: 1,
        searchTagVal: '',
        loading: false
      }
    };
  },
  components: {
    navCrumb
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // ----------------------Page-----------------------
    cancelSync(row) {
      this.$confirm('取消同步后，该分类下的标签将不会再同步至微盟，并且该分类下已同步至微盟侧的会员标签将同步从微盟侧删除，是否继续取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(_ => {
          const para = {
            tagLevelGroupId: row.tagLevelGroupId,
            syncWmFlag: 0
          };
          updateSyncTag(para).then(res => {
            this.$message.success('取消同步成功');
            if(this.tableData.length == 1) {
              this.currentPage = this.currentPage - 1 || 1;
            };
            this.getTableData();
          })
        }).catch(_ => {});
    },
    getTableData() {
      this.loading = true;
      const para = {
        search: this.searchVal,
        syncWmFlag: 1,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      getSyncTag(para).then(res => {
        const resData = res.result;
        this.tableData = resData.result || [];
        this.total = resData.totalCount;
      }).finally(() => this.loading = false);
    },
    onCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    onSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getTableData();
    },
    onSearch() {
      this.currentPage = 1;
      this.getTableData();
    },
    // ----------------------dialog---------------------
    // 获取dialog表格数据
    getDiaglogTableData() {
      this.dialogData.loading = true;
      const para = {
        search: this.dialogData.searchTagVal,
        syncWmFlag: 0,
        pageSize: 5,
        pageNum: this.dialogData.currentPage
      };
      getSyncTag(para).then(res => {
        const resData = res.result;
        const listData = resData.result || [];
        this.dialogData.tagTableData = listData.map((el, index) => {
          el.index = this.sortIndex(index + 1);
          return el;
        });
        this.dialogData.total = resData.totalCount;
      }).finally(() => this.dialogData.loading = false);
    },
    onDialogPageChange(val) {
      this.dialogData.currentPage = val;
      this.getDiaglogTableData();
    },
    addSyncTag(row) {
      const para = {
        tagLevelGroupId: row.tagLevelGroupId,
        syncWmFlag: 1
      };
      updateSyncTag(para).then(res => {
        this.$message.success('同步成功');
        if(this.dialogData.tagTableData.length == 1) {
          this.dialogData.currentPage = this.dialogData.currentPage - 1 || 1;
        };
        this.getDiaglogTableData();
      })
    },
    onDialogSearch() {
      this.dialogData.currentPage = 1;
      this.getDiaglogTableData();
    }
  },
  computed: {
    sortIndex() {
      return index => ((this.dialogData.currentPage - 1) * 5 + index);
    },
    groupName() {
      return id => (id == "3d11ac15963b4c0790762e6147ea9312" ? '导购标签' : id == "a3a4ed179ed3435fab33f5952d021b6d" ? "其他" : "--");
    }
  },
  watch: {
    'dialogData.dialogVisible' (newVal) {
      if(newVal) {
        this.dialogData.searchTagVal = '';
        this.dialogData.currentPage = 1;
        this.getDiaglogTableData();
      } else {
        this.getTableData();
      }
    }
  }
};
</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>
