<template>
  <div class="mobile-app">
    <header class="mobile-header">
      <div>
        <div class="mobile-title">库存管理</div>
        <div class="mobile-subtitle">{{ nickName || name || '移动端' }}</div>
      </div>
      <el-button size="mini" plain icon="el-icon-switch-button" @click="handleLogout">退出</el-button>
    </header>

    <main class="mobile-main">
      <section v-show="activeTab === 'home'" class="mobile-section">
        <div class="summary-grid">
          <div class="summary-card">
            <span>库存品项</span>
            <strong>{{ summary.stockTotal }}</strong>
          </div>
          <div class="summary-card warning">
            <span>待入库</span>
            <strong>{{ summary.pendingIn }}</strong>
          </div>
          <div class="summary-card danger">
            <span>待盘点确认</span>
            <strong>{{ summary.pendingCheck }}</strong>
          </div>
          <div class="summary-card">
            <span>出库记录</span>
            <strong>{{ summary.recentOut }}</strong>
          </div>
        </div>

        <div class="mobile-agent">
          <div class="agent-head">
            <div>
              <div class="agent-title">智能库存助手</div>
              <div class="agent-subtitle">说一句或输入一句，确认后执行</div>
            </div>
            <el-tag size="mini" type="info">AI</el-tag>
          </div>
          <el-input
            v-model="agent.text"
            type="textarea"
            :rows="2"
            resize="none"
            maxlength="200"
            show-word-limit
            placeholder="例如：销售出库 10 个某产品，库区 A，出库人张三"
          />
          <div class="agent-actions">
            <el-button icon="el-icon-delete" :disabled="!agent.text && !agent.plan" @click="clearAgent">清空</el-button>
            <el-button type="primary" icon="el-icon-magic-stick" :loading="agent.loading" @click="analyzeAgentText">分析</el-button>
          </div>
          <div v-if="agent.plan" class="agent-result">
            <div class="agent-plan">
              <div>
                <el-tag size="mini" :type="agent.plan.executable ? 'success' : 'warning'">{{ actionLabel(agent.plan.action) }}</el-tag>
                <strong>{{ agent.plan.summary || agent.plan.message || '已生成操作草稿' }}</strong>
              </div>
              <el-button
                v-if="showAgentExecute(agent.plan)"
                type="danger"
                size="mini"
                icon="el-icon-check"
                :disabled="!agent.plan.executable"
                :loading="agent.executing"
                @click="executeAgentPlan"
              >确认</el-button>
            </div>
            <div v-if="agentPlanItems.length" class="agent-detail">
              <span v-for="item in agentPlanItems" :key="item.label">{{ item.label }}：{{ item.value }}</span>
            </div>
            <el-alert v-if="agent.plan.message" :title="agent.plan.message" type="info" show-icon :closable="false" />
            <div v-if="agent.plan.warnings && agent.plan.warnings.length" class="agent-tags">
              <el-tag v-for="item in agent.plan.warnings" :key="item" type="warning" size="mini">{{ item }}</el-tag>
            </div>
            <div v-if="agent.plan.candidates && agent.plan.candidates.length" class="agent-candidates">
              <span v-for="item in agent.plan.candidates" :key="item.type + item.id">{{ item.name }} {{ item.detail || '' }}</span>
            </div>
            <article v-for="(item, index) in (agent.plan.results || [])" :key="'agent-result-' + index + '-' + (item.id || item.productId || '')" class="agent-stock">
              <div>
                <div class="card-title">第 {{ index + 1 }} 项：{{ item.productName || '-' }}</div>
                <div class="meta-line">{{ item.areaName || '-' }} ｜ {{ productMeta(item) }}</div>
              </div>
              <div class="agent-stock-action">
                <strong>{{ item.stockNum === undefined || item.stockNum === null ? '-' : item.stockNum }}</strong>
                <el-button v-if="canSelectAgentResult(agent.plan)" type="primary" size="mini" plain @click="selectAgentResult(item)">选择</el-button>
              </div>
            </article>
          </div>
        </div>

        <div class="quick-panel">
          <button @click="openInForm">入库登记</button>
          <button @click="openOutForm">出库登记</button>
          <button @click="openCheckForm">盘库登记</button>
          <button @click="switchTab('stock')">查库存</button>
          <button @click="switchTab('product')" v-hasPermi="['warehouse:product:list']">产品维护</button>
          <button @click="switchTab('area')" v-hasPermi="['warehouse:area:list']">库区维护</button>
        </div>

        <div class="panel-title">库存概览</div>
        <div v-if="stockList.length === 0" class="empty-tip">暂无库存数据</div>
        <article v-for="item in stockList.slice(0, 5)" :key="'home-stock-' + item.id" class="mobile-card">
          <div class="card-head">
            <div>
              <div class="card-title">{{ item.productName || '-' }}</div>
              <div class="card-subtitle">{{ item.areaName || '-' }}</div>
            </div>
            <div class="stock-num">{{ item.stockNum }}</div>
          </div>
          <div class="meta-line">{{ productMeta(item) }}</div>
        </article>
      </section>

      <section v-show="activeTab === 'stock'" class="mobile-section">
        <div class="filter-panel">
          <el-select v-model="stockQuery.areaId" placeholder="库区" clearable filterable>
            <el-option v-for="item in areaOptions" :key="item.id" :label="areaLabel(item)" :value="item.id" />
          </el-select>
          <el-input v-model="stockQuery.productName" placeholder="产品信息" clearable />
          <el-button type="primary" icon="el-icon-search" @click="loadStock">搜索</el-button>
        </div>

        <div v-if="stockList.length === 0" class="empty-tip">暂无库存数据</div>
        <article v-for="item in stockList" :key="'stock-' + item.id" class="mobile-card">
          <div class="card-head">
            <div>
              <div class="card-title">{{ item.productName || '-' }}</div>
              <div class="card-subtitle">{{ item.areaName || '-' }}</div>
            </div>
            <div class="stock-num">{{ item.stockNum }}</div>
          </div>
          <div class="meta-line">{{ productMeta(item) }}</div>
          <div class="card-actions">
            <el-button type="primary" size="mini" icon="el-icon-sold-out" @click="openStockOutForm(item)" v-hasPermi="['warehouse:stock:out']">出库</el-button>
          </div>
        </article>
      </section>

      <section v-show="activeTab === 'in'" class="mobile-section">
        <div class="filter-panel">
          <el-select v-model="inQuery.areaId" placeholder="库区" clearable filterable>
            <el-option v-for="item in areaOptions" :key="item.id" :label="areaLabel(item)" :value="item.id" />
          </el-select>
          <el-input v-model="inQuery.productName" placeholder="产品名称" clearable />
          <el-select v-model="inQuery.brand" placeholder="品牌" clearable filterable>
            <el-option v-for="item in brandOptions" :key="item" :label="item" :value="item" />
          </el-select>
          <el-select v-model="inQuery.inStatus" placeholder="状态" clearable>
            <el-option v-for="dict in dict.type.wms_in_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="loadInRecords">搜索</el-button>
        </div>
        <el-button class="full-button" type="primary" icon="el-icon-plus" @click="openInForm" v-hasPermi="['warehouse:in:add']">新增入库登记</el-button>

        <div v-if="inList.length === 0" class="empty-tip">暂无入库记录</div>
        <article v-for="item in inList" :key="'in-' + item.id" class="mobile-card">
          <div class="card-head">
            <div>
              <div class="card-title">{{ item.productName || '-' }}</div>
              <div class="card-subtitle">{{ item.areaName || '-' }} · {{ item.inNo }}</div>
            </div>
            <dict-tag :options="dict.type.wms_in_status" :value="item.inStatus" />
          </div>
          <div class="meta-line">{{ productMeta(item) }}</div>
          <div class="record-line">
            <span>数量：{{ item.inNum }}</span>
            <span>入库人：{{ item.inOperator || '-' }}</span>
          </div>
          <div class="card-actions" v-if="item.inStatus === 0">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="openInForm(item)" v-hasPermi="['warehouse:in:edit']">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteInItem(item)" v-hasPermi="['warehouse:in:remove']">删除</el-button>
            <el-button type="success" size="mini" icon="el-icon-check" @click="confirmIn(item)" v-hasPermi="['warehouse:in:confirm']">确认入库</el-button>
          </div>
        </article>
      </section>

      <section v-show="activeTab === 'out'" class="mobile-section">
        <div class="filter-panel">
          <el-select v-model="outQuery.areaId" placeholder="库区" clearable filterable>
            <el-option v-for="item in areaOptions" :key="item.id" :label="areaLabel(item)" :value="item.id" />
          </el-select>
          <el-input v-model="outQuery.productName" placeholder="产品名称" clearable />
          <el-select v-model="outQuery.brand" placeholder="品牌" clearable filterable>
            <el-option v-for="item in brandOptions" :key="item" :label="item" :value="item" />
          </el-select>
          <el-input v-model="outQuery.spec" placeholder="规格" clearable />
          <el-button type="primary" icon="el-icon-search" @click="loadOutRecords">搜索</el-button>
        </div>
        <el-button class="full-button" type="primary" icon="el-icon-plus" @click="openOutForm" v-hasPermi="['warehouse:out:add']">新增出库登记</el-button>

        <div v-if="outList.length === 0" class="empty-tip">暂无出库记录</div>
        <article v-for="item in outList" :key="'out-' + item.id" class="mobile-card">
          <div class="card-head">
            <div>
              <div class="card-title">{{ item.productName || '-' }}</div>
              <div class="card-subtitle">{{ item.areaName || '-' }} · {{ item.outNo }}</div>
            </div>
            <div class="stock-num">{{ item.outNum }}</div>
          </div>
          <div class="meta-line">{{ productMeta(item) }}</div>
          <div class="record-line">
            <span>出库人：{{ item.outOperator || '-' }}</span>
            <span>{{ parseTime(item.outTime, '{m}-{d} {h}:{i}') }}</span>
          </div>
        </article>
      </section>

      <section v-show="activeTab === 'check'" class="mobile-section">
        <div class="filter-panel">
          <el-select v-model="checkQuery.areaId" placeholder="库区" clearable filterable>
            <el-option v-for="item in areaOptions" :key="item.id" :label="areaLabel(item)" :value="item.id" />
          </el-select>
          <el-input v-model="checkQuery.productName" placeholder="产品名称" clearable />
          <el-select v-model="checkQuery.brand" placeholder="品牌" clearable filterable>
            <el-option v-for="item in brandOptions" :key="item" :label="item" :value="item" />
          </el-select>
          <el-select v-model="checkQuery.checkStatus" placeholder="状态" clearable>
            <el-option v-for="dict in dict.type.wms_check_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="loadCheckRecords">搜索</el-button>
        </div>
        <el-button class="full-button" type="primary" icon="el-icon-plus" @click="openCheckForm" v-hasPermi="['warehouse:check:add']">新增盘库登记</el-button>

        <div v-if="checkList.length === 0" class="empty-tip">暂无盘库记录</div>
        <article v-for="item in checkList" :key="'check-' + item.id" class="mobile-card">
          <div class="card-head">
            <div>
              <div class="card-title">{{ item.productName || '-' }}</div>
              <div class="card-subtitle">{{ item.areaName || '-' }} · {{ item.checkNo }}</div>
            </div>
            <dict-tag :options="dict.type.wms_check_status" :value="item.checkStatus" />
          </div>
          <div class="meta-line">{{ productMeta(item) }}</div>
          <div class="check-grid">
            <span>账面 {{ item.bookNum }}</span>
            <span>实际 {{ item.realNum }}</span>
            <span :class="{ diff: Number(item.diffNum) !== 0 }">差异 {{ item.diffNum }}</span>
          </div>
          <div class="card-actions" v-if="item.checkStatus === 0">
            <el-button type="success" size="mini" icon="el-icon-check" @click="confirmCheck(item)" v-hasPermi="['warehouse:check:confirm']">确认生效</el-button>
          </div>
        </article>
      </section>

      <section v-show="activeTab === 'product'" class="mobile-section">
        <div class="section-head">
          <div>
            <div class="section-title">产品信息维护</div>
            <div class="section-subtitle">维护后可直接用于入库、出库和盘库</div>
          </div>
          <el-button size="mini" icon="el-icon-arrow-left" @click="switchTab('home')">返回</el-button>
        </div>
        <div class="filter-panel">
          <el-input v-model="productQuery.productName" placeholder="产品信息" clearable />
          <el-button type="primary" icon="el-icon-search" @click="loadProducts">搜索</el-button>
        </div>
        <el-button class="full-button" type="primary" icon="el-icon-plus" @click="openProductForm()" v-hasPermi="['warehouse:product:add']">新增产品</el-button>

        <div v-if="productList.length === 0" class="empty-tip">暂无产品数据</div>
        <article v-for="item in productList" :key="'product-' + item.id" class="mobile-card">
          <div class="card-head">
            <div>
              <div class="card-title">{{ item.productName || '-' }}</div>
              <div class="card-subtitle">{{ productMeta(item) || '未填写产品明细' }}</div>
            </div>
          </div>
          <div v-if="item.remark" class="record-line">
            <span>备注：{{ item.remark }}</span>
          </div>
          <div class="card-actions">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="openProductForm(item)" v-hasPermi="['warehouse:product:edit']">修改</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteProductItem(item)" v-hasPermi="['warehouse:product:remove']">删除</el-button>
          </div>
        </article>
      </section>

      <section v-show="activeTab === 'area'" class="mobile-section">
        <div class="section-head">
          <div>
            <div class="section-title">库区定义维护</div>
            <div class="section-subtitle">维护后可直接用于库存业务</div>
          </div>
          <el-button size="mini" icon="el-icon-arrow-left" @click="switchTab('home')">返回</el-button>
        </div>
        <div class="filter-panel">
          <el-input v-model="areaQuery.areaName" placeholder="库区名称" clearable />
          <el-button type="primary" icon="el-icon-search" @click="loadAreas">搜索</el-button>
        </div>
        <el-button class="full-button" type="primary" icon="el-icon-plus" @click="openAreaForm()" v-hasPermi="['warehouse:area:add']">新增库区</el-button>

        <div v-if="areaList.length === 0" class="empty-tip">暂无库区数据</div>
        <article v-for="item in areaList" :key="'area-' + item.id" class="mobile-card">
          <div class="card-head">
            <div>
              <div class="card-title">{{ item.areaName || '-' }}</div>
              <div class="card-subtitle">{{ item.remark || '未填写备注' }}</div>
            </div>
          </div>
          <div class="card-actions">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="openAreaForm(item)" v-hasPermi="['warehouse:area:edit']">修改</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteAreaItem(item)" v-hasPermi="['warehouse:area:remove']">删除</el-button>
          </div>
        </article>
      </section>
    </main>

    <nav class="bottom-nav">
      <button :class="{ active: activeTab === 'home' }" @click="switchTab('home')"><i class="el-icon-s-home"></i><span>首页</span></button>
      <button :class="{ active: activeTab === 'stock' }" @click="switchTab('stock')"><i class="el-icon-box"></i><span>库存</span></button>
      <button :class="{ active: activeTab === 'in' }" @click="switchTab('in')"><i class="el-icon-bottom-left"></i><span>入库</span></button>
      <button :class="{ active: activeTab === 'out' }" @click="switchTab('out')"><i class="el-icon-top-right"></i><span>出库</span></button>
      <button :class="{ active: activeTab === 'check' }" @click="switchTab('check')"><i class="el-icon-document-checked"></i><span>盘库</span></button>
    </nav>

    <el-dialog :title="dialogTitle" :visible.sync="dialogOpen" custom-class="mobile-dialog" append-to-body>
      <el-form ref="mobileForm" :model="form" :rules="formRules" label-width="82px">
        <template v-if="dialogType === 'in'">
          <el-form-item label="库区" prop="areaId">
            <el-select v-model="form.areaId" placeholder="请选择库区" filterable>
              <el-option v-for="item in areaOptions" :key="item.id" :label="areaLabel(item)" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="产品" prop="productId">
            <el-select v-model="form.productId" placeholder="请选择产品" filterable>
              <el-option v-for="item in productOptions" :key="item.id" :label="productLabel(item)" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="入库人" prop="inOperator">
            <el-select v-model="form.inOperator" placeholder="请选择入库人" filterable>
              <el-option v-for="item in userOptions" :key="item.userId" :label="userLabel(item)" :value="userValue(item)" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型" prop="inType">
            <el-select v-model="form.inType" placeholder="请选择类型">
              <el-option v-for="dict in dict.type.wms_in_type" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="inNum"><el-input-number v-model="form.inNum" :min="0.001" :precision="3" :step="1" /></el-form-item>
          <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" /></el-form-item>
        </template>

        <template v-if="dialogType === 'out' || dialogType === 'stockOut'">
          <el-form-item v-if="dialogType === 'stockOut'" label="产品">
            <el-input :value="productLabel(form)" disabled />
          </el-form-item>
          <el-form-item v-if="dialogType === 'out'" label="库区" prop="areaId">
            <el-select v-model="form.areaId" placeholder="请选择库区" filterable>
              <el-option v-for="item in areaOptions" :key="item.id" :label="areaLabel(item)" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="dialogType === 'out'" label="产品" prop="productId">
            <el-select v-model="form.productId" placeholder="请选择产品" filterable>
              <el-option v-for="item in productOptions" :key="item.id" :label="productLabel(item)" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="出库人" prop="outOperator">
            <el-select v-model="form.outOperator" placeholder="请选择出库人" filterable>
              <el-option v-for="item in userOptions" :key="item.userId" :label="userLabel(item)" :value="userValue(item)" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型" prop="outType">
            <el-select v-model="form.outType" placeholder="请选择类型">
              <el-option v-for="dict in dict.type.wms_out_type" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="outNum"><el-input-number v-model="form.outNum" :min="0.001" :precision="3" :step="1" /></el-form-item>
          <el-form-item label="关联单号"><el-input v-model="form.sourceNo" /></el-form-item>
          <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" /></el-form-item>
        </template>

        <template v-if="dialogType === 'check'">
          <el-form-item label="库区" prop="areaId">
            <el-select v-model="form.areaId" placeholder="请选择库区" filterable>
              <el-option v-for="item in areaOptions" :key="item.id" :label="areaLabel(item)" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="产品" prop="productId">
            <el-select v-model="form.productId" placeholder="请选择产品" filterable>
              <el-option v-for="item in productOptions" :key="item.id" :label="productLabel(item)" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="实盘数量" prop="realNum"><el-input-number v-model="form.realNum" :min="0" :precision="3" :step="1" /></el-form-item>
          <el-form-item label="差异原因"><el-input v-model="form.reason" type="textarea" /></el-form-item>
        </template>

        <template v-if="dialogType === 'product'">
          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="form.productName" placeholder="请输入产品名称" />
          </el-form-item>
          <el-form-item label="品牌" prop="brand">
            <el-select v-model="form.brand" placeholder="请选择或输入品牌" clearable filterable allow-create default-first-option>
              <el-option v-for="item in brandOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="类别" prop="category">
            <el-select v-model="form.category" placeholder="请选择或输入类别" clearable filterable allow-create default-first-option>
              <el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="规格" prop="spec">
            <el-input v-model="form.spec" placeholder="请输入规格型号" />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-select v-model="form.unit" placeholder="请选择或输入单位" clearable filterable allow-create default-first-option>
              <el-option v-for="item in unitOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </template>

        <template v-if="dialogType === 'area'">
          <el-form-item label="库区名称" prop="areaName">
            <el-input v-model="form.areaName" placeholder="请输入库区名称" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogOpen = false">取消</el-button>
        <el-button type="primary" @click="submitDialog">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listArea, getArea, delArea, addArea, updateArea, optionselectArea } from '@/api/warehouse/area'
import { listProduct, getProduct, delProduct, addProduct, updateProduct, optionselectProduct } from '@/api/warehouse/product'
import { optionselectUser } from '@/api/warehouse/user'
import { listStock, outStock } from '@/api/warehouse/stock'
import { listInRecord, getInRecord, addInRecord, updateInRecord, delInRecord, confirmInRecord } from '@/api/warehouse/inRecord'
import { listOutRecord, addOutRecord } from '@/api/warehouse/outRecord'
import { listStockCheck, addStockCheck, confirmStockCheck } from '@/api/warehouse/stockCheck'
import { analyzeAgent, executeAgent } from '@/api/warehouse/agent'

export default {
  name: 'MobileWarehouse',
  dicts: ['wms_in_type', 'wms_in_status', 'wms_out_type', 'wms_check_status'],
  data() {
    return {
      activeTab: 'home',
      areaOptions: [],
      productOptions: [],
      userOptions: [],
      stockList: [],
      inList: [],
      outList: [],
      checkList: [],
      productList: [],
      areaList: [],
      summary: { stockTotal: 0, pendingIn: 0, pendingCheck: 0, recentOut: 0 },
      stockQuery: { pageNum: 1, pageSize: 20, areaId: undefined, productName: undefined },
      inQuery: { pageNum: 1, pageSize: 20, areaId: undefined, productName: undefined, brand: undefined, inStatus: undefined },
      outQuery: { pageNum: 1, pageSize: 20, areaId: undefined, productName: undefined, brand: undefined, spec: undefined },
      checkQuery: { pageNum: 1, pageSize: 20, areaId: undefined, productName: undefined, brand: undefined, checkStatus: undefined },
      productQuery: { pageNum: 1, pageSize: 50, productName: undefined },
      areaQuery: { pageNum: 1, pageSize: 50, areaName: undefined },
      dialogOpen: false,
      dialogType: '',
      dialogTitle: '',
      form: {},
      formRules: {},
      agent: {
        text: '',
        loading: false,
        executing: false,
        contextResults: [],
        pendingNextPlan: null,
        plan: null
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'nickName']),
    brandOptions() {
      return this.distinctProductOptions('brand')
    },
    categoryOptions() {
      return this.distinctProductOptions('category')
    },
    unitOptions() {
      return this.distinctProductOptions('unit')
    },
    agentPlanItems() {
      const plan = this.agent.plan
      if (!plan) {
        return []
      }
      return [
        { label: '库区', value: plan.areaName },
        { label: '产品', value: plan.productName },
        { label: '品牌', value: plan.brand },
        { label: '类别', value: plan.category },
        { label: '规格', value: plan.spec },
        { label: '单位', value: plan.unit },
        { label: '数量', value: plan.quantity },
        { label: '人员', value: plan.operatorName },
        { label: '当前', value: plan.currentStock },
        { label: '预计', value: plan.afterStock },
        { label: '单号', value: plan.recordNo }
      ].filter(item => item.value !== undefined && item.value !== null && item.value !== '')
    }
  },
  created() {
    this.loadOptions()
    this.refreshAll()
  },
  methods: {
    analyzeAgentText() {
      const text = (this.agent.text || '').trim()
      if (!text) {
        this.$modal.msgWarning('请输入要操作的内容')
        return
      }
      this.agent.loading = true
      analyzeAgent({ text, contextResults: this.agent.contextResults }).then(res => {
        this.agent.plan = res.data
        this.agent.text = ''
        if (res.data && res.data.results && res.data.results.length) {
          this.agent.contextResults = res.data.results
        }
        this.autoFillAgentForm(res.data)
      }).finally(() => {
        this.agent.loading = false
      })
    },
    executeAgentPlan() {
      if (!this.agent.plan || !this.agent.plan.executable) {
        return
      }
      this.agent.executing = true
      executeAgent({ plan: this.agent.plan }).then(res => {
        this.agent.plan = res.data
        this.$modal.msgSuccess(res.data.message || '操作完成')
        this.refreshAll()
        this.agent.text = ''
      }).finally(() => {
        this.agent.executing = false
      })
    },
    clearAgent() {
      this.agent.text = ''
      this.agent.plan = null
      this.agent.pendingNextPlan = null
    },
    canSelectAgentResult(plan) {
      return plan && ['create_out_record', 'create_in_record', 'create_stock_check'].includes(plan.action) && plan.results && plan.results.length
    },
    selectAgentResult(item) {
      if (!this.agent.plan || !item) {
        return
      }
      const plan = this.completePlanWithResult(this.agent.plan, item)
      this.agent.plan = plan
      this.agent.contextResults = [item]
      if (plan.executable) {
        this.autoFillAgentForm(plan)
      } else {
        this.$modal.msgWarning(plan.message || '已选择产品，请补充缺少的信息')
      }
    },
    completePlanWithResult(source, item) {
      const plan = Object.assign({}, source, {
        stockId: item.id,
        areaId: item.areaId,
        productId: item.productId,
        areaName: item.areaName,
        productName: item.productName,
        brand: item.brand,
        category: item.category,
        spec: item.spec,
        unit: item.unit,
        currentStock: item.stockNum,
        candidates: [],
        results: [],
        needConfirm: true,
        message: '已选择产品，请确认后执行'
      })
      const quantity = this.toNumber(plan.quantity)
      const stock = this.toNumber(item.stockNum)
      if (plan.action === 'create_out_record') {
        plan.executable = !!(plan.areaId && plan.productId && quantity > 0)
        plan.afterStock = quantity > 0 && item.stockNum !== undefined && item.stockNum !== null ? stock - quantity : undefined
        if (plan.executable && stock < quantity) {
          plan.executable = false
          plan.message = '库存不足，当前库存：' + item.stockNum
        }
      } else if (plan.action === 'create_in_record') {
        plan.executable = !!(plan.areaId && plan.productId && quantity > 0)
        plan.afterStock = quantity > 0 && item.stockNum !== undefined && item.stockNum !== null ? stock + quantity : undefined
      } else if (plan.action === 'create_stock_check') {
        plan.executable = !!(plan.areaId && plan.productId && quantity >= 0)
        plan.afterStock = quantity >= 0 ? quantity : undefined
      }
      if (!plan.executable && plan.message === '已选择产品，请确认后执行') {
        plan.message = '已选择产品，还缺少库区或数量'
      }
      return plan
    },
    toNumber(value) {
      const numberValue = Number(value)
      return Number.isFinite(numberValue) ? numberValue : 0
    },
    autoFillAgentForm(plan) {
      if (!plan || !plan.executable) {
        return
      }
      if (plan.action === 'create_out_record' && plan.stockId) {
        this.dialogType = 'stockOut'
        this.dialogTitle = '库存出库'
        this.form = {
          id: plan.stockId,
          productName: plan.productName,
          brand: plan.brand,
          category: plan.category,
          spec: plan.spec,
          unit: plan.unit,
          outOperator: plan.operatorName,
          outType: plan.outType || 1,
          outNum: plan.quantity,
          sourceNo: undefined,
          remark: plan.remark
        }
        this.setOutRules()
      } else if (plan.action === 'create_out_record') {
        this.dialogType = 'out'
        this.dialogTitle = '出库登记'
        this.form = {
          areaId: plan.areaId,
          productId: plan.productId,
          outOperator: plan.operatorName,
          outType: plan.outType || 1,
          outNum: plan.quantity,
          sourceNo: undefined,
          remark: plan.remark
        }
        this.setOutRules()
      } else if (plan.action === 'create_in_record') {
        this.dialogType = 'in'
        this.dialogTitle = '入库登记'
        this.form = {
          areaId: plan.areaId,
          productId: plan.productId,
          inOperator: plan.operatorName,
          inType: plan.inType || 2,
          inNum: plan.quantity,
          remark: plan.remark
        }
        this.setInRules()
      } else if (plan.action === 'create_stock_check') {
        this.dialogType = 'check'
        this.dialogTitle = '盘库登记'
        this.form = {
          areaId: plan.areaId,
          productId: plan.productId,
          realNum: plan.quantity,
          reason: plan.remark
        }
        this.setCheckRules()
      } else if (plan.action === 'create_product') {
        this.dialogType = 'product'
        this.dialogTitle = '新增产品'
        this.agent.pendingNextPlan = plan.nextPlan || null
        this.form = {
          id: undefined,
          productCode: undefined,
          productName: plan.productName,
          brand: plan.brand,
          category: plan.category,
          spec: plan.spec,
          unit: plan.unit,
          remark: plan.remark
        }
        this.formRules = {
          productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
        }
      } else if (plan.action === 'create_area') {
        this.dialogType = 'area'
        this.dialogTitle = '新增库区'
        this.agent.pendingNextPlan = plan.nextPlan || null
        this.form = {
          id: undefined,
          areaCode: undefined,
          areaName: plan.areaName,
          remark: plan.remark
        }
        this.formRules = {
          areaName: [{ required: true, message: '请输入库区名称', trigger: 'blur' }]
        }
      } else {
        return
      }
      this.dialogOpen = true
      this.$nextTick(() => {
        if (this.$refs.mobileForm) {
          this.$refs.mobileForm.clearValidate()
        }
      })
      this.$modal.msgSuccess('已自动填好表单，请确认后提交')
    },
    showAgentExecute(plan) {
      if (!plan || !plan.needConfirm) {
        return false
      }
      return !['create_out_record', 'create_in_record', 'create_stock_check', 'create_product', 'create_area'].includes(plan.action)
    },
    actionLabel(action) {
      const map = {
        query_stock: '查库存',
        create_in_record: '入库',
        confirm_in_record: '确认入库',
        create_out_record: '出库',
        create_stock_check: '盘库',
        create_product: '新增产品',
        create_area: '新增库区'
      }
      return map[action] || '未识别'
    },
    loadOptions() {
      optionselectArea().then(res => { this.areaOptions = res.data || [] })
      optionselectProduct().then(res => { this.productOptions = res.data || [] })
      optionselectUser().then(res => { this.userOptions = res.data || [] })
    },
    refreshAll() {
      this.loadStock()
      this.loadInRecords()
      this.loadOutRecords()
      this.loadCheckRecords()
      this.loadSummary()
    },
    loadSummary() {
      listStock({ pageNum: 1, pageSize: 1 }).then(res => { this.summary.stockTotal = res.total || 0 })
      listInRecord({ pageNum: 1, pageSize: 1, inStatus: 0 }).then(res => { this.summary.pendingIn = res.total || 0 })
      listStockCheck({ pageNum: 1, pageSize: 1, checkStatus: 0 }).then(res => { this.summary.pendingCheck = res.total || 0 })
      listOutRecord({ pageNum: 1, pageSize: 1 }).then(res => { this.summary.recentOut = res.total || 0 })
    },
    loadStock() {
      listStock(this.stockQuery).then(res => { this.stockList = res.rows || [] })
    },
    loadInRecords() {
      listInRecord(this.inQuery).then(res => { this.inList = res.rows || [] })
    },
    loadOutRecords() {
      listOutRecord(this.outQuery).then(res => { this.outList = res.rows || [] })
    },
    loadCheckRecords() {
      listStockCheck(this.checkQuery).then(res => { this.checkList = res.rows || [] })
    },
    loadProducts() {
      listProduct(this.productQuery).then(res => { this.productList = res.rows || [] })
    },
    loadAreas() {
      listArea(this.areaQuery).then(res => { this.areaList = res.rows || [] })
    },
    switchTab(tab) {
      this.activeTab = tab
      if (tab === 'stock') this.loadStock()
      if (tab === 'in') this.loadInRecords()
      if (tab === 'out') this.loadOutRecords()
      if (tab === 'check') this.loadCheckRecords()
      if (tab === 'product') this.loadProducts()
      if (tab === 'area') this.loadAreas()
      if (tab === 'home') this.refreshAll()
    },
    areaLabel(area) {
      return area.areaName || area.areaCode || '-'
    },
    productLabel(product) {
      const name = product.productName || product.productCode || '-'
      const details = [product.brand, product.category, product.spec, product.unit].filter(item => item)
      return details.length ? name + '（' + details.join(' / ') + '）' : name
    },
    userLabel(user) {
      return user.nickName || user.userName
    },
    userValue(user) {
      return user.nickName || user.userName
    },
    productMeta(row) {
      return [row.brand && '品牌：' + row.brand, row.category && '类别：' + row.category, row.spec && '规格：' + row.spec, row.unit && '单位：' + row.unit].filter(Boolean).join('  ')
    },
    distinctProductOptions(field) {
      const values = this.productOptions.map(item => item[field]).filter(item => item !== undefined && item !== null && item !== '')
      return Array.from(new Set(values))
    },
    openInForm(row) {
      this.dialogType = 'in'
      this.setInRules()
      const setForm = data => {
        this.dialogTitle = data && data.id ? '修改入库登记' : '入库登记'
        this.form = Object.assign({
          id: undefined,
          inNo: undefined,
          areaId: undefined,
          productId: undefined,
          inOperator: undefined,
          inType: 2,
          inNum: undefined,
          remark: undefined
        }, data || {})
        this.dialogOpen = true
        this.$nextTick(() => this.resetForm('mobileForm'))
      }
      if (row && row.id) {
        getInRecord(row.id).then(response => setForm(response.data))
      } else {
        setForm()
      }
    },
    setInRules() {
      this.formRules = {
        areaId: [{ required: true, message: '请选择库区', trigger: 'change' }],
        productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
        inOperator: [{ required: true, message: '请选择入库人', trigger: 'change' }],
        inType: [{ required: true, message: '请选择类型', trigger: 'change' }],
        inNum: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      }
    },
    openOutForm() {
      this.dialogType = 'out'
      this.dialogTitle = '出库登记'
      this.form = { areaId: undefined, productId: undefined, outOperator: undefined, outType: 1, outNum: undefined, sourceNo: undefined, remark: undefined }
      this.setOutRules()
      this.dialogOpen = true
      this.$nextTick(() => this.resetForm('mobileForm'))
    },
    openStockOutForm(row) {
      this.dialogType = 'stockOut'
      this.dialogTitle = '库存出库'
      this.form = { id: row.id, productName: row.productName, brand: row.brand, category: row.category, spec: row.spec, unit: row.unit, outOperator: undefined, outType: 1, outNum: undefined, sourceNo: undefined, remark: undefined }
      this.setOutRules()
      this.dialogOpen = true
      this.$nextTick(() => this.resetForm('mobileForm'))
    },
    setOutRules() {
      this.formRules = {
        areaId: [{ required: this.dialogType === 'out', message: '请选择库区', trigger: 'change' }],
        productId: [{ required: this.dialogType === 'out', message: '请选择产品', trigger: 'change' }],
        outOperator: [{ required: true, message: '请选择出库人', trigger: 'change' }],
        outType: [{ required: true, message: '请选择类型', trigger: 'change' }],
        outNum: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      }
    },
    openCheckForm() {
      this.dialogType = 'check'
      this.dialogTitle = '盘库登记'
      this.form = { areaId: undefined, productId: undefined, realNum: undefined, reason: undefined }
      this.setCheckRules()
      this.dialogOpen = true
      this.$nextTick(() => this.resetForm('mobileForm'))
    },
    setCheckRules() {
      this.formRules = {
        areaId: [{ required: true, message: '请选择库区', trigger: 'change' }],
        productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
        realNum: [{ required: true, message: '请输入实盘数量', trigger: 'blur' }]
      }
    },
    openPendingAgentPlanAfterProduct() {
      const nextPlan = this.agent.pendingNextPlan
      const savedProduct = Object.assign({}, this.form)
      this.agent.pendingNextPlan = null
      optionselectProduct().then(res => {
        this.productOptions = res.data || []
        const product = this.productOptions.find(item =>
          this.sameText(item.productName, savedProduct.productName) &&
          this.sameText(item.brand, savedProduct.brand) &&
          this.sameText(item.category, savedProduct.category) &&
          this.sameText(item.spec, savedProduct.spec)
        )
        if (!product) {
          this.$modal.msgWarning('产品已保存，请手动选择产品完成入库')
          return
        }
        nextPlan.productId = product.id
        nextPlan.productName = product.productName
        nextPlan.brand = product.brand
        nextPlan.category = product.category
        nextPlan.spec = product.spec
        nextPlan.unit = product.unit
        nextPlan.executable = true
        this.$nextTick(() => this.autoFillAgentForm(nextPlan))
      })
    },
    openPendingAgentPlanAfterArea() {
      const nextPlan = this.agent.pendingNextPlan
      const savedArea = Object.assign({}, this.form)
      this.agent.pendingNextPlan = null
      optionselectArea().then(res => {
        this.areaOptions = res.data || []
        const area = this.areaOptions.find(item => this.sameText(item.areaName, savedArea.areaName))
        if (!area) {
          this.$modal.msgWarning('库区已保存，请手动选择库区完成操作')
          return
        }
        nextPlan.areaId = area.id
        nextPlan.areaName = area.areaName
        nextPlan.executable = true
        this.$nextTick(() => this.autoFillAgentForm(nextPlan))
      })
    },
    sameText(left, right) {
      return String(left || '').trim().toLowerCase() === String(right || '').trim().toLowerCase()
    },
    openProductForm(row) {
      this.dialogType = 'product'
      this.dialogTitle = row && row.id ? '修改产品' : '新增产品'
      this.formRules = {
        productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
      }
      const setForm = data => {
        this.form = Object.assign({
          id: undefined,
          productCode: undefined,
          productName: undefined,
          brand: undefined,
          category: undefined,
          spec: undefined,
          unit: undefined,
          remark: undefined
        }, data || {})
        this.dialogOpen = true
        this.$nextTick(() => this.resetForm('mobileForm'))
      }
      if (row && row.id) {
        getProduct(row.id).then(response => setForm(response.data))
      } else {
        setForm()
      }
    },
    openAreaForm(row) {
      this.dialogType = 'area'
      this.dialogTitle = row && row.id ? '修改库区' : '新增库区'
      this.formRules = {
        areaName: [{ required: true, message: '请输入库区名称', trigger: 'blur' }]
      }
      const setForm = data => {
        this.form = Object.assign({
          id: undefined,
          areaCode: undefined,
          areaName: undefined,
          remark: undefined
        }, data || {})
        this.dialogOpen = true
        this.$nextTick(() => this.resetForm('mobileForm'))
      }
      if (row && row.id) {
        getArea(row.id).then(response => setForm(response.data))
      } else {
        setForm()
      }
    },
    submitDialog() {
      this.$refs.mobileForm.validate(valid => {
        if (!valid) return
        let request
        if (this.dialogType === 'in') request = this.form.id ? updateInRecord(this.form) : addInRecord(this.form)
        if (this.dialogType === 'out') request = addOutRecord(this.form)
        if (this.dialogType === 'stockOut') request = outStock(this.form)
        if (this.dialogType === 'check') request = addStockCheck(this.form)
        if (this.dialogType === 'product') request = this.form.id ? updateProduct(this.form) : addProduct(this.form)
        if (this.dialogType === 'area') request = this.form.id ? updateArea(this.form) : addArea(this.form)
        request.then(() => {
          const editMaintainData = (this.dialogType === 'product' || this.dialogType === 'area') && this.form.id
          const hasPendingNextPlan = !!this.agent.pendingNextPlan
          this.$modal.msgSuccess(editMaintainData ? '修改成功' : '保存成功')
          this.dialogOpen = false
          if (this.dialogType === 'product') {
            this.loadProducts()
            this.loadOptions()
            this.loadStock()
            this.loadSummary()
            if (hasPendingNextPlan && !editMaintainData) {
              this.openPendingAgentPlanAfterProduct()
            } else {
              this.clearAgent()
            }
            return
          }
          if (this.dialogType === 'area') {
            this.loadAreas()
            this.loadOptions()
            this.loadStock()
            this.loadSummary()
            if (hasPendingNextPlan && !editMaintainData) {
              this.openPendingAgentPlanAfterArea()
            } else {
              this.clearAgent()
            }
            return
          }
          this.clearAgent()
          this.refreshAll()
        })
      })
    },
    deleteProductItem(row) {
      this.$modal.confirm('确认删除产品“' + (row.productName || '-') + '”？').then(() => delProduct(row.id)).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.loadProducts()
        this.loadOptions()
        this.loadStock()
        this.loadSummary()
      }).catch(() => {})
    },
    deleteAreaItem(row) {
      this.$modal.confirm('确认删除库区“' + (row.areaName || '-') + '”？').then(() => delArea(row.id)).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.loadAreas()
        this.loadOptions()
        this.loadStock()
        this.loadSummary()
      }).catch(() => {})
    },
    deleteInItem(row) {
      this.$modal.confirm('确认删除入库记录“' + (row.inNo || '-') + '”？').then(() => delInRecord(row.id)).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.loadInRecords()
        this.loadSummary()
      }).catch(() => {})
    },
    confirmIn(row) {
      this.$modal.confirm('确认将该记录入库？').then(() => confirmInRecord(row.id)).then(() => {
        this.$modal.msgSuccess('入库成功')
        this.refreshAll()
      }).catch(() => {})
    },
    confirmCheck(row) {
      this.$modal.confirm('确认盘点结果生效？').then(() => confirmStockCheck(row.id)).then(() => {
        this.$modal.msgSuccess('盘点已生效')
        this.refreshAll()
      }).catch(() => {})
    },
    handleLogout() {
      this.$store.dispatch('LogOut').then(() => {
        this.$router.push('/login?redirect=/mobile')
      })
    }
  }
}
</script>

