<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="page-management-dealer" element-loading-spinner="page-loading">
    <SearchTable
      ref="searchTableRef"
      v-model="formData"
      title="经销商管理"
      @reset="handleReset"
      @submit="handleSubmit"
    >
      <template slot="slot-form">
        <el-col :span="8">
          <el-form-item label="经销商名称" label-width="82px">
            <el-input v-model="formData.distributorName" placeholder="请输入经销商名称" />
          </el-form-item>
        </el-col>
      </template>
      <template slot="slot-action-bar">
        <el-button type="primary" icon="el-icon-plus" @click="handleOpenUpdateDealerDialog('add')">新增经销商</el-button>
      </template>
      <template slot="slot-table">
        <el-table-column prop="distributorName" label="经销商名称" />
        <el-table-column prop="distributorAdminUserName" label="管理员姓名" width="160px" />
        <el-table-column prop="distributorAdminUserAccount" label="管理员账号" />
        <el-table-column prop="phone" label="管理员手机" width="130px" />
        <el-table-column prop="createTime" label="时间" sortable width="180px" />
        <el-table-column label="状态" 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="160px" fixed="right">
          <template slot-scope="scope">
            <div style="white-space: nowrap;">
              <!-- <el-button v-if="scope.row.status === 0" type="text" @click="handleUnFreeze(scope.row)">启用</el-button>
              <el-button v-if="scope.row.status === 1" type="text" @click="handleFreeze(scope.row)">禁用</el-button>
              <span class="separator" /> -->
              <el-button type="text" @click="handleOpenUpdateDealerDialog('edit', scope.row)">编辑</el-button>
              <span class="separator" />
              <el-dropdown @command="command => handleDropDownCommand(command, scope.row)">
                <el-button type="text">
                  更多<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown" class="ui-dropdown">
                  <el-dropdown-item command="CHANGE_ADMIN">变更管理员</el-dropdown-item>
                  <el-dropdown-item command="ACCOUNT_MANAGE">账户管理</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </template>
    </SearchTable>
    <!-- 添加/编辑经销商 start -->
    <UpdateDistributor :visible.sync="updateDealerDialog.show" :type="updateDealerDialog.type" :data="updateDealerDialog.data" @refresh="handleRefresh" />
    <!-- 添加编辑经销商 end -->
    <!--变更管理员弹框 start -->
    <ChangeAdmin :visible.sync="changeAdminDialog.show" :data="changeAdminDialog.data" @refresh="handleRefresh" />
    <!-- 变更管理员弹框 end -->
  </div>
</template>

<script>
import UpdateDistributor from './components/UpdateDistributor'
import ChangeAdmin from './components/ChangeAdmin'
import SearchTable from '@/components/SearchTable'
import {
  queryUserEnterpriseDistributor,
  unfreezeUserEnterpriseDistributor,
  frozenUserEnterpriseDistributor
} from '@/api/management'

export default {
  name: 'DealerManagement',
  components: { SearchTable, UpdateDistributor, ChangeAdmin },
  data() {
    return {
      fullscreenLoading: false,
      // 弹出框内双向绑定的数据
      formData: {
        distributorName: ''
      },
      // 添加或编辑经销商的弹框数据
      updateDealerDialog: {
        show: false,
        type: 'add',
        data: {}
      },
      // 变更管理员弹框
      changeAdminDialog: {
        show: false,
        data: {}
      }
    }
  },
  methods: {
    /**
     * 查询经销商数据
     * @param formData 当前接口请求数据
     * @param callback 回调方法，渲染页面使用
     */
    async handleSubmit(formData, callback) {
      // 查询接口数据
      const { list, totalCount } = await queryUserEnterpriseDistributor(formData)
      // 执行回调方法
      callback({ list, totalCount })
    },

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

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

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

    /**
     * 打开编辑或新增管理员弹框
     * @param type 类型
     * @param row 当前行数据
     */
    handleOpenUpdateDealerDialog(type = 'edit', row = {}) {
      // 更新管理员弹框
      this.updateDealerDialog = {
        show: true,
        type,
        data: { ...row }
      }
    },

    /**
     * 打开更换管理员弹框
     * @param row 当前行数据
     */
    handleOpenChangeAdminDialog(row) {
      this.changeAdminDialog = {
        show: true,
        data: row
      }
    },

    /**
     * 下拉触发命令
     * @param command 当前命令
     * @param row 当前行数据
     */
    handleDropDownCommand(command, row) {
      // 根据命令做操作
      switch (command) {
        case 'CHANGE_ADMIN':
          this.handleOpenChangeAdminDialog(row)
          break
        case 'ACCOUNT_MANAGE':
          this.$router.push({
            name: 'UserManagement',
            query: {
              organId: row.id,
              organName: row.distributorName
            }
          })
          break
      }
    },

    /**
     * 如果点击重置
     */
    handleReset() {
      // 重置数据
      this.formData.distributorName = ''
      // 刷新页面数据
      this.handleRefresh()
    }
  }
}
</script>

<style lang="scss">
.page-management-dealer {
  .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;
  }
}
.ui-dropdown {
  padding: 4px 8px;
  .el-dropdown-menu__item {
    color: #2A68FF;
    &:hover {
      background: rgba(236, 243, 255, 0.5);
      border-radius: 2px;
    }
  }
}
</style>
