<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-25 13:57:38
 -->
<template>
  <div class="reviewed-wrap common-set-wrap">
    <div class="right-content">
      <div class="right-box" style="min-height: calc(100vh - 86px)">
        <div class="reviewed-body-head">
          <div class="tip-body m-b-20">
            <div role="alert" class="el-alert el-alert--info">
              <i class="el-alert__icon el-icon-info"></i>
              <div class="el-alert__content">
                <span class="el-alert__title">展示管理员审核及绑定解绑记录及门店成员自助增删导购及用户绑定记录</span>
              </div>
            </div>
          </div>
          <el-input class="w-344" maxlength="50" placeholder="请输入提交人姓名/账号/手机号" prefix-icon="el-icon-search" v-model="searchValue" clearable @clear="clearSearch" @keyup.native="value => searchEnterFun(value, searchInput)"> </el-input><el-select v-model="auditType" placeholder="全部事项" @change="changeTableList" class="w-130 m-l-10"> <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select><el-select class="w-168 m-l-10" v-model="filterBrand" placeholder="全部品牌" @change="changeTableList">
            <el-option label="全部品牌" value=""></el-option>
            <el-option v-for="item in brandOptions" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId"> </el-option> </el-select>
        </div>
        <div class="reviewed-body-content">
          <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column label="审核事项">
              <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">
                <div class="flex">
                  <el-popover placement="top" width="300" trigger="hover" @show="showSingleInfo(scope.row.submitStaffId)">
                    <div class="apply-info-detail">
                      <div class="flex">
                        <div class="apply-info-img flex-align-center flex-pack-center bg-82c5ff ">
                          <img v-if="userData.headImg" :src="userData.headImg" alt="img" />
                          <img v-else src="../../assets/member.png" alt="img" />
                        </div>
                        <div class="flex flex-column apply-info-right flex-pack-center">
                          <div class="apply-info-name">
                            <span class="font-14 color-303133">{{ userData.staffName || '--' }}</span> <span class="font-14 color-90939">( {{ userData.sex == 1? '男' : userData.sex == 2? '女' : '--' }})</span>
                          </div>
                        </div>
                      </div>
                      <div class="flex flex-space-between line-26 m-t-15">
                        <div class="font-14 color-606266">账号</div>
                        <div class="font-14 color-303133">{{ userData.wxUserId || '--' }}</div>
                      </div>
                      <div class="flex flex-space-between line-26">
                        <div class="font-14 color-606266">职务</div>
                        <div class="font-14 color-303133">{{ userData.postion || '--' }}</div>
                      </div>
                      <div class="flex flex-space-between line-26">
                        <div class="font-14 color-606266">手机号</div>
                        <div class="font-14 color-303133">{{ userData.nationCode || '--' }}-{{ userData.phoneNumber || '--' }}</div>
                      </div>
                      <div class="flex flex-space-between line-26">
                        <div class="font-14 color-606266 w-m-100">部门</div>
                        <div class="font-14 color-303133">{{ userData.departmentInfo.map(ele => ele.departmentName).join(';') || '--' }}</div>
                      </div>
                    </div>
                    <div slot="reference">
                      <div class="flex flex-align-center flex-pack-center bg-82c5ff table-head-pic cursor-pointer">
                        <img v-if="scope.row.submitHeadImg" :src="scope.row.submitHeadImg" alt="img" />
                        <img v-else src="../../assets/member.png" alt="img" />
                      </div>
                    </div>
                  </el-popover>
                  <div class="flex flex-column apply-info" style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;">
                     <span class="font-14 color-606266 hide-ellipsis">{{ scope.row.submitStaffName || '--' }}</span>
                    <span class="font-12 color-909399 hide-ellipsis">{{ scope.row.submitWxUserId || '--' }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="详情" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.content || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="提交时间" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="line-h-18">{{ scope.row.createTime | timeStampToYmd }}</div>
                <div class="line-h-18">{{ scope.row.createTime | timeStampToHms }}</div>
              </template>
            </el-table-column>
            <el-table-column label="审核人" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.auditStaffName || '--' }}
              </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>
                <el-popover
                  v-if="scope.row.auditFlag == 2"
                  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-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 class="block common-wrap__page text-right" 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>
    <!-- 门店变更 -->
    <store-change v-model="showStoreDialog" :store-change-data="storeChangeData"> </store-change>
  </div>
