<template>
  <div class="form-page">
    <div class="page-head">
      <div class="page-title">客户采购订单详情</div>
      <div class="head-btn">
        <el-button size="mini" @click="onGoBack">返回</el-button>
      </div>
    </div>
    <div class="page-body">
      <div>采购信息</div>
      <el-form :model="odPurchaseOrder" ref="purchaseForm" :rules="rules" label-width="130px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="采购订单编号" prop="orderNo">
              <el-input v-model.trim="odPurchaseOrder.orderNo" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户编号" prop="clientNo">
              <el-input v-model.trim="odPurchaseOrder.clientNo" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="clientName">
              <el-input v-model.trim="odPurchaseOrder.clientName" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交货日期" prop="deliveryDate">
              <el-date-picker type="date" v-model="odPurchaseOrder.deliveryDate" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="state">
              <el-select v-model="odPurchaseOrder.state" placeholder="请选择订单状态" clearable>
                <el-option v-for="item in dict.type.sales_order_state" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="odPurchaseOrder.remark" placeholder="请输入 备注" show-word-limit maxlength="120" :rows="3"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table :data="odPurchaseOrder.detailList" max-height="600">
        <el-table-column label="产品编号" prop="itemNo" min-width="120"/>
        <el-table-column label="产品名称" prop="itemName" min-width="120"/>
        <el-table-column label="产品总数量" prop="totalNum" min-width="120"/>
        <el-table-column label="loss数量" prop="lossNum" min-width="120"/>
        <el-table-column label="产品数量" prop="num" min-width="120"/>
        <el-table-column label="状态" prop="state" min-width="120"/>
        <el-table-column label="宝绅内部品名" prop="productName" min-width="120"/>
        <el-table-column label="客户产品名称" prop="poProductName" min-width="120"/>
        <el-table-column label="客户产品代码" prop="poProductNo" min-width="120"/>
        <el-table-column label="客户颜色" prop="poColor" min-width="120"/>
        <el-table-column label="配色号" prop="poColorNo" min-width="120"/>
        <el-table-column label="产地" prop="region" min-width="120"/>
        <el-table-column label="尺码组" prop="sizeGroup" min-width="120"/>
        <el-table-column label="尺码" prop="size" min-width="120"/>
        <el-table-column label="整/半码" prop="wholeYard" min-width="120"/>
        <el-table-column label="特殊size" prop="specialSize" min-width="120"/>
        <el-table-column label="型体号" prop="featureNo" min-width="120"/>
        <el-table-column label="指令号" prop="cmdNo" min-width="120"/>
        <el-table-column label="订单量" prop="orderNum" min-width="120"/>
        <el-table-column label="产品规格" prop="productSize" min-width="120"/>
        <el-table-column label="交货日期" prop="deliveryDate" min-width="120"/>
        <el-table-column label="客户单重" prop="poKg" min-width="120"/>
        <el-table-column label="客户单号" prop="poOrderNo" min-width="120"/>
        <el-table-column label="客户单位" prop="customerUnit" min-width="120"/>
        <el-table-column label="签收人" prop="signer" min-width="120"/>
        <el-table-column label="销线" prop="salePath" min-width="120"/>
        <el-table-column label="段别" prop="segment" min-width="120"/>
        <el-table-column label="版面" prop="layout" min-width="120"/>
        <el-table-column label="季度" prop="quarter" min-width="120"/>
        <el-table-column label="po号" prop="poNo" min-width="120"/>
        <el-table-column label="wip号" prop="wipNo" min-width="120"/>
        <el-table-column label="装箱数" prop="packingNum" min-width="120"/>
        <el-table-column label="周期" prop="cycle" min-width="120"/>
        <el-table-column label="sk编号" prop="skNo" min-width="120"/>
        <el-table-column label="专利号" prop="patentNo" min-width="120"/>
        <el-table-column label="材质描述" prop="materialDesc" min-width="120"/>
        <el-table-column label="ShipToId" prop="shipToId" min-width="120"/>
        <el-table-column label="条码" prop="barCode" min-width="120"/>
        <el-table-column label="印刷方向" prop="printingDirection" min-width="120"/>
      </el-table>
    </div>

    <el-dialog :visible.sync="showDetail" title="客户采购单详情" width="960px">
      <el-form :model="detailForm" ref="detailForm" :rules="detailRules" label-width="120px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="产品编号" prop="itemNo">
              <el-input v-model.trim="detailForm.itemNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="itemName">
              <el-input v-model.trim="detailForm.itemName" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品总数量" prop="totalNum">
              <el-input v-model.trim="detailForm.totalNum" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="loss数量" prop="lossNum">
              <el-input v-model.trim="detailForm.lossNum" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品数量" prop="num">
              <el-input v-model.trim="detailForm.num" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价" prop="price">
              <el-input-money v-model.trim="detailForm.price" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装运点" prop="shipmentPointNo">
              <el-input-money v-model.trim="detailForm.shipmentPointNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存储地点" prop="storeAddr">
              <el-input-money v-model.trim="detailForm.storeAddr" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批次号" prop="batchNo">
              <el-input-money v-model.trim="detailForm.batchNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="定价值" prop="pricingVal">
              <el-input-money v-model.trim="detailForm.pricingVal" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际交货日期" prop="actualDeliveryDate">
              <el-input-money v-model.trim="detailForm.actualDeliveryDate" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报价单位" prop="offerUnit">
              <el-input-money v-model.trim="detailForm.offerUnit" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售单位" prop="saleUnit">
              <el-input-money v-model.trim="detailForm.saleUnit" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="尺码单位" prop="sizeUnit">
              <el-input-money v-model.trim="detailForm.sizeUnit" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户尺码单位" prop="clientSizeUnit">
              <el-input-money v-model.trim="detailForm.clientSizeUnit" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户工厂代号" prop="plantCode">
              <el-input-money v-model.trim="detailForm.plantCode" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装方式" prop="packMode">
              <el-input-money v-model.trim="detailForm.packMode" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="state">
              <el-input-money v-model.trim="detailForm.state" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宝绅内部品名" prop="productName">
              <el-input-money v-model.trim="detailForm.productName" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户产品名称" prop="poProductName">
              <el-input-money v-model.trim="detailForm.poProductName" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户产品代码" prop="poProductNo">
              <el-input-money v-model.trim="detailForm.poProductNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户颜色" prop="poColor">
              <el-input-money v-model.trim="detailForm.poColor" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配色号" prop="poColorNo">
              <el-input-money v-model.trim="detailForm.poColorNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产地" prop="region">
              <el-input-money v-model.trim="detailForm.region" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="尺码组" prop="sizeGroup">
              <el-input-money v-model.trim="detailForm.sizeGroup" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="尺码" prop="size">
              <el-input-money v-model.trim="detailForm.size" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整/半码" prop="wholeYard">
              <el-input-money v-model.trim="detailForm.wholeYard" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特殊size" prop="specialSize">
              <el-input-money v-model.trim="detailForm.specialSize" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型体号" prop="featureNo">
              <el-input-money v-model.trim="detailForm.featureNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="指令号" prop="cmdNo">
              <el-input-money v-model.trim="detailForm.cmdNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单量" prop="orderNum">
              <el-input-money v-model.trim="detailForm.orderNum" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品规格" prop="productSize">
              <el-input-money v-model.trim="detailForm.productSize" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货日期" prop="deliveryDate">
              <el-input-money v-model.trim="detailForm.deliveryDate" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单重" prop="poKg">
              <el-input-money v-model.trim="detailForm.poKg" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单号" prop="poOrderNo">
              <el-input-money v-model.trim="detailForm.poOrderNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单位" prop="customerUnit">
              <el-input-money v-model.trim="detailForm.customerUnit" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签收人" prop="signer">
              <el-input-money v-model.trim="detailForm.signer" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销线" prop="salePath">
              <el-input-money v-model.trim="detailForm.salePath" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="段别" prop="segment">
              <el-input-money v-model.trim="detailForm.segment" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版面" prop="layout">
              <el-input-money v-model.trim="detailForm.layout" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="季度" prop="quarter">
              <el-input-money v-model.trim="detailForm.quarter" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="po号" prop="poNo">
              <el-input-money v-model.trim="detailForm.poNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="wip号" prop="wipNo">
              <el-input-money v-model.trim="detailForm.wipNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装箱数" prop="packingNum">
              <el-input-money v-model.trim="detailForm.packingNum" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="周期" prop="cycle">
              <el-input-money v-model.trim="detailForm.cycle" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="sk编号" prop="skNo">
              <el-input-money v-model.trim="detailForm.skNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专利号" prop="patentNo">
              <el-input-money v-model.trim="detailForm.patentNo" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材质描述" prop="materialDesc">
              <el-input-money v-model.trim="detailForm.materialDesc" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ShipToId" prop="shipToId">
              <el-input-money v-model.trim="detailForm.shipToId" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条码" prop="barCode">
              <el-input-money v-model.trim="detailForm.barCode" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="印刷方向" prop="printingDirection">
              <el-input-money v-model.trim="detailForm.printingDirection" clearable placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer">
        <el-button @click="showDetail = false">取消</el-button>
        <el-button type="primary" @click="onEditDetail">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getOrder } from '@/api/mes/od/purchaseOrder'
