<template>
  <div class="batch-order-container">
    <div class="page-title">
      <i class="title-bar"></i>
      <span>批量下单</span>
    </div>

    <div class="action-bar">
      <el-button @click="handleDownloadTemplate">标准导入文件下载</el-button>
      <el-button type="danger" @click="handleImportProducts">导入订单商品</el-button>
    </div>

    <div class="section-title">商品信息</div>
    <div class="product-list">
      <div v-for="(item, index) in productList" :key="index" class="product-item">
        <div class="product-image">
          <el-image :src="item.image" fit="contain">
            <template #error><div class="image-placeholder"><el-icon :size="30" color="#ccc"><Picture /></el-icon></div></template>
          </el-image>
        </div>
        <div class="product-info">
          <div class="product-name">{{ item.name }}</div>
        </div>
        <div class="product-spec-text">
          <div>{{ item.spec1 }}</div>
          <div>{{ item.spec2 }}</div>
        </div>
        <div class="product-price">¥{{ item.price }}</div>
        <div class="product-quantity">{{ item.quantity }}</div>
        <div class="product-subtotal">¥{{ item.subtotal }}</div>
        <div class="product-action">
          <span v-if="item.offShelf" class="off-shelf">已下架</span>
        </div>
      </div>
    </div>

    <div class="summary-info">共导入<em>{{ totalProducts }}</em>件商品，不可下单商品<em>{{ unavailableProducts }}</em>件</div>

    <div class="address-section">
      <div class="section-header">
        <span class="section-title">收货地址</span>
        <div class="section-actions">
          <el-button type="primary" link @click="handleConfirmAddress"><el-icon><Location /></el-icon> 确认收货地址</el-button>
          <el-button type="primary" link @click="handleManageAddress"><el-icon><Setting /></el-icon> 管理地址</el-button>
        </div>
      </div>
      <div class="address-list">
        <div v-for="(addr, index) in addressList" :key="index" :class="['address-card', { active: selectedAddress === index }]" @click="selectedAddress = index">
          <div class="address-detail">{{ addr.province }} {{ addr.city }} {{ addr.district }}{{ addr.detail }}</div>
          <div class="address-company">{{ addr.company }}</div>
          <div class="address-phone">{{ addr.phone }}</div>
        </div>
      </div>
      <el-button type="primary" link class="expand-btn" @click="showAllAddress = !showAllAddress">
        {{ showAllAddress ? '收起地址' : '展开全部地址' }} <el-icon><ArrowDown /></el-icon>
      </el-button>
    </div>

    <div class="delivery-section">
      <span class="label">配送时间</span>
      <el-date-picker v-model="deliveryDate" type="date" placeholder="请选择日期" style="width: 200px" />
    </div>

    <div class="remark-section">
      <span class="label">订单备注</span>
      <el-input v-model="orderRemark" type="textarea" :rows="3" placeholder="请输入详细地址，省市区无需重复输入" maxlength="50" show-word-limit style="flex: 1" />
    </div>

    <div class="submit-bar">
      <div class="total-info">共<em>{{ availableProducts }}</em>件商品</div>
      <div class="total-amount">合计: <span class="amount">¥{{ totalAmount }}</span><span class="freight">(含运费{{ freight }}元)</span></div>
      <el-button type="danger" size="large" @click="handleSubmitOrder">去下单</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Picture, Location, Setting, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const selectedAddress = ref(0)
const showAllAddress = ref(false)
const deliveryDate = ref('')
const orderRemark = ref('')

const productList = ref([
  { id: 1, image: '', name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, subtotal: '181', offShelf: false },
  { id: 2, image: '', name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, subtotal: '181', offShelf: true },
  { id: 3, image: '', name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, subtotal: '181', offShelf: false },
  { id: 4, image: '', name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, subtotal: '181', offShelf: false },
  { id: 5, image: '', name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, subtotal: '181', offShelf: true }
])

