<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="page-loading" class="page-management-account">
    <SearchTable
      ref="searchTableRef"
      v-model="formData"
      title="账户管理"
      @reset="handleReset"
      @submit="handleSubmit"
    >
      <template slot="slot-form">
        <el-col :span="isTablet ? 12 : 6" class="mb-16">
          <el-form-item label="组织名称" label-width="68px">
            <el-input :value="organName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6" class="mb-16">
          <el-form-item label="用户姓名" label-width="68px">
            <el-input v-model="formData.username" placeholder="请输入用户姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6" class="mb-16">
          <el-form-item label="用户名" label-width="68px">
            <el-input v-model="formData.account" placeholder="请输入用户名" />
          </el-form-item>
        </el-col>
      </template>
      <template slot="slot-action-bar">
        <el-button type="primary" icon="el-icon-plus" @click="handleOpenUpdateAccountDialog('add')">新增账户</el-button>
      </template>
      <template slot="slot-table">
        <el-table-column prop="userName" label="用户姓名" min-width="120px" />
        <el-table-column prop="account" label="用户名" min-width="120px" />
        <el-table-column prop="phone" label="手机号" min-width="140px" />
        <el-table-column prop="roleName" label="角色" min-width="120px" />
        <el-table-column prop="createTime" label="创建时间" sortable width="180px" />
        <el-table-column label="用户状态" min-width="120px">
          <template slot-scope="scope">
            <div class="status-wrap">
              <i :class="scope.row.status == 0 ? 'red' : 'green'" class="status-point" />
              {{ ['未启用', '已启用'][scope.row.status] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="106px" fixed="right" min-width="100px">
          <template slot-scope="scope">
            <!-- <el-button v-if="scope.row.status === 0" type="text" @click="handleUnFreeze(scope.row)">启用</el-button>
            <el-button v-else type="text" @click="handleFreeze(scope.row)">禁用</el-button>
            <span class="separator" /> -->
            <el-button type="text" @click="handleOpenUpdateAccountDialog('edit', scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </template>
    </SearchTable>
    <!-- 操作用户弹窗 start -->
    <UpdateAccount :visible.sync="updateAccountDialog.show" :type="updateAccountDialog.type" :data="updateAccountDialog.data" @refresh="handleRefresh" />
    <!-- 操作用户弹窗 end -->
  </div>
</template>

<script>
import SearchTable from '@/components/SearchTable'
import UpdateAccount from './components/UpdateAccount.vue'
import { queryUserEnterpriseAccount, unfreezeUserEnterpriseAccount, frozenUserEnterpriseAccount } from '@/api/management'

export default {
  name: 'BaseManagement',
  components: { SearchTable, UpdateAccount },
  data() {
    const { organName } = this.$store.getters
    return {
      organName: this.$route.query.organName || organName,
      fullscreenLoading: false,
      formData: {
        username: '',
        account: ''
      },
      // 更新账户弹框
      updateAccountDialog: {
        show: false,
        type: 'add',
        data: {}
      },
      isTablet: window.OS.isTablet
    }
  },
  methods: {
    /**
     * 执行提交方法
     * @param formData 接口请求数据
     * @param callback 回调方法
     */
    async handleSubmit(formData, callback) {
      // 组织id
      const { organId } = this.$store.getters
      // 查询接口
      const { list, totalCount } = await queryUserEnterpriseAccount({
        organId,
        ...this.$route.query,
        ...formData
      })
      // 执行回调
      callback({ list, totalCount })
    },

    /**
     * 刷新表格数据
     */
    handleRefresh() {
      // 重新刷新页面
      this.$refs.searchTableRef.handleSubmit()
    },

    /**
     * 打开编辑账户弹框
     * @param type 打开弹框类型
     * @param row 当前行数据
     */
    handleOpenUpdateAccountDialog(type = 'add', row = {}) {
      // 优先取当前路由中的组织id
      const { organId } = this.$route.query
      // 新增、编辑账户弹框
      this.updateAccountDialog = {
        show: true,
        type,
        data: { roleCode: '', organId, ...row }
      }
    },

    /**
     * 经销商-启用
     * @param row 当前行数据
     */
    async handleUnFreeze(row) {
      // 开始请求接口数据
      await unfreezeUserEnterpriseAccount({ uuid: row.uuid })
      // 刷新页面数据
      this.handleRefresh()
    },

    /**
     * 经销商-禁用
     * @param row 当前行数据
     */
    async handleFreeze(row) {
      // 开始请求接口数据
      await frozenUserEnterpriseAccount({ uuid: row.uuid })
      // 刷新页面数据
      this.handleRefresh()
    },

    /**
     * 点击重置
     */
    handleReset() {
      // 清空数据
      this.formData.username = ''
      this.formData.account = ''
      // 刷新页面数据
      this.handleRefresh()
    }
  }
}
</script>

<style lang="scss">
.page-management-account {
  .mb-16 {
    margin-bottom: 16px;
  }
  .status-wrap {
    align-items: center;
    display: flex;
    .status-point {
      border-radius: 3px;
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 8px;
      &.green {
        background-color: #25C343;
      }
      &.red {
        background-color: #FF4D4F;
      }
    }
  }
  .separator {
    background: #DCDFE6;
    display: inline-block;
    width: 1px;
    height: 14px;
    margin: 0 2px -2px;
  }
}
</style>
