<template>
  <a-card title="账号列表">
    <a-button
      slot="extra"
      type="primary"
      size="small"
      @click="handleAdd"
    >
      新增账号
    </a-button>

    <a-spin :spinning="loading">
      <a-table
        :columns="columns"
        :data-source="data"
        :row-key="record => record.id"
        :pagination="pagination"
        @change="handlePageChange"
      >
        <template
          slot="operation"
          slot-scope="text, record"
        >
          <a-button
            size="small"
            type="primary"
            @click="handleEdit(record)"
          >
            编辑
          </a-button>
          <a-popconfirm
            title="确定要删除这个账号吗？"
            @confirm="handleDelete(record.id)"
          >
            <a-icon
              slot="icon"
              type="question-circle-o"
              style="color: red"
            />
            <a-button
              size="small"
              type="danger"
            >
              删除
            </a-button>
          </a-popconfirm>
        </template>

        <template
          slot="roles"
          slot-scope="roles"
        >
          <a-tag
            v-for="role in roles"
            :key="role.id"
            color="green"
          >
            {{ role.nick_name }}
          </a-tag>
        </template>
      </a-table>
    </a-spin>

    <!-- 新增账号 -->
    <AddModal
      :role-list="roleList"
      v-model="addVisible"
      @update="getAccountList"
    >
    </AddModal>

    <!-- 编辑账号 -->
    <EditModal
      v-model="editVisible"
      :role-list="roleList"
      :form-data="curentItem"
      @update="getAccountList"
    ></EditModal>
  </a-card>
</template>

<script>
import { getAccountList, deleteAccount } from '@/api/systemSetting/account'
import { getRoleList } from '@/api/systemSetting/role'

import EditModal from './account/EditModal'
import AddModal from './account/AddModal'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '昵称',
    dataIndex: 'nick_name',
    key: 'nick_name'
  },
  {
    title: '手机',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '角色',
    dataIndex: 'roles',
    key: 'roles',
    scopedSlots: { customRender: 'roles' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    AddModal,
    EditModal
  },
  created () {
    this.getAccountList()
    this.getRoleList()
  },
  data () {
    return {
      columns,
      data: [],
      roleList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      loading: false,
      addVisible: false,
      editVisible: false,
      // 当前账号对象
      curentItem: null
    }
  },
  methods: {
    handlePageChange (page) {
      this.pagination.pageNum = page.current
      this.getAccountList()
    },
    handleDelete (id) {
      deleteAccount({ id }).then(res => {
        this.$message.success('删除成功')
        this.getAccountList()
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    handleEdit (data) {
      this.editVisible = true
      this.curentItem = data
    },
    getAccountList () {
      this.loading = true
      getAccountList(this.pagination.pageNum, this.pagination.pageSize).then(res => {
        this.loading = false
        this.pagination.total = res.total
        this.data = res.list
      })
    },
    getRoleList () {
      getRoleList().then(res => {
        this.roleList = res.extraInfo.map(item => {
          return {
            id: item.id,
            name: item.name,
            nick_name: item.nick_name
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.offSale-btn{
  color: #F56C6C
}
.onSale-btn{
  color: #67C23A
}

</style>
