<template>
  <div>
    <detailsList
      v-if="clickDetails"
      :user-cattle-id="userCattleId"
      @showDetails="clickDetails = false"
    />
    <div v-else class="app-container">
      <!--搜索区-->
      <el-input
        v-model="page.data.name"
        placeholder="请输入姓名"
        class="margin-left input"
      />
      <el-input
        v-model="page.data.idNumber"
        placeholder="请输入证件号"
        class="margin-left input"
      />
      <el-input
        v-model="page.data.phone"
        placeholder="请输入手机号"
        class="margin-left input"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        class="margin-left"
        @click="fetchData"
      >搜索</el-button>
      <!--主表格-->
      <el-table
        ref="table_form"
        v-loading="listLoading"
        class="table"
        :data="list.filter(i=>i.status===2)"
        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: 100px; height: 100px"
              fit="cover"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
            />
          </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.idNumber | 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="进出天数（10天内）" align="center">
          <template slot-scope="scope">
            {{ scope.row.currentDay | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="进出次数（10天内）" align="center">
          <template slot-scope="scope">
            {{ scope.row.currentNum | 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" label="操作区">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="details(scope.row.id)"
            >详情</el-button>
            <el-button
              type="danger"
              size="small"
              @click="addBlacklist(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>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import detailsList from './components/details_list.vue'
import { getPageList, addBlack } from '@/api/exception_model' // secondary package based on el-pagination

export default {
  components: { Pagination, detailsList },
  filters: {
    matchNull(str) {
      if (!str) {
        return '暂无数据'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      // 显示详情
      clickDetails: false,
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          name: null,
          phone: null,
          idNumber: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      userCattleId: null // 详情id
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true
      getPageList(this.page).then((res) => {
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      })
    },
    // 添加到黑名单
    addBlacklist(id) {
      this.$confirm('确定要添加到黑名单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        addBlack(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        })
      })
    },
    // 详情
    details(id) {
      this.userCattleId = id
      this.clickDetails = true
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1
    }
  }
}
</script>
<style scoped>
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 200px;
}
</style>
