<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" style="margin-bottom:20px ;">
      <div class="grid-content bg-purple">
        <el-input v-model="input4" placeholder="业务管理员名称搜索" style="width: 100%;">
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </div>
      <div class="grid-content bg-purple">
        <el-dropdown @command="handleCommand">
          <div class="pulldown">
            <span v-if="!status" class="el-dropdown-link">
              业务管理员状态筛选
            </span>
            <span v-if="status" class="el-dropdown-link">
              {{ status }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="未通过">未通过</el-dropdown-item>
            <el-dropdown-item command="待审核">待审核</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="grid-content bg-purple">
        <el-dropdown @command="handlehpCommand()">
          <div class="pulldown">
            <span v-if="!hpstatus" class="el-dropdown-link">
              审核状态筛选
            </span>
            <span v-if="hpstatus" class="el-dropdown-link">
              {{ hpstatus }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="成功">成功</el-dropdown-item>
            <el-dropdown-item command="失败">失败</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="grid-content bg-purple" style="display: flex;justify-content: flex-end;margin-left: 10px;">
        <el-button type="success" @click="success">审核成功</el-button>
        <el-button type="danger" @click="failed">审核失败</el-button>
        <el-button type="primary" @click="recover">恢复</el-button>
        <el-button type="warning" @click="deleted">删除</el-button>
        <el-button type="primary" @click="Exports">批量导出</el-button>
      </div>
    </el-row>
    <el-table
      v-loading="listLoading"
      :data="srcList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      @select-all="handleAll"
    >
      <el-table-column align="center" label="" width="55" type="selection" />
      <el-table-column label="业务管理员姓名" align="center" width="180" prop="realName" />
      <el-table-column label="账号" align="center" prop="account" />
      <el-table-column label="联系电话" width="180" align="center" prop="mobile" />
      <el-table-column label="业务管理员状态" align="center" prop="statusText" />
      <el-table-column label="审核状态" align="center" prop="approveStatusText" />
      <el-table-column label="时间" width="180" align="center" />
      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template slot-scope="scope">
          <el-tag type="primary" style="cursor: pointer; margin:0 5px;" @click="">编辑</el-tag>
          <el-tag type="success" style="cursor: pointer; margin:0 5px;" @click="Srecover(scope.row.id)" v-if="scope.row.status==1">恢复</el-tag>
          <el-tag type="danger" style="cursor: pointer; margin:0 5px;" @click="Sdeleted(scope.row.id)" v-if="scope.row.status==0">删除</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagesip">
      <el-button
        type="primary"
        size="small"
        style="background-color:#D8AB5A ;border-color:#D8AB5A ; margin: 0 20px;"
        @click="jumpFirstPage"
      >首页
      </el-button>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="list.length"
        :page-size="11"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        :hide-on-single-page="false"
        ref="pagination"
      />
      <el-button
        type="primary"
        size="small"
        style="background-color:#D8AB5A ;border-color:#D8AB5A ;margin: 0 20px;"
        @click="jumpLastPage"
      >尾页
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  getList
} from '@/api/table'
	import {
		dataConversionUtil
	} from '../../utils/Excel.js'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      srcList: [],
      list: [],
      listLoading: false,
      status: '',
      currentPage: 1,
      pagesize: 11,
      hpstatus: '',
      input4: '',
      checked: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: ''
    }
  },
  created() {
  },
  mounted() {
   this.getData()
  },
  methods: {
		getData(){
				 this.$request({
				   url: '/api/Account/search',
				   method: 'post',
				   data: {
				     pageIndex: 0,
				     pageSize: 30
				   }
				 }).then((res) => {
				   this.list = res.data.result
				   console.log(res.data.result)
				   this.getPageData()
				 })
		},
    toDetail() {
      this.$router.push({
        path: '/detail'
      })
    },
    handleSelectionChange(data) {
      this.multipleSelection = data
      console.log(this.multipleSelection)
    },
    handleAll(data) {
      this.multipleSelection = data
      console.log(this.multipleSelection)
    },
    handleCommand(command) {
      this.status = command
    },
    handlehpCommand(command) {
      this.hpstatus = command
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPageData()
    },
    jumpFirstPage() {
      this.$refs.pagination.handleCurrentChange(1)
      this.$emit('handleCurrentChange', 1)
    },
    jumpLastPage() {
      const font = this.$refs.pagination
      const cpage = Math.ceil(font.total / font.pageSize)
      font.handleCurrentChange(cpage)
    },
    getPageData() {
      const start = (this.currentPage - 1) * this.pagesize
      const end = start + this.pagesize
      this.srcList = this.list.slice(start, end)
    },
    success() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id)
      this.$request({
        url: '/api/Account/manager',
        method: 'post',
        data: {
          ids: ids,
          operateType: 3
        }
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: res.msg
          })
		  this.getData()
        }
      })
    },
    failed() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id)
      this.$request({
        url: '/api/Account/manager',
        method: 'post',
        data: {
          ids: ids,
          operateType: 4
        }
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: res.msg
          })
		  this.getData()
        }
      })
    },
    recover() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id)
      this.$request({
        url: '/api/Account/manager',
        method: 'post',
        data: {
          ids: ids,
          operateType: 2
        }
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '恢复成功'
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: '恢复失败'
          })
		  this.getData()
        }
      })
    },
    deleted() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id)
      this.$request({
        url: '/api/Account/manager',
        method: 'post',
        data: {
          ids: ids,
          operateType: 1
        }
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: '删除失败'
          })
		  this.getData()
        }
      })
    },
    Srecover(id) {
      this.$request({
        url: '/api/Account/manager',
        method: 'post',
        data: {
          ids: [id],
          operateType: 2
        }
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '恢复成功'
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: '恢复失败'
          })
		  this.getData()
        }
      })
    },
    Sdeleted(id) {
      this.$request({
        url: '/api/Account/manager',
        method: 'post',
        data: {
          ids: [id],
          operateType: 1
        }
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: '删除失败'
          })
		  this.getData()
        }
      })
    },
		Exports(){
			if(this.multipleSelection==""){
				this.$message({
					type:'warning',
					message:'请选择数据!'
				})
			}else{
				var tableHeader = [
					['序号', '业务管理员姓名', '账号', '联系电话', '业务管理员状态','审核状态', '时间'],
				]
				var dataList = []
				this.multipleSelection.forEach((item, index) => {
					dataList.push([index + 1, item.realName, item.account, item.mobile, item.statusText,item.approveStatusText, item
						.createdAt
					]);
				})
				dataConversionUtil.dataToExcel('业务管理员列表', tableHeader, dataList)
				this.$message.success('导出成功!');
		}
		}
  }
}
</script>
<style lang="scss">
	.pulldown {
		width: 185px;
		height: 40px;
		border: 1px solid #E8E8E8;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		color: #999999;
	}

	.pagesip {
		width: 100%;
		margin: 20px auto;
		display: flex;
		// align-items: center;
		justify-content: flex-end;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #D8AB5A;
	}

	.el-col {
		margin-bottom: 20px;
	}
</style>
