<template>
  <div class="in-store-panel">
    <div class="info-group">
      <div class="info-item">
        <div class="info-label scale-font">
          已入/应入：
        </div>
        <div class="info-value num">
          <span :class="[scanNum===totalNum? 'green': 'red']">{{scanNum}}</span>/<span>{{totalNum}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          扫描单号：
        </div>
        <div class="info-value">
          <span>{{ orderInfo.scanOrderNo}}</span>
        </div>
      </div>
      <div class="info-item" v-if="ISUSERETURNBATCHMANAGEMENT">
        <div class="info-label">
          退回批次：
        </div>
        <div class="info-value">
          <Select
            v-model="orderInfo.refundBatchId"
            @on-change="changeRefundBatchId"
            size="small"
            style="width:100%;display: inline-block;"
            transfer
          >
            <Option
              v-for="item in refundBatchIdList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.REFUND_BATCH }}
            </Option>
          </Select>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          退回仓库：
        </div>
        <div class="info-value">
          <span v-if="userPhysicalStorage.label">{{ userPhysicalStorage.label }}（{{ userDefaultStorage.label }}）</span>
          <Icon
            v-if="allStoreCanBeModify"
            type="ios-create-outline"
            style="margin-left:8px;color: var(--primary-color);font-weight: bold;vertical-align: -1px;"
            @click="openStoreModal('singleUser')"
          />
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          颜色标签：
        </div>
        <div class="info-value color-panel">
          <TagSelect
            @click="openColorModal"
            :showClose="false"
          >
            <div
              v-if="colorList.length > 0"
              class="color-wrap"
            >
              <span
                class="select-color"
                v-for="item in colorList"
                :key="item.color"
                :style="`background:${item.color}`"
              />
            </div>
          </TagSelect>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          入库单备注：
        </div>
        <div class="info-value">
          <Input
            v-model="warehouseReceiptRemark"
            placeholder=""
            clearable
            @on-change="onConfirmremark"
          />
        </div>
      </div>
    </div>

    <div
      class="info-group"
      v-if="!isAbnormalOrder"
    >
      <div class="info-item">
        <div class="info-label">
          退单编号：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.returnOrderCode}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          退回物流：
        </div>
        <div class="info-value">
          <span v-if="orderInfo.logisticsNo">{{  orderInfo.logisticsNo}}（{{ orderInfo.shipperName}}）</span>
          <Icon
            type="ios-create-outline"
            style="margin-left:8px;color: var(--primary-color);font-weight: bold;vertical-align: -1px;"
            @click="openLogisticsModal"
          />
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          下单店铺：
        </div>
        <div class="info-value">
          <span v-if="orderInfo.shop">{{  orderInfo.shop}}（{{  orderInfo.platformName}}）</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          退单类型：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.orderType}}</span>
        </div>
      </div>
    </div>

    <div
      class="info-group"
      v-if="!isAbnormalOrder"
    >
      <div class="info-item">
        <div class="info-label">
          订单编号：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.orderCode}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          平台单号：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.sourceCodes}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          发货仓库：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.warehouseName}}</span>
        </div>
      </div>
      <div class="info-item" v-if="orderInfo.sellermemo">
        <div class="info-label">
          订单卖家备注：
        </div>
        <div class="info-value">
          <div class="info-value">
            <span>{{ orderInfo.sellermemo }}</span>
          </div>
        </div>
      </div>
      <div class="info-item" v-if="orderInfo.buyermessage">
        <div class="info-label">
          退单买家备注：
        </div>
        <div class="info-value">
          <div class="info-value">
            <span>{{ orderInfo.buyermessage }}</span>
          </div>
        </div>
      </div>
      <div class="info-item" v-if="orderInfo.remark">
        <div class="info-label">
          内部备注：
        </div>
        <div class="info-value">
          <div class="info-value">
            <span>{{ orderInfo.remark }}</span>
          </div>
        </div>
      </div>
      <div class="info-item" v-if="orderInfo.returndesc">
        <div class="info-label">
          退换货说明：
        </div>
        <div class="info-value">
          <div class="info-value">
            <span>{{ orderInfo.returndesc }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 仓库弹框 -->
    <InStoreModal
      v-model="showStoreModal"
      :openStoreType="openStoreType"
      :user-physical-storage="userPhysicalStorage"
      :user-default-storage="userDefaultStorage"
      :all-user-physical-storage="allUserPhysicalStorage"
      :all-user-default-storage="allUserDefaultStorage"
      @on-confirm="onConfirmStore"
    />
    <!-- 物流弹框 -->
    <logisticsModal
      v-model="showlogisticsModal"
      :orderInfo="orderInfo"
      @on-confirm="onConfirmLogisticse"
    />
    <!-- 颜色弹框 -->
    <ColorTagModal
      v-model="showColorModal"
      @on-confirm="onConfirmColor"
    />
  </div>
</template>

<script>
import ColorTagModal from '@yunque/component/customizedPage/InStore/colorTagModal.vue';
import InStoreModal from '@yunque/component/customizedPage/InStore/InStoreModal.vue';
import logisticsModal from '@yunque/component/customizedPage/InStore/logisticsModal.vue';
import TagSelect from '@yunque/component/customizedPage/InStore/TagSelect.vue';
const R3 = window.R3;
const { network } = R3;

export default {
  name: 'InStorePanel',

  components: {
    ColorTagModal,
    InStoreModal,
    logisticsModal,
    TagSelect,
  },

  data() {
    return {
      selectValue: '',
      showColorModal: false,
      showStoreModal: false,
      showlogisticsModal: false,
      warehouseReceiptRemark: '',
      options: [
        {
          label: '选择标签',
          value: '1'
        },
        {
          label: '取消标签',
          value: '2'
        },
      ],

      colorList: [],
    };
  },

  props: {
    userDefaultStorage: {
      type: Object
    },
    userPhysicalStorage: {
      type: Object
    },
    orderInfo: {
      type: Object
    },
    scanNum: {
      type: Number
    },
    totalNum: {
      type: Number
    },
    colorTags: {
      type: Array
    },
    // 是否是三无入库单
    isAbnormalOrder: {
      type: Boolean
    },
    // 是否默认仓库
    openStoreType: {
      type: String
    },
    // 默认用户逻辑仓
    allUserPhysicalStorage: {
      type: Object,
    },
    // 默认用户实体仓
    allUserDefaultStorage: {
      type: Object,
    },
    refundBatchIdList: {
      type: Array
    },
    ISUSERETURNBATCHMANAGEMENT: {
      type: Boolean
    },
    allStoreCanBeModify: {
      type: Boolean,
      default: () => true
    }
  },

  watch: {
    // 将接口返回的标签和用户操作添加的标签合并
    colorTags: {
      handler(val) {
        this.colorList = val
      },
    }
  },

  created() {
    console.log(this.refundBatchIdList)
  },

  mounted() {
  },

  methods: {
    // 打开颜色弹框
    openColorModal() {
      this.showColorModal = true;
    },

    // 打开入库弹框
    openStoreModal(type) {
      this.openStoreType = type;
      this.showStoreModal = true;
    },
    // 打开物流弹框
    openLogisticsModal() {
      this.showlogisticsModal = true;
    },

    // 入库弹框确认
    onConfirmStore(val) {
      this.$emit('on-confirm', val);
    },
    // 物流弹框确认
    onConfirmLogisticse(val) {
      this.$emit('on-confirm-logisticse', val);
    },

    onConfirmColor(e) {
      this.$emit('on-confirm-color', e);
    },

    // 入库单备注
    onConfirmremark(e) {
      this.$emit('on-confirm-remark', e);
    },

    // 退货批次
    changeRefundBatchId(e) {
      this.$emit('on-change-refundbatch', e);
    }
  },
};
</script>

<style lang="less" scoped>
.in-store-panel {
  padding: 16px;
  .info-group {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    &:last-child {
      border-bottom: none;
    }
  }
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    line-height: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .info-label {
      flex: 0 0 84px;
      color: #666666;
    }
    .info-value {
      color: #333333;
      width: calc(100% - 84px);
      word-wrap: break-word;
      vertical-align: middle;
    }
    .scale-font {
      font-size: 14px;
    }
    .num {
      font-size: 26px;
      font-weight: 700;
      font-family: PingFangSC-Medium, PingFang SC;
    }
  }

  .color-wrap {
    width: 90%;
    display: flex;
    align-items: center;
    color: #333;
    .select-color {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      margin-right: 5px;
    }
  }

  .red {
    color: #ff0101;
  }
  .green {
    color: #2baa0c;
  }
}
</style>

<style lang="less">
// .in-store-panel {
//   .color-panel {
//     .tab-select {
//       height: 26px;
//     }
//   }
// }
</style>
