<template>
    <div class="template_content">
        <!-- 搜索 -->
        <div class="search_box">
            <a-form layout="inline">
              <a-form-item label="用户手机号">
                  <a-input  v-model="searchPage.username" placeholder="请输入手机号" allowClear></a-input>
              </a-form-item>
              
              <a-form-item>
                  <a-button type="primary" icon="search" @click="handlSearch">查询</a-button>
              </a-form-item>
            </a-form>
        </div>

        <!-- 表格内容 -->
        <div class="content_box">
            <!-- 表格 -->
            <a-table
                :columns="columns"
                :dataSource="data"
                :loading="loading"
                :pagination="pagination"
                bordered
                size="small"
                @change="handleTableChange"
                rowKey="id"
            >
                <template slot="userInfo" slot-scope="text,record">
                    <div>昵称：{{record.nickName}}</div>
                    <div>手机：{{record.username}}</div>
                </template>
                <template slot="status" slot-scope="text,record">
                    <a-tag v-if="text == 'WAIT_PAY'" color="orange">未支付</a-tag>
                    <a-tag v-if="text == 'PAY_COMPLETE'" color="green">已支付</a-tag>
                    <a-tag v-if="text == 'PAY_CLOSE'" color="red">已关闭</a-tag>
                </template>
            </a-table>
        </div>
    </div>
</template>
<script>
import {fetchList} from '@/api/biz/order'
import {disposereq} from '@/utils/util'

let columns = [
    {
        title: "订单编号",
        dataIndex: "orderNo",
        align: "center"
    },
    {
        title: "订单名称",
        dataIndex: "orderName",
        align: "center"

    },
    {
        title: "单价",
        dataIndex: "productPrice",
        align: "center"
    },
    {
        title: "数量",
        dataIndex: "productCount",
        align: "center"
    },
    {
        title: "下单人信息",
        dataIndex: "userId",
        align: "center",
        scopedSlots: {customRender: 'userInfo'}
    },
    {
        title: "状态",
        dataIndex: "status",
        align: "center",
        scopedSlots: {customRender: 'status'}
    },
    {
        title: "用户身份",
        dataIndex: "userRoleName",
        align: "center"
    },
    {
        title: "支付方式",
        dataIndex: "payMethod",
        align: "center",
        customRender: (text) => {
            return text == 'WeiXin' ? '微信' : text == 'AliPay' ? '支付宝' : '其它'
        }
    },
    {
        title: "支付金额",
        dataIndex: "paymentMoney",
        align: "center",
        customRender: (text) => {
            return '¥'+text
        }
    },

]

export default {
    data(){
        return {
            columns: columns,
            data: [],
            loading: false,
            searchPage: {
                pageIndex: 1,
                pageSize: 10,
                username: ''

            },
            pagination: {
                showQuickJumper: true,
                showSizeChanger: true
            },
        }
    },
    created() {
        this.getList(this.searchPage)
    },
    beforeUpdate() {
        
    },
    methods: {
        getList(query){
            this.loading = true;
            fetchList(query).then(res => {
                if(res.code == 200){
                    this.data = res.data
                    let paper = {...this.pagination}
                    paper.current = query.pageIndex
                    paper.total = res.count
                    this.pagination = paper
                }else{
                    this.$message.info(res.resp_code)
                }
                this.loading = false
            }).catch(err => {
                this.loading = false
                disposereq(this,err)
            })
        },
        handleTableChange(pagination,filters,sorter){
            let queryParam = { ...this.searchPage };
            queryParam.pageIndex = pagination.current;
            queryParam.pageSize = pagination.pageSize;
            this.getList(queryParam);

        },
        handlSearch(){
            let queryParam = { ...this.searchPage };
            this.getList(queryParam);
        }
    }
}
</script>
<style>
.template_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background-color: #fff;
}
.content_box {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 14px;
}
.table_top {
  padding-bottom: 14px;
}
.btn_margin {
  margin: 0px 5px;
}
</style>