<template>
  <div>
    <div class="customizedPage-nav-bar">
      <div class="left">
        <div
          v-for="(item, key) in inputConfig"
          :key="key"
          class="customizedPage-nav-input">
          <span
            v-if="item.label"
            class="label">
            <slot
              name="prepend-input"
              :colname="item.colname"></slot>
            <span> {{ item.label }}:</span>
          </span>
          <Input
            :style="{
              width: item.width ? `${item.width}` : '190px'
            }"
            v-bind="item"
            @input.native="onInput($event, item)"
            @on-enter="enter($event, item)"
          />
        </div>
      </div>
      <!-- <slot name="middle" /> -->
      <div class="middle" style="display:flex;align-items: center;" v-if="printType=='scanRuku'">
        <Tooltip
          placement="top"
          transfer
          max-width="230"
          content="当系统参数“扫描入库退回至店铺默认退货仓”为否时，扫描的退单默认全部带出此处设置的默认退货仓。">
          <Icon
            style="color: var(--primary-color);margin-right:4px;"
            type="md-information-circle"
          />
        </Tooltip>
        <div class="info-value" style="display: flex;align-items: center;">
          <span>默认退货仓:</span>
          <!-- <Input style="width: 190px;" v-model="allUserDefaultStorage.label" v-if="allUserDefaultStorage.label"  @click="openStoreModal('allUser')"/> -->
          <span class='StorageBox' style="margin-left:2px;" :style="!allStoreCanBeModify?'background:#eee':'background:#fff'">
            <span v-if="allUserDefaultStorage.label">{{ allUserDefaultStorage.label }}</span>
            <Icon
              v-if="allStoreCanBeModify"
              type="ios-create-outline"
              style="margin-left:8px;color: var(--primary-color);font-weight: bold;vertical-align: -1px;position: absolute;right: 6px;"
              @click="openStoreModal('allUser')"
            />
          </span>
        </div>
      </div>
      <div class="right">
        <div
          v-for="item in buttonConfig"
          :key="item.type"
          class="customizedPage-nav-button"
        >
          <Tooltip
            placement="bottom"
            transfer
            max-width="230"
            v-if="item.content"
            :content="item.content"
          >
            <Button
              :type="item.displayType"
              :shape="item.shape"
              :class="item.class"
              :disabled="item.disabled"
              v-if="item.show"
              @click="buttonClick(item)"
            >
              {{ item.description }}
            </Button>
          </Tooltip>
          <Button
            :type="item.displayType"
            :shape="item.shape"
            :class="item.class"
            :disabled="item.disabled"
            v-if="!item.content && item.show"
            @click="buttonClick(item)"
          >
            {{ item.description }}
          </Button>
        </div>
        <div class="customizedPage-nav-icon">
          <Poptip
            trigger="click"
            class="customizedPage-print-pops"
            transfer
            placement="bottom-end"
            width="260"
            :popper-class="popperClass"
          >
            <i
              data-v-0192ecf5=""
              class="ark-icon iconfont icon-setting iconfont "></i>
            <PrintConfig
              slot="content"
              ref="config"
              :from-type="fromType"
              :type="printType"
              v-bind="$attrs"
              v-on="$listeners"
            />
          </Poptip>
        </div>
        <div class="customizedPage-nav-icon">
          <Icon
            type="ios-help-circle-outline"
            @click="openDoc"
          />
        </div>
        <slot name="icon-right"></slot>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="split-line"></div>
  </div>
</template>


<script>
import batchAudit from '@yunque/config/minxin/batchAudit.js';// 批量操作配置js
import PrintConfig from './printConfig.vue';