const addressList = ref([
  { province: '广东省', city: '广州市', district: '萝岗区科学城11号', detail: '', company: '中国南方电网有限公司', phone: '18062697722' },
  { province: '广东省', city: '广州市', district: '萝岗区科学城11号', detail: '', company: '中国南方电网有限公司', phone: '18062697722' },
  { province: '广东省', city: '广州市', district: '萝岗区科学城11号', detail: '', company: '中国南方电网有限公司', phone: '18062697722' },
  { province: '广东省', city: '广州市', district: '萝岗区科学城11号', detail: '', company: '中国南方电网有限公司', phone: '18062697722' }
])

const totalProducts = computed(() => productList.value.length)
const unavailableProducts = computed(() => productList.value.filter(p => p.offShelf).length)
const availableProducts = computed(() => productList.value.filter(p => !p.offShelf).length)
const totalAmount = computed(() => productList.value.filter(p => !p.offShelf).reduce((sum, p) => sum + parseFloat(p.subtotal), 0).toFixed(2))
const freight = ref('12.00')

const handleDownloadTemplate = () => { ElMessage.success('开始下载模板文件') }
const handleImportProducts = () => { ElMessage.info('请选择要导入的文件') }
const handleConfirmAddress = () => { ElMessage.success('已确认收货地址') }
const handleManageAddress = () => { router.push('/enterprise/addressManage') }
const handleSubmitOrder = () => {
  if (availableProducts.value === 0) { ElMessage.warning('没有可下单的商品'); return }
  ElMessage.success('订单提交成功')
}
</script>

<style scoped lang="scss">
.batch-order-container { padding: 20px; background: #fff; min-height: 100%; }
.page-title { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.title-bar { display: inline-block; width: 3px; height: 16px; background: #e60012; border-radius: 2px; }
.action-bar { display: flex; gap: 15px; margin-bottom: 20px; }
.section-title { font-size: 14px; font-weight: 500; color: #333; margin-bottom: 15px; }
.product-list { border: 1px solid #eee; border-radius: 4px; margin-bottom: 15px;
  .product-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f5f5f5;
    &:last-child { border-bottom: none; }
    .product-image { width: 60px; height: 60px; background: #f5f5f5; border-radius: 4px; overflow: hidden; flex-shrink: 0; margin-right: 15px;
      .el-image { width: 100%; height: 100%; } .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
    }
    .product-info { flex: 1; min-width: 0;
      .product-name { font-size: 13px; color: #333; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    }
    .product-spec-text { width: 80px; text-align: center; font-size: 12px; color: #666; }
    .product-price { width: 80px; text-align: center; font-size: 14px; color: #e60012; }
    .product-quantity { width: 60px; text-align: center; font-size: 14px; color: #333; }
    .product-subtotal { width: 80px; text-align: center; font-size: 14px; color: #e60012; }
    .product-action { width: 80px; text-align: center; .off-shelf { color: #e60012; font-size: 13px; } }
  }
}
.summary-info { text-align: right; font-size: 13px; color: #666; margin-bottom: 25px; em { color: #e60012; font-style: normal; font-weight: bold; } }
.address-section { margin-bottom: 25px;
  .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; .section-actions { display: flex; gap: 15px; } }
  .address-list { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 10px;
    .address-card { width: 200px; padding: 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s;
      &:hover { border-color: #e60012; } &.active { border-color: #e60012; background: #fff5f5; }
      .address-detail { font-size: 13px; color: #333; line-height: 1.4; margin-bottom: 5px; }
      .address-company { font-size: 12px; color: #666; margin-bottom: 3px; }
      .address-phone { font-size: 12px; color: #999; }
    }
  }
  .expand-btn { font-size: 13px; }
}
.delivery-section { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; .label { font-size: 14px; color: #333; width: 70px; } }
.remark-section { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 30px; .label { font-size: 14px; color: #333; width: 70px; padding-top: 8px; } }
.submit-bar { display: flex; justify-content: flex-end; align-items: center; gap: 20px; padding: 20px 0; border-top: 1px solid #eee; margin-top: 20px;
  .total-info { font-size: 14px; color: #666; em { color: #e60012; font-style: normal; font-weight: bold; } }
  .total-amount { font-size: 14px; color: #333; .amount { font-size: 20px; font-weight: bold; color: #e60012; } .freight { font-size: 12px; color: #999; margin-left: 5px; } }
}
</style>
