<template>
  <el-dialog
    append-to-body
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="65%"
    @close="close"
  >
    <div class="store-employee-department-container">
      <vab-query-form>
        <vab-query-form-left-panel :span="24">
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="handleEdit(null, 0)"
          >
            {{ __('添加') }}
          </el-button>
        </vab-query-form-left-panel>
      </vab-query-form>

      <el-table
        v-loading="listLoading"
        border
        :data="list"
        height="500"
        row-key="department_id"
      >
        <el-table-column align="center" :label="__('操作')" width="200">
          <template #default="{ row }">
            <el-button type="text" @click="handleEdit(null, row.department_id)">
              {{ __('新增') }}
            </el-button>
            <el-button type="text" @click="handleEdit(row, null)">
              {{ __('编辑') }}
            </el-button>
            <el-button type="text" @click="handleDelete(row)">
              {{ __('删除') }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="__('部门编号')"
          prop="department_id"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="__('上级部门')"
          prop="department_parent_id"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="__('权限组名称')"
          prop="department_name"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          align="center"
          :formatter="formatTime"
          :label="__('创建时间')"
          prop="department_add_time"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          align="center"
          :label="__('店铺编号')"
          prop="store_id"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="__('是否启用')"
          prop="department_enable"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.department_enable"

              :active-value="1"

              :inactive-value="0"
              @change="sChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :formatter="formatBuildin"
          :label="__('系统内置')"
          prop="department_buildin"
          show-overflow-tooltip
        />
      </el-table>
      <edit ref="edit" @fetch-data="fetchData" />
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'

  import { doDelete, doEdit, getList } from '@/api/store/employee/department'
  import Edit from './StoreEmployeeDepartmentEdit'
  import { renderTime } from '@/utils/date'

  export default {
    name: 'SetTable',
    components: { Edit },
    data() {
      return {
        title: this.__('部门设置'),
        list: [],
        listLoading: true,
        dialogFormVisible: false,
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      formatBuildin(row) {
        return row.department_buildin === 1 ? this.__('是') : this.__('否')
      },
      showTable() {
        this.dialogFormVisible = true
      },
      handleEdit(row, department_id) {
        if (row || department_id == null) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit(department_id)
        }
      },
      formatTime(row) {
        return renderTime(row.department_add_time)
      },
      handleDelete(row) {
        this.$baseConfirm(this.__('你确定要删除当前项吗'), null, async () => {
          const { msg, status } = await doDelete({
            department_id: row.department_id,
          })
          if (200 == status) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
          await this.fetchData()
        })
      },
      close() {
        this.dialogFormVisible = false
      },
      async sChange(row) {
        const param = {
          department_id: row.department_id,
          department_enable: row.department_enable,
        }

        const { msg, status } = await doEdit(param)
        this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList()
        this.list = data
        this.listLoading = false
      },
    },
  }
</script>
