<template>
  <div class="app-container">
    <el-select v-model="searchParams.status">
      <el-option label="未审核" :value="1" />
      <el-option label="已驳回" :value="2" />
    </el-select>
    <el-input
      v-model="searchParams.search_content"
      type="text"
      placeholder="代理昵称/手机号"
      style="width: 230px"
      clearable
      @keydown.enter="search"
    />
    <el-button type="primary" @click="search">搜索</el-button>
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
      style="margin: 20px 0;"
    >
      <el-table-column
        prop="headimgurl"
        label="头像"
        align="center"
        width="60"
      >
        <template slot-scope="{ row }">
          <el-image :src="row.headimgurl" fit="contain" class="hoverImg" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" align="center" width="80">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getOtherInfo(row.id)">{{ row.nickname.slice(0,5) }}</el-button>
        </template>
      </el-table-column>
      <el-table-column v-if="show" prop="realname" align="center" label="真实姓名" width="130" />
      <el-table-column v-if="show" prop="mobile" align="center" width="200px" label="电话号" />
      <el-table-column v-if="!show" prop="mobile" align="center" label="电话号" width="70" />
      <el-table-column v-if="show" prop="recom" label="邀请人" align="center" width="200">
        <template slot-scope="{ row }">
          <span class="buttonText" @click="getOtherInfo(row.recom.id)">{{ row.recom && row.recom.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="show"
        prop="agent"
        label="上级代理"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <span class="buttonText" @click="getOtherInfo(row.agent.id)">{{ row.agent && row.agent.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="show"
        prop="level"
        align="center"
        label="代理级别"
        width="100"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag
            :color="levelStatus(row.level).color"
            style="color:#ffffff;"
          >
            {{ levelStatus(row.level).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="+searchParams.status === 2"
        label="驳回原因"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.get_service && row.get_service.reason }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="!show"
        label="操作"
        align="center"
        width="75"
      >
        <template slot-scope="{ row }">
          <template v-if="+searchParams.status === 1">
            <div style="display:flex;justify-content:space-between;flex-direction:column;align-items:center">
              <!-- <el-button type="primary" size="mini" @click="examineSuccess(row.id)">通过</el-button>
              <el-button type="success" size="mini" @click="showDetail(row)">详情</el-button> -->
              <div class="button" @click="examineSuccess(row.id)">通过</div>
              <div class="buttonT" @click="showDetail(row)">详情</div>
            </div>
          </template>
          <template v-if="+searchParams.status === 2">
            <div style="display:flex;justify-content:space-between;flex-direction:column;align-items:center">
              <div class="button" @click="examineSuccess(row.id)">重新通过</div>
              <div class="buttonT" @click="showDetail(row)">详情</div>
              <!-- <el-button type="primary" size="mini" @click="examineSuccess(row.id)">重新通过</el-button> -->
              <!-- <el-button type="success" size="mini" @click="showDetail(row)">详情</el-button> -->
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        label="操作"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <template v-if="+searchParams.status === 1">
            <el-button type="primary" @click="examineSuccess(row.id)">通过</el-button>
            <el-button type="danger" @click="showExamineError(row.id)">驳回</el-button>
          </template>
          <template v-if="+searchParams.status === 2">
            <el-button type="primary" @click="examineSuccess(row.id)">重新通过</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看代理详情 -->
    <el-drawer :title="`${memberInfo.realname} - ${levelStatus(memberInfo.level).name}`" :visible.sync="visible.memberInfo" direction="rtl" size="600px">
      <MemberInfo :info="memberInfo" :team-type="true" :show-num="roles.includes(6) || user.role_name === 'root'" @getOtherInfo="changeOtherInfo" />
    </el-drawer>
    <pagination
      :total="total"
      :limit="searchParams.page_size"
      :page="searchParams.page_index"
      style="margin: 0 0 20px 0"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <el-dialog
      title="驳回"
      :visible.sync="dialogBack"
      width="350px"
      :before-close="resetBack"
    >
      <!-- <el-input
        v-model="examineParams.reason"
        type="textarea"
        :rows="5"
        resize="none"
        maxlength="250"
        show-word-limit
        placeholder="请填写驳回原因"
      /> -->
      <el-form>
        <el-form-item label="驳回原因:">
          <el-select
            v-model="examineParams.reason"
          >
            <el-option
              v-for="(v, i) in reasonList"
              :key="i"
              :label="v"
              :value="v"
            />
          </el-select>
          <el-popover
            v-model="showAddReason"
            placement="bottom-end"
            trigger="click"
            width="365"
          >
            <el-input
              v-model="addReason"
              type="text"
              placeholder="请添加驳回原因"
              maxlength="20"
              show-word-limit
              style="margin-bottom: 10px; "
            />
            <el-button type="primary" @click="publishReason">添加</el-button>
            <el-button slot="reference" type="text">添加驳回原因</el-button>
          </el-popover>
          <div>
            <span>{{ reasonList.length > 0 ? '请选择驳回原因' : '暂无驳回原因，请先添加' }}</span>
          </div>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="resetBack">取消</el-button>
        <el-button type="primary" @click="toSubmitBack">驳回</el-button>
      </template>
    </el-dialog>
    <el-dialog title="详情:" :visible.sync="dialogFormVisible" width="80%">
      <el-form :model="detailForm">
        <el-form-item label="昵称:">
          <span>{{ detailForm.nickname }}</span>
        </el-form-item>
        <el-form-item label="真实姓名:">
          <span>{{ detailForm.realname }}</span>
        </el-form-item>
        <el-form-item label="电话号:">
          <span>{{ detailForm.mobile }}</span>
        </el-form-item>
        <el-form-item label="邀请人:">
          <span>{{ detailForm.invite }}</span>
        </el-form-item>
        <el-form-item label="上级代理:">
          <span>{{ detailForm.agency }}</span>
        </el-form-item>
        <el-form-item label="代理级别:">
          <el-tag
            :color="levelStatus(detailForm.level).color"
            style="color:#ffffff;"
          >
            {{ levelStatus(detailForm.level).name }}
          </el-tag>
        </el-form-item>
      </el-form>
      <div v-if="+searchParams.status === 1" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="examineSuccess(detailForm.id)">通过</el-button>
        <el-button type="danger" @click="showExamineError(detailForm.id)">驳回</el-button>
      </div>
      <div v-if="+searchParams.status === 2" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="examineSuccess(detailForm.id)">重新通过</el-button>
      </div>
    </el-dialog>
    <div v-show="popup">
      <!--这里是要展示的内容层-->
      <div class="box">
        <div class="box-left">提示</div>
        <div class="box-middle">确认审核通过？</div>
        <div class="box-right">
          <div />
          <div>
            <el-button @click="popup=false">取消</el-button>
            <el-button type="primary" @click="confirm">确认</el-button>
          </div>
        </div>
      </div>
      <!--这里是半透明背景层-->
      <div class="over" />
    </div>
  </div>
</template>
<script>
import { getList, toExamine, backReason, publishBackReason } from '@/api/team/zhengwei'
import {
  getOtherInfo
} from '@/api/team/common'
// 公共方法
import {
  levelStatus
} from '@/filters/common'
import { mapState } from 'vuex'
import MemberInfo from './components/MemberInfo'
export default {
  components: {
    MemberInfo
  },
  data() {
    const roles = this.$route.meta.buttonAuthList ? this.$route.meta.buttonAuthList : []
    return {
      roles,
      show: '',
      popup: false,
      popupId: '',
      screenWidth: '',
      dialogFormVisible: false,
      detailForm: {
        invite: '',
        agency: ''
      },
      searchParams: {
        page_index: 1,
        page_size: 10,
        status: 1,
        search_content: ''
      },
      dialogBack: false,
      examineParams: {
        id: '',
        reason: '',
        status: ''
      },
      list: [],
      total: 0,
      memberInfo: {
        realname: '',
        level: ''
      },
      visible: {
        memberInfo: false
      },
      reasonList: [],
      addReason: '',
      showAddReason: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    'searchParams.status'() {
      this.search()
    },
    // 监听浏览器窗口宽度,当浏览器窗口小于500时,显示详情
    screenWidth(val) {
      if (val < 500) {
        this.show = false
      } else {
        this.show = true
      }
    }
  },
  created() {
    this.levelStatus = levelStatus
    this.getList()
    this.screenWidth = document.body.clientWidth
    if (this.screenWidth < 500) {
      this.show = true
    } else {
      this.show = false
    }
  },
  mounted() {
    this.watchWidth()
  },
  methods: {
    // 监听浏览器窗口
    watchWidth() {
      // const that = this
      window.onresize = () => {
        return (() => {
          window.screenWidth = window.innerWidth
          this.screenWidth = window.screenWidth
        })()
      }
    },
    // 点击详情
    showDetail(row) {
      this.dialogFormVisible = true
      this.detailForm = row
      this.detailForm.agency = this.detailForm.recom.nickname
      this.detailForm.invite = this.detailForm.agent.nickname
    },
    // 添加驳回原因
    publishReason() {
      if (!this.addReason) {
        this.$message.error('请填写驳回原因')
        return false
      }
      const loading = this.$loading()
      publishBackReason({
        reason: this.addReason
      }).then(res => {
        loading.close()
        if (res.code === 200) {
          this.$message.success('添加驳回原因成功')
          this.showAddReason = false
          this.addReason = ''
          this.getBackReason()
        } else {
          this.$message.error(res.message || '添加驳回原因失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('添加驳回原因失败')
      })
    },
    // 获取驳回原因
    getBackReason() {
      const loading = this.$loading()
      backReason().then(res => {
        loading.close()
        if (res.code === 200) {
          this.dialogBack = true
          this.reasonList = res.data.list
        } else {
          this.$message.error(res.message || '获取驳回原因失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('获取驳回原因失败')
      })
    },
    changeOtherInfo(id) {
      this.getOtherInfo(id, data => {
        // this.listQuery.search_name = data.nickname
        this.listQuery.search_name = data.mobile
        this.getList()
      })
    },
    // 查看代理详情
    handleSeeMemberInfo(row) {
      this.memberInfo = row
      this.visible.memberInfo = true
    },
    // 获取上级销售或邀请人信息
    async getOtherInfo(id, cb) {
      if (!id) {
        this.$message.error('获取用户id失败')
        return false
      }
      this.loadingFull = true
      try {
        const res = await getOtherInfo({ id })
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          this.handleSeeMemberInfo(data)
          cb && cb(data)
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取邀请人或上级销售信息失败:${e}`)
      }
      this.loadingFull = false
    },
    // 分页
    changePagination({ page, limit }) {
      this.searchParams.page_index = page
      this.searchParams.page_size = limit
      this.getList()
    },
    // 搜索
    search() {
      this.searchParams.page_index = 1
      this.getList()
    },
    // 审核驳回
    showExamineError(id) {
      this.resetBack()
      this.examineParams.id = id
      this.examineParams.status = 1
      this.getBackReason()
    },
    examineError() {
      if (!this.examineParams.reason) {
        this.$message.error('驳回时请选择原因')
        return false
      }
      this.$confirm('确认审核驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.toSubmitBack()
      }).catch(() => {})
    },
    // 审核通过弹窗
    examineSuccess(id) {
      this.popup = true
      this.popupId = id
      // this.$confirm('确认审核通过?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.examineParams.id = id
      //   this.examineParams.status = 0
      //   this.dialogFormVisible = false
      //   this.toSubmitBack()
      // }).catch(() => {})
    },
    confirm() {
      this.examineParams.id = this.popupId
      this.examineParams.status = 0
      this.popup = false
      this.toSubmitBack()
    },
    toSubmitBack() {
      const loading = this.$loading()
      toExamine(this.examineParams).then(res => {
        loading.close()
        if (res.code === 200) {
          this.$message.success(+this.examineParams.status ? '驳回成功' : '通过成功')
          this.dialogFormVisible = false
          this.resetBack()
          this.getList()
        } else {
          this.$message.error(res.message || '操作失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('操作失败')
      })
    },
    resetBack() {
      this.examineParams.id = ''
      this.examineParams.reason = ''
      this.examineParams.status = ''
      this.dialogBack = false
    },
    getList() {
      const loading = this.$loading()
      getList(this.searchParams).then(res => {
        loading.close()
        if (res.code === 200) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.message || '获取政委审核列表失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('获取政委审核列表失败')
      })
    }
  }
}
</script>
<style>
.box {
  padding: 30px;
  position: fixed;
  font-size: 24px;
  height: 200px;
  width: 350px;
  background-color:#fff;
  border-radius: 0.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.box-left{
  font-size: 20px;
}
.box-middle{
  font-size: 15px;
  /* margin-top: 20px; */
}
.box-right{
  display: flex;
  justify-content: space-between
}
  .over {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 10000;
    background-color: #111111;
  }
  .button{
    width:65px;
    line-height: 28px;
    font-size: 12px;
    text-align: center;
    background-color: #1890ff;
    border-radius: 3px;
    color: #fff;
    margin-bottom: 5px;
  }
  .buttonT{
    width:65px;
    line-height: 28px;
    font-size: 12px;
    text-align: center;
    background-color: #13c166;
    border-radius: 3px;
    color: #fff;
  }
</style>
