<template>
  <div class="management-page">
    <SearchBar
      class="search-bar"
      @query="query"
      @addManagement="addManagement"
    />
    <Container :data-list="dataList" @fetch="fetch" />
    <Dialog
      title="新建商家"
      :visible.sync="dialogVisible"
      :fullscreen="!true"
      width="55%"
    >
      <AddDialog @close="closeDialog" @addManagement="addManagement" />
    </Dialog>
  </div>
</template>
<script>
import { Dialog } from 'element-ui'
import SearchBar from '@/components/Management/SearchBar'
import Container from '@/components/Management/Container'
import AddDialog from '@/components/Management/AddDialog'
import Management from '@/api/Management.js'
export default {
  components: {
    Dialog,
    SearchBar,
    Container,
    AddDialog
  },
  data() {
    return {
      dialogVisible: false,
      dataList: {},
      params: {
        current: 1,
        map: {},
        model: {
          name: '',
          code: '',
          duty: '',
          status: ''
        },
        order: 'descending',
        size: 10,
        sort: 'id'
      }
    }
  },
  created() {
    this.getManagementList()
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false
    },
    query(params) {
      this.params.model = Object.assign(this.params.model, params)
      this.getManagementList()
    },
    addManagement() {
      this.dialogVisible = !this.dialogVisible
    },
    async getManagementList() {
      const res = await Management.getAllTenant(this.params)
      const resData = res.data
      this.dataList = resData.data || {}
    },
    fetch(v) {
      Object.assign(this.params, v)
      console.log(this.params, v)
      this.getManagementList()
    }
  }
}
</script>
<style lang="scss" scoped>
.management-page {
  /deep/ .el-dialog{
    margin-top: 50px !important;
  }
}
</style>
