<template>
  <el-dialog :visible.sync="crud.tempShow.user" title="选择用户" width="60%">
    <!--用户数据-->
    <el-row>
      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <!--工具栏-->
        <div class="head-container">
          <!-- 搜索 -->
          <el-input
            v-model="code"
            type="text"
            size="small"
            placeholder="输入名称或者邮箱搜索"
            style="width: 200px;"
            class="filter-item"
          />
          <span>
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getUsers()">搜索</el-button>
            <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="17">
        <el-table
          ref="multipleTable"
          v-loading="crud.loading"
          :data="users"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
          <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
          <el-table-column :show-overflow-tooltip="true" prop="id" label="id" />
          <el-table-column prop="gender" label="性别" />
          <el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="电话" />
          <el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
          <el-table-column :show-overflow-tooltip="true" prop="dept" label="部门">
            <template slot-scope="scope">
              <div>{{ scope.row.dept.name }}</div>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="createTime" width="135" label="创建日期" />
        </el-table>
        <!--分页组件-->
        <el-pagination
          :page-size.sync="size"
          :total="total"
          :current-page.sync="page"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="getUsers()"
          @current-change="getUsers()"
        />
      </el-col>
      <el-col :span="6" :push="1">
        <el-card style="height: 100%;">
          <div>您已选择:</div>
          <div>{{ checkInfo }}</div>
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-row>
        <el-col :xs="10" :sm="10" :md="10" :lg="15" :xl="15">
          <el-button style="" class="filter-item" @click="toggleSelection()">取消选择</el-button>
          <el-button class="filter-item" style="margin-left:20% ;" @click="selected()">选择</el-button>
        </el-col>
      </el-row>

    </div>
    </el-col></el-dialog>
</template>
<script>
import crudUser from '@/api/system/user'
import { mapGetters } from 'vuex'
import CRUD, { crud } from '@crud/crud'

export default {
  mixins: [crud()],
  // 数据字典
  dicts: ['user_status'],
  cruds() {
    return CRUD({ title: '用户', url: 'api/users', tempBtnShow: {
      user: true
    }, crudMethod: { ...crudUser }})
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      users: [],
      multipleSelection: crud.selectData || [],
      checkInfo: '',
      code: '',
      size: 0,
      page: 0,
      total: 0

    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  watch: {
    'crud.selectData': {
      handler: function(datainfo) {
        this.$nextTick(function() {
          this.toggleSelection()
          this.users.forEach((item, i) => {
            datainfo.forEach(row => {
              if (this.users[i].id === row * 1) {
                this.$refs.multipleTable.toggleRowSelection(this.users[i])
                this.setCheckInfo()
              }
            })
          })
        })
      },
      deep: true
    },
    multipleSelection: {
      handler: function() {
        this.setCheckInfo()
      }
    }
  },
  created() {
    console.info('params', this.user)
    crudUser.getUsers().then(res => {
      this.total = res.totalElements
      this.users = res.content.map(function(obj) {
        return obj
      })
    })
  },
  methods: {
    getUsers() {
      crudUser.getUsers({ blurry: this.code, page: this.page, size: this.size }).then(res => {
        this.total = res.totalElements
        this.users = res.content.map(function(obj) {
          return obj
        })
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    selected() {
      console.log(this.$refs.multipleTable.selection)
      this.$emit('on-change', this.$refs.multipleTable.selection, this.crud.openId)
      this.$refs.multipleTable.clearSelection()
      this.crud.doCloseUser()
    },
    setCheckInfo() {
      var checkedUsers = this.$refs.multipleTable.selection
      var info = ''
      checkedUsers.forEach(row => {
        info += row.username + ','
      })
      this.checkInfo = info.substring(0, info.length - 1)
    }
  }
}
</script>
