<template>
  <div class="setmeal">
    <div class="setmeal__h">
      <p class="setmeal__h--p"> {{ $t('orderlist_1') }} </p>
    </div>

    <Table border :loading="disabledTab" :columns="columnsList" :data="dataList" class="ListTab">
        <template slot-scope="{ row }" slot="price" class="operation">
          <p style="color: red;">{{$t('my_order_list_1')}}{{ row.price }}</p>
        </template>
        <template slot-scope="{ row }" slot="expire_time" class="operation">
          <!-- <p>{{ row.expire_time }}</p> -->
        </template>
        <template slot-scope="{ row }" slot="order_status_name" class="operation">
          <router-link v-if="row.order_status === 0" :to="{name: 'placeAnOrder',query: {'product_id': row.product_id, 'order_id':row.order_id, 'type': 'non_payment'}}">
            <p>{{ row.order_status_name }}</p>
          </router-link>
          <p v-else>{{ row.order_status_name }}</p>
        </template>
    </Table>
    <div class="pagination">
      <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>

  </div>
</template>

<script>
import { GetMyOrderList } from '@/api/order'
import { getToken } from '@/libs/util'
export default {
  name: '',

  data () {
    return {
      access_token: getToken(),
      orderId: 0,
      disabledTab: false,
      modalLoad: false,
      // changeTitle: this.$t('orderlist_13'),
      dataList: [],
      columnsList: [
        {
          title: this.$t('orderlist_2'),
          key: 'order_id',
          // slot: 'product_name',
          align: 'center'
        },
        {
          title: this.$t('my_order_list_2'),
          key: 'order_name',
          // slot: 'product_type',
          align: 'center'
        },
        {
          title: this.$t('orderlist_3'),
          key: 'num',
          align: 'center'
        },
        {
          title: this.$t('orderlist_4'),
          key: 'price',
          slot: 'price',
          align: 'center'
        },
        {
          title: this.$t('orderlist_5'),
          key: 'pay_type_desc',
          align: 'center'
          // slot: 'product_id'
        },
        {
          title: this.$t('orderlist_6'),
          key: 'add_time',
          // slot: 'add_time',
          align: 'center'
        },
        {
          title: this.$t('orderlist_7'),
          key: 'order_status_name',
          slot: 'order_status_name',
          align: 'center'
        }
      ],
      total: 0,
      page: 1, // 分页
      perpage: 10,
      orderDataModal: false,
      orderData: {
        order_id: '',
        username: '',
        num: '1',
        price: '',
        order_status: 10,
        op: 'none'
      },
      orderStatusList: []
    }
  },
  created () {
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    getOrderList () {
      this.disabledTab = true
      /* let page = this.page
      let perpage = this.perpage
      let access_token = this.access_token */
      const formdata = new FormData()
      formdata.append('access_token', this.access_token)
      formdata.append('page', this.page)
      formdata.append('perpage', this.perpage)
      GetMyOrderList(formdata).then(res => {
        this.dataList = res.data.items
        this.total = res.data.total
        this.disabledTab = false
      })
    },
    changeSize (size) {
      this.perpage = size
      this.getOrderList()
    },
    changePage (page) {
      this.page = page
      this.getOrderList()
    }
  }
}
</script>

<style  lang='scss'>
.setmeal {
  &__h{
    height:72px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
    padding: 0 30px;
    &--p{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      // margin-left: 30px;
      color:rgba(35,35,42,1);
    }
  }
}
.ListTab{
  background: #fff;
  border-radius: 10px;
}
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.operation{
  &__btn{
    margin: 0 5px;
  }
}
</style>
