<template>
  <div class="app-detail-wrap history p-20">
    <div class="top m-b-20">
      <div role="alert" class="el-alert el-alert--info flex flex-align-start ">
        <i class="el-alert__icon el-icon-warning color-2f54eb"></i>
        <div class="el-alert__content">
          <p class="el-alert__title color-303133 font-13">
            1. 同步日志指通过GIC修改并同步企微标签库，或者企微标签库修改同步的GIC标签库导致的标签覆盖（GIC标签库覆盖企微标签）<br />
            2. 仅保存近一年同步日志<br />
            3. 标签同步明细包含同步至企微标签库的明细，同步完成会更新列表中的【更新时间】<br />
            4. 会员同步失败明细包含企微会员标签同步失败的明细
          </p>
        </div>
      </div>
    </div>
    <div class="search-group m-b-20">
      <el-select v-model="taskType" placeholder="全部事件类型" style="width: 160px" @change="reFresh">
        <el-option :value="0" label="开启同步"></el-option>
        <el-option :value="1" label="关闭同步"></el-option>
        <el-option :value="-1" label="全部事件类型"></el-option>
      </el-select>
    </div>
    <div class="sync-history-content">
      <el-table v-loading="loading" ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="事件类型" prop="taskType" min-width="120">
          <template slot-scope="{ row }">{{ row.taskType | taskType }}</template>
        </el-table-column>
        <el-table-column label="更新时间" prop="updateTime" min-width="110">
          <template slot-scope="{ row }">
            <div class="line-18">{{ row.updateTime | timeStampToYmd }}</div>
            <div class="line-18">{{ row.updateTime | timeStampToHms }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="optStaffName" width="150"></el-table-column>
        <el-table-column label="涉及更新项" prop="taskContent" min-width="180"></el-table-column>
        <el-table-column label="状态" prop="statusFlag" width="200">
          <template slot-scope="{ row }">
            <div class="status-class">
              <span :class="['state-point', logStatusClass[row.statusFlag]]">{{ row.statusFlag | taskStatus }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="{ row }">
            <template v-if="row.taskType === 0">
              <el-button type="text" @click="tagLogShow(row)">标签同步明细</el-button>
              <el-button type="text" @click="memberLogShow(row)">会员同步失败明细</el-button>
            </template>
            <p v-else></p>
          </template>
        </el-table-column>
      </el-table>
      <div class="block common-wrap__page text-right m-t-24">
        <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
      </div>
    </div>
    <!--弹窗html-->
    <el-dialog :visible.sync="failDialog" :close-on-click-modal="false" title="同步失败明细" width="500px" custom-class="sync-fail">
      <span>温馨提示：仅展示同步失败的会员</span>
      <el-table :data="memberSyncData" class="m-b-20 m-t-20" v-loading="memberLoading">
        <el-table-column prop="memberName" label="会员姓名"></el-table-column>
        <el-table-column prop="reason" label="会员同步失败原因"></el-table-column>
      </el-table>
      <el-pagination small layout="prev, pager, next" style="margin: 0 0 10px 0;text-align:right" :total="memberSyncTotal" :current-page="memberSyncPageNum" :page-size="5" @current-change="memberSyncCurrentChange" />
      <el-button type="primary" class="close-btn" @click="failDialog = false">关闭</el-button>
    </el-dialog>
    <el-dialog :visible.sync="tagDialog" :close-on-click-modal="false" title="标签同步明细" width="500px" custom-class="sync-fail">
      <el-table :data="tagSyncData" class="m-b-20 m-t-20" v-loading="tagLoading" max-height="304">
        <el-table-column prop="tagName" label="标签组" show-overflow-tooltip></el-table-column>
        <el-table-column
          prop="statusFlag"
          label="同步状态"
          width="100"
          :filters="[
            { text: '预处理', value: 1 },
            { text: '成功', value: 2 },
            { text: '失败', value: 3 }
          ]"
          :filter-method="filterHandler"
        >
          <template slot-scope="{ row }">
            <el-tooltip v-if="row.statusFlag === 3" open-delay="200" :content="row.reason" placement="top">
              <span class="tooltip-icon" style="cursor:default">{{ row.statusFlag | tagStatus }}</span>
            </el-tooltip>
            <span v-else style="cursor:default">{{ row.statusFlag | tagStatus }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination small layout="prev, pager, next" style="margin: 0 0 10px 0;text-align:right" :total="tagSyncTotal" :current-page="tagSyncPageNum" :page-size="5" @current-change="tagSyncCurrentChange" /> -->
      <el-button type="primary" class="close-btn" @click="tagDialog = false">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { syncLog, syncMemberLog, syncTagLog } from '@/api/memberTag';
export default {
  name: 'sync-history',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      tableData: [],
      pageSize: 20,
      pageNum: 1,
      total: 0,
      memberSyncParam: {},
      memberSyncData: [],
      memberSyncTotal: 0,
      memberSyncPageNum: 1,
      tagSyncParam: {},
      tagSyncData: [],
      tagSyncSearch: '',
      wxEnterpriseId: JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId,
      taskType: -1,
      loading: false,
      failDialog: false,
      memberLoading: false,
      tagLoading: false,
      tagDialog: false,
      logStatusClass: { 0: 'state-point-default', 1: 'state-point-loading', 2: 'state-point-loading', 3: 'state-point-success', 4: 'state-point-error', 5: 'state-point-warning' }
    };
  },
  methods: {
    getTalbeList() {
      this.loading = true;
      let params = {
        wxEnterpriseId: this.wxEnterpriseId,
        enterpriseId: this.brandId,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        taskType: this.taskType
      };
      syncLog(params).then(res => {
        this.total = res.data.result.totalCount;
        this.tableData = res.data.result.result;
        this.loading = false;
      });
    },
    reFresh(v) {
      this.pageNum = 1;
      this.getTalbeList();
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.pageNum = 1;
      this.getTalbeList();
    },
    handleCurrentChange(v) {
      this.pageNum = v;
      this.getTalbeList();
    },
    memberLogShow(item) {
      this.memberSyncParam = item;
      this.failDialog = true;
      this.getMemberTable();
    },
    // 获取弹窗表格数据
    getMemberTable() {
      this.memberLoading = true;
      let params = {
        wxEnterpriseId: this.wxEnterpriseId,
        enterpriseId: this.brandId,
        pageSize: 5,
        pageNum: this.memberSyncPageNum,
        taskId: this.memberSyncParam.taskId
      };
      syncMemberLog(params).then(res => {
        this.memberSyncTotal = res.data.result.totalCount;
        this.memberSyncData = res.data.result.result;
        this.memberLoading = false;
      });
    },
    // 弹窗表格页数改变
    memberSyncCurrentChange(v) {
      this.memberSyncPageNum = v;
      this.getMemberTable();
    },
    tagLogShow(item) {
      this.tagSyncParam = item;
      this.tagDialog = true;
      this.getTagTable();
    },
    getTagTable() {
      this.tagLoading = true;
      let params = {
        wxEnterpriseId: this.wxEnterpriseId,
        enterpriseId: this.brandId,
        taskId: this.tagSyncParam.taskId,
        search: this.tagSyncSearch
      };
      syncTagLog(params).then(res => {
        this.tagSyncData = res.data.result;
        this.tagLoading = false;
      });
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  },
  mounted() {
    this.getTalbeList();
    this.$emit('showTab', '15', '151');
  },
  filters: {
    taskType(v) {
      switch (v) {
        case 0:
          return '开启同步';
          break;
        case 1:
          return '关闭同步';
          break;
        default:
          break;
      }
    },
    taskStatus(v) {
      switch (v) {
        case 0:
          return '删除';
          break;
        case 1:
          return '同步标签组到企业微信';
          break;
        case 2:
          return '同步好友标签';
          break;
        case 3:
          return '同步成功';
          break;
        case 4:
          return '同步失败';
          break;
        case 5:
          return '部分同步成功';
          break;
        default:
          break;
      }
    },
    tagStatus(v) {
      //  0删除 1预处理 2成功 3失败
      switch (v) {
        case 0:
          return '删除 ';
          break;
        case 1:
          return '预处理';
          break;
        case 2:
          return '成功';
          break;
        case 3:
          return '失败';
          break;
        default:
          break;
      }
    }
  },
  watch: {
    // 仅第一次赋值brandId调用
    brandId: function(newData) {
      this.getTalbeList();
    }
  }
};
</script>

<style scoped lang="less">
span,
/deep/ .el-button span {
  font-family: PingFangSC-Regular, PingFang SC;
}
// 弹窗css
/deep/ .sync-fail {
  .el-dialog__header {
    padding: 16px 20px 0 20px;
    .el-dialog__title {
      font-family: PingFangSC-Regular, PingFang SC;
      color: #37383a;
      line-height: 25px;
    }
  }
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    .close-btn {
      align-self: flex-end;
    }
  }
}
// main css
.history {
  box-sizing: border-box;
  padding-bottom: 14px;
  .top {
    width: 75%;
    .el-alert--info {
      align-items: flex-start;
      width: 815px;
      padding: 5px 16px 5px 17px;
      margin-right: 17px;
      font-size: 13px;
      background: #f0f5ff;
      border-radius: 2px;
      border: 1px solid #85a5ff;
      -webkit-box-align: flex-start;
      -webkit-align-items: flex-start;
      -ms-flex-align: flex-start;
      .el-alert__content {
        padding-left: 0;
        .el-alert__title {
          line-height: 22px;
        }
      }
      .el-alert__icon {
        margin-top: 5px;
        margin-right: 9px;
        font-size: 12px;
        color: #2f54eb;
      }
    }
  }
  .content {
    .status-class {
      display: flex;
      align-items: center;
      .status-success,
      .status-error {
        width: 6px;
        height: 6px;
        background: #33af4a;
        border-radius: 50%;
        margin-right: 7px;
      }
      .status-error {
        background: #f5222d;
      }
    }
  }
}
</style>
