<template>
  <div
    class="order-box"
    :class="[isCurrent? 'border-animation' : '', `box-${orderInfo.basket_no}`]"
  >
    <div class="content-wrap">
      <div
        class="number"
        :class="[isCurrent? 'scale-num' : '']"
        :style="`transform: scale(${scale});transform-origin: 0px 0px;`"
      >
        {{ index + 1 }}
      </div>

      <div
        v-if="orderInfo.order_id"
        class="fixed-percent"
      >
        <Poptip
          trigger="hover"
          transfer
          placement="top"
          popper-class="pick-table-pop"
        >
          <!-- 进度条 -->
          <i-circle
            :percent="shouldFill ? 100 :orderInfo.pickedNum / orderInfo.totalPick * 100"
            class="percent"
            :size="size"
            :stroke-color="strokeColor"
            :class="`percent-${index}`"
          >
            <div
              v-if="orderStatus === 'canceled'"
              class="gray percent-text"
              :style="`transform: scale(${fontScale});`"
            >取消</div>
            <div
              v-else-if="orderStatus === 'void'"
              class="gray percent-text"
              :style="`transform: scale(${fontScale});`"
            >作废</div>
            <div
              v-else-if="orderStatus === 'grayNum'"
              class="gray percent-text"
              :style="`transform: scale(${fontScale});`"
            >{{ orderInfo.pickedNum || 0 }}/{{ orderInfo.totalPick || 0 }}</div>
            <div
              v-else-if="orderStatus === 'isIntercept'"
              class="gray percent-text"
              :style="`transform: scale(${fontScale});`"
            >拦截</div>
            <div
              v-else-if="orderStatus === 'delivery'"
              class="green percent-text"
              :style="`transform: scale(${fontScale});`"
            >出库</div>
            <div
              v-else-if="orderStatus === 'redClose'"
              class="green percent-text"
              :style="`transform: scale(${fontScale});`"
            >
              <Icon
                type="md-close red"
                style="font-weight: 700;font-size: 50px;"
              />
            </div>
            <div
              v-else-if="orderStatus === 'success'"
              class="green percent-text"
              :style="`transform: scale(${fontScale});`"
            >{{ orderInfo.pickedNum || 0 }}/{{ orderInfo.totalPick || 0 }}</div>
            <div
              v-else
              :style="`transform: scale(${fontScale});`"
              class="blue percent-text"
            >{{ orderInfo.pickedNum || 0 }}/{{ orderInfo.totalPick || 0 }}</div>
          </i-circle>

          <!-- 表格 -->
          <div slot="content">
            <PickTable
              :rows="orderInfo.rows"
              :order-id="orderInfo.order_id"
              :tid="orderInfo.tid"
              :buyer-msg="orderInfo.buyermessage"
              :seller-msg="orderInfo.sellermemo"
              :logistics-number="orderInfo.logistics_number"
              :ship-name="orderInfo.ship_name"
            />
          </div>
        </Poptip>
      </div>
    </div>
  </div>
</template>

<script>
import PickTable from './pickTable.vue';

