<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('currency')}}{{ row.price }}</p>
        </template>
        <template slot-scope="{ row }" slot="expire_time" class="operation">
          <!-- <p>{{ row.expire_time }}</p> -->
        </template>
        <template slot-scope="{ row }" slot="product_status" class="operation">
          <!-- <p>{{ row.product_status == 1 ? '正常' : '关闭' }}</p> -->
        </template>
        <template slot-scope="{ row,index }" slot="operation" class="operation">
            <Button type="primary" size="small" class="operation__btn" @click="changeOrderModal(row.id)">{{$t('orderlist_8')}}</Button>
        </template>
    </Table>
    <div class="pagination">
      <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>

    <Modal
        v-model="orderDataModal"
        :title="$t('orderlist_8')"
        :loading="modalLoad">
        <Form :model="orderData" ref="orderData" :rules="ruleValidate" label-position="left" :label-width="100">
          <FormItem :label="$t('orderlist_2')" prop="order_id">
              <Input v-model="orderData.order_id" readonly></Input>
          </FormItem>
          <FormItem :label="$t('account')" prop="username">
              <Input v-model="orderData.username" readonly></Input>
          </FormItem>
          <FormItem :label="$t('orderlist_3')" prop="num">
              <Input v-model="orderData.num"></Input>
          </FormItem>
          <FormItem :label="$t('orderlist_4')" prop="price">
              <Input v-model="orderData.price"></Input>
          </FormItem>
          <FormItem :label="$t('orderlist_7')" prop="order_status">
              <Select v-model="orderData.order_status">
                <Option v-for="item in orderStatusList" :value="item.key" :key="item.key">{{ item.name }}</Option>
              </Select>
          </FormItem>
          <FormItem :label="$t('orderlist_9')" prop="op">
              <RadioGroup v-model="orderData.op">
                <Radio label="none">{{$t('orderlist_10')}}</Radio>
                <Radio label="send">{{$t('orderlist_11')}}</Radio>
                <Radio label="back">{{$t('orderlist_12')}}</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem :label="$t('orderlist_17')" prop="note">
              <Input type="textarea" :autosize="{minRows: 3, maxRows: 6}" v-model="orderData.note"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="cancelModal()">{{$t('cancel')}}</Button>
          <Button type="primary" @click="changeOrder()">{{$t('save')}}</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import {GetOrderList, GetOrder, UpdateOrder} from '@/api/setmeal'
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('account'),
          key: 'username',
          align: 'center',
          // slot: 'product_key',
          width: '120'
        },
        {
          title: this.$t('setmealadd_1'),
          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'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          width: 200,
          align: 'center'
        }
      ],
      total: 0,
      page: 1, // 分页
      perpage: 10,
      orderDataModal: false,
      orderData: {
        order_id: '',
        username: '',
        num: '1',
        price: '',
        order_status: 10,
        op: 'none',
        note: ''
      },
      orderStatusList: [],
      ruleValidate: {
        order_id: [
          { required: true, message: this.$t('setmealadd_12'), trigger: 'blur' }
        ],
        username: [
          { required: true, message: this.$t(''), trigger: 'blur' }
        ],
        num: [
          { required: true, message: this.$t('orderlist_14'), trigger: 'blur' }
        ],
        price: [
          { required: true, message: this.$t('orderlist_15'), trigger: 'blur' }
        ],
        order_status: [
          { required: true, message: this.$t(''), trigger: 'blur', type:'number' }
          // { message: this.$t('input_integer_warning'), pattern: /^\+?[1-9][0-9]*$/ }
        ],
        op: [
          { required: true, message: this.$t(''), trigger: 'blur' }
        ],
        note: [
          { required: true, message: this.$t('orderlist_18'), trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    getOrderList(){
      this.disabledTab = true
      const formdata = new FormData()
      formdata.append('access_token', this.access_token)
      formdata.append('page', this.page)
      formdata.append('perpage', this.perpage)
      GetOrderList(formdata).then(res=>{
        this.dataList = res.data.items
        this.total = res.data.total
        this.disabledTab = false
      })
    },
    // 修改套餐-弹出层
    changeOrderModal(index){
      this.orderDataModal = true
      this.orderId = index
      this.getOrderInfo(index)
    },
    // 修改套餐-获取单个订单
    getOrderInfo(index){
      let access_token = this.access_token
      let id = index
      GetOrder({access_token, id}).then(res=>{
        // this.orderData = res.data.order
        const datainfo = res.data.order
        const {order_id, username, num, price, order_status, note} = datainfo
        this.orderData = {order_id, username, num, price, order_status, op:'none', note}
        this.orderData.num = this.orderData.num + ''
        this.orderStatusList = res.data.order_status_list
      })
    },
    // 提交修改订单
    changeOrder(){
      let _this = this
      const reqData = new FormData()
      reqData.append('access_token', _this.access_token)
      reqData.append('id', _this.orderId)
      reqData.append('num', _this.orderData.num)
      reqData.append('price', _this.orderData.price + '')
      reqData.append('order_status', _this.orderData.order_status)
      reqData.append('op', _this.orderData.op)
      if(_this.orderData.note){
        reqData.append('note', _this.orderData.note)
      }
      _this.$refs['orderData'].validate((valid)=>{
		    if(valid){
          UpdateOrder(reqData).then(res=>{
            if(res.data.isUpdate){
              _this.$Message.success(this.$t('update_successfully'))
              _this.getOrderList()
              _this.orderDataModal = false
            } else {
              _this.$Message.error(res.msg)
            }
          })
        } else {
          _this.$Message.error(_this.$t('apitest_24'))
          _this.orderDataModal = true
          return
        }
      })
    },
    cancelModal(){
      this.orderDataModal = 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>
