<template>
  <confirm-dialog
    ref="dialog"
    size="lg fixed"
    title="部门账号报表"
    confirm-text="下载"
    @confirm="onConfirm"
  >
    <template #default>
      <div class="l-flex__fill l-flex">
        <department-tree
          class="c-sibling-item c-sidebar u-width--xl"
          @change="onGroupChanged"
        />
        <div class="c-sibling-item far">
          <el-checkbox v-model="recursive">
            级联
          </el-checkbox>
        </div>
      </div>
    </template>
  </confirm-dialog>
</template>

<script>
import { getAccountExcel } from '../api.js'

export default {
  name: 'AccountDialog',
  data () {
    return {
      recursive: false
    }
  },
  methods: {
    show () {
      this.recursive = false
      this.$refs.dialog.show()
    },
    onGroupChanged (group) {
      this.$group = group
    },
    onConfirm (done) {
      getAccountExcel({
        departmentId: this.$group.id,
        recursive: this.recursive ? 1 : 0
      }, this.recursive
        ? `${this.$group.name}_全量`
        : `${this.$group.name}`).then(done)
    }
  }
}
</script>
