<template>

  <el-dialog
   :close-on-click-modal="false"
class="scrollbar-dialog"
title="账户列表"
:visible.sync="dialogVisible"
width="600px"
top="15vh"
append-to-body
             @close="closeDialog">
    <div class="content allAccountListDialog">
      <el-card shadow="never">
        <el-row class="tool-common-wrap">
          <el-col :span="12">
            <div class="search-wrap">
              <el-input placeholder="请输入账户名搜索" v-model="searchForm.subject" @keyup.enter.native="search">
                <span slot="append" @click="search"><i class="iconfont icon-sousuo2"></i></span>
              </el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="btn-wrap">
              <!-- <reload /> -->
              <!-- 刷新，这里禁用 -->
            </div>
          </el-col>
        </el-row>
        <el-form
          ref="searchForm"
          class="power-search"
          :model="searchForm"
          v-if="isPowerSearch"
          label-width="120px"
          size="mini">
          <el-row>
            <el-col :span="8">
              <el-form-item label="登录名">
                <el-input clearable v-model="searchForm.empuid" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="显示名称">
                <el-input clearable v-model="searchForm.cnname" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱">
                <el-input clearable v-model="searchForm.email" type="text" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="text-r">
              <el-button type="primary">查询</el-button>
              <el-button type="primary">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :data="tableList"
          @filter-change="filterTag"
          v-loading="tableLoading"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          @selection-change="handleSelectionChange"
          @select="dialogCheck"
          ref="multipleTable"
          style="width: 100%; margin: 15px 0">
          <!-- <el-table-column type="index" label="序号" width="50"></el-table-column> -->
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="账户名称" show-overflow-tooltip />
          <el-table-column prop="username" label="用户名" show-overflow-tooltip />
          <!-- <el-table-column prop="projectId" label="关联项目ID" show-overflow-tooltip>
          </el-table-column> -->
        </el-table>
        <el-pagination
          style="margin-top: 15px"
          :page-size="page.pageSize"
          :current-page.sync="page.pageNum"
          background
          :total="page.total"
          @current-change="requestData" />
      </el-card>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>

</template>

<script>

import { queryStaticAccount } from '@/api/esb_service'
// import UserAdd from './UserAdd'
export default {
  components: {
    // UserAdd
  },
  props: {
    userList: {
      type: Array,
      default() {
        return []
      }
    },
    value: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  watch: {
    userList: {
      handler: function(val) {
        console.log('handler account', val)
      },
      deep: true
    },
    value: {
      handler: function(val) {
        this.dialogVisible = val
        if (val) {
          this.requestData()
        }
      },
      deep: true
    },
    dialogVisible(val) {
      this.$emit('closeUserList', val)
    }
  },
  data() {
    return {
      // 高级搜索框
      isPowerSearch: false,
      searchForm: {},
      tableLoading: false,
      tableList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      checkItem: {},

      //
      multipleSelection: [],
      selectList: []
    }
  },
  mounted() {
  },
  methods: {
    closeDialog() {
      this.$refs.multipleTable.clearSelection()
      this.$emit('closeList')
    },
    // handleSelectionChange (val) {
    //   // 选择
    //   this.multipleSelection = val
    // },
    handleSelectionChange(selection) {
      // if (selection.length > 1) {
      //   this.$refs.multipleTable.clearSelection()
      //   this.$refs.multipleTable.toggleRowSelection(selection.pop())
      // }
      console.log('kkkkk', selection)
      // this.multipleSelection = selection
    },
    dialogCheck(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.multipleSelection = []
        this.multipleSelection.push(row)
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },
    search() {
      this.requestData()
    },
    // 根据选中下拉菜单状态查询数据
    filterTag(filter) {
      this.status = filter.status ? filter.status[0] : ''
      this.requestData()
    },
    requestData() {
      this.tableLoading = true
      queryStaticAccount({
        filters: [
          {
            key: 'name',
            opt: 'LIKE',
            type: 'S',
            value: this.searchForm.subject
          }
        ],
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }).then((rt) => {
        this.tableList = rt.data.list || []
        // 数据回显
        this.$nextTick(() => {
          if (this.userList.length > 0) {
            this.userList.forEach(row => {
              this.tableList.forEach(rows => {
                if (row.id === rows.id) {
                  this.$refs.multipleTable.toggleRowSelection(rows)
                }
              })
            })
          }
        })
        this.page.total = rt.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 确定人员列表
    confirm() {
      console.log('xxxxxxx', this.multipleSelection)
      this.$emit('getuserList', this.multipleSelection)
      this.closeDialog()// 关闭弹窗
    }
  }
}
</script>

<style lang="scss" scoped>
  .allAccountListDialog {
    /deep/ .el-table {
      thead {
        .el-table-column--selection {
          .cell {
            display: none;
          }
        }
      }
    }
  }

</style>