const PERCENT_SIZE = 123;
const NUM_SIZE = 45;
const CONTENT_SIZE = 21;
export default {
  name: 'OrderBox',

  components: {
    PickTable
  },

  props: {
    index: {
      type: Number,
      default: 0
    },
    // 圆形进度条大小
    size: {
      type: Number,
      default: PERCENT_SIZE
    },
    // 是否是正在操作的篮子
    isCurrent: {
      type: Boolean,
      default: false
    },
    // 订单信息
    orderInfo: {
      type: Object,
      default: () => ({})
    },
    // 全部拣货完
    isAllPicked: {
      type: Boolean,
      default: false
    },
    // 出库配置
    chuku: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
    };
  },

  computed: {
    // 实现左上角数字保持跟进度条大小一样缩放
    scale() {
      // 算出当前数字应该展示的宽度。45是数字框ui宽度,123是进度条ui宽度
      // -16 是因为组件传的size和进度条宽度有一点误差。不是1比1的关系
      const numWidth = NUM_SIZE / PERCENT_SIZE * (this.size - 16);
      // 算出当前数字应该应该缩放多少可以达到应该展示的宽度
      const scale = numWidth / NUM_SIZE;
      return scale;
    },

    // 实现圆圈数字保持跟进度条大小一样缩放
    fontScale() {
      // 加10是为了缩放后字体更大点
      const width = (CONTENT_SIZE + 10) / PERCENT_SIZE * this.size;
      // 算出当前数字应该应该缩放多少可以达到应该展示的宽度
      const scale = Math.max(width / CONTENT_SIZE, 0.6);
      return scale;
    },

    // 是否分拣完成
    isPicked() {
      return this.orderInfo.pickedNum === this.orderInfo.totalPick
    },

    // 是否出库
    isShipped() {
      return this.orderInfo.order_status === 6 || this.orderInfo.order_status === 5;
    },

    // 作废、取消、出库时，填满进度条
    shouldFill() {
      return this.isShipped
    },

    // 扫描拣货单后，订单未分拣商品，订单操作取消/作废——篮筐变灰，取消状态
    // 扫描拣货单后，订单分拣部分商品，订单操作取消/作废——篮筐变灰，中间分拣数字保留，置灰展示
    // 扫描拣货单后，订单分拣完成商品，订单操作取消/作废,配置所有商品扫描完成后出库——篮筐变灰，中间红色叉号
    orderStatus() {
      if (this.isAllPicked && this.chuku === '1' && (this.orderInfo.order_status === 7 || this.orderInfo.order_status === 8)) {
        return 'redClose'
      }
      // 7是取消，8是作废
      if (this.orderInfo.pickedNum === 0 && this.orderInfo.order_status === 7) {
        return 'canceled';
      }
      if (this.orderInfo.pickedNum === 0 && this.orderInfo.order_status === 8) {
        return 'void';
      }

      if (!this.isPicked && this.orderInfo.pickedNum > 0 && (this.orderInfo.order_status === 7 || this.orderInfo.order_status === 8)) {
        return 'grayNum'
      }

      if (this.orderInfo.order_status === 7 || this.orderInfo.order_status === 8) {
        return 'grayNum';
      }
      // if (this.orderInfo.order_status === 8) {
      //   // 已作废
      //   return 'void';
      // }
      if (this.orderInfo.is_intercept === 1) { // 扫商品时，后端无法实时给出被拦截状态
        // 被拦截
        return 'isIntercept';
      }
      if (this.isShipped) {
        // 已出库
        return 'delivery';
      }
      if (this.orderInfo.pickedNum === this.orderInfo.totalPick) {
        return 'success';
      }
      return 'normal';
    },

    strokeColor() {
      switch (this.orderStatus) {
        case 'delivery':
        case 'success':
          return '#2BAA0C';
        case 'normal':
          return 'var(--primary-color)';
        case 'isIntercept':
        case 'grayNum':
          return '#bbbbbb'
        default:
          return '#f0f0f0';
      }
    }
  },
};
</script>

<style lang="less" scoped>
.order-box {
  position: relative;
  height: 100%;
  width: 100%;
  border: 1px solid #dadada;
  position: relative;
  display: flex;
  border-radius: 4px;

  .blue {
    color: #3272e9;
  }
  .green {
    color: #2baa0c;
  }
  .gray {
    color: #bbbbbb;
  }
  .red {
    color: #ff0101;
  }
  .number {
    position: absolute;
    // top: 8%;
    // left: 10%;
    top: 4%;
    left: 6%;
    font-size: 24px;
    color: #333333;
    font-weight: 500;
    width: 45px;
    height: 45px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .scale-num {
    font-size: 28px;
    background: #ff4e10;
    color: #fff;
    font-weight: 700;
  }

  .fixed-percent {
    position: absolute;
    bottom: 4%;
  }
  .percent {
    cursor: pointer;
  }
  .percent-text {
    font-size: 21px;
    font-weight: 600;
    line-height: 29px;
  }
}

// 边框动画
@keyframes flow {
  from {
  }
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

.content-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}

.border-animation {
  border-radius: 9px;
  border-color: transparent;
  background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #e60a0a 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #e60a0a 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #e60a0a 0) repeat-x;
  background-size: 4px 16px, 4px 16px, 16px 4px, 16px 4px;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: flow 0.3s linear infinite;
}
</style>

<style lang="less">
.table-poptip {
  width: 698px;
  height: 227px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

//隐藏表格气泡箭头
.pick-table-pop {
  .ark-poptip-arrow {
    display: none;
  }
  .ark-poptip-body-content {
    overflow: hidden;
  }
}
</style>