</template>
<script>
import storeChange from '@/components/review/store-change.vue';
import fetch from '@/api/review.js';
import api from '@/api/contact.js';
const { getStaffDetail } = api;
const { getReview, getWxEnterprise } = fetch;
import { _debounce } from '@/common/js/public';
export default {
  name: 'ReviewedPage',
  components: {
    storeChange
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      auditType: '', // 筛选的事项
      filterBrand: '', // 筛选的品牌
      brandOptions: [], // 品牌列表
      filterOptions: [
        {
          label: '全部事项',
          value: ''
        },
        {
          label: '导购账号绑定',
          value: '1'
        },
        {
          label: '导购账号新增',
          value: '3'
        }
      ],
      searchValue: '', // 搜索
      loading: false,
      tableData: [],
      multipleSelection: [],
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      // store
      showStoreDialog: false,
      storeChangeData: {},
      // user
      userData: {
        staffName: '',
        phoneNumber: '',
        nationCode: '',
        postion: '',
        departmentInfo: [],
        headImg: '',
        wxUserId: '',
        sex: 1
      }
    };
  },
  mounted() {
    const that = this;
    that.$emit('showTab', '/reviewed');
    that.getTableList();
    that.getBrandData();
  },
  methods: {
    /**
     * @description: 选择品牌
     * @author: 无尘
     */
    changeTableList() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * @description: 搜索清空
     * @author: 无尘
     */
    clearSearch() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },

    /**
     * @description: 搜索标签
     * @param {Object} e
     * @author: 无尘
     */
    searchEnterFun: _debounce(function(e) {
      const that = this;
      let searchVal = String(e.target.value).trim();
      if (!searchVal) {
        return false;
      }
      that.currentPage = 1;
      that.getTableList();
    }, 200),

    toggleReason(item) {
      const that = this;
      item.visible = true;
      that.tableData.forEach(function(ele, index) {
        if (ele.enterpriseAuditingId != item.enterpriseAuditingId) {
          ele.visible = false;
        }
      });
    },

    /**
     * @description: 表格---多选
     * @param {Number} val
     * @author: 无尘
     */
    handleSelectionChange(val) {
      const that = this;
      that.multipleSelection = val;
    },

    /**
     * @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;
      // let fullPath = that.$route.fullPath;
      that.getTableList();
    },

    /**
     * @description: 获取头像处显示信息
     * @param {String} submitStaffId
     * @author: 无尘
     */
    showSingleInfo(submitStaffId) {
      const that = this;
      const para = {
        staffId: submitStaffId
      };
      getStaffDetail(para)
        .then(res => {
          that.userData = res.result || {
            staffName: '',
            phoneNumber: '',
            nationCode: '',
            postion: '',
            departmentInfo: [],
            headImg: '',
            wxUserId: '',
            sex: 1
          };
        })
        .catch(function(error) {});
    },

    /**
     * @description: 显示门店变更
     * @param {Object} item
     * @author: 无尘
     */
    showStoreChange(item) {
      const that = this;
      that.storeChangeData = {
        beforeContent: [],
        afterContent: []
      };
      that.showStoreDialog = true;
      that.storeChangeData = {
        beforeContent: item.oldValue != '' ? item.oldValue.split(',') : [],
        afterContent: item.newValue != '' ? item.newValue.split(',') : []
      };
    },
    /**
     * @description: 获取品牌
     * @author: 无尘
     */
    getBrandData() {
      const that = this;
      getWxEnterprise({ wxEnterpriseId: that.wxEnterpriseId })
        .then(res => {
          if (!!res.result && !!res.result.length) {
            that.brandOptions = res.result;
          }
        })
        .catch(function(error) {

        });
    },
    /**
     * @description: 获取列表数据
     * @author: 无尘
     */
    getTableList() {
      const that = this;
      that.loading = true;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId,
        auditType: that.auditType,
        searchType: '1', // 0待审核，1已审核
        search: that.searchValue || '', // 搜索字段
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize, // 一页显示个数
        enterpriseId: that.filterBrand // 20190918新增品牌
      };
      getReview(para)
        .then(res => {
          that.loading = false;
          that.tableData = res.result.result || [];
          that.total = res.result.totalCount;
        })
        .catch(function(error) {
          that.loading = false;
        });
    }
  },
};
</script>
<style lang="less" scoped>
.w-m-100 {
  min-width: 100px;
}
.el-select {
  vertical-align: middle;
}
.common-bottom-border {
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 1px dashed #2f54eb;
}
  /* flex */

  .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .flex-column {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }

  .flex-row {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
  }

  .flex-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .flex-pack-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-start {
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
  }

  .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;
    }
  }

  .inline-block {
    display: inline-block;
  }

  .bg-82c5ff {
    background: #82c5ff;
  }

  .color-508cee {
    color: #508cee;
  }

  .color-ff585c {
    color: #ff585c;
  }

  .font-13 {
    font-size: 13px;
  }

  .font-14 {
    font-size: 14px;
  }

  .line-h-18 {
    line-height: 18px;
  }

  .line-26 {
    line-height: 26px;
  }

  .hide-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .line-hidden-2 {
    .flex;
    .flex-align-center;
    .flex-start;
    height: 46px;
    overflow: hidden;
    white-space: pre-wrap;
    span {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      max-height: 46px;
      overflow: hidden;
    }
  }

  .w-80 {
    width: 80px;
  }

  .w-130 {
    display: inline-block;
    width: 130px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .w-168 {
    display: inline-block;
    width: 168px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .w-344 {
    width: 344px;
  }

  .m-l-10 {
    margin-left: 10px;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .common-wrap__page {
    margin-top: 24px;
  }

  .tooltip-text {
    width: 100%;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .right-content {
    /*width: 100%;*/
    min-height: calc(100% - 126px);
    .right-box {
      background: #fff;
      min-height: 500px;
      padding: 20px;
      .w-280 {
        width: 280px;
      }
      .w-514 {
        width: 514px;
      }
      .m-l-20 {
        margin-left: 20px;
      }
      .m-t-45 {
        margin-top: 45px;
      }
      .text-center {
        text-align: center;
      }
      .reviewed-body-head {
        margin-bottom: 22px;
      }
      .table-head-pic {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        i {
          font-size: 20px;
          color: #e5f3ff;
        }
        img {
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }
      }
      .apply-info {
        margin-left: 15px;
        line-height: 18px;
        span {
          font-size: 14px;
          color: #606266;
          &.font-13 {
            font-size: 13px;
          }
        }
      }
    }
  }

  .apply-info-detail {
    padding: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    .apply-info-img {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      text-align: center;
      i {
        font-size: 106px;
        color: #e5f3ff;
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 12px;
      }
    }
    .apply-info-right {
      padding-left: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }

  .el-icon-question {
    font-size: 14px;
    color: #c0c4cc;
    cursor: pointer;
  }
</style>
