<template>
  <div>
    <toolbar
      @onSearch="filterData"
    />
    <white-board>
      <el-row class="header" :gutter="20">
        <el-col class="toolbar-txt" :span="18">{{ typeFormat }}：{{ info.totalNum || 0 }}个</el-col>
        <el-col class="flex-end" :span="6">
          <el-button icon="el-icon-plus" type="primary" @click="handleAddItem">新建账户</el-button>
        </el-col>
      </el-row>
      <table-with-page
        :columns="columns"
        :items="items"
        :pagination="pagination"
        :page-change="pageChange"
      >
        <template #btn-box="scope">
          <el-button type="danger" @click="handleDeleteSelected(scope.selected)">删除</el-button>
        </template>
      </table-with-page>
    </white-board>
  </div>
</template>

<script>
import toolbar from './toolbar'

import EMITKEY from '@/const/emitNameKey'
import mxFilterList from '@/mixins/filterList'
import { getList, deletaItems } from '@/model/account'
import { getTagTypeInArr } from '@/utils'
import ROLEKEY from '@/const/roleType'
import { translateLabel } from '@/utils'

export default {
  name: 'AccountPage',

  components: { toolbar },

  mixins: [mxFilterList({
    fetchList: getList // 在下方data再声明一个 fetchList: getList 同等效果
  })],

  props: {
    accountType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      columns: [
        {
          key: 'selection'
        }, {
          key: 'mobile',
          name: '账号手机',
          minWidth: '80'
        }, {
          key: 'nickName',
          name: '账号昵称',
          minWidth: '150'
        }, {
          key: 'roleF',
          name: '角色',
          minWidth: '100',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(ROLEKEY.ROLETAGTYPE, val)
        }, {
          key: 'action',
          name: '操作',
          minWidth: '80',
          render: (h, { row }) => {
            const action = []
            action.push(h('el-button', {
              props: {
                type: 'primary'
              },
              on: {
                click: () => this.view(row)
              }
            }, '编辑'))
            action.push(h('el-button', {
              props: {
                type: 'primary'
              },
              on: {
                click: () => this.view(row, 'roleSelect')
              }
            }, '修改角色'))
            return h('div', action)
          }
        }
      ],
      info: {
        totalNum: 0
      }
    }
  },

  computed: {
    typeFormat() {
      return translateLabel(ROLEKEY.ROLEPAGE, this.accountType)
    }
  },

  watch: {
    accountType: {
      handler(val) {
        this.internalFilterObj['roleCode'] = val
      },
      immediate: true
    }
  },

  created() {
    // this.reload()
    this.bus.$on(EMITKEY.ACCOUNTRELOAD, this.reload)
  },

  beforedestroy() {
    this.bus.$off(EMITKEY.ACCOUNTRELOAD, this.reload)
  },
  methods: {
    loadCallBack(source) {
      this.info.totalNum = source.total
    },

    handleAddItem() {
      this.$accountItemModal({
        modalType: 'add'
      })
    },

    async handleDeleteSelected(selected) {
      if (selected.length === 0) {
        this.$message.error('请至少选择一条数据~')
        return false
      }
      const { success, msg } = await deletaItems({
        data: selected.map(x => x.id)
      })
      if (success) {
        this.$message.success('删除成功~')
        this.reload()
      } else {
        this.$message.error(msg)
      }
    },

    view(row, modalType = 'edit') {
      this.$accountItemModal({
        id: row.id,
        modalType: modalType
      })
    }
  }
}
</script>

<style scoped>
.header {
  padding: 4px 20px 6px 20px;
}
.toolbar-txt {
  font-size: 13px;
  padding: 5px;
  line-height: 1.7;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
