<template>
  <div class="form-page">
    <div class="page-head">
      <div class="page-title">{{$t('客户采购订单详情')}}</div>
      <div class="head-btn">
        <el-button size="mini" @click="onGoBack">{{ $t('common.back') }}</el-button>
      </div>
    </div>
    <div class="page-body">
      <div>{{$t('采购信息')}}</div>
      <el-form :model="odPurchaseOrder" ref="purchaseForm" :rules="rules" label-width="130px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item :label="$t('采购订单编号')" prop="orderNo">
              <el-input v-model.trim="odPurchaseOrder.orderNo" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('客户编号')" prop="clientNo">
              <el-input v-model.trim="odPurchaseOrder.clientNo" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('客户名称')" prop="clientName">
              <el-input v-model.trim="odPurchaseOrder.clientName" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('交货日期')" prop="deliveryDate">
              <el-date-picker type="date" v-model="odPurchaseOrder.deliveryDate" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('common.status')" prop="state">
              <el-select v-model="odPurchaseOrder.state" 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="$t('common.remark')" prop="remark">
              <el-input type="textarea" v-model="odPurchaseOrder.remark" :placeholder="$t('请输入 备注')" 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="$t('产品编号')" prop="itemNo" min-width="120"/>
        <el-table-column :label="$t('产品名称')" prop="itemName" min-width="120"/>
        <el-table-column :label="$t('产品总数量')" prop="totalNum" min-width="120"/>
        <el-table-column :label="$t('loss数量')" prop="lossNum" min-width="120"/>
        <el-table-column :label="$t('产品数量')" prop="num" min-width="120"/>
        <el-table-column :label="$t('common.status')" prop="state" min-width="120"/>
        <el-table-column :label="$t('宝绅内部品名')" prop="productName" min-width="120"/>
        <el-table-column :label="$t('客户产品名称')" prop="poProductName" min-width="120"/>
        <el-table-column :label="$t('客户产品代码')" prop="poProductNo" min-width="120"/>
        <el-table-column :label="$t('客户颜色')" prop="poColor" min-width="120"/>
        <el-table-column :label="$t('配色号')" prop="poColorNo" min-width="120"/>
        <el-table-column :label="$t('产地')" prop="region" min-width="120"/>
        <el-table-column :label="$t('尺码组')" prop="sizeGroup" min-width="120"/>
        <el-table-column :label="$t('尺码')" prop="size" min-width="120"/>
        <el-table-column :label="$t('整/半码')" prop="wholeYard" min-width="120"/>
        <el-table-column :label="$t('特殊size')" prop="specialSize" min-width="120"/>
        <el-table-column :label="$t('型体号')" prop="featureNo" min-width="120"/>
        <el-table-column :label="$t('指令号')" prop="cmdNo" min-width="120"/>
        <el-table-column :label="$t('订单量')" prop="orderNum" min-width="120"/>
        <el-table-column :label="$t('产品规格')" prop="productSize" min-width="120"/>
        <el-table-column :label="$t('交货日期')" prop="deliveryDate" min-width="120"/>
        <el-table-column :label="$t('客户单重')" prop="poKg" min-width="120"/>
        <el-table-column :label="$t('客户单号')" prop="poOrderNo" min-width="120"/>
        <el-table-column :label="$t('客户单位')" prop="customerUnit" min-width="120"/>
        <el-table-column :label="$t('签收人')" prop="signer" min-width="120"/>
        <el-table-column :label="$t('销线')" prop="salePath" min-width="120"/>
        <el-table-column :label="$t('段别')" prop="segment" min-width="120"/>
        <el-table-column :label="$t('版面')" prop="layout" min-width="120"/>
        <el-table-column :label="$t('季度')" prop="quarter" min-width="120"/>
        <el-table-column :label="$t('po号')" prop="poNo" min-width="120"/>
        <el-table-column :label="$t('wip号')" prop="wipNo" min-width="120"/>
        <el-table-column :label="$t('装箱数')" prop="packingNum" min-width="120"/>
        <el-table-column :label="$t('周期')" prop="cycle" min-width="120"/>
        <el-table-column :label="$t('sk编号')" prop="skNo" min-width="120"/>
        <el-table-column :label="$t('专利号')" prop="patentNo" min-width="120"/>
        <el-table-column :label="$t('材质描述')" prop="materialDesc" min-width="120"/>
        <el-table-column label="ShipToId" prop="shipToId" min-width="120"/>
        <el-table-column :label="$t('条码')" prop="barCode" min-width="120"/>
        <el-table-column :label="$t('印刷方向')" prop="printingDirection" min-width="120"/>
      </el-table>
    </div>

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

      </el-form>
      <div slot="footer">
        <el-button @click="showDetail = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="onEditDetail">{{$t('确认')}}</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: this.$t('请选择产品名称'), trigger: ['change'] },
        itemCode: { required: true, message: this.$t('请选择产品编码'), trigger: ['change'] },
        num: { required: true, message: this.$t('请输入产品数量'), trigger: ['blur'] },
        amount: { required: true, message: this.$t('请输入产品金额'), trigger: ['blur'] },
        state: { required: true, message: this.$t('请选择产品状态'), 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: this.$t('请输入订单编号'), trigger: ['change'] },
        clientId: { required: true, message: this.$t('请选择客户'), trigger: ['change'] },
        deliveryDate: { required: true, message: this.$t('请选择交货日期'), trigger: ['change'] },
        amount: { required: true, message: this.$t('请输入订单总金额'), trigger: ['blur'] },
        merchandiser: { required: true, message: this.$t('请选择更进入'), trigger: ['change'] },
        state: { required: true, message: this.$t('请选择订单状态'), 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>