<style scoped>
.mobile-app {
  min-height: 100vh;
  background: #f4f6f8;
  color: #1f2d3d;
}
.mobile-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e6ebf2;
}
.mobile-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}
.mobile-subtitle {
  color: #7a8794;
  font-size: 12px;
}
.mobile-main {
  padding: 12px 12px 78px;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.summary-card {
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 8px;
  padding: 12px;
}
.summary-card span {
  display: block;
  color: #7a8794;
  font-size: 12px;
}
.summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
}
.summary-card.warning strong {
  color: #e6a23c;
}
.summary-card.danger strong {
  color: #f56c6c;
}
.mobile-agent {
  margin: 12px 0;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 8px;
}
.agent-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.agent-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}
.agent-subtitle {
  color: #7a8794;
  font-size: 12px;
  line-height: 18px;
}
.agent-actions {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 8px;
  margin-top: 8px;
}
.agent-result {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.agent-plan {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  background: #f7f9fc;
  border-radius: 6px;
}
.agent-plan strong {
  display: block;
  margin-top: 5px;
  line-height: 20px;
}
.agent-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-detail span {
  padding: 5px 8px;
  color: #606266;
  background: #f4f6f9;
  border-radius: 4px;
  font-size: 12px;
}
.agent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-candidates span {
  padding: 5px 8px;
  color: #606266;
  background: #f4f6f9;
  border-radius: 4px;
  font-size: 12px;
}
.agent-stock {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e8edf3;
  border-radius: 6px;
}
.agent-stock strong {
  color: #1f7aec;
  font-size: 18px;
  white-space: nowrap;
}
.agent-stock-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.quick-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.quick-panel button {
  height: 42px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #ffffff;
  color: #2f4056;
}
.panel-title {
  margin: 16px 2px 8px;
  font-size: 15px;
  font-weight: 700;
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.section-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}
.section-subtitle {
  color: #7a8794;
  font-size: 12px;
  line-height: 18px;
}
.filter-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.filter-panel .el-button {
  grid-column: span 2;
}
.full-button {
  width: 100%;
  margin-bottom: 10px;
}
.mobile-card {
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.card-title {
  font-weight: 700;
  line-height: 22px;
}
.card-subtitle,
.meta-line,
.record-line {
  color: #7a8794;
  font-size: 12px;
  line-height: 20px;
}
.stock-num {
  color: #1f7aec;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.record-line,
.check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
}
.check-grid span {
  font-size: 13px;
}
.check-grid .diff {
  color: #f56c6c;
  font-weight: 700;
}
.card-actions {
  margin-top: 10px;
  text-align: right;
}
.empty-tip {
  padding: 28px 0;
  color: #909399;
  text-align: center;
}
.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 62px;
  background: #ffffff;
  border-top: 1px solid #e6ebf2;
}
.bottom-nav button {
  border: 0;
  background: transparent;
  color: #7a8794;
  font-size: 12px;
}
.bottom-nav i {
  display: block;
  margin-bottom: 3px;
  font-size: 18px;
}
.bottom-nav .active {
  color: #1f7aec;
  font-weight: 700;
}
.mobile-app .el-select,
.mobile-app .el-input,
.mobile-app .el-input-number {
  width: 100%;
}
@media (min-width: 768px) {
  .mobile-main {
    max-width: 760px;
    margin: 0 auto;
  }
  .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .filter-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .filter-panel .el-button {
    grid-column: auto;
  }
}
</style>

<style>
.mobile-dialog {
  width: calc(100vw - 24px) !important;
  max-width: 620px;
  margin-top: 6vh !important;
}
.mobile-dialog .el-dialog__body {
  padding: 12px 16px 0;
}
@media (max-width: 768px) {
  .el-message-box__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
  }
  .el-message-box {
    width: 100% !important;
    max-width: 340px;
    margin-top: 0 !important;
    margin-bottom: 0;
  }
}
</style>
