<template>
  <div style="padding: 20px;">
    <el-header>
      <el-form :inline="true" :model="searchForm" ref="queryForm" size="small">
        <el-form-item prop="phone">
          <el-input v-model="searchForm.phone" placeholder="请输入账号" v-no-whitespace></el-input>
        </el-form-item>
        <el-form-item prop="userName">
          <el-input v-model="searchForm.userName" placeholder="请输入姓名" v-no-whitespace></el-input>
        </el-form-item>
        <el-form-item prop="postId">
          <el-select v-model="searchForm.postId" placeholder="请选择岗位">
            <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="deptId" style="width: 20%">
          <treeselect
            v-model="searchForm.deptId"
            :options="deptOptions"
            :show-count="true"
            :clearable="true"
            placeholder="请选择归属部门"
            :noResultsText="'未找到相关部门！'"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-container style="display: flex;flex-direction: column">
      <el-table :data="tableList" v-loading="loading" fit highlight-current-row style="width: 100%">
        <!-- 多选 -->
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="indexContinuous(searchForm.pageNum, searchForm.pageSize)"
        />
        <el-table-column
          v-for="(column, index) in tableColumns"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          align="center"
        >
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNum"
        :limit.sync="searchForm.pageSize"
        @pagination="getList"
      />
    </el-container>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { indexContinuous } from '@/utils/bonus'
import { deptTreeSelect, getUser } from '@/api/system/user'
import { getSnapshotList } from '@/api/snapshot/snapshot'

export default {
  components: { Treeselect },
  data() {
    return {
      loading:true,
      searchForm: {
        pageSize: 10,
        pageNum: 1,
        phone: '',
        userName: '',
        deptId: undefined,
        postId: ''
      },
      total: 0,
      deptOptions: [],
      postOptions: [],
      tableList: [],
      tableColumns: [
        { label: '账号', prop: 'phone' },
        { label: '姓名', prop: 'userName' },
        { label: '部门', prop: 'deptName' },
        { label: '角色', prop: 'roleName' },
        { label: '随手拍次数', prop: 'num' },
        { label: '转违章成功次数', prop: 'violationNum' },
        { label: '转隐患成功次数', prop: 'hiddenTroubleNum' }
      ]
    }
  },
  created() {
    this.getPostOptions()
    this.getDeptOptions()
    this.getList()
  },
  methods: {
    indexContinuous,
    // 查询
    getList() {
      this.loading = true
      getSnapshotList(this.searchForm).then(response => {
        this.loading = false
        this.tableList = response.rows;
        this.total = response.total;
      });
    },
    getPostOptions() {
      getUser().then(response => {
        console.log('getPostOptions', response)
        this.postOptions = response.posts;
      });
    },
    getDeptOptions() {
      deptTreeSelect({type: "-1"}).then(response => {
        console.log('getDeptOptions', response)
        this.deptOptions = response.data;
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.getList()
    },
    handleDetails(row) {
      this.$router.push({ path: '/snapshot/snapshotDetails', query: { snapshotId: row.snapshotId } })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
