<template>
  <view class="xd-order">
    <view
      :style="{background: background}"
      class="xd-order__item"
      v-for="(item,index) in dataList"
      :key="item.order_id"
    >
      <view class="xd-order__item-title">
        <view>订单号：{{item.order_id}}</view>
        <view>{{item.status}}</view>
      </view>
      <view class="xd-order__item-list">
        <view v-for="(pItem,pIndex) in item.product" :key="pItem['product_id']" @click="toOrderDetail(item)">
          <view :style="{width: productWidth + 'rpx', height: productHeight + 'rpx'}">
            <image :src="pItem.thumb"></image>
          </view>
          <view style="
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;">{{pItem['product_name']}}
          </view>
          <view>
            <view>
              <xd-unit
                :price="pItem.sale_price"
                :font-size="28"
                font-weight="normal"
                :iocn-size=".3"
              ></xd-unit>
            </view>
            <view>x{{pItem['ct']}}</view>
          </view>
        </view>
        <view
          style="background: #fff"
          class="xd-order__item-list-all"
          v-if="isCut && item.allProduct && item.allProduct.length > 3"
        >
          <view>
            <xd-font-icon
              v-if="item.show_all"
              size="28"
              icon="iconxiashuangjiantou"
              @click="handleShowAll(item)"
            ></xd-font-icon>
            <xd-font-icon v-else size="28" icon="iconshuangjiantoushang" @click="handleCloseAll(item)"></xd-font-icon>
          </view>
        </view>
      </view>
      <view class="xd-order__item-number">
        <view>
          <view>下单时间：</view>
          <view>
            {{item.placed_time}}
          </view>
        </view>
        <view>
          <view>合计：</view>
          <view>
            <xd-unit :price="item.price"></xd-unit>
          </view>
        </view>
      </view>
      <slot :item="item" :index="index">
        <view
          class="xd-order__item-btn"
          v-if="item.status_code === '3008' || item.status_code === '3007' || uiType === 4 || uiType === 5"
        >
          <view v-if="item.status_code === '3008' || item.status_code === '3007'">
            <xd-button
              type="default"
              size="mini"
              radius="10rpx"
              @click="cannelOrder(item)"
            >取消订单
            </xd-button>
          </view>
          <view v-if="item.status_code === '3008' || item.status_code === '3007'">
            <xd-button
              type="primary"
              size="mini"
              radius="10rpx"
              @click="toPay(item)"
            >去付款
            </xd-button>
          </view>
          <view v-if="(uiType === 4 && item.status_code === '3000') || (uiType === 5 && item.status_code === '3010')">
            <xd-button
              type="primary"
              size="mini"
              radius="10rpx"
              @click="toCashier(item)"
            >再次购买
            </xd-button>
          </view>
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
  /**
   * XdShopOrderList 我的订单插件控件
   * @description 在使用该插件订单数据列表必须完全加载之后才能初始化该插件（不支持异步加载）
   *
   * @property {Boolean} disabled = [true|false]    是否禁用
   * @property {String}  btnType                    按钮颜色类型（primary,default,subPrimary,danger,info,warning,success）
   * @property {String}  radius                     圆角处理
   * @property {String}  size                       按钮大小（default，mini）
   * @property {Boolean} isCut                      商品过多时是否开启折叠展示（default，false）
   * @event {Function} click                        按钮点击事件e
   */
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdUnit from "@/components/XdUnit/XdUnit";
  import XdButton from "@/components/XdButton/XdButton";

  export default {
    components: {
      XdButton,
      XdUnit,
      XdFontIcon
    },
    name: "XdStoreOrderList",
    props: {
      background: {
        type: String,
        default: '#fff'
      },
      type: {
        type: String | Number,
        required: true
      },
      nodata: {
        type: String,
        default: '您还没有相关订单'
      },

      list: {
        type: Array | null,
        required: true
      },

      productWidth: {
        type: Number,
        default: 150
      },
      productHeight: {
        type: Number,
        default: 150
      },
      isCut: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        uiType: null, //选中订单类型

        //订单列表数组列表
        dataList: [],

        //我的订单列表数据，null使用测试数据   array=> 使用正式数据
        testData: [
          {
            "order_id": "m389261245389619200",
            "placed_time": "2021-09-06 15:45:17",
            "confirm_time": "2021-09-06 15:45:17",
            "status": "\u652f\u4ed8\u4e2d",
            "status_code": "3008",
            "send_status_code": "N",
            "price": 249,
            "product": [{
              "product_id": 1409469,
              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
              "product_name": "\u8d1d\u87ba\u6865 \u67f3\u5dde\u87ba\u86f3\u7c89\u666e\u901a\u88c5 330g*5\u5305",
              "ct": 2,
              "sale_price": 55,
              "id": 448613
            }, {
              "product_id": 1409459,
              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119151849615.jpg?x-oss-process=style\/200_200",
              "product_name": "JIAJIA\/\u52a0\u52a0 \u8c03\u5473\u54c1\u7ec4\u5408C\u6b3e",
              "ct": 2,
              "sale_price": 43,
              "id": 448614
            }, {
              "product_id": 1409457,
              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119151624114.jpg?x-oss-process=style\/200_200",
              "product_name": "JIAJIA\/\u52a0\u52a0 \u8c03\u5473\u54c1\u7ec4\u5408A\u6b3e 210g+900ml",
              "ct": 1,
              "sale_price": 53,
              "id": 448615
            },
              {
                "product_id": 1409480,
                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119151624114.jpg?x-oss-process=style\/200_200",
                "product_name": "JIAJIA\/\u52a0\u52a0 \u8c03\u5473\u54c1\u7ec4\u5408A\u6b3e 210g+900ml",
                "ct": 1,
                "sale_price": 53,
                "id": 448615
              }
            ]
          },
          {
            "order_id": "s299419273976496128",
            "placed_time": "2021-01-01 17:45:09",
            "confirm_time": "2021-01-01 17:45:09",
            "status": "\u5df2\u53d1\u8d27",
            "status_code": "3000",
            "send_status_code": "Y",
            "price": 312,
            "product": [{
              "product_id": 423457,
              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200426093257532.jpg?x-oss-process=style\/200_200",
              "product_name": "\u91d1\u9f99\u9c7c \u9187\u9999\u83dc\u7c7d\u6cb9 5L*4\u6876",
              "ct": 1,
              "sale_price": 312,
              "id": 161078
            }]
          }
        ]
      }
    },

    watch: {
      list(value) {
        this.init(value);
      },

      type(value) {
        this.uiType = value;
        this.init(this.list)
      }
    },

    created() {
      this.uiType = this.type;
      this.init(this.list);
    },


    methods: {
      init(list) {
        if (list === null) {
          if (this.uiType === 0 || this.uiType === 4 || this.uiType === 1) {
            if (this.isCut) {
              this.testData.map((item, index, arr) => {
                item.show_all = true
                if (item.product.length > 3) {
                  item.allProduct = this.$xdUniHelper.cloneDeep(item.product)
                  item.cutProduct = this.$xdUniHelper.cloneDeep(item.product).splice(0, 3)
                  item.product = this.$xdUniHelper.cloneDeep(item.cutProduct)
                }
                arr.splice(index, 1, item)
              })
            }
            this.dataList = this.$xdUniHelper.cloneDeep(this.testData);
          } else {
            this.dataList = [];
          }
        } else {
          if (this.isCut) {
            let tempList = this.$xdUniHelper.cloneDeep(list)
            tempList.map((item, index, arr) => {
              item.show_all = true
              if (item.product.length > 3) {
                item.allProduct = this.$xdUniHelper.cloneDeep(item.product)
                item.cutProduct = this.$xdUniHelper.cloneDeep(item.product).splice(0, 3)
                item.product = this.$xdUniHelper.cloneDeep(item.cutProduct)
              }
              arr.splice(index, 1, item)
            })
            this.dataList = tempList;
          } else {
            this.dataList = list
          }
        }
      },


      /**
       * @description 去付款
       * @param item
       */
      toPay(item) {
        this.$emit('onToPay', item);
      },

      /**
       * @description 取消订单
       * @param item
       */
      cannelOrder(item) {
        this.$emit('onCannelOrder', item);
      },

      /**
       * @description 再次购买
       * @param item
       */
      toCashier(item) {
        this.$emit('onCashier', item);
      },

      /**
       * @description 去订单详情
       * @param item
       */
      toOrderDetail(item) {
        this.$emit('onOrderDetail', item);
      },

      handleShowAll(item) {
        console.log(item, 'itemitem')
        item.product = this.$xdUniHelper.cloneDeep(item.allProduct)
        item.show_all = false
      },

      handleCloseAll(item) {
        item.product = this.$xdUniHelper.cloneDeep(item.cutProduct)
        item.show_all = true
      }

    }
  }
