<template>
  <div class="order-add">
    <div class="orderButtons" data-key="ADD_NEW_ORDER">
      <businessButton :btn-config="btnConfig" />
    </div>
    <Collapse v-model="value1">
      <Panel name="1">
        <!-- 基本信息 -->
        {{ vmI18n.t("common.baseInformation") }}<span
          v-if="copyFlag"
          style="color: red;"
        >（平台单号可不修改，如果修改则以输入的单号为准，与原平台单号无关）</span>
        <p slot="content">
          <businessForm
            :form-config="formConfig"
            @keyDown="keyDown"
          />
        </p>
      </Panel>
      <Panel name="2">
        <!-- 收货人信息 -->
        {{ vmI18n.t("common.consigneeInformation") }}
        <p slot="content">
          <businessForm :form-config="formConfig1" />
        </p>
      </Panel>
      <Form
        class="form"
        :model="formValidate"
        label-position="top"
        style="padding-left: 20px; margin-top: -36px"
      >
        <FormItem label="智能识别">
          <Input
            v-model="formValidate.desc"
            class="text1"
            type="textarea"
            placeholder="粘贴地址信息后回车,自动识别姓名、电话和地址"
            @on-keydown="searchsmart"
          />
        </FormItem>
      </Form>
      <Panel name="3">
        <!-- 备注信息 -->
        {{ vmI18n.t("common.remarksInfo") }}
        <p slot="content">
          <businessForm :form-config="formConfig2" />
        </p>
      </Panel>
    </Collapse>
    <!-- tab切换 -->
    <businessLabel
      :label-default-value="labelDefaultValue"
      :label-list="labelList"
    />
    <!-- 表格 -->
    <div class="table">
      <!-- 订单明细 -->
      <div class="barcodeDetails">
        <businessActionTable
          :jordan-table-config="jordanTableConfig"
          @on-select="onSelect"
          @on-select-all="onSelectAll"
          @on-select-all-cancel="onSelectAllCancel"
          @on-select-cancel="onSelectCancel"
          @table-delete-detail="tableDeleteDetail"
        />
      </div>
    </div>
    <!-- 矩阵框-->
    <jordanModal
      :closable="matrixBox.closable"
      :component-data="matrixBox.componentData"
      :draggable="matrixBox.draggable"
      :exclude-string="matrixBox.excludeString"
      :keep-alive="matrixBox.keepAlive"
      :mask="matrixBox.mask"
      :mask-closable="matrixBox.maskClosable"
      :name="matrixBox.name"
      :scrollable="matrixBox.scrollable"
      :title="matrixBox.confirmTitle"
      :title-align="matrixBox.titleAlign"
      :transfer="matrixBox.transfer"
      :url="matrixBox.url"
      :width="matrixBox.width"
    />

    <Modal
      v-model="selectGoodsModal"
      title="选择商品"
      width="900"
      mask
      closable
      :mask-closable="maskClosable"
      footer-hide
      @on-cancel="cancelSelectGoods"
    >
      <div class="conditionContent">
        <div class="itemContent">
          <div class="itemLabel">
            商品名称
          </div>
          <Input
            v-model="selectGoodsData.PRODUCTNAME"
            style="width:240px"
            clearable
          />
        </div>
        <div class="itemContent">
          <div class="itemLabel">
            商品编码
          </div>
          <Input
            v-model="selectGoodsData.PRODUCTCODE"
            style="width:240px"
            clearable
          />
        </div>
        <div class="itemContent">
          <div class="itemLabel">
            sku
          </div>
          <Input
            v-model="selectGoodsData.SKU"
            clearable
          />
        </div>
        <div class="itemContent">
          <div class="itemLabel">
            国标码
          </div>
          <Input
            v-model="selectGoodsData.GBCODE"
            clearable
          />
        </div>
        <div class="itemContent">
          <div class="itemLabel">
            颜色
          </div>
          <Input
            v-model="selectGoodsData.NORMS1NAME"
            clearable
          />
        </div>
        <div class="itemContent">
          <div class="itemLabel">
            尺寸
          </div>
          <Input
            v-model="selectGoodsData.NORMS2NAME"
            clearable
          />
        </div>
      </div>
      <ShrinkOrExtend
        :form-data="selectGoodsData"
        :height="shrinkHeight"
        :current-value="currentValue"
        @click="upOrDown(shrinkHeight)"
        @on-reset="resetGoodsData"
        @on-query="searchGoodsData"
      />
      <Table
        :height="tableHeight"
        :columns="SKUColumns"
        :data="GoodsData"
        highlight-row
        @on-current-change="selectGoods"
      />
      <div class="pageContent">
        <Page
          size="small"
          :current="GoodsCurrentPage"
          show-elevator
          :total="totalGoods"
          show-total
          show-sizer
          @on-change="changePageGoods"
          @on-page-size-change="changeSizeGoods"
        />
      </div>
      <footer style="display: flex; justify-content: center; margin-top: 12px;padding-top: 16px;border-top: 1px solid #DEDEDE;;">
        <Button
          type="fcdefault"
          @click="cancelSelectGoods"
        >
          取消
        </Button>
        <Button
          type="posdefault"
          style="margin-left: 16px"
          @click="okSelectGoods1"
        >
          确认
        </Button>
      </footer>
    </Modal>

    <!-- 选择原订单编号 -->
    <SelectOrderModal
      v-model="showOrderModal"
      @confirm="confirmOrder"
    />
  </div>
</template>
<script>
  import orderManageAdd from '@yunque/js/pages/storageCentent/orderManageAdd/orderManageAdd';
  export default orderManageAdd;
</script>

<style lang="less">
  @import "~@yunque/css/pages/storageCentent/orderManageAdd/orderManageAdd.less";
  .ark-form-item-validating .ark-input-icon-validate{
    display: none;
  }
  .pageContent {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
  }
  .conditionContent {
    width: 100%;
    display: flex;
    max-height: 3000px;
    overflow: hidden;
    flex-wrap: wrap;
    padding-top: 8px;
    // padding-right: 51px;
    justify-content: space-between;
    .itemContent {
      width: calc((100% - 120px) / 3);
      display: flex;
      align-items: center;
      margin:0 20px 24px;
      .itemLabel {
        min-width: 84px;
        font-size: 12px;
        font-weight: 500;
        color: #4C4C4C;
        line-height: 17px;
        margin-right: 8px;
        text-align: right;
      }
      .posterType {
        width: calc(100% - 84px);
      }
    }
  }
</style>

<style lang='less' scoped>
  .text1 /deep/ .ark-input {
    height: 80px;
    resize: none;
    // background-color: #f5f5f5;
  }
</style>
