<template>
  <!-- 销售订单详情 -->
  <div id="salesOrderDetailsDrawer">
    <a-drawer title="销售订单详情" width="89%" placement="right" :closable="true" :visible="visible" @close="onClose">
      <!-- 主表 回显 -->
      <a-card :bordered="true">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="部门">
                  {{ salesOrderMain.cdepName }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="业务员">
                  {{ salesOrderMain.cpersonName }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="客户">
                  {{ salesOrderMain.ccusName }}
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="物料编码">
                  {{ salesOrderMain.cinvCode }}
                </a-form-item>
              </a-col>

              <a-col :md="12" :sm="12">
                <a-form-item label="物料名称">
                  {{ salesOrderMain.cinvName }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="款号">
                  {{ salesOrderMain.itemNumber }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="颜色">
                  {{ salesOrderMain.color }}
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="交期">
                  {{ salesOrderMain.dpreDateBT }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="订单数量">
                  {{ salesOrderMain.iquantity }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="单价(原币)">
                  {{ salesOrderMain.itaxUnitPrice }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="总额(原币)">
                  {{ salesOrderMain.totalSum }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="单价(本币)">
                  {{ salesOrderMain.bbPrice }}
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="总额(本币)">
                  {{ salesOrderMain.inatSum }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="单件成本(本币)">
                  {{ salesOrderMain.todo2 }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="已出库数量">
                  {{ salesOrderMain.foutquantity }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="累计开票数量">
                  {{ salesOrderMain.ikpquantity }}
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="计划单号">
                  {{ salesOrderMain.planCode }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="业务填写">
                  {{ salesOrderMain.todo3 }}
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>

      <!--采购 -->
      <a-card :bordered="true" style="margin:10px 0;">
        <div style="marginTop:30px;">
          <h6 class="table-title">采购</h6>
          <a-table
            bordered
            rowKey="id"
            :loading="loading"
            :columns="CaiGouColumns"
            :data-source="CaiGouData"
            :pagination="false"
            :scroll="{ x: 1500, y: 300 }"
          >
            <!-- 物料编码 -->
            <span slot="cinvCode" slot-scope="text">
              <a>{{ text }}</a>
            </span>
          </a-table>
        </div>

        <!-- 委外 -->
        <div style="margin:60px 0;">
          <h6 class="table-title">委外</h6>
          <a-table
            bordered
            rowKey="id"
            :loading="loading"
            :columns="weiwaiColumns"
            :pagination="false"
            :data-source="weiwaiData"
            :scroll="{ x: 1500, y: 300 }"
          >
            <!-- 物料编码 弹框-->
            <span slot="cinvCode" slot-scope="text">
              <a>{{ text }}</a>
            </span>
          </a-table>
        </div>

        <!-- 物料卡开始 -->
        <div>
          <h6 class="table-title">物料卡</h6>
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper" style="background:#f2f2f2;padding:30px 10px 0 10px;">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :md="6" :sm="8">
                  <a-form-item label="日期">
                    <a-date-picker
                      style="width: 100%"
                      placeholder="请选择日期"
                      v-model="queryParam.data"
                    ></a-date-picker>
                  </a-form-item>
                </a-col>

                <a-col :md="6" :sm="8">
                  <a-form-item label="物料" has-feedback>
                    <a-input placeholder="请输入物料" v-model="queryParam.material"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :md="6" :sm="8">
                  <a-form-item label="计划单号">
                    <a-input placeholder="请输入计划单号" v-model="queryParam.planOrderNo"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :md="6" :sm="8">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    <a @click="handleToggleSearch" style="margin-left: 8px">
                      {{ toggleSearchStatus ? '收起' : '展开' }}
                      <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                    </a>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>

          <a-table
            bordered
            rowKey="id"
            :loading="loading"
            :columns="cardColumns"
            :data-source="cardData"
            :pagination="false"
            :scroll="{ x: 1500 }"
          >
            <!-- test 差异 弹框-->
            <span slot="diff" slot-scope="text">
              <a>{{ text }}</a>
            </span>
          </a-table>
        </div>
        <!-- 物料卡结束 -->
      </a-card>
    </a-drawer>

    <!-- 点击【物料编号】----出入库详细数据 抽屉 -->
    <outInDetailData-drawer ref="outInDetailDataDrawer" @ok="modalFormOk"></outInDetailData-drawer>

    <!-- 【物料卡】----装箱单-面料列表 抽屉-->
    <packinglistFabrics-drawer ref="packinglistFabricsDrawer" @ok="modalFormOk"></packinglistFabrics-drawer>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import outInDetailDataDrawer from '@views/reportForms/pro-progress-report/outInDetailDataDrawer.vue'
import packinglistFabricsDrawer from '@views/reportForms/pro-progress-report/packinglistFabricsDrawer.vue' //装箱单-面料（查看详情）

import { salesOrderDetails } from '@api/reportForms/pro-progress-report.js'

export default {
  name: 'salesOrderDetailsDrawer', // 销售订单详情
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, outInDetailDataDrawer, packinglistFabricsDrawer },
  data() {
    return {
      loading: false, // 表格加载
      visible: false, // 单个订单报表 抽屉
      salesOrderMain: [], // 主表信息
      record: {}, //点击CaiGouData的销售订单对象（参数）

      // 物料卡 查询条件
      queryParam: {
        pageNo: '', // 初始页
        data: '', // 日期
        material: '', // 物料
        planOrderNo: '' // 计划单号
      },

      // 采购 表头
      CaiGouColumns: [
        { title: '账套信息', width: 120, dataIndex: 'accId', fixed: 'left', className: 'replacecolor' },
        {
          title: '采购订单号',
          width: 160,
          dataIndex: 'cpoid',
          fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: '物料编码',
          width: 120,
          dataIndex: 'cinvCode',
          className: 'replacecolor',
          fixed: 'left',
          customCell: this.cinvCodeCustomCell,
          scopedSlots: { customRender: 'cinvCode' }
        },
        { title: '供应商', width: 240, dataIndex: 'cvenName', align: 'left', className: 'replacecolor' },
        { title: '单价(本币)', width: 140, dataIndex: 'inatUnitPrice', className: 'replacecolor' },
        { title: '物料名称', width: 260, dataIndex: 'cinvName', align: 'left', className: 'replacecolor' },
        { title: '计划数量(LRP)', width: 120, dataIndex: 'iquantityLrp', className: 'replacecolor' },
        { title: '订单数量', width: 120, dataIndex: 'iquantity', className: 'replacecolor' },
        { title: '累计入库数量', width: 120, dataIndex: 'ireceivedQTY', className: 'replacecolor' },
        { title: '累计开票数量', width: 120, dataIndex: 'iinvQTY', className: 'replacecolor' },
        { title: '累计开票金额', width: 120, dataIndex: 'iinvMoney', className: 'replacecolor' },
        { title: '下游订单', width: 160, dataIndex: 'csocode', className: 'replacecolor' },
        { title: '使用数量', width: 120, dataIndex: 'useQTY', className: 'replacecolor' },
        { title: '余料', width: 100, dataIndex: 'surplusQty', fixed: 'right', className: 'replacecolor' }
      ],
      CaiGouData: [],

      // 委外 表头
      weiwaiColumns: [
        {
          title: '委外订单号',
          width: 220,
          dataIndex: 'ccode',
          fixed: 'left',
          className: 'replacecolor'
        },
        { title: '供应商', width: 220, dataIndex: 'cvenName', fixed: 'left', align: 'left', className: 'replacecolor' },
        {
          title: '物料编码',
          width: 120,
          dataIndex: 'cinvCode',
          fixed: 'left',
          className: 'replacecolor',
          customCell: this.cinvCodeCustomCell,
          scopedSlots: { customRender: 'cinvCode' }
        },
        { title: '物料名称', width: 320, dataIndex: 'cinvName', align: 'left', className: 'replacecolor' },
        { title: '颜色', width: 180, dataIndex: 'color', className: 'replacecolor' },
        { title: '门幅', width: 120, dataIndex: 'cfree4', className: 'replacecolor' },
        { title: '单价(本币)', width: 140, dataIndex: 'inatUnitPrice', className: 'replacecolor' },
        { title: '单价(原币)', width: 140, dataIndex: 'iunitPrice', className: 'replacecolor' },
        { title: '计划数量(LRP)', width: 120, dataIndex: 'iquantityLrp', className: 'replacecolor' },
        { title: '订单数量', width: 120, dataIndex: 'iquantity', className: 'replacecolor' },
        { title: '累计入库数量', width: 120, dataIndex: 'ireceivedQTY', className: 'replacecolor' },
        { title: '累计开票数量', width: 120, dataIndex: 'iinvQTY', className: 'replacecolor' },
        { title: '累计开票金额', width: 120, dataIndex: 'iinvMoney', className: 'replacecolor' },
        { title: '下游订单', width: 180, dataIndex: 'csocode', className: 'replacecolor' },
        { title: '使用数量', width: 120, dataIndex: 'imaterialSendQty', className: 'replacecolor' },

        { title: '余下库存(余料)', width: 140, dataIndex: 'surplusQty', className: 'replacecolor' },
        { title: '子件编号', width: 140, dataIndex: 'cinvCodeZi', className: 'replacecolor' },
        { title: '子件名称', width: 380, dataIndex: 'cinvNameZi', align: 'left', className: 'replacecolor' },
        { title: '子件应领数量', width: 120, dataIndex: 'iquantityZi', className: 'replacecolor' },
        { title: '子件已领数量', width: 120, dataIndex: 'isendQTY', className: 'replacecolor' },
        { title: '子件总成本', width: 120, dataIndex: 'costZi', className: 'replacecolor' },
        { title: '采购订单号', width: 160, dataIndex: 'purchaseCode', fixed: 'right', className: 'replacecolor' }
      ],
      weiwaiData: [],

      // 物料卡 表头
      cardColumns: [
        {
          title: '计划单号',
          width: 140,
          dataIndex: 'planOrderNo',
          fixed: 'left',
          className: 'replacecolor'
        },
        { title: '颜色', width: 120, dataIndex: 'color', className: 'replacecolor' },
        {
          title: '供应商',
          width: 120,
          dataIndex: 'supplier',
          className: 'replacecolor'
        },
        { title: '物料', width: 120, dataIndex: 'material', className: 'replacecolor' },
        { title: '订单数', width: 120, dataIndex: 'orderQuantity', className: 'replacecolor' },
        { title: '用量', width: 120, dataIndex: 'dosage', className: 'replacecolor' },
        { title: '总数量', width: 140, dataIndex: 'totalQuantity', className: 'replacecolor' },
        { title: '合计', width: 160, dataIndex: 'total', className: 'replacecolor' },
        {
          title: '差异',
          width: 120,
          dataIndex: 'diff',
          customCell: this.getPackinglistFabrics,
          className: 'replacecolor',
          scopedSlots: { customRender: 'diff' }
        },
        { title: 'what', width: 140, dataIndex: 'what', className: 'replacecolor' },
        { title: 'what1', width: 140, dataIndex: 'what1', className: 'replacecolor' },
        { title: 'what2', width: 140, dataIndex: 'what2', className: 'replacecolor' },
        { title: 'what3', width: 140, dataIndex: 'what3', className: 'replacecolor' },
        { title: 'what4', width: 140, dataIndex: 'what4', className: 'replacecolor' },
        { title: 'what5', width: 140, dataIndex: 'what5', className: 'replacecolor' },
        { title: '备注', width: 210, dataIndex: 'note', fixed: 'right', className: 'replacecolor' }
      ],
      cardData: [{ diff: '打开装箱单-面料' }]
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    // 销售订单详情
    getDetails() {
      this.$nextTick(() => {
        salesOrderDetails({
          color: this.record.color,
          itemNumber: this.record.itemNumber,
          marCode: this.record.cinvCode,
          planCode: this.record.planCode,
          soCode: this.record.csocode
        }).then(res => {
          if (res.success) {
            console.log('销售订单详情所有数据', res.result)
            this.salesOrderMain = res.result //主表信息
            this.CaiGouData = res.result.productionScheduleCaiGou //采购
            this.weiwaiData = res.result.productionScheduleWeiWai //委外
            // this.cardData = res.result.productionScheduleWeiWai //物料卡
          }
        })
      })
    },

    // 采购、委外 【物料编号】 抽屉--打开【出入库详细数据】
    cinvCodeCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('传给出入库的对象', record)
            this.$refs.outInDetailDataDrawer.visible = true
            this.$refs.outInDetailDataDrawer.record = record
            this.$refs.outInDetailDataDrawer.getoutInDetailData()
          }
        }
      }
    },

    // 物料卡 --装箱单-面料
    getPackinglistFabrics(record) {
      return {
        on: {
          click: event => {
            console.log('传给装箱单-面料- 列表页', record)
            this.$refs.packinglistFabricsDrawer.visible = true
            this.$refs.packinglistFabricsDrawer.record = record
            this.$refs.packinglistFabricsDrawer.getpackinglistFabricsList()
          }
        }
      }
    },

    // 物料卡----查询按钮
    searchQuery() {
      // 物料卡信息
    },
    searchReset() {
      this.queryParam = {}
    },
    // 关闭抽屉
    onClose() {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}
/deep/ .ant-table-tbody {
  text-align: center;
}
// /deep/ th.replacecolor {
//   background-color: #ccc;
// }

// 抽屉里的card样式
/deep/ .ant-drawer-content {
  background-color: #f0f2f5;
}
/deep/ .ant-drawer-body {
  padding: 10px;
}

// 回显label文字
/deep/.ant-form-item-label > label {
  font-weight: 700;
}
</style>
