<template>
  <div>
    <!-- 二级导航栏 start-->
    <!-- <el-toolbar>
      <el-button @click="removeUser(selectedRows)" :disabled="selectedRows.length === 0" type="danger">
        <i class="fa fa-remove"></i>删除</el-button>
    </el-toolbar> -->
    <!-- 二级导航栏 end-->
    <!-- tab栏 start -->
    <div class="padding-vertical-max">
      <el-table ref="datatable" :data-read-url="getData" :page-size="10" :data="user" tooltip-effect="dark" style="width: 100%" @selection-change="onSelectionChange">
        <el-table-column type="index" width="55" label="序号"> </el-table-column>
        <!-- <el-table-column type="selection" width="40"> </el-table-column> -->
        <el-table-column prop="userName" label="用户名" min-width="18%"> </el-table-column>
        <el-table-column prop="realName" label="真实姓名" min-width="18%"> </el-table-column>
        <el-table-column prop="openID" label="OpenID" min-width="18%"> </el-table-column>
        <el-table-column prop="nickName" label="微信昵称" min-width="18%"> </el-table-column>
        <el-table-column prop="addTime" label="添加时间" min-width="25%">
          <template slot-scope="scope">
            {{scope.row.addTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right" min-width="15%">
          <template slot-scope="scope">
            <el-button @click.stop="removeUser([scope.row])" type="text" title="删除" priv="Weixin.Manage.BindUser_Delete">
              <i class="fa fa-times f16"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      user: [], // 微信用户
      selectedRows: []// 微信用户多选框选中的元素
    }
  },
  methods: {
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 删除用户
    async removeUser(rows) {
      if (rows.length === 0) {
        this.$alert('请选择需要删除的用户', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let obj = {
          data: rows
        }
        let res = await axios.put('/ui/wechat/users/delete', obj)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.getUserData()
        }
      } catch (e) {

      }
    },
    getData() {
      return [
        '/ui/wechat/users',
        {
          params: {
            weiXinID: this.$route.params.weiXinID
          }
        }
      ]
    },
    // 加载微信用户数据
    async getUserData() {
      this.$refs.datatable.getData()
    }
  }
}
</script>
