<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-30 11:36:55
 -->
<template>
  <div class="my-customer-wrap common-set-wrap">
    <nav-crumb :navpath="navpath"> </nav-crumb>
    <div class="right-content">
      <div class="right-box" style="min-height: calc(100vh - 126px)">
        <div class="apps-content flex" style="min-height: calc(100vh - 126px)">
          <div class="apps-content-right" v-loading="loading">
            <div class="flex flex-space-between">
              <div class="flex ">
                <div class="auth-merchant-img">
                  <img v-if="enterpriseObj.logo" :src="enterpriseObj.logo" alt="" />
                  <img v-else src="../../assets/member.png" alt="img" />
                </div>
                <div>
                  <div class="auth-merchant-name flex">
                    <span class="font-14 color-606266 merchant-name-span">{{ enterpriseObj.enterpriseName || '--' }}</span><el-tag class="m-l-10" size="mini" type="danger">{{ enterpriseObj.versionName || '4.0'}}</el-tag>
                  </div>
                  <div class="auth-merchant-name flex">
                    <span class="font-14 color-606266 merchant-name-span">{{ enterpriseObj.companyName || '--' }}</span>
                  </div>
                </div>
              </div>
              <common-alert-tip :width="'284px'" :tip-content="tipContent"></common-alert-tip>
            </div>
            <div class="m-t-20">
              <el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
                <el-table-column label="申请事项" show-overflow-tooltip>
                  <template slot-scope="scope">{{ scope.row.userName || '商户授权' }}</template>
                </el-table-column>
                <el-table-column prop="" label="申请理由" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.auditReason || '--' }}
                  </template>
                </el-table-column>
                <el-table-column prop="" label="门店绑定" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.bindRange || '--' }}
                  </template>
                </el-table-column>
                <el-table-column prop="" label="门店共享" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.shareRange || '--' }}
                  </template>
                </el-table-column>
                <el-table-column prop="" label="提交人" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.referStaffName || '--' }}
                  </template>
                </el-table-column>
                <el-table-column prop="" label="审核人" show-overflow-tooltip>
                  <template slot-scope="scope">{{ scope.row.auditName || '--' }}</template>
                </el-table-column>
                <el-table-column prop="" label="审核结果" >
                  <template slot-scope="scope">
                    <span v-if="scope.row.statusFlag == 0">待同意</span>
                    <span v-if="scope.row.statusFlag == 1">已同意</span>
                    <span v-if="scope.row.statusFlag == 3">取消审核</span>
                    <el-tooltip v-if="scope.row.statusFlag == 2" class="item" effect="light" placement="right">
                      <div slot="content">
                        {{scope.row.refuseReason}}
                      </div>
                      <span class="common-bottom-border">已拒绝</span>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.statusFlag == 4" class="item" effect="light" placement="right">
                      <div slot="content">
                        {{scope.row.refuseReason}}
                      </div>
                      <span class="common-bottom-border">已失效</span>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="审核时间">
                  <template slot-scope="scope">
                    <div v-if="scope.row.statusFlag != 0" class="line-h-18">{{ scope.row.updateTime | timeStampToYmd }} {{ !scope.row.updateTime ? '--':'' }}</div>
                    <div v-if="scope.row.statusFlag != 0" class="line-h-18">{{ scope.row.updateTime | timeStampToHms }} {{ !scope.row.updateTime ? '--':'' }}</div>
                    <div v-if="scope.row.statusFlag == 0" class="line-h-18">--</div>
                    <div v-if="scope.row.statusFlag == 0" class="line-h-18">--</div>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="203">
                  <template slot-scope="scope">
                    <el-button type="text" @click="toShowLog(scope.$index, scope.row)">绑定详情</el-button>
                    <el-button  v-if="scope.row.statusFlag == 0" type="text" @click="toCancleAudit(scope.$index, scope.row)">取消审核</el-button>
                  </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>
          </div>
        </div>
      </div>
    </div>
    <store-auth-detail v-if="logShow" :store-range-audit-id="storeRangeAuditId"  @closeLog="closeLog"></store-auth-detail>
    <!-- <vue-gic-footer></vue-gic-footer> -->
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import storeAuthDetail from '@/components/company/store-auth-detail.vue';
import commonAlertTip from '@/components/common/common-alert-tip.vue';
import api from '@/api/merchant-auth.js';
const { getAuditLog, cancelAudit, getEnterpriseDetail } = api;
import showMsg from '@/common/js/showmsg';
export default {
  name: 'AuditLog',
  components: {
    navCrumb,
    storeAuthDetail,
    commonAlertTip
  },
  data() {
    return {
      tipContent: '仅保存近一年日志',
      // 面包屑参数
      navpath: [
        /*  {
          name: '首页',
          path: '/index'
        }, */
        {
          name: '通讯录',
          path: '/contactsList'
        },
        {
          name: '授权商户',
          path: '/authMerchant'
        },
        {
          name: '审核日志',
          path: ''
        }
      ],
      auditorName: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).staffName : '',
      auditorId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).staffId : '',
      enterpriseObj: {
        enterpriseName: '',
        logo: '',
        version: ''
      },
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableData: [],
      loading: false,
      // 绑定详情
      logShow: false,
      storeRangeAuditId: ''
    };
  },
  mounted() {
    const that = this;
    that.getEnterpriseData();
    that.getTableList();
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  methods: {
    /**
     * @description: 获取商户信息
     * @author: 无尘
     */
    getEnterpriseData() {
      const that = this;
      getEnterpriseDetail({ enterpriseId: that.$route.query.enterpriseId })
        .then(res => {
          that.enterpriseObj = res.result || {
            enterpriseName: '',
            logo: '',
            version: ''
          };
        })
        .catch(function(error) {

        });
    },
    /**
     * @description: 取消审核
     * @param {Number} index
     * @param {Object} item
     * @author: 无尘
     */
    toCancleAudit(index, item) {
      const that = this;
      that.$confirm('确定取消审核?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.postCancel(item.storeRangeAuditId);
      });
    },
    postCancel(storeRangeAuditId) {
      const that = this;
      const para = {
        storeRangeAuditId: storeRangeAuditId,
        statusFlag: 3, // 0 申请中 1通过 2拒绝  3取消审核4失效
        auditorName: that.auditorName,
        auditorId: that.auditorId
      };
      cancelAudit(para)
        .then(res => {
          if (res.code == '0000') {
            showMsg.showmsg('取消审核成功', 'success');
          }else if( res.code == '100003' || res.code == '100004'){
            that.$message({
              message: res.message || '未知错误',
              type: 'warning'
            });
            that.currentPage = 1;
            that.getTableList();
          }
          that.currentPage = 1;
          that.getTableList();
        })
        .catch(function(error) {

        });
    },
    /**
     * @description: 查看失败日志
     * @param {Number} index
     * @param {Object} item
     * @author: 无尘
     */
    toShowLog(index, item) {
      const that = this;
      that.storeRangeAuditId = item.storeRangeAuditId;
      that.logShow = true;
    },
    closeLog() {
      const that = this;
      that.storeRangeAuditId = '';
      that.logShow = false;
    },
    /**
     * @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;
      that.loading = true;
      let para = {
        enterpriseId: that.$route.query.enterpriseId || '',
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      getAuditLog(para)
        .then(res => {
          that.loading = false;
          that.tableData = res.result.result || [];
          that.total = res.result.totalCount;
        })
        .catch(function(error) {
          that.loading = false;
        });
    }
  }
};
</script>
<style type="text/less" lang="less" scoped>
.line-h-18 {
  line-height: 18px;
}

.w-270 {
  width: 270px;
}

.my-customer-wrap {
  height: 100%;
  .common-bottom-border {
    cursor: pointer;
    padding-bottom: 2px;
    border-bottom: 1px dashed #2f54eb;
  }
}
.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;

        .common-set-wrap {
          height: 100%;
          background: #fff;
        }
        .auth-merchant-img {
          width: 40px;
          min-width: 40px;
          max-width: 40px;
          height: 40px;
          border-radius: 2px;
          box-sizing: border-box;
          img {
            width: 100%;
          }
        }
        .auth-merchant-name {
          max-width: 320px;
          margin-left: 10px;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          .merchant-name-span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .el-tag {
            height: 18px;
            line-height: 18px;
          }
        }
      }
    }
  }
}
</style>
