<template>
  <div>
    <el-row style="margin-bottom: 10px;">
      <el-col :span="12">
        <OrderSelect @change="handleOrderChange" />
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button type="primary" @click="handleCreate">确认创建</el-button>
      </el-col>
    </el-row>

    <el-table :data="orderItems" style="width: 100%;">
      <el-table-column label="产品">
        <template slot-scope="scope">
          <ProductInfo :productId="scope.row.productId" />
        </template>
      </el-table-column>
      <el-table-column label="规格">
        <template slot-scope="scope">
          <el-button type="text" @click="handleSpec(scope.row)">查看规格</el-button>
        </template>
      </el-table-column>
      <el-table-column label="制造规格">
        <template slot-scope="scope">
          <MSpecSelect v-model="scope.row.manufacturingSpecIds" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="产品规范" :visible.sync="specDialogVisible" width="600px" append-to-body>
      <ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="false"/>
      <div v-else>
        暂无产品规格
      </div>
    </el-dialog>
  </div>
</template>

<script>
import OrderSelect from "../components/OrderSelect";
import { listOrderDetail } from "@/api/wms/orderDetail";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import MSpecSelect from "@/views/work/components/MSpecSelect";
import ProductSpec from "@/views/wms/order/panels/spec.vue";

export default {
  name: 'CreateByOrder',
  components: {
    OrderSelect,
    ProductInfo,
    MSpecSelect,
    ProductSpec
  },
  data() {
    return {
      order: null,
      orderItems: [],
      specDialogVisible: false,
      form: {
        groupId: undefined
      }
    }
  },
  methods: {
    handleOrderChange(order) {
      this.order = order;
      listOrderDetail({
        orderId: order.orderId
      }).then(res => {
        this.orderItems = res.rows
      })
    },
    handleCreate() {
      console.log(this.orderItems);
      this.$emit('create', this.orderItems);
    },
    handleSpec(row) {
      this.specDialogVisible = true;
      this.form = row;
    }
  }
}
</script>