<template>
    <div style="padding-bottom:50px">
        <!-- <div style="display:flex;align-items:center">   
            <div class="dvied"></div>
            <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">我的订单</div>
        </div> -->
        <div style="background: #FFFFFF;border-radius: 4px;">
            <div class="ordenum">   
                <el-form :model="queryParam" :rules="queryParam" label-position="left"  label-width="70px" class="baseinfo">
                    <div style="display:flex;padding-top: 10px;padding-left: 20px;background: #edecec;flex-wrap:wrap;">
                        <el-form-item  label="工具类型" prop="toolType" >
                            <el-select v-model="queryParam.toolType" placeholder=""  size="mini" clearable>
                                <el-option  label="全部" value=""></el-option>
                                <el-option v-for="(item,key) of tooltypelist"  :key='key' :label="item.dictLabel" :value="item.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item  label="交付方式" prop="deliverType" style="margin-left:20px" >
                            <el-select v-model="queryParam.deliverType" placeholder=""  size="mini" clearable>
                                <el-option  label="全部" value=""></el-option>
                                <el-option v-for="(item,key) of paytypelist"  :key='key' :label="item.dictLabel" :value="item.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item  label="订单时间" prop="dateRange" style="margin-left:20px">
                            <el-date-picker v-model="dateRange" type="daterange"  size="mini" value-format="yyyy-MM-dd" clearable
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-button  type="primary" icon="el-icon-search"  size="small" @click="getMyOrder()">搜索</el-button>
                        <el-button style="background: #F2A51A;" @click="resetForm()">重置</el-button>
                    </div>
                </el-form>
                <el-table v-loading='loading' :data="orderslist" style="margin-top:30px" >
                    <el-table-column label="序号" width="100px" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单编号" align="center" key="orderNumber" prop="orderNumber" width='230' :show-overflow-tooltip="true"/>
                    <el-table-column label="商品名称" align="center" key="name" prop="name" width='230' :show-overflow-tooltip="true"/>
                    <el-table-column label="商品类型" align="center" key="type" prop="type"  :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <p>{{findLabelValueByProp(tooltypelist,scope.row.type,'dictValue','dictLabel')}}</p>
                            <!-- <tool-type :type="scope.row.type"></tool-type> -->
                        </template>
                    </el-table-column>
                    <el-table-column label="交付方式" align="center" key="deliverType" prop="deliverType" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="商品数量" align="center" key="amount" prop="amount" :show-overflow-tooltip="true"/>
                    <el-table-column label="订单金额" align="center" key="fee" prop="fee" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.fee}}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="付款方式" align="center" key="payType" prop="payType" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                             <!-- <span>{{scope.row.payType=='wx'?'微信支付':'支付宝支付' }}</span> -->
                             <span v-if="scope.row.payType=='A01'">支付宝支付</span>
                             <span v-if="scope.row.payType=='W01'">微信支付</span>
                             <span v-if="scope.row.payType=='W06'">微信小程序支付</span>
                             <span v-if="scope.row.payType=='WALLET'">零钱支付</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" align="center" key="status" prop="status"  :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                        <!-- <span>{{scope.row.status==0?'未支付':scope.row.status==1?'支付成功':'支付失败' }}</span> -->
                        <span v-if="scope.row.status==0">未支付</span>
                        <span v-if="scope.row.status==1">支付成功</span>
                        <span v-if="scope.row.status==2">已取消</span>
                        <span v-if="scope.row.status==3">已过期</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="支付时间" align="center" key="payTime" prop="payTime" width='200'>
                        <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.payTime) }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- :page-sizes="[10, 20, 30]"sizes,  :current-page="currentPage"   -->
                <div v-if="total>8"  style='width:100%;margin-top:30px;text-align: center;'>
                    <el-pagination background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-size="queryParam.pageSize"
                        layout="total,  prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {getMyOrder} from "@/api/my/my";
    import {findByvalue, findLabelValueByProp} from "@/util/util";
    export default{
        data(){
            return{
                // orderObj:{
                //     searchForm:{toolType:'',deliverType:'',dateRange:''},
                //     tableData:[], total:'',pageNum:1,pageSize:10,
                // },
                loading: false,
                orderslist: [],
                // 总条数
                total: 0,
                // 日期范围
                dateRange: [],
                // 查询参数
                queryParam: {
                    pageNum: 1,
                    pageSize:8,
                    deliverType: undefined,
                    toolType: undefined
                }
            }
        },
        mounted(){
            if(this.token){
                this.getMyOrder();
            }
        },
        computed: {
            ...mapGetters(['paytypelist','tooltypelist','token'])
        },
        methods:{   
            findByvalue, findLabelValueByProp,
            //重置    
            resetForm() {
                this.queryParam.deliverType=''
                this.queryParam.toolType=''
                this.dateRange=[]
            },
            getMyOrder() {
                getMyOrder(this.addDateRange(this.queryParam, this.dateRange)).then(response => {
                    this.orderslist = response.rows;
                    this.total = response.total;
                })
            },
            //分页
            handleSizeChange(val) {
                this.queryParam.pageSize=val;
                this.getMyOrder();
            },
            //当前页码
            handleCurrentChange(val) {
                this.queryParam.pageNum=val;
                this.getMyOrder();
            }
        },

    }
</script>
<style scoped>
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .baseinfo >>> .el-input, .baseinfo>>>.el-select{
        width:206px;
        height:40px;
        border-radius: unset;
    }
    /* .baseinfo >>> .el-input__inner{
        height:30px;
    } */
    .baseinfo>>>.el-button{
        width:90px;
        height:30px;
        background: #0066EB;
        border-radius: 4px;
        margin-left:20px;
        color:#FFFFFF;
        margin-top:5px;
        line-height:9px;
    }
    .baseinfo >>> .el-form-item {
        margin-bottom: 10px;
    }
    .ordenum>>>.el-table th{
        background-color:#F7F7F7;
        color:#666666;
        text-align:center;
    }
    .ordenum>>>.el-table td{
        text-align:center;
        background-color:#FFFFFF;
        color:#333333;
        height:60px;
    }
    .ordenum>>>.el-table--border th{
        border-right:#F7F7F7
    }
</style>