<template>
  <div class="app-detail-wrap history p-20">
    <div class="top m-b-20">
      <el-alert type="info" show-icon :closable="false">
        <span class="alert-info">
          1. 同步历史指通过GIC修改并同步企微标签库，或者企微标签库修改同步的GIC标签库导致的标签覆盖（GIC标签库覆盖企微标签）<br />
          2. 仅保存近一年同步历史
        </span>
      </el-alert>
    </div>
    <div class="search-group m-b-20">
      <el-input v-model="searchTxt" placeholder="请输入标签组名称" style="width: 316px" prefix-icon="el-icon-search" />
      <el-select v-model="statusType" placeholder="全部状态" style="width: 160px">
        <el-option :value="1">成功</el-option>
        <el-option :value="0">失败</el-option>
      </el-select>
    </div>
    <div class="content">
      <el-table ref="table" :data="tableAllData.data" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="标签组" prop="tagGroup"></el-table-column>
        <el-table-column label="更新时间" prop="updateTime"></el-table-column>
        <el-table-column label="变更项" prop="changeItem"></el-table-column>
        <el-table-column label="变更内容" prop="changeContent"></el-table-column>
        <el-table-column label="涉及更新项" prop="updateItem"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="{ row }">
            <div class="status-class">
              <span :class="[row.status == 0 ? 'status-error' : 'status-success']"></span>
              <span>{{ row.status == 0 ? '失败' : '成功' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="user"></el-table-column>
        <el-table-column label="原因" prop="reason"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="failDialog = true">{{ row.status == 0 && '同步失败明细' }}</el-button>
          </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="tableAllData.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="tableAllData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableAllData.total"> </dm-pagination>
      </div>
    </div>
    <!--弹窗html-->
    <el-dialog :visible.sync="failDialog" title="同步失败明细" width="500px" custom-class="sync-fail">
      <span>温馨提示：仅展示同步失败的会员</span>
      <el-table :data="dialogData.data" class="m-b-20 m-t-20">
        <el-table-column prop="name" label="会员姓名"></el-table-column>
        <el-table-column prop="failReason" label="会员同步失败原因"></el-table-column>
      </el-table>
      <el-pagination small layout="prev, pager, next" style="margin: 0 0 10px 0;text-align:right" :total="dialogData.total" :current-page="dialogData.currentPage" :page-size="5" @current-change="dialogCurrentChange" />
      <el-button type="primary" class="close-btn" @click="failDialog = false">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'sync-history',
  data() {
    return {
      tableAllData: {
        data: [
          {
            tagGroup: '蓝橙子',
            updateTime: '2019-05-20 12:00:00',
            changeItem: '标签组一',
            changeContent: '标签组',
            updateItem: '标签组',
            status: 0,
            user: '赖昌星',
            reason: '好办后台同步'
          }
        ],
        total: 0,
        currentPage: 1,
        pageSize: 20
      },
      dialogData: {
        data: [
          {
            name: '刘晨曦',
            failReason: '会员不存在'
          },
          {
            name: '刘晨曦',
            failReason: '会员不存在'
          },
          {
            name: '刘晨曦',
            failReason: '会员不存在'
          },
          {
            name: '刘晨曦',
            failReason: '会员不存在'
          },
          {
            name: '刘晨曦',
            failReason: '会员不存在'
          },
          {
            name: '刘晨曦',
            failReason: '会员不存在'
          }
        ],
        total: 6,
        currentPage: 1
      },
      searchTxt: '',
      statusType: 0,
      failDialog: false // 同步失败明细弹窗
    };
  },
  methods: {
    // 获取表格数据
    getTalbeList() {
      console.log('1');
    },
    // 处理表格change
    handleSizeChange() {
      console.log('change size');
    },
    handleCurrentChange() {
      console.log('change page');
    },
    // 获取弹窗表格数据
    getDialogTable() {
      console.log('1');
    },
    // 弹窗表格页数改变
    dialogCurrentChange() {
      console.log('1');
    }
  }
};
</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%;
    border-bottom: 1px solid #e4e7ed;
    /deep/ .el-alert__icon {
      font-size: 14px;
      width: auto !important;
      margin-top: -20px;
    }
    .alert-info {
      font-size: 13px;
      font-weight: 400;
      color: #303133;
      line-height: 22px;
    }
  }
  .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>
