<!--
 查看失败日志
  <fail-log  @closeHelp="closeHelp"></fail-log>
  import failLog from '@/components/company/fail-log.vue';
 -->
<template>
  <el-dialog title="查看失败日志" :visible.sync="dialogVisible" width="995px" :before-close="handleClose">
    <div class="overstore-tip">
      <div role="alert" class="el-alert el-alert--info flex flex-align-start">
        <i class="el-alert__icon el-icon-info font-12 color-2f54eb"></i>
        <div class="el-alert__content">
          <span class="el-alert__title color-606266 font-14">失败可能：分组创建失败或门店及成员创建失败<br />
            通讯录同步分为两步串联创建：<br />
            第一步同步分组，若出现分组创建失败，则分组及下面的门店及成员均会创建失败<br />
            第二步同步门店及成员，若分组创建成功，会同步门店及成员，若门店创建失败，则门店下成员也会创建失败</span>
        </div>
      </div>
    </div>
    <div class="m-t-20">
      <el-table class="select-table" ref="multipleTable" height="450" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
        <el-table-column label="分组/门店名称" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.dataName }}</template>
        </el-table-column>
        <el-table-column prop="" label="分组/门店code" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.dataCode }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="所属分组" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.chainName }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="数据类型" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.dataType == 0 ? '分组' : scope.row.dataType == 1 ? '门店' : '成员' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="同步状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :class="['span-dot', scope.row.statusFlag == 2 ? 'bg-33af4a ' : 'bg-f5222d']"></span><span class="font-14 color-606266">{{ scope.row.statusFlag == 3 ? '同步失败' : scope.row.statusFlag == 1 ? '同步处理中' : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="失败原因" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.reason | '--' }}</template>
        </el-table-column>
      </el-table>
      <div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
        <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import fetch from '@/api/contact.js';
const { getSyncFailDetail } = fetch;
// import { _debounce } from '@/common/js/public';
export default {
  name: 'FailLog',
  props: {
    taskId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      dialogVisible: true,
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableData: []
    };
  },

  mounted() {
    const that = this;
    if (that.taskId) {
      that.getTableList();
    }

    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  methods: {
    /**
     * @description: 关闭弹窗
     * @author: 无尘
     */
    handleClose() {
      const that = this;
      that.tableData = [];
      that.$emit('closeLog');
    },
    /**
     * @description: 路由跳转
     * @param {String} path
     * @author: 无尘
     */
    changeRoute(path) {
      this.$router.push(path);
    },

    /**
     * @description: 分页---页码变化
     * @param {Number} val
     * @author: 无尘
     */
    handleSizeChange(val) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * @description: 分页---当前页变化
     * @param {Number} val
     * @author: 无尘
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getTableList();
    },
    /**
     * @description: 获取列表数据
     * @author: 无尘
     */
    getTableList() {
      const that = this;
      let para = {
        keyWord: that.searchInput || '', // 搜索字段
        taskId: that.taskId,
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      getSyncFailDetail(para)
        .then(res => {
          that.tableData = res.result.result || [];
          that.total = res.result.totalCount;
        })
        .catch(function(error) {

        });
    }
  },
  watch: {
    taskId(newData, oldData) {
      const that = this;
      if (newData) {
        that.getTableList();
      }
    }
  }
};
</script>
<style type="text/less" lang="less" scoped>
.span-dot {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 3px;
  &.bg-33af4a  {
    background: #33af4a ;
  }
  &.bg-f5222d {
    background: #f5222d;
  }
}
.bg-82C5FF {
  background: #82c5ff;
}
.color-508CEE {
  color: #508cee;
}
.color-FF585C {
  color: #ff585c;
}
.line-h-18 {
  line-height: 18px;
}
.tooltip-text {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}
.w-293 {
  width: 293px;
}
.w-191 {
  width: 191px;
}
.el-alert--info {
  background: rgba(240, 245, 255, 1);
  border-radius: 2px;
  border: 1px solid rgba(133, 165, 255, 1);
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  .el-alert__icon {
    font-size: 12px;
    padding-top: 3px;
  }
}
.my-customer-wrap {
  height: 100%;
}
.right-content {
  /*width: 100%;*/
  padding: 0 20px 20px 20px;
  min-height: calc(100% - 160px);
  .right-box {
    background: #fff;
    min-height: 500px;
    padding: 0px;
    .apps-content {
      .apps-content-right {
        width: 100%;
        padding: 20px;
        background: #fff;
        .overstore-body {
          background: #fff;
        }
        .daily-set-wrap {
          height: 100%;
          background: #fff;
        }
        .app-detail-wrap {
          height: 100%;
          background: #fff;
        }
        .common-set-wrap {
          height: 100%;
          background: #fff;
        }
      }
    }
  }
}
</style>
