<template>

  <el-dialog
    class="scrollbar-dialog"
    title="授权管理"
    :visible.sync="dialogVisible"
    width="600px"
    top="15vh"
    append-to-body
    @close="closeDialog">
    <div class="content">
      <el-card shadow="never">
        <el-row class="tool-common-wrap">
          <el-col :span="12">
            <div class="search-wrap">
              <el-input placeholder="请输入账户名称搜索" v-model="searchDate" @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">
              <el-button type="primary" icon="el-icon-plus" circle @click="openAllList"></el-button>
            </div>
          </el-col>
        </el-row>

      </el-card>
    </div>

    <div class="user-list">
      <div class="tableWrap">
        <el-table
          ref="singleTable"
          :data="userList"
          v-loading="tableLoading"
          highlight-current-row
          style="width: 100%; margin: 15px 0"
          size="mini">
          <!-- <el-table ref="singleTable" :data="userList" v-loading="tableLoading" highlight-current-row
            @current-change="handleCurrentChange" style="width: 100%; margin: 15px 0" size="mini"> -->
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="name" label="账户名称" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="username" label="用户名" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="60" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="删除" :enterable="false" placement="top">
                <el-button
                  class="icon-button"
                  type="text"
                  icon="el-icon-delete"
                  @click.native.prevent="handleDelete(scope.row)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          :page-size="page.pageSize"
          :current-page.sync="page.pageNum"
          background
          @current-change="getDataCurrent()"
          :total="page.total" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
              </span>

    <allUserListDialog
v-model="allListVisible"
:userList="userList"
@closeList="closeList"
                       @getuserList="getuserList"></allUserListDialog>
  </el-dialog>

</template>
<script>
import allUserListDialog from '@/views/esb_service/business_service/allAccountListDialog'

// import { getServicePermission } from '@/api/esb_service'
import { getAccountDetail } from '@/api/esb_service'

import { createNamespacedHelpers } from 'vuex'

const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  components: {
    allUserListDialog
  },
  data() {
    return {
      userList: [],
      dialogVisible: false,
      tableLoading: false,
      page: {
        pageSize: 99,
        pageNum: 1,
        total: 0
      },
      // 搜索关键字
      searchDate: '',

      // 所有用户
      allListVisible: false

    }
  },
  props: {
    value: {
      type: Boolean,
      default: true
    },
    userListOld: {
      type: Array,
      default() {
        return []
      }
    },
    id: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      if (val == true) {
        // 打开后自动执行，获取人员列表
        if (this.userListOld.length > 0) {
          this.userList = this.userListOld
        } else {
          this.getServiceList(this.id)
        }
      }
      this.$emit('closeUserList', val)
    },
    id(val) {
      this.userList = []
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeUserList', false)
    },
    // 搜索
    search() {
    },
    // 删除
    handleDelete(item) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.userList.some((tItem, i) => {
          if (tItem.id == item.id) {
            this.userList.splice(i, 1)
            return true
          }
        })
      }).catch(() => {
      })
    },
    // 确定人员列表
    confirm() {
      this.$emit('getCheckeduserList', this.userList)
    },
    // 子组件回调
    openAllList() {
      this.allListVisible = true
    },
    closeList() {
      this.allListVisible = false
    },
    // 后台获取人员列表
    getServiceList(id) {
      if (!id) return
      this.tableLoading = true
      getAccountDetail(id).then((rt) => {
        this.tableLoading = false
        if (rt.status === '200' && rt.data) {
          // rt.data.map((item) => {
          //   item.cnname = item.name
          // })
          // if (rt.data.length > 0) {
          this.userList = []
          this.userList.push(rt.data)
          console.log('account', this.userList)
          // }
        }
      })
        .catch(() => {
          this.tableLoading = false
        })
    },

    // 修改后的人员列表
    getuserList(list) {
      // return
      if (list.length < 1) {
        // 不做操作

      } else {
        this.userList = list
        var that = this
        list.map((item) => {
          let flag = true
          that.userList.map((uItem) => {
            if (item.id == uItem.id) {
              flag = false
            }
          })
          if (flag) {
            that.userList.push(item)
          }
        })
      }
    }
  }
}
</script>
<style lang="sass" scoped>

</style>
