<script setup>
import { Plus, QuestionFilled } from '@element-plus/icons-vue'
import { deliveryMode, deliveryTime, orderStockCount } from '@/utils/dictionary'
const form = inject('form')
</script>

<template>
  <div>
    <el-form-item label="发货模式" prop="info.delivery_mode" :rules="[{ required: true, message: '请选择' }]">
      <div class="form-tips">
        注：现货商品切勿虚设为预售商品，请合理配置发货模式，以免影响成交转化。若切换发货模式，系统将不会回增原发货模式下被取消订单库存。
      </div>
      <el-radio-group v-model="form.info.delivery_mode" style="display: block">
        <el-radio v-for="item in deliveryMode" :key="item.value" v-bind="item" style="display: block"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="商品规格">
      <div class="form-tips">准确填写规格信息，有助于商品在搜索场景获取更多流量</div>
      <el-button size="large" :icon="Plus">添加规格（1/3）</el-button>
    </el-form-item>
    <el-form-item label="发货时效" prop="info.delivery_time">
      <div class="form-tips">
        发货时效计算：买家支付后开始计算发货时效，请合理配置发货时效（注！现货库存切勿虚设为预售时效）
      </div>
      <el-radio-group v-model="form.info.delivery_time">
        <el-radio v-for="item in deliveryTime" :key="item.value" v-bind="item"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="价格与库存" required>
      <el-table :data="form.info.sku" border :header-cell-style="{ backgroundColor: '#f5f7fa' }">
        <el-table-column prop="price" label="价格" align="center">
          <template #default="{ row }">
            <el-input v-model="row.price" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" align="center">
          <template #default="{ row }">
            <el-input v-model="row.stock" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="参考价" prop="info.reference_price">
      <template #label>
        <span>参考价</span>
        <el-popover :width="200" trigger="hover" placement="right">
          <img src="/live/product.png" style="width: 100%" />
          <template #reference>
            <QuestionFilled style="width: 20px; vertical-align: middle"></QuestionFilled>
          </template>
        </el-popover>
      </template>
      ¥<el-input v-model="form.info.reference_price" placeholder="请输入" style="width: 300px; margin: 0 10px" />元
    </el-form-item>
    <el-form-item label="订单库存计数" prop="info.order_stock_count">
      <el-radio-group v-model="form.info.order_stock_count">
        <el-radio v-for="item in orderStockCount" :key="item.value" v-bind="item"></el-radio>
      </el-radio-group>
    </el-form-item>
  </div>
</template>