export default {
  mixins: [batchAudit()],
  data() {
    return {
      show: false,
      canceltype: true,
      showCancel: true,
      PICK_NO: '', // 拣货单号测试
    };
  },
  props: {
    // 来自哪里，是否需要iframe显示各种html，去加载各个打印组件的js文件
    fromType: {
      type: String,
      default: ''
    },
    inputConfig: {
      type: Array,
      default: () => []
    },
    buttonConfig: {
      type: Array,
      default: () => []
    },
    printType: {
      type: String,
      default: ''
    },
    unpickedOrders: {
      type: Array,
      default: () => []
    },
    docUrl: {
      type: String,
      default: ''
    },
    popperClass: {
      type: String,
      default: ''
    },
    // 用户逻辑仓
    allUserPhysicalStorage: {
      type: Object,
      default: ()=> {
        return { label: '', value: ''}
      }
    },
    // 用户实体仓
    allUserDefaultStorage: {
      type: Object,
      default: ()=> {
        return { label: '', value: ''}
      }
    },
    allStoreCanBeModify: {
      type: Boolean,
      default: () => false
    }
  },
  components: {
    PrintConfig
  },
  methods: {
    enter(event, vm) {
      this.$emit('on-enter', event, vm.colname);
    },
    onInput(event, vm) {
      vm.value = event.target.value;
      if (vm.id === 'PICK_NO') {
        // this.PICK_NO = vm.value;
      }
    },
    buttonClick(item) {
      // 二次分拣---未拣货
      if (item.type === '1' && this.printType === 'jianhuodanconfing') {
        this.unFilledOrders();
      }
      this.$emit('on-button-click', item);
    },
    unFilledOrders() {
      // 未拣货
      // $('#second-pick-loading').show();
      const picknoDom = document.querySelector('#PICK_NO input');
      // eslint-disable-next-line no-mixed-operators
      // this.unpickedOrders = [1368102, 1367476];
      if (this.unpickedOrders.length < 1) {
        window.Ark.Message.error({
          origin: 'ship',
          content: '没有未分拣单号',
          duration: 2,
        });
        return;
      }
      window.R3.network.post('/p/cs/QueryList', window.R3.urlSearchParams({
        searchdata: {
          table: 'T_V_PICKINFO',
          startindex: 0,
          range: 10,
          fixedcolumns: { PICK_ORDERID: this.unpickedOrders, STATUS: ['=0', '=1'] },
          column_include_uicontroller: true,
          isolr: false,
        }

      })).then((res) => {
        if (res.data.data && res.data.data.row.length > 0) {
          // 存储订单信息
          let { customizedModuleId, tableId } = this.$route.params;
          let arr = [];
          let rows = res.data.data.row;
          for (let i = 0; i < rows.length; i++) {
            let model = rows[i];
            // eslint-disable-next-line no-new-object
            let newObj = new Object();
            for (let property in model) {
              let val = model[property].refobjid ? model[property].refobjid : model[property].val;
              newObj[property] = val !== undefined ? val : null;
            }
            arr.push(newObj);
          }
          if (customizedModuleId) {
            window.sessionStorage.setItem(`${customizedModuleId}_rows_data`, JSON.stringify(arr));
          } else if (tableId) {
            window.sessionStorage.setItem(`${tableId}_rows_data`, JSON.stringify(arr));
          }
          this.newOutPrintPickListByGoodsSecond(this.unpickedOrders, picknoDom.value);

          //  window.getR3Data = function () {
          //   return {
          //     rows: printOrders,
          //     orderIds: ids
          //   };
          //  };
        }
      });

      // let virtual = {
      //   fixedcolumns: { ID: this.unpickedOrders },
      //   fkdrplist: {
      //     searchcols: ['ALLNUM', 'ALLSKU', 'ALLSTORESITE', 'AUDITTIME', 'CODAMOUNT', 'ENCRYPTEDDATA', 'ID', 'IESWAREHOUSEID', 'ISDIRECTCONNECT', 'ISHAVEBUYERMESSAGE', 'BUYERMESSAGE', 'ISHAVESELLERMEMO', 'ISPRINTLOGISTIC', 'ISPRINTOUT', 'IS_PRINTPICKORDER', 'LOGISTICSNUMBER', 'ORDERDATE', 'ORDERNO', 'ORDERSHOPID', 'ORDERSTATUS', 'ORDERTYPE', 'PAYTIME', 'PAYTYPE', 'PICKINGCODE', 'PLATFORM', 'RECEIVADDRESS', 'RECEIVAREANAME', 'RECEIVCITYNAME', 'RECEIVMOBILE', 'RECEIVNAME', 'RECEIVPHONE', 'RECEIVPROVINCENAME', 'SELLADDRESS', 'SELLAREANAME', 'SELLCITYNAME', 'SELLERMEMO', 'SELLERNAME', 'SELLERPHONE', 'SELLPROVINCENAME', 'SELLZIP', 'SHIPPERID', 'SOURCECODE', 'USERNICK', 'VER', 'WEIGHT']
      //   },
      //   isdroplistsearch: true,
      //   range: 1000,
      //   startindex: 0,
      //   table: 'T_V_OMSPRINTORDER'
      // };
      // window.parent.R3.network.post('/p/cs/list/query', virtual).then((res) => {
      //   if (res.data.rows.length == 0) {
      //     window.parent.Ark.Modal.fcWarning({
      //       title: '提示',
      //       mask: true,
      //       content: '当前订单号未找到可打印的单据'
      //     });
      //   }
      //   let { customizedModuleId } = this.$route.params;
      //   window.sessionStorage.setItem(`${customizedModuleId}_rows_data`, JSON.stringify(res.data.rows));
      //   console.log(res.data.rows, '====3434');
      // });
    },

    // 打开文档
    openDoc() {
      window.open(this.docUrl)
    },

    // 打开入库仓库选择框
    openStoreModal(type) {
      this.$emit('openStoreModal',type);
    }
  },
  mounted() {
  }
};
</script>

