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

    <Table border :loading="disabledTab" :columns="columnsList" :data="dataList" class="ListTab">
        <template slot-scope="{ row }" slot="used_amount" class="operation">
          <p style="color: red;">{{ row.used_amount }}</p>
        </template>
        <template slot-scope="{ row }" slot="used_percent" class="operation">
          <p>{{ row.used_percent + '%'}}</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 { GetMyFlowList } from '@/api/order'
import { getToken } from '@/libs/util'
export default {

  data () {
    return {
      disabledTab: false,
      access_token: getToken(),
      dataList: [],
      columnsList: [
        {
          title: this.$t('my_order_list_2'),
          key: 'product_name',
          align: 'center',
          // slot: 'product_key',
          width: '120'
        },
        {
          title: this.$t('api_name'),
          key: 'product_key',
          // slot: 'product_type',
          align: 'center'
        },
        {
          title: this.$t('setmealmanage_4'),
          key: 'total_amount',
          align: 'center'
        },
        {
          title: this.$t('setmealmanage_5'),
          key: 'used_amount',
          slot: 'used_amount',
          align: 'center'
        },
        {
          title: this.$t('setmealmanage_6'),
          key: 'used_percent',
          align: 'center',
          slot: 'used_percent'
        },
        {
          title: this.$t('setmealmanage_7'),
          key: 'expire_time_str',
          // slot: 'product_status',
          align: 'center'
        },
        {
          title: this.$t('status'),
          key: 'flow_status_name',
          // slot: 'flow_status_name',
          align: 'center'
        }
      ],
      total: 0,
      page: 1, // 分页
      perpage: 10
    }
  },
  created () {
    this.queryList()
  },
  methods: {
    // 查询套餐
    queryList () {
      this.disabledTab = true
      const formdata = new FormData()
      formdata.append('access_token', this.access_token)
      formdata.append('page', this.page)
      formdata.append('perpage', this.perpage)
      GetMyFlowList(formdata).then(res => {
        this.disabledTab = false
        this.total = res.data.total
        this.dataList = res.data.items
      })
    },
    changeSize (size) {
      this.perpage = size
      this.queryList()
    },
    changePage (page) {
      this.page = page
      this.queryList()
    }
  }
}
</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>
