<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">
          <el-select v-model="scope.row.manufacturingSpecIds" placeholder="请选择制造规格" multiple>
            <el-option v-for="item in manufacturingSpecList" :key="item.specId" :label="item.specName" :value="item.specId" />
          </el-select>
        </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>
        <el-select placeholder="请选择产品规范" @change="handleChangeSpec" style="width: 100%;">
          <el-option v-for="item in productSpecList.filter(item => item.productId != this.form.productId)" :key="item.groupId" :label="item.groupName" :value="item.groupId" />
          <template #empty>
            <el-button type="primary" @click="handleAddSpec">新增产品规范</el-button>
          </template>
        </el-select>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import OrderSelect from "../components/OrderSelect";
import { listOrderDetail, updateOrderDetail } 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";

import { listManufacturingSpec } from "@/api/work/manufacturingSpec";
import { listProductSpecGroup } from "@/api/work/productSpecGroup";

export default {
  name: 'CreateByOrder',
  components: {
    OrderSelect,
    ProductInfo,
    MSpecSelect,
    ProductSpec
  },
  created() {
    listManufacturingSpec().then(res => {
      this.manufacturingSpecList = res.rows;
    })
    listProductSpecGroup().then(response => {
      this.productSpecList = response.rows;
    });
  },
  data() {
    return {
      order: null,
      orderItems: [],
      specDialogVisible: false,
      form: {
        groupId: undefined
      },
      manufacturingSpecList: [],
      productSpecList: [],
    }
  },
  methods: {
    handleOrderChange(order) {
      this.order = order;
      listOrderDetail({
        orderId: order.orderId
      }).then(res => {
        this.orderItems = res.rows
      })
    },
    handleCreate() {
      console.log(this.orderItems);
      if (this.orderItems.length === 0) {
        this.$message.error('请选择订单');
        return;
      }
      for (const item of this.orderItems) {
        if (item.groupId && item.manufacturingSpecIds.length === 0) {
          this.$message.error('请选择制造规格');
          return;
        }
      }
      this.$emit('create', this.orderItems);
    },
    handleSpec(row) {
      this.specDialogVisible = true;
      this.form = row;
    },
    handleChangeSpec(groupId) {
      // 确认更换
      this.$modal && this.$modal.confirm('是否确认更换产品规范？').then(() => {
        this.form.groupId = groupId;
        updateOrderDetail(this.form).then(response => {
          this.$modal && this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        }).finally(() => {
          this.buttonLoading = false;
        });
      });
    },
    handleAddSpec() {
      this.$router.push({
        path: '/production/pspec',
      });
    }
  }
}
</script>