<template>
  <div class="app-container">
    <h2>入仓操作-{{ order.orderNo }}</h2>

    <order-base-info :order="order"></order-base-info>

    <div style="margin-top: 20px">
      <span>储位：</span><el-button type="primary" size="mini" @click="areaVisible = true">选择</el-button>
    </div>

    <h2>货物信息</h2>
    <el-table
      :data="order.orderItemVOList || []"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="prodTitleZh"
        label="品名">
      </el-table-column>
      <el-table-column
        label="填单货物属性">
        <template v-slot="{row}">
          品牌：{{ row.brand ? '有' : '无' }}<br>
          箱数：{{ row.num }}<br>
          体积：{{ row.volume }}m³<br>
          重量：{{ row.weight }}Kg
        </template>
      </el-table-column>
      <el-table-column
        label="入库货物属性">
        <template v-slot="{row}">
          品牌：{{ row.brand ? '有' : '无' }}<br>
          箱数：{{ row.num }}<br>
          体积：{{ row.volume }}m³<br>
          重量：{{ row.weight }}Kg
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="快递单号">
      </el-table-column>
      <el-table-column
        prop="address"
        label="最后操作时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template v-slot="{row}">
          <el-button size="mini" type="text" @click="handleWarehousing(row.prodId)">入仓</el-button>
          <el-button size="mini" type="text" @click="handleWarehousing(row.prodId)">追加</el-button>
          <el-button size="mini" type="text" @click="handleWarehousingReturn(row)">退仓</el-button>
        </template>
      </el-table-column>
    </el-table>

    <h2>特殊需求</h2>
    <el-form ref="form" :model="form" label-width="180px" style="max-width: 600px;">
      <el-form-item label="套编织袋费">
        <el-input v-model="form.a" placeholder="请输入套编织袋费">
          <el-select v-model="form.b" placeholder="请选择" slot="append" style="width: 100px">
            <el-option
              v-for="item in currencyList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="木架包装费">
        <el-input v-model="form.a" placeholder="请输入木架包装费">
          <el-select v-model="form.b" placeholder="请选择" slot="append" style="width: 100px">
            <el-option
              v-for="item in currencyList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="纸箱包装费">
        <el-input v-model="form.a" placeholder="请输入纸箱包装费">
          <el-select v-model="form.b" placeholder="请选择" slot="append" style="width: 100px">
            <el-option
              v-for="item in currencyList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="内陆运输费">
        <el-input v-model="form.a" placeholder="请输入内陆运输费">
          <el-select v-model="form.b" placeholder="请选择" slot="append" style="width: 100px">
            <el-option
              v-for="item in currencyList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="打包费">
        <el-input v-model="form.a" placeholder="请输入打包费">
          <el-select v-model="form.b" placeholder="请选择" slot="append" style="width: 100px">
            <el-option
              v-for="item in currencyList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="易碎标签">
        <el-input v-model="form.a" placeholder="请输入易碎标签">
          <el-select v-model="form.b" placeholder="请选择" slot="append" style="width: 100px">
            <el-option
              v-for="item in currencyList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="其他费用">
        <el-input v-model="form.a" placeholder="请输入其他费用">
          <el-select v-model="form.b" placeholder="请选择" slot="append" style="width: 100px">
            <el-option
              v-for="item in currencyList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>

      <div style="text-align: center">
        <el-button type="primary">转异</el-button>
        <el-button type="primary">完成入仓</el-button>
      </div>
    </el-form>

    <warehouse-area-dialog :visible.sync="areaVisible"></warehouse-area-dialog>

    <edit-dialog :visible.sync="warehousingVisible" :id="warehousingId"></edit-dialog>
  </div>
</template>

<script>
import {getCurrencyList} from "@/api/ecw/currency"
import {getOrder} from "@/api/ecw/order"
import orderBaseInfo from "@/components/OrderBaseInfo"
import WarehouseAreaDialog from '@/components/WarehouseAreaDialog'
import editDialog from '@/views/ecw/order/warehousing/components/editDialog'

export default {
  name: "Warehousing",

  components: {
    orderBaseInfo,
    WarehouseAreaDialog,
    editDialog
  },

  mounted() {
    if(this.$route.query.id){
      this.orderId = this.$route.query.id
      getOrder(this.orderId).then(r => this.order = r.data)
    }
    getCurrencyList().then(res => this.currencyList = res.data)
  },

  data() {
    return {
      areaVisible: false,
      warehousingVisible: false,
      form: {
        a: '',
        b: 3
      },
      currencyList:[],
      order: {},
      warehousingId: undefined
    }
  },

  methods: {
    handleWarehousing(id) {
      this.warehousingId = id
      this.warehousingVisible = true
    },
    handleWarehousingReturn(item){
      this.$confirm(item.prodTitleZh + '退仓后不可恢复，是否确认退仓？', '确定要退仓？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(item.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