<style lang="less" scoped>
.StorageBox {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 30px;
  line-height: 18px;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  color: #575757;
  background-color: #fff;
  position: relative;
  cursor: text;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.customizedPage-nav {
  position: relative;
}

.split-line {
  height: 10px;
  background: #f0f2f5;
  width: 100%;
  // position: absolute;
  // left: 0px;
  // // right: 0px;
  // bottom: -10px;
}

.customizedPage-nav-bar {
  display: flex;
  flex-direction: row;
  /* 主轴为水平方向 */
  justify-content: space-between;
  align-items: center;
  /* 交叉轴上居中对齐 */
  position: relative;
  // overflow: hidden;
  padding: 16px 0;
  // border-bottom: 10px solid #F0F2F5;
}

.left,
.right {
  display: flex;
  align-items: center;
  flex-direction: row;
  /* 主轴为水平方向 */
}

// .saomiao-append{
//       width: 26px;
//       height: 26px;
//       background-color: #fff;
//       display: inline-block;
//       img{
//         width: 100%;
//       }

// }
.customizedPage-nav-input {
  vertical-align: middle;

  .label {
    width: 90px;
    text-align: right;
    display: inline-block;
    color: #333;
  }
  vertical-align: text-top;

  .ark-input-wrapper {
    width: 220px;
  }
}

.customizedPage-nav-button {
  margin-right: 16px;
  line-height: 17px;

  .ark-btn {
    padding: 8px;
  }
}

.customizedPage-nav-icon i {
  width: 21px;
  height: 21px;
  font-size: 22px;
  color: var(--primary-color);
  margin-right: 10px;
  margin-top: 2px;
}

.customizedPage-nav-icon {
  .icon-setting {
    background: url('../../../assets/image/setting.png') no-repeat;
    background-size: contain;
    height: 22px;
    width: 22px;
  }
}

.disable-config {
  cursor: not-allowed;
  // pointer-events: none;
  filter: grayscale(100%);
}
</style>
<style lang="less">
.ark-icon-ios-clock-outline-saoma {
  background: url('../../../assets/image/saomiao.png') no-repeat -1px 3px;
  background-size: contain;
  height: 16px;
  width: 15px;
  opacity: 0.5;
  margin-right: 4px;
  margin-top: 6px;
}
.customizedPage-nav-input {
  .ark-input {
    height: 30px;
    line-height: 30px;
  }
}
</style>
