<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['business_type_name']}}</view>
      </view>
      <view class="xd-order__item-list">
        <view :style="{marginBottom: pIndex===item.product_data.length-1?0:'20rpx'}" class="xd-order__item-list-item"
              v-for="(pItem,pIndex) in item.product_data" :key="pItem['product_id']"
              @click="toOrderDetail(item)">
          <view :style="{width: productWidth + 'rpx', height: productHeight + 'rpx'}">
            <image :src="pItem.thumb"></image>
          </view>
          <view class="xd-order__item-list-name">{{pItem['product_name']}}</view>
        </view>
        <view style="background: #fff" class="xd-order__item-list-all"
              v-if="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 class="xd-order__item-number">
          <view>
            下单时间：{{item.placed_time}}
          </view>
          <view v-if="item.business_type!=='delivery' && !item['is_hide_price']">
            <view>合计：</view>
            <view>
              <xd-unit :price="item.total_price"></xd-unit>
            </view>
          </view>
        </view>
        <view
          class="xd-order__item-btn"
          v-if="item.status_code === '3008' || item.status_code === '3007' || uiType === 4"
        >
          <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'">
            <xd-button
              type="primary"
              size="mini"
              radius="10rpx"
              @click="toCashier(item)"
            >再次购买
            </xd-button>
          </view>
        </view>
      </view>
    </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）
   * @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: "XdEnterOrderList",
    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
      }
    },
    data() {
      return {
        uiType: null, //选中订单类型

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

        //我的订单列表数据，null使用测试数据   array=> 使用正式数据
        testData: [
          {
            "order_id": "m458170654005029364",
            "placed_time": "2022-03-15 19:28:09",
            "product_data": [
              {
                "product_id": 0,
                "product_name": "六神花露水",
                "ct": 1,
                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
                "ext": ""
              },
              {
                "product_id": 0,
                "product_name": "六神花露水",
                "ct": 1,
                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
                "ext": ""
              }, {
                "product_id": 0,
                "product_name": "六神花露水",
                "ct": 1,
                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
                "ext": ""
              },
              {
                "product_id": 0,
                "product_name": "六神花露水",
                "ct": 1,
                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
                "ext": ""
              },
            ],
            "business_type": "store",
            "business_type_name": "商城兑换",
            "status": "3000",
            "status_name": "支付完成",
            "total_price": "25.00",
            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
          },
          {
            "order_id": "m458170654005029365",
            "placed_time": "2022-03-15 19:28:09",
            "product_data": [
              {
                "product_id": 1,
                "product_name": "六神花露水",
                "ct": 1,
                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
                "ext": ""
              }
            ],
            "business_type": "store",
            "business_type_name": "商城兑换",
            "status": "3000",
            "status_name": "支付完成",
            "total_price": "25.00",
            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
          },
          {
            "order_id": "m458170654005029363",
            "placed_time": "2022-03-15 19:28:09",
            "product_data": [
              {
                "product_id": 0,
                "product_name": "六神花露水",
                "ct": 1,
                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
                "ext": ""
              }
            ],
            "business_type": "store",
            "business_type_name": "商城兑换",
            "status": "3000",
            "status_name": "支付完成",
            "total_price": "25.00",
            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
          }
        ]
      }
    },

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

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

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


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


      /**
       * @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) {
        console.log(item, 'iiiiiiii')
        this.$emit('onOrderDetail', item);
      },

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

      handleCloseAll(item) {
        item.product_data = 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 {
        font-size: @xd-font-size-base + 2;

        &-all {
          display: flex;
          justify-content: center !important;
          align-items: center !important;
          font-size: @xd-font-size-base + 2;
          padding-bottom: unit(20, rpx);
        }

        & > &-item {
          display: flex;
          align-items: center;

          & > 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) {
            flex: 1;
            width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

      }

      &-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:nth-child(2) {
          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>
