<template>
    <div style='display: flex; flex-direction: column;flex-grow: 1; flex-shrink: 1;'>
        <table-page-template>
            <div slot='form' class='condition'>
                <p>
                    <el-input
                      v-model.trim='searchValue'
                      class='margin-right'
                      style='width: 300px; margin-right: 10px;'
                      placeholder='姓名、联系电话、登录名、备注'
                      @change='searchChange'
                    ></el-input>
                </p>

              <!-- <el-button @click='refresh' style="margin-left: 10px;">&nbsp;&nbsp;&nbsp;刷新&nbsp;&nbsp;&nbsp;</el-button> -->

              <!-- <el-button type='danger' @click='someDel'>批量删除</el-button> -->
            </div>

          <div slot='table' style="border: 1px solid #dfe6ec">
            <p style="overflow: hidden;">
              <el-button style="margin: 10px;float: right;" @click='addUser'>添加</el-button>
            </p>
            <el-table
              height="710"
              :data='tableData'
              border
              tooltip-effect='dark'
              style='width: 100%;'
              v-loading='loading'
              @selection-change='handleSelectionChange'
            >
              <!-- <el-table-column type='selection' width='55' align='center'></el-table-column> -->
              <el-table-column prop='UserName' label='姓名' width='100' header-align='center'
                               align='center'></el-table-column>
              <el-table-column prop='Phone' label='联系电话/登录名' width='120' header-align='center'
                               align='center'></el-table-column>
              <el-table-column prop='Note' label='备注' header-align='center'></el-table-column>
              <el-table-column label='操作' width='150' header-align='center' class="btn">
                <template slot-scope='scope'>
                  <el-button type='primary' plain size='mini' @click='editUser(scope.row)'>编辑</el-button>
                  <el-button type='danger' plain size='mini' @click='del(scope.row)'>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <base-pagination :currentPages='pageNum' :total='total' @pageChanged='pageChanged'
                           slot='pagination'></base-pagination>
        </table-page-template>
        <saga-edit ref='edit' @refresh='refresh'></saga-edit>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {delUser, getUser} from '@/api/scan/request'
  //component
  import SagaEdit from './Edit'

  export default {
    name: 'floor-user',
    data() {
      return {
        searchValue: '',
        loading: false,
        tableData: [],
        checkedArr: [],
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    },
    components: {
        SagaEdit
    },
    computed: {
        ...mapGetters('layout', ['projectId', 'userId'])
    },
    methods: {
      pageChanged(page, size) {
        this.pageNum = page
        this.pageSize = size
        this.getUserList()
      },
      refresh() {
        this.getUserList()
      },
      searchChange() {
        this.pageNum = 1
        this.getUserList()
      },
      addUser() {
        this.$refs['edit'].show()
      },
      editUser(row) {
        console.log(row,'===============')
        this.$refs['edit'].show(row)
      },
      del(row) {
        console.log(row, 'row')
        this.delUser(row)
      },
      handleSelectionChange(arr) {
        this.checkedArr = arr.map(ele => ele.UserId)
      },
      // someDel() {
      //     if (this.checkedArr.length < 1) {
      //         this.$message({
      //             message: '请至少选择一条用户',
      //             type: 'warning'
      //         })
      //     } else {
      //         this.delUser(this.checkedArr)
      //     }
      // },
      delUser(row) {
        this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let {CreateTime, LastUpdate, Statistics, ...param} = row
            delUser([param], res => {
              this.$message.success('删除成功')
              this.refresh()
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      },

      getUserList() {
        this.loading = true
        let param = {
          projectId: this.projectId,
          PageNumber: this.pageNum,
          PageSize: this.pageSize,
        }
        getUser(param, res => {
          this.loading = false
          this.tableData = res.Content
          this.total = res.Count
        })

      },
      init() {
        this.getUserList()
      }
    },
    created() {
        this.init()
    },
    watch: {
        projectId() {
            this.searchValue = ''
            this.getUserList();
        }
    }
}
</script>

<style scoped lang='less'>
.condition {
    margin: 10px;
}
</style>