import { listUser } from '@/api/system/user'
import { listClient } from '@/api/mes/md/client'
import ItemSelect from '@/components/itemSelect/single.vue'

export default {
  components: {
    ItemSelect
  },
  dicts: ['sales_order_state'],
  computed: {
    totalAmount() {
      return this.form.detailList.reduce((amount, item) => {
        amount = +item.amount
        return amount
      }, 0) || 0
    }
  },
  data() {
    return {
      showDetail: false,
      detailForm: {
        itemNo: null,
        itemName: null,
        totalNum: null,
        lossNum: null,
        num: null,
        price: null,
        shipmentPointNo: null,
        storeAddr: null,
        batchNo: null,
        pricingVal: null,
        actualDeliveryDate: null,
        offerUnit: null,
        saleUnit: null,
        sizeUnit: null,
        clientSizeUnit: null,
        plantCode: null,
        packMode: null,
        state: null,
        productName: null,
        poProductName: null,
        poProductNo: null,
        poColor: null,
        poColorNo: null,
        region: null,
        sizeGroup: null,
        size: null,
        wholeYard: null,
        specialSize: null,
        featureNo: null,
        cmdNo: null,
        orderNum: null,
        productSize: null,
        deliveryDate: null,
        poKg: null,
        poOrderNo: null,
        customerUnit: null,
        signer: null,
        salePath: null,
        segment: null,
        layout: null,
        quarter: null,
        poNo: null,
        wipNo: null,
        packingNum: null,
        cycle: null,
        skNo: null,
        patentNo: null,
        materialDesc: null,
        shipToId: null,
        barCode: null,
        printingDirection: null,
      },
      detailRules: {
        itemName: { required: true, message: '请选择产品名称', trigger: ['change'] },
        itemCode: { required: true, message: '请选择产品编码', trigger: ['change'] },
        num: { required: true, message: '请输入产品数量', trigger: ['blur'] },
        amount: { required: true, message: '请输入产品金额', trigger: ['blur'] },
        state: { required: true, message: '请选择产品状态', trigger: ['change'] }
      },
      odPurchaseOrder: {
        orderNo: null,
        clientId: null,
        clientNo: null,
        clientName: null,
        deliveryDate: null,
        state: '1',
        source: null,
        detailList: []
      },
      odSalesOrder: {
        orderNo: null,
        purchaseNo: null,
        purchaseDate: null,
        clientId: null,
        clientNo: null,
        clientName: null,
        typeNo: null,
        amount: null,
        merchandiser: null,
        custom: null,
        orgNo: null,
        channelNo: null,
        reasonNo: null,
        agencyNo: null,
        groupNo: null,
        currencyNo: null,
        deliveryDate: null,
        clauseNo: null,
        clauseAddr: null,
        netValue: null,
        despatchType: null,
        barCode: null,
        urgent: null,
        ospNo: null,
        state: '1',
        remark: '1',
        detailList: []
      },
      rules: {
        orderNo: { required: true, message: '请输入订单编号', trigger: ['change'] },
        clientId: { required: true, message: '请选择客户', trigger: ['change'] },
        deliveryDate: { required: true, message: '请选择交货日期', trigger: ['change'] },
        amount: { required: true, message: '请输入订单总金额', trigger: ['blur'] },
        merchandiser: { required: true, message: '请选择更进入', trigger: ['change'] },
        state: { required: true, message: '请选择订单状态', trigger: ['change'] }
      },
      clientList: [],
      userList: []
    }
  },
  methods: {

    onGoBack() {
      this.$store.dispatch('tagsView/delView', this.$router.currentRoute)
      this.$router.back()
    },

    getClientList(key) {
      listClient({ clientName: key, pageNum: 1, pageSize: 100 }).then(res => this.clientList = res.rows)
    },

    getUserList(key) {
      listUser({ nickName: key, pageNum: 1, pageSize: 100 }).then(res => this.userList = res.rows)
    },
    getDetail() {
      let orderId = this.$route.query.id
      if (orderId) {
        getOrder(orderId).then(res => {
          let { odPurchaseOrder, odSalesOrder } = res.data
          this.odPurchaseOrder = odPurchaseOrder
          this.odSalesOrder = odSalesOrder
        })
      }
    }
  },
  created() {
    this.getDetail()
    this.getUserList()
    this.getClientList()
  }
}
</script>

<style lang="scss" scoped>
.page-head {
  border-bottom: 1px solid #dddddd;
  box-shadow: 0 2px 2px #dddddd;
}

.page-title {
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.head-btn {
  margin: 0 20px 20px;
}

.page-body {
  margin: 20px 40px;
}

.item-spec-title {
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
  margin: 20px;
  padding: 10px;
  border-bottom: 1px solid #dddddd;

}

</style>
