LotteryAdmin/src/views/agent/index.vue

<template>
  <div class="agent-page">
    <div class="agent-panel">
      <el-form
        ref="queryForm"
        :model="query"
        class="agent-search"
        inline
        size="small"
      >
        <el-form-item label="代理账号" prop="agent_account">
          <el-input
            v-model="query.agent_account"
            placeholder="代理账号"
            clearable
          />
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-input
            v-model="query.real_name"
            placeholder="真实姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="账号状态" prop="status">
          <el-select v-model="query.status" placeholder="账号状态" clearable>
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间" prop="date_range">
          <el-date-picker
            v-model="query.date_range"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="disableFutureDate"
          />
        </el-form-item>
        <el-form-item class="search-actions">
          <el-button @click="handleSearch">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">
            新增
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        height="calc(100vh - 255px)"
        class="agent-table"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="id" label="ID" width="58" align="center" />
        <el-table-column prop="agent_account" label="代理账号" min-width="120" align="center" />
        <el-table-column prop="invite_code" label="邀请码" min-width="120" align="center" />
        <el-table-column prop="real_name" label="真实姓名" min-width="120" align="center" />
        <el-table-column prop="parent_agent" label="上级代理" min-width="100" align="center" />
        <el-table-column prop="balance" label="账户余额" min-width="100" align="center">
          <template slot-scope="{ row }">
            {{ formatMoney(row.balance) }}
          </template>
        </el-table-column>
        <el-table-column prop="deposit_fee_rate" label="存款手续费比例" min-width="130" align="center">
          <template slot-scope="{ row }">
            {{ formatRate(row.deposit_fee_rate) }}
          </template>
        </el-table-column>
        <el-table-column prop="withdraw_fee_rate" label="取款手续费比例" min-width="130" align="center">
          <template slot-scope="{ row }">
            {{ formatRate(row.withdraw_fee_rate) }}
          </template>
        </el-table-column>
        <el-table-column prop="pc_agent_link" label="电脑代理链接" min-width="130" align="center">
          <template slot-scope="{ row }">
            <div class="link-cell">{{ row.pc_agent_link || '--' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="h5_agent_link" label="手机代理链接" min-width="130" align="center">
          <template slot-scope="{ row }">
            <div class="link-cell">{{ row.h5_agent_link || '--' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="账号状态" width="100" align="center">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#20c76a"
              inactive-color="#dcdfe6"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="login_status" label="登录状态" width="90" align="center">
          <template slot-scope="{ row }">
            <el-tag
              size="mini"
              :type="row.login_status === 1 ? 'success' : 'info'"
              effect="plain"
            >
              {{ row.login_status === 1 ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="login_time" label="登录时间" min-width="150" align="center">
          <template slot-scope="{ row }">
            {{ row.login_time || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template slot-scope="{ row }">
            <div class="row-actions">
              <el-button type="text" size="mini" @click="handleEdit(row)">修改</el-button>
              <el-button type="text" size="mini" @click="handleBindDomain(row)">绑定域名</el-button>
              <el-button type="text" size="mini" @click="handleAdjustBalance(row)">加/扣款</el-button>
              <el-button type="text" size="mini" @click="handleQuota(row)">额度管理</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        class="agent-pagination"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="page"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :title="agentDialogTitle"
      :visible.sync="agentDialogVisible"
      width="620px"
      @close="resetAgentForm"
    >
      <el-form
        ref="agentForm"
        :model="agentForm"
        :rules="agentRules"
        label-width="120px"
        size="small"
      >
        <el-form-item label="代理账号" prop="agent_account">
          <el-input v-model="agentForm.agent_account" placeholder="请输入代理账号" />
        </el-form-item>
        <el-form-item v-if="agentDialogType === 'add'" label="登录密码" prop="password">
          <el-input v-model="agentForm.password" placeholder="请输入登录密码" show-password />
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-input v-model="agentForm.real_name" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="上级代理" prop="parent_agent">
          <el-input v-model="agentForm.parent_agent" placeholder="请输入上级代理" />
        </el-form-item>
        <el-form-item label="账户余额" prop="balance">
          <el-input-number
            v-model="agentForm.balance"
            :min="0"
            :precision="2"
            :step="100"
            controls-position="right"
            class="full-input"
          />
        </el-form-item>
        <el-form-item label="存款手续费比例" prop="deposit_fee_rate">
          <el-input-number
            v-model="agentForm.deposit_fee_rate"
            :min="0"
            :max="100"
            :precision="2"
            :step="0.1"
            controls-position="right"
            class="full-input"
          />
        </el-form-item>
        <el-form-item label="取款手续费比例" prop="withdraw_fee_rate">
          <el-input-number
            v-model="agentForm.withdraw_fee_rate"
            :min="0"
            :max="100"
            :precision="2"
            :step="0.1"
            controls-position="right"
            class="full-input"
          />
        </el-form-item>
        <el-form-item label="账号状态" prop="status">
          <el-radio-group v-model="agentForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="agentDialogVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitAgent">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="绑定域名"
      :visible.sync="domainDialogVisible"
      width="560px"
    >
      <el-form :model="domainForm" label-width="120px" size="small">
        <el-form-item label="电脑代理链接">
          <el-input v-model="domainForm.pc_agent_link" placeholder="请输入电脑代理链接" />
        </el-form-item>
        <el-form-item label="手机代理链接">
          <el-input v-model="domainForm.h5_agent_link" placeholder="请输入手机代理链接" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="domainDialogVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitDomain">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="加/扣款"
      :visible.sync="balanceDialogVisible"
      width="520px"
    >
      <el-form ref="balanceForm" :model="balanceForm" :rules="balanceRules" label-width="100px" size="small">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="balanceForm.type">
            <el-radio label="plus">加款</el-radio>
            <el-radio label="minus">扣款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input-number
            v-model="balanceForm.amount"
            :min="0.01"
            :precision="2"
            :step="100"
            controls-position="right"
            class="full-input"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="balanceForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="balanceDialogVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitBalance">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="额度管理"
      :visible.sync="quotaDialogVisible"
      width="1000px"
      custom-class="quota-dialog"
    >
      <div class="quota-content">
        <el-form
          ref="quotaTransferForm"
          :model="quotaTransferForm"
          :rules="quotaTransferRules"
          class="quota-transfer-form"
          inline
          label-width="86px"
          size="small"
        >
          <div class="quota-top-row">
            <el-form-item label="用户余额">
              <el-input v-model="quotaTransferForm.user_balance" readonly />
            </el-form-item>
            <el-button type="danger" size="small" @click="refreshUserBalance">
              刷新余额
            </el-button>
            <el-button type="danger" size="small" @click="refreshAllPlatformBalance">
              一键刷新
            </el-button>
            <el-button type="danger" size="small" @click="transferAllOut">
              一键转出
            </el-button>
          </div>

          <div class="quota-transfer-row">
            <el-form-item label="转账类型" prop="transfer_type" required>
              <el-select v-model="quotaTransferForm.transfer_type" placeholder="转账类型">
                <el-option label="转入平台" value="in" />
                <el-option label="转出平台" value="out" />
              </el-select>
            </el-form-item>
            <el-form-item label="转账平台" prop="platform" required>
              <el-select v-model="quotaTransferForm.platform" placeholder="转账平台">
                <el-option
                  v-for="item in platformBalances"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="转账金额" prop="amount" required>
              <el-input
                v-model="quotaTransferForm.amount"
                placeholder="请输入转账金额"
              />
            </el-form-item>
            <el-button type="success" size="small" @click="submitQuotaTransfer">
              额度转换
            </el-button>
          </div>
        </el-form>

        <div class="platform-grid">
          <div
            v-for="item in platformBalances"
            :key="item.key"
            class="platform-card"
          >
            <div class="platform-refresh">
              <el-input
                :value="formatPlatformBalance(item)"
                readonly
                placeholder="请刷新"
              />
              <el-button icon="el-icon-refresh" @click="refreshPlatformBalance(item)" />
            </div>
            <div class="platform-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { disableFutureDate } from '@/utils/index'
export default {
  name: 'AgentList',
  data() {
    return {
      loading: false,
      query: {
        agent_account: '',
        real_name: '',
        status: '',
        date_range: []
      },
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
      agentDialogVisible: false,
      agentDialogType: 'add',
      agentForm: this.getDefaultAgentForm(),
      agentRules: {
        agent_account: [
          { required: true, message: '请输入代理账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ]
      },
      domainDialogVisible: false,
      domainForm: {
        id: '',
        pc_agent_link: '',
        h5_agent_link: ''
      },
      balanceDialogVisible: false,
      balanceForm: {
        id: '',
        type: 'plus',
        amount: 0,
        remark: ''
      },
      balanceRules: {
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      quotaDialogVisible: false,
      activeQuotaAgent: null,
      quotaTransferForm: {
        id: '',
        user_balance: 0,
        transfer_type: '',
        platform: '',
        amount: ''
      },
      quotaTransferRules: {
        transfer_type: [
          { required: true, message: '请选择转账类型', trigger: 'change' }
        ],
        platform: [
          { required: true, message: '请选择转账平台', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请输入转账金额', trigger: 'blur' }
        ]
      },
      platformBalances: this.getDefaultPlatformBalances()
    }
  },
  computed: {
    agentDialogTitle() {
      return this.agentDialogType === 'add' ? '新增代理' : '修改代理'
    },
    // 禁止选择未来日期
    disableFutureDate() {
      return disableFutureDate
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getDefaultPlatformBalances() {
      return [
        { key: 'fg', name: 'FG钱包', balance: null },
        { key: 'esb', name: 'ESB电竞', balance: null },
        { key: 'db5', name: 'DB5电竞', balance: null },
        { key: 'bg', name: 'BG钱包', balance: null },
        { key: 'ag', name: 'AG钱包', balance: null },
        { key: 'ss', name: 'SS体育', balance: null },
        { key: 'mw', name: 'MW钱包', balance: null },
        { key: 'newbb', name: 'NEWBB体育', balance: null },
        { key: 'cq9', name: 'CQ9钱包', balance: null },
        { key: 'jdb', name: 'JDB钱包', balance: null },
        { key: 'saba', name: 'SABA体育', balance: null },
        { key: 'ky', name: 'KY钱包', balance: null },
        { key: 'pt', name: 'PT捕鱼', balance: null },
        { key: 'tf', name: 'TF电竞', balance: null },
        { key: 'mt', name: 'MT钱包', balance: null },
        { key: 'cmd', name: 'CMD体育', balance: null },
        { key: 'wl', name: 'WL钱包', balance: null },
        { key: 'mg', name: 'MG钱包', balance: null },
        { key: 'joker', name: 'JOKER钱包', balance: null },
        { key: 'db7', name: 'DB7棋牌', balance: null },
        { key: 'panda', name: 'PANDA体育', balance: null },
        { key: 'db3', name: 'DB3彩票', balance: null },
        { key: 'db2', name: 'DB2电子', balance: null },
        { key: 'db1', name: 'DB1真人', balance: null },
        { key: 'pg', name: 'PG电子', balance: null },
        { key: 'og', name: 'OG真人', balance: null },
        { key: 'db6', name: 'DB6捕鱼', balance: null },
        { key: 'sexy', name: 'SEXY真人', balance: null },
        { key: 'leg', name: 'LEG钱包', balance: null },
        { key: 'sgwin', name: 'SGWIN彩票', balance: null }
      ]
    },
    getDefaultAgentForm() {
      return {
        id: '',
        agent_account: '',
        password: '',
        invite_code: '',
        real_name: '',
        parent_agent: '',
        balance: 0,
        deposit_fee_rate: 0,
        withdraw_fee_rate: 0,
        status: 1
      }
    },
    getMockRows() {
      return [
        {
          id: 495,
          agent_account: 'qwe775825',
          invite_code: '',
          real_name: '',
          parent_agent: 'agent',
          balance: 1000000,
          deposit_fee_rate: 0,
          withdraw_fee_rate: 0,
          pc_agent_link: 'https://pc-yx.ng-demo.xyz/?directAgent=495#/user/register',
          h5_agent_link: 'https://h5-yx.ng-demo.xyz/?directAgent=495#/pages/login/login?type=reg',
          status: 1,
          login_status: 0,
          login_time: ''
        },
        {
          id: 494,
          agent_account: 'gifvip999',
          invite_code: '',
          real_name: '',
          parent_agent: 'agent',
          balance: 0,
          deposit_fee_rate: 0,
          withdraw_fee_rate: 0,
          pc_agent_link: 'https://pc-yx.ng-demo.xyz/?directAgent=494#/user/register',
          h5_agent_link: 'https://h5-yx.ng-demo.xyz/?directAgent=494#/pages/login/login?type=reg',
          status: 1,
          login_status: 0,
          login_time: ''
        },
        {
          id: 493,
          agent_account: 'aasd5396625',
          invite_code: '',
          real_name: '',
          parent_agent: 'agent',
          balance: 0,
          deposit_fee_rate: 0,
          withdraw_fee_rate: 0,
          pc_agent_link: 'https://pc-yx.ng-demo.xyz/?directAgent=493#/user/register',
          h5_agent_link: 'https://h5-yx.ng-demo.xyz/?directAgent=493#/pages/login/login?type=reg',
          status: 1,
          login_status: 0,
          login_time: ''
        },
        {
          id: 492,
          agent_account: 'aasd775825',
          invite_code: '',
          real_name: '',
          parent_agent: 'agent',
          balance: 0,
          deposit_fee_rate: 0,
          withdraw_fee_rate: 0,
          pc_agent_link: 'https://web.google.com/?directAgent=492#/user/register',
          h5_agent_link: 'https://wap.google.com/?directAgent=492#/pages/login/login?type=reg',
          status: 1,
          login_status: 0,
          login_time: ''
        },
        {
          id: 479,
          agent_account: 'sub8007',
          invite_code: '',
          real_name: 's',
          parent_agent: 'agpwn27963',
          balance: 0,
          deposit_fee_rate: 0,
          withdraw_fee_rate: 0,
          pc_agent_link: 'https://pc-yx.ng-demo.xyz/?directAgent=479#/user/register',
          h5_agent_link: 'https://h5-yx.ng-demo.xyz/?directAgent=479#/pages/login/login?type=reg',
          status: 1,
          login_status: 0,
          login_time: ''
        }
      ]
    },
    getList() {
      this.loading = true
      const rows = this.getMockRows().filter(item => {
        const accountMatched = !this.query.agent_account || item.agent_account.indexOf(this.query.agent_account) > -1
        const realNameMatched = !this.query.real_name || item.real_name.indexOf(this.query.real_name) > -1
        const statusMatched = this.query.status === '' || item.status === this.query.status
        return accountMatched && realNameMatched && statusMatched
      })
      this.total = rows.length
      this.tableData = rows.slice((this.page - 1) * this.limit, this.page * this.limit)
      this.loading = false
    },
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.limit = val
      this.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 1 ? 'agent-row-tint' : ''
    },
    formatMoney(value) {
      const numberValue = Number(value)
      if (Number.isNaN(numberValue)) return value || 0
      return Number.isInteger(numberValue) ? numberValue : numberValue.toFixed(2)
    },
    formatRate(value) {
      const numberValue = Number(value)
      if (Number.isNaN(numberValue)) return value || 0
      return numberValue
    },
    handleAdd() {
      this.agentDialogType = 'add'
      this.agentForm = this.getDefaultAgentForm()
      this.agentDialogVisible = true
      this.$nextTick(() => {
        this.$refs.agentForm && this.$refs.agentForm.clearValidate()
      })
    },
    handleEdit(row) {
      this.agentDialogType = 'edit'
      this.agentForm = Object.assign(this.getDefaultAgentForm(), row)
      this.agentDialogVisible = true
      this.$nextTick(() => {
        this.$refs.agentForm && this.$refs.agentForm.clearValidate()
      })
    },
    submitAgent() {
      this.$refs.agentForm.validate(valid => {
        if (!valid) return
        if (this.agentDialogType === 'add') {
          const row = Object.assign({}, this.agentForm, {
            id: Date.now(),
            invite_code: this.agentForm.invite_code || '',
            pc_agent_link: '',
            h5_agent_link: '',
            login_status: 0,
            login_time: ''
          })
          this.tableData.unshift(row)
          this.total += 1
          this.$message.success('新增成功')
        } else {
          this.tableData = this.tableData.map(item => {
            return item.id === this.agentForm.id ? Object.assign({}, item, this.agentForm) : item
          })
          this.$message.success('修改成功')
        }
        this.agentDialogVisible = false
      })
    },
    resetAgentForm() {
      if (this.$refs.agentForm) {
        this.$refs.agentForm.resetFields()
      }
    },
    handleBindDomain(row) {
      this.domainForm = {
        id: row.id,
        pc_agent_link: row.pc_agent_link || '',
        h5_agent_link: row.h5_agent_link || ''
      }
      this.domainDialogVisible = true
    },
    submitDomain() {
      this.tableData = this.tableData.map(item => {
        return item.id === this.domainForm.id ? Object.assign({}, item, this.domainForm) : item
      })
      this.domainDialogVisible = false
      this.$message.success('绑定成功')
    },
    handleAdjustBalance(row) {
      this.balanceForm = {
        id: row.id,
        type: 'plus',
        amount: 0,
        remark: ''
      }
      this.balanceDialogVisible = true
      this.$nextTick(() => {
        this.$refs.balanceForm && this.$refs.balanceForm.clearValidate()
      })
    },
    submitBalance() {
      this.$refs.balanceForm.validate(valid => {
        if (!valid) return
        this.tableData = this.tableData.map(item => {
          if (item.id !== this.balanceForm.id) return item
          const amount = this.balanceForm.type === 'plus' ? this.balanceForm.amount : -this.balanceForm.amount
          return Object.assign({}, item, {
            balance: Number(item.balance || 0) + amount
          })
        })
        this.balanceDialogVisible = false
        this.$message.success('操作成功')
      })
    },
    handleQuota(row) {
      this.activeQuotaAgent = row
      this.platformBalances = this.getDefaultPlatformBalances()
      this.quotaTransferForm = {
        id: row.id,
        user_balance: this.formatMoney(row.balance),
        transfer_type: '',
        platform: '',
        amount: ''
      }
      this.quotaDialogVisible = true
      this.$nextTick(() => {
        this.$refs.quotaTransferForm && this.$refs.quotaTransferForm.clearValidate()
      })
    },
    formatPlatformBalance(item) {
      if (item.balance === null || item.balance === undefined || item.balance === '') return ''
      return this.formatMoney(item.balance)
    },
    refreshUserBalance() {
      if (!this.activeQuotaAgent) return
      const row = this.tableData.find(item => item.id === this.activeQuotaAgent.id)
      this.quotaTransferForm.user_balance = this.formatMoney(row ? row.balance : this.activeQuotaAgent.balance)
      this.$message.success('刷新成功')
    },
    refreshPlatformBalance(platform) {
      platform.balance = Number((Math.random() * 10000).toFixed(2))
      this.$message.success(`${platform.name}刷新成功`)
    },
    refreshAllPlatformBalance() {
      this.platformBalances = this.platformBalances.map(item => {
        return Object.assign({}, item, {
          balance: Number((Math.random() * 10000).toFixed(2))
        })
      })
      this.$message.success('一键刷新成功')
    },
    transferAllOut() {
      this.platformBalances = this.platformBalances.map(item => {
        return Object.assign({}, item, {
          balance: 0
        })
      })
      this.$message.success('一键转出成功')
    },
    submitQuotaTransfer() {
      this.$refs.quotaTransferForm.validate(valid => {
        if (!valid) return
        const amount = Number(this.quotaTransferForm.amount)
        if (!amount || amount <= 0) {
          this.$message.error('请输入正确的转账金额')
          return
        }
        const platform = this.platformBalances.find(item => item.key === this.quotaTransferForm.platform)
        if (!platform) return

        const currentUserBalance = Number(this.quotaTransferForm.user_balance || 0)
        const currentPlatformBalance = Number(platform.balance || 0)
        if (this.quotaTransferForm.transfer_type === 'in') {
          if (currentUserBalance < amount) {
            this.$message.error('用户余额不足')
            return
          }
          this.quotaTransferForm.user_balance = this.formatMoney(currentUserBalance - amount)
          platform.balance = currentPlatformBalance + amount
        } else {
          if (currentPlatformBalance < amount) {
            this.$message.error('平台余额不足')
            return
          }
          this.quotaTransferForm.user_balance = this.formatMoney(currentUserBalance + amount)
          platform.balance = currentPlatformBalance - amount
        }
        this.tableData = this.tableData.map(item => {
          return item.id === this.quotaTransferForm.id
            ? Object.assign({}, item, { balance: Number(this.quotaTransferForm.user_balance) })
            : item
        })
        this.$message.success('额度转换成功')
      })
    },
    handleStatusChange(row) {
      this.$message.success(row.status === 1 ? '已启用' : '已禁用')
    }
  }
}
</script>

<style lang="scss" scoped>
.agent-page {
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow: hidden;
  background: #f3f6f8;
}

.agent-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 20px 12px;
  overflow: hidden;
  background: #fff;
}

.agent-search {
  flex-shrink: 0;
  padding-bottom: 8px;

  ::v-deep .el-form-item {
    margin-right: 22px;
    margin-bottom: 14px;
  }

  ::v-deep .el-form-item__label {
    color: #303133;
    font-weight: 500;
  }

  ::v-deep .el-input,
  ::v-deep .el-select {
    width: 236px;
  }

  ::v-deep .el-date-editor--daterange.el-input__inner {
    width: 400px;
  }
}

.search-actions {
  margin-right: 0;

  ::v-deep .el-form-item__content {
    display: flex;
    gap: 10px;
  }
}

.agent-table {
  flex: 1;
  min-height: 0;

  ::v-deep th {
    height: 44px;
    background: #fff;
    color: #7b8794;
    font-weight: 600;
  }

  ::v-deep td {
    height: 136px;
    color: #334155;
  }

  ::v-deep .agent-row-tint td {
    background: #e9fbfb;
  }

  ::v-deep .el-table__fixed-right::before,
  ::v-deep .el-table__fixed::before {
    background-color: #ebeef5;
  }
}

.link-cell {
  white-space: normal;
  word-break: break-all;
  line-height: 1.55;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;

  .el-button {
    margin: 0;
    color: #05a58f;
    font-weight: 600;
  }
}

.agent-pagination {
  flex-shrink: 0;
  padding-top: 12px;
  text-align: right;
}

.full-input {
  width: 100%;
}

::v-deep .quota-dialog {
  margin-top: 4vh !important;

  .el-dialog__header {
    padding: 20px 20px 10px;
  }

  .el-dialog__body {
    padding: 28px 30px 34px;
    max-height: 78vh;
    overflow-y: auto;
  }
}

.quota-content {
  width: 100%;
}

.quota-transfer-form {
  ::v-deep .el-form-item {
    margin-right: 10px;
    margin-bottom: 20px;
  }

  ::v-deep .el-form-item__label {
    color: #303133;
  }

  ::v-deep .el-input,
  ::v-deep .el-select {
    width: 140px;
  }
}

.quota-top-row,
.quota-transfer-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.quota-top-row {
  margin-bottom: 2px;

  ::v-deep .el-form-item:first-child .el-input {
    width: 300px;
  }
}

.quota-transfer-row {
  .el-button--success {
    background: #55c333;
    border-color: #55c333;
  }
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(5, 150px);
  gap: 30px;
  justify-content: start;
  padding-top: 10px;
}

.platform-card {
  height: 80px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
}

.platform-refresh {
  display: grid;
  grid-template-columns: 1fr 56px;
  height: 36px;

  ::v-deep .el-input__inner {
    height: 36px;
    border: 0;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    border-radius: 0;
    color: #606266;
  }

  .el-button {
    height: 36px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #dcdfe6;
    border-radius: 0;
    background: #f8fafc;
    color: #8a97a6;
  }
}

.platform-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  color: #ff0000;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1280px) {
  .agent-search {
    ::v-deep .el-input,
    ::v-deep .el-select {
      width: 190px;
    }

    ::v-deep .el-date-editor--daterange.el-input__inner {
      width: 330px;
    }
  }

  .platform-grid {
    grid-template-columns: repeat(4, 150px);
  }
}
</style>