<template>
  <div class="setmeal">
    <div class="setmeal__h">
      <p class="setmeal__h--p"> {{$t('setmeallist_1')}} </p>
      <router-link :to="{name: 'setMealAdd'}">
        <Button type="primary">{{$t('setmeallist_2')}}</Button>
      </router-link>
    </div>

    <Table border :loading="disabledTab" :columns="columnsList" :data="dataList" class="ListTab">
        <template slot-scope="{ row }" slot="price" class="operation">
          <p style="color: red;">{{$t('currency')}}{{ row.price }}</p>
        </template>
        <template slot-scope="{ row }" slot="product_type" class="operation">
          <p v-if="row.product_type == 'api_buy'">{{$t('setmealadd_6')}}</p>
          <p v-else-if="row.product_type == 'api_free'">{{$t('setmealadd_7')}}</p>
          <p v-else-if="row.product_type == 'product_more'">{{$t('product_more')}}</p>
          <p v-else>{{ row.product_type }}</p>
        </template>
        <template slot-scope="{ row }" slot="product_status" class="operation">
          <p>{{ row.product_status == 1 ? $t('setmealadd_8') : $t('setmealadd_9') }}</p>
        </template>
        <template slot-scope="{ row,index }" slot="operation" class="operation">
            <router-link :to="{name:'setMealAdd',query:{id:row.id}}" >
              <Button type="primary" size="small" class="operation__btn">{{$t('alter')}}</Button>
            </router-link>
            <Button class="ivu-btn ivu-btn-error ivu-btn-small operation__btn" type="text" size="small" @click="remove(row.id)">{{$t('delete')}}</Button>
        </template>
    </Table>
    <div class="pagination">
      <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>

    <Alert style="margin-top: 30px;">{{ $t('setmeallist_4') }}</Alert>
  </div>
</template>

<script>
import {GetProductList, DeleteProduct} from '@/api/setmeal'
import { getToken } from '@/libs/util'
export default {
  name: '',

  data () {
    return {
      disabledTab: false,
      access_token: getToken(),
      columnsList: [
        {
          title: 'ID',
          key: 'id',
          align: 'center'
        },
        {
          // title: '接口功能',
          title: this.$t('setmeallist_5'),
          key: 'product_name',
          // slot: 'product_name',
          align: 'center'
        },
        {
          title: this.$t('setmeallist_6'),
          // title: '接口名称',
          key: 'product_key',
          align: 'center',
          // slot: 'product_key',
          width: '120'
        },
        {
          title: this.$t('design_28'),
          // title: '类型',
          key: 'product_type',
          slot: 'product_type',
          align: 'center'
        },
        {
          title: this.$t('setmeallist_7'),
          // title: '接口流量(次)',
          key: 'amount',
          align: 'center'
        },
        {
          title: this.$t('setmealadd_3'),
          // title: '套餐价格',
          key: 'price',
          slot: 'price',
          align: 'center'
        },
        {
          // title: '有效时间',
          title: this.$t('setmealadd_4'),
          key: 'expire_time_desc',
          align: 'center',
          // slot: 'expire_time_desc'
        },
        {
          // title: '状态',
          title: this.$t('status'),
          key: 'product_status',
          slot: 'product_status',
          align: 'center'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          width: 200,
          align: 'center'
        }
      ],
      dataList: [],
      total: 0,
      page: 1, // 分页
      perpage: 10,
    }
  },
  created(){
    console.log('-----------')
    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)
      GetProductList(formdata).then(res=>{
        this.disabledTab = false
        this.total = res.data.total
        this.dataList = res.data.items
      })
    },
    // 删除接口调用
    removeApi(id){
      const access_token = this.access_token
      DeleteProduct({access_token,id}).then(res=>{
        this.$Message.success(this.$t('update_successfully'))
        this.queryList()
      })
    },
    // 删除套餐
    remove(id){
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: `<p>${this.$t('setmeallist_8')}</p>`,
        onOk: () => {
          this.removeApi(id)
          // const formdata = new FormData()
          // formdata.append('access_token', this.token)
          // formdata.append('id', this.dataList[index].id)
          // DelMember(formdata).then(res => {
          //   if (res.ret === 200) {
          //     this.$Message.success(this.$t('update_successfully'))
          //     this.queryList()
          //   }
          // })
        },
        onCancel: () => {
          this.$Message.info(this.$t('cancel'))
        }
      })
    },

    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>
