<template>
  <div class="app-container">
    <!--操作区-->
    <el-input v-model="page.data.name" placeholder="请输入姓名" class="margin-left input"></el-input>
    <el-input v-model="page.data.phone" placeholder="请输入手机号" class="margin-left input"></el-input>
    <el-input v-model="page.data.idNumber" placeholder="请输入身份证号" class="margin-left input"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="fetchData" class="margin-left" >搜索</el-button>
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="实名照片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]">
            <div slot="error" class="image-slot">
              暂无照片
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center">
        <template slot-scope="scope">
          {{ scope.row.idNumber | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="省" align="center">
        <template slot-scope="scope">
          {{ scope.row.provinceName | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="市" align="center">
        <template slot-scope="scope">
          {{ scope.row.cityName | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="区" align="center">
        <template slot-scope="scope">
          {{ scope.row.areaName | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="街道" align="center" >
        <template slot-scope="scope">
          {{ scope.row.streetName | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="详细地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.address | matchNull}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="所属组织名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.policeStationName | matchNull}}
        </template>
      </el-table-column> -->
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="所属账号" align="center">
        <template slot-scope="scope">
          {{ scope.row.username | matchNull}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" width="100">
        <template slot-scope="scope">
          <el-button type="warning" plain size="small" @click="removeUser(scope.row.id)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination :total="total" :page.sync="page.pageNum" :limit.sync="page.pageSize" @pagination="fetchData" />
  </div>
</template>

<script>
  import {checkRole} from '@/utils/checkRole'
  import Pagination from '@/components/Pagination'
  import {getCattlePageList,deleteCattle} from "@/api/exception_model";

  export default {
    components: { Pagination },
    filters: {
      matchNull(str) {
        if (!str) {
          return '未认证'
        } else {
          return str
        }
      },
    },
    data() {
      return {
        // 主表格&主表格加载状态
        list: null,
        listLoading: true,
        // 分页参数
        page: {
          data: {
            name: '',
            phone: '',
            idNumber: '',
          },
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
      }
    },
    created() {
      this.fetchData();
    },
    methods: {
      // 查询权限
      checkRole,
      // 获取列表数据
      fetchData() {
        this.listLoading = true
        getCattlePageList(this.page).then(res => {
          this.list = res.data.list
          this.total = res.data.total
          this.listLoading = false
        })
      },
      // 返回列表序号
      indexMethod(index) {
        return (this.page.pageNum-1)*this.page.pageSize+index+1
      },
      // 移除黑名单
      removeUser(id) {
        this.$confirm('确定要将此用户移除黑名单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          deleteCattle(id).then((res) => {
            this.fetchData();
            this.$message({
              type: 'success',
              message: '移除成功!'
            });
          })
        })
      },
    }
  }
</script>

<style scoped>
  .table{
    margin-top: 15px;
  }
  .margin-left {
    margin: 10px 0 0 10px;
  }
  .input {
    width: 200px;
  }
</style>