</script>

<style scoped lang="less">
  .xd-nodata {
    line-height: unit(300, rpx);
    color: #999;
    text-align: center;
    font-size: @xd-font-size-base + 2;
  }

  .xd-order {
    &__item {
      margin-top: unit(20, rpx);

      &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: unit(60, rpx);
        border-bottom: 1px solid #efefef;
        padding: unit(10, rpx) unit(20, rpx);
        font-size: @xd-font-size-base + 2;

        & > view:last-child {
          color: #999;
        }

      }


      &-list {
        &-all {
          display: flex;
          justify-content: center !important;
          align-items: center !important;
          font-size: @xd-font-size-base + 2;
        }

        & > view {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          padding: unit(20, rpx);
          border-bottom: 1px solid #f8f8f8;

          &:last-child {
            border-bottom: 0;
          }

          &:hover {
            background: #f8f8f8;
          }

          & > view:first-child {
            border-radius: unit(10, rpx);
            flex-shrink: 0;
            margin-right: unit(30, rpx);

            & > image {
              width: 100%;
              height: 100%;
            }
          }

          & > view:nth-child(2) {
            font-size: @xd-font-size-base;
            flex: 1;
            width: 0;
          }

          & > view:last-child {
            text-align: right;
            min-width: unit(100, rpx);
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            flex-direction: column;
            margin-left: unit(20, rpx);

            & > view:first-child {

            }

            & > view:last-child {
              font-size: @xd-font-size-base;
              color: #999;
            }
          }
        }
      }

      &-number {
        font-size: @xd-font-size-base + 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: unit(20, rpx);
        border-top: 1px solid #efefef;

        & > view {
          display: flex;
          align-items: center;
        }
      }

      &-btn {
        height: unit(70, rpx);
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        text-align: right;
        padding: 0 unit(20, rpx) unit(10, rpx);


        & > view {
          margin-left: unit(20, rpx);
        }
      }
    }
  }

</style>
