<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-10-21 14:27:29
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-27 13:53:31
 -->

<!--
<review-result-detail
  :audit-ids="auditIds"
  :detail-show="detailShow"
  @hideDetailDialog="hideDetailDialog">
</review-result-detail>

import reviewResultDetail from '@/components/review/review-result-detail.vue'
 -->
<template>
  <div v-show="customDialog">
    <el-dialog class="edit-dialog" title="审核详情" :visible.sync="customDialog" width="600px" :before-close="handleClose">
      <div class="edit-dialog-body">
        <div class="font-14 color-606266 m-b-8">共 {{ multLength || '' }} 条审核事项， {{ successCount || '0'}} 条成功， <span class="color-f5222d">{{ failCount || '0' }} </span> 条失败，失败详情如下：</div>
        <el-table :data="tableData" style="width: 100%" height="332">
          <el-table-column prop="publishRecordId" label="审核事项" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.auditType == 1">导购账号绑定</span>
              <span v-if="scope.row.auditType == 3">导购账号新增</span>
            </template>
          </el-table-column>
          <el-table-column label="商户" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.enterpriseName || '--' }}
            </template>
          </el-table-column>
          <el-table-column label="提交人" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.submitStaffName || '--' }}
            </template>
          </el-table-column>
          <el-table-column label="提交时间" width="120">
            <template slot-scope="scope">
              <div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }} {{ !scope.row.createTime ? '--': ''}}</div>
              <div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }} {{ !scope.row.createTime ? '--': ''}}</div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
              <template slot-scope="scope">
                <span :class="['span-dot', scope.row.auditFlag == 1 ? 'bg-33af4a ' : 'bg-f5222d']"></span><span v-if="scope.row.auditFlag == 1">已同意</span>
              </template>
            </el-table-column>
            <el-table-column label="结果">
              <template slot-scope="scope">
                <span v-if="scope.row.statusFlag == 2 && scope.row.auditFlag == 1">成功</span>
                <span v-if="scope.row.auditFlag == 2">--</span>
                <el-popover
                  v-if="scope.row.statusFlag == 1&& scope.row.auditFlag == 1"
                  placement="top"
                  width="200"
                  trigger="hover"
                  :content="scope.row.reason">
                  <span class="common-bottom-border" slot="reference">失败</span>
                </el-popover>
              </template>
            </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import fetch from '@/api/review.js';
const { getAuditDetail } = fetch;
export default {
  name: 'ReviewResultDetail',
  props: {
    detailShow: {
      type: Boolean,
      default: false
    },
    auditIds: {
      type: String,
      default() {
        return '';
      }
    },
    tableListData: {
      type: [ Array, Object ],
      default() {
        return [];
      }
    },
    failCount: {
      type: [ String, Number ],
      default() {
        return 0;
      }
    },
    successCount: {
      type: [ String, Number ],
      default() {
        return 0;
      }
    }
  },
  data() {
    return {
      customDialog: false, // 弹框显示
      tableData: [],
      /* fail: '',
      success: '' */
    };
  },
  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.detailShow;
    if (!!that.auditIds) {
      that.multLength = that.auditIds.split(',').length;
      that.tableData = JSON.parse(JSON.stringify(that.tableListData));
      // that.getTableData();
    }
  },
  methods: {
    /**
     * @description: 关闭
     * @param {Function} done
     * @author: 无尘
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     * @description: 取消关闭弹窗
     * @author: 无尘
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },
    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$emit('hideDetailDialog');
    },
    /**
     * @description: 获取审核详情
     * @author: 无尘
     */
    getTableData() {
      const that = this;
      let para = {
        auditIds: that.auditIds
      };
      getAuditDetail(para)
        .then(res => {
          console.log(res);
          that.tableData = res.result.resultList || [];
          that.fail = res.result.fail;
          that.success = res.result.success;
        })
        .catch(function(error) {});
    }
  },
  watch: {
    detailShow: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
    },
    auditIds: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.multLength = newData.split(',').length;
        // that.getTableData();
      }
    },
    tableListData: function(newData, oldData) {
      const that = this;
      that.tableData = JSON.parse(JSON.stringify(newData));
    },
  }
};
</script>

<style 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;
  }
}
.color-f5222d {
  color: #f5222d;
}
.common-bottom-border {
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 1px dashed #2f54eb;
}
.m-b-8 {
  margin-bottom: 8px;
}

.edit-dialog {
  /deep/ .el-dialog__body {
    padding: 25px 20px 17px 20px;
    min-height: 352px;
  }

  /deep/ .el-dialog__footer {
    border: none;
    padding-top: 3px;
  }

  &__title {
    width: 100%;
    height: 38px;
    padding: 12px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(235, 238, 245, 1);
  }
}
</style>
