<template>
  <!-- 订单数据明细 -->
  <a-drawer
    title="订单数据明细"
    width="89%"
    placement="right"
    :closable="true"
    :visible="visible"
    @close="onClose">
    <!--主表信息 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="订单号">
              <a-input v-model="orderDetail.orderNum"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="订单日期">
              <a-input v-model="orderDetail.orderDate"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="业务类型">
              <a-input v-model="orderDetail.businessType"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="销售类型">
              <a-input v-model="orderDetail.saleType"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="客户简称">
              <a-input v-model="orderDetail.customerShortName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="客户名称">
              <a-input v-model="orderDetail.customerName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="汇率">
              <a-input v-model="orderDetail.exchangeRate"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="销售部门">
              <a-input v-model="orderDetail.salesDepartment"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="业务员">
              <a-input v-model="orderDetail.salesman"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="币种">
              <a-input v-model="orderDetail.currency"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="品牌方">
              <a-input v-model="orderDetail.brand"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="第三方">
              <a-input v-model="orderDetail.thirdparty"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="定金比例(%)">
              <a-input v-model="orderDetail.depositRatio"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="定金">
              <a-input v-model="orderDetail.deposit"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="协同路线">
              <a-input v-model="orderDetail.collaborativeRoute"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="订单备注">
              <a-input v-model="orderDetail.orderNote"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="价格备注">
              <a-input v-model="orderDetail.priceNote"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="客户订单号">
              <a-input v-model="orderDetail.customerOrderNum"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="整单合计">
              <a-input v-model="orderDetail.documentTotal"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="最终客户">
              <a-input v-model="orderDetail.finalCustomer"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="付款条件">
              <a-input v-model="orderDetail.paymentClause"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="18" :sm="12">
            <a-form-item label="订单变更说明">
              <a-input v-model="orderDetail.orderChangeDesc"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域  -->
    <div>
      <a-table
        bordered
        :columns="detailColumns"
        :data-source="orderDetailData"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: 1500 }"
        @change="handleTableChange"
      >
      </a-table>
    </div>
  </a-drawer>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
export default {
  name: 'OrderList',
  mixins: [JeecgListMixin],
  components: { JEllipsis },
  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
    return {
      description: '订单销售明细 抽屉',
      visible: false, // 抽屉

      // 表头
      detailColumns: [
        { title: '款号', width: 120, dataIndex: 'styleNum', fixed: 'left', className: 'replacecolor' },
        {
          title: '预发货日期',
          width: 120,
          dataIndex: 'scheduledShipDate',
          fixed: 'left',
          className: 'replacecolor'
        },
        { title: '预完工日期', width: 120, dataIndex: 'scheduledDoneDate', className: 'replacecolor' },
        { title: 'Pack Id', width: 100, dataIndex: 'packId', className: 'replacecolor' },
        { title: '小po', width: 100, dataIndex: 'smallPo', className: 'replacecolor' },
        { title: '分销点', width: 150, dataIndex: 'distributionPoint', className: 'replacecolor' },
        { title: '存货编码', width: 120, dataIndex: 'cinvcode', className: 'replacecolor' },
        { title: '存货名称', width: 120, dataIndex: 'inventoryName', className: 'replacecolor' },
        { title: '规格型号', width: 100, dataIndex: 'specificationModel', className: 'replacecolor' },
        { title: '颜色', width: 100, dataIndex: 'color', className: 'replacecolor' },
        { title: '尺码', width: 100, dataIndex: 'size', className: 'replacecolor' },
        { title: '配码规则', width: 100, dataIndex: 'codeRules', className: 'replacecolor' },
        { title: '光坯毛门幅CM', width: 140, dataIndex: 'smoothDoorCM', className: 'replacecolor' },
        { title: '箱数', width: 100, dataIndex: 'boxNum', className: 'replacecolor' },
        { title: '数量', width: 100, dataIndex: 'quantity', className: 'replacecolor' },
        { title: '主计量', width: 100, dataIndex: 'mainMeter', className: 'replacecolor' },
        { title: '含税单价', width: 100, dataIndex: 'priceInTax', className: 'replacecolor' },
        { title: '价税合计', width: 100, dataIndex: 'totalPriceTax', className: 'replacecolor' },
        { title: '税率(%)', width: 100, dataIndex: 'taxRate', className: 'replacecolor' },
        {
          title: '备注',
          width: 150,
          dataIndex: 'note',
          customRender: t => ellipsis(t),
          className: 'replacecolor',
          scopedSlots: { customRender: 'note' }
        },
        { title: '行关闭人', width: 100, dataIndex: 'shutDownMan', className: 'replacecolor' }
      ],
      orderDetailData: [{}, {}, {}],
      loading: false, // 表格加载
      orderDetail: []
    }
  },
  created() {},
  methods: {
    backOrderList() {
      console.log('返回订单销售列表')
      this.visible = false
    },
    onClose() {
      // 关闭抽屉
      this.visible = false
    }
  },
  computed: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.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;
// }
</style>
