<template>
  <div>
      <a-space class="top-content" size="large">
          <span class="back-btn" @click='back'><a-icon type="left" style='margin-right:10px' />返回</span>
          <span>订单号：{{infoData.code}}</span>
          <span>下单时间：{{infoData.createDate}}</span>
          <span>{{infoData.payType | payType}}</span>
      </a-space>
      <a-card class="gray-content">
          <a-row>
              <a-col :span="12">
                  <div class="tradeStatus">
                      {{infoData.tradeStatus|tradeStatus}}
                  </div>
                  <div style='margin-bottom:10px'>买家已付款至账户，请尽快发货，否则买家有权申请退款。</div>
                  <a-space size='large'><a-button type="primary">确认发货</a-button><a>取消订单</a></a-space>
              </a-col>
              <a-col :span="12" style="margin-top:20px">
                     <a-steps :current="1" style="">
                        <a-step>
                        <!-- <span slot="title">Finished</span> -->
                        <template slot="title">
                            Finished
                        </template>
                        <span slot="description">This is a description.</span>
                        </a-step>
                        <a-step title="In Progress"  description="This is a description." />
                        <a-step title="Waiting" description="This is a description." />
                    </a-steps>
              </a-col>
          </a-row>
      </a-card>
      <a-card class="white-content">
        <div>
            <span class="box">
                <a-descriptions title="买家信息" :column="1">
                    <a-descriptions-item label="买家">
                        {{infoData.payName}}
                    </a-descriptions-item>
                    <a-descriptions-item label="留言">
                        {{infoData.remake}}
                    </a-descriptions-item>
                </a-descriptions>
            </span>
            <span class="box">
                <a-descriptions title="收货人信息" :column="1">
                    <a-descriptions-item label="收货人">
                        {{infoData.receiverName}}
                    </a-descriptions-item>
                    <a-descriptions-item label="联系方式">
                        {{infoData.receiverTel}}
                    </a-descriptions-item>
                    <a-descriptions-item label="收货地址">
                        {{infoData.locationName+infoData.addressDetail+infoData.addressDetail+infoData.addressDetail+infoData.addressDetail+infoData.addressDetail+infoData.addressDetail}}
                    </a-descriptions-item>
                </a-descriptions>
            </span>
            <span class="box">
                <a-descriptions title="付款信息" :column="1">
                    <a-descriptions-item label="实付金额">
                        {{'￥'+infoData.payPrice}}
                    </a-descriptions-item>
                    <a-descriptions-item label="付款方式">
                        {{infoData.payType | payType}}
                    </a-descriptions-item>
                    <a-descriptions-item label="付款时间">
                        {{infoData.createDate}}
                    </a-descriptions-item>
                </a-descriptions>
            </span>
            <span class="box">
                <a-descriptions title="配送信息" :column="1">
                    <a-descriptions-item label="配送方式">
                        快递
                    </a-descriptions-item>
                    <a-descriptions-item label="配送公司">
                        顺丰
                    </a-descriptions-item>
                    <a-descriptions-item label="配送单号">
                        76845423
                    </a-descriptions-item>
                </a-descriptions>
            </span>
        </div>
      </a-card>
      <a-table class='white-content' :columns="detailColumns" :pagination="false" :data-source='skuList' :rowKey="(record,index)=>index">
          <span slot="skuName" slot-scope="text, row">
              <img :src="row.mainPhoto" class="table-img" alt="">
              <span>{{row.skuName}}</span>
          </span>
      </a-table>
      <a-card class="gray-content right">
        <a-descriptions :column="1">
            <a-descriptions-item label="商品总价">
                {{'￥'+(infoData.payPrice - infoData.freightFee)}}
            </a-descriptions-item>
            <a-descriptions-item label="运费">
                {{'￥'+infoData.freightFee}}
            </a-descriptions-item>
        </a-descriptions>
        <span style='color:#000000D9;font-size:20px;line-height:28px;font-weight:500'>实付款：</span>
        <span style='color:#CF1322;font-size:20px;line-height:26px;font-weight:500;font-style: normal;'>{{'￥'+infoData.payPrice}}</span>
      </a-card>
  </div>
</template>

<script>
import { orderInfo } from '@/api/shop/order'
import { detailColumns } from './config'
export default {
	data(){
		return{
			infoData:{
				"id":1,
				"code":"123456",
				"jcookCode":"123131241",
				"tradeNo":"12123",
				"tradeStatus":1,
				"payName":"张三",
				"payTel":"13738611460",
				"payType":1,
				"payPrice":13,
				"freightFee":4,
				"receiverName":"王五",
				"receiverTel":"13738611465",
				"locationName":"宁波镇海",
				"addressDetail":"深蓝大厦",
				"remake":null,
				"createName":"张三",
				"createDate":'2020-1-2',
				"skuList":[
					{
						"mallType":1,
						"appSkuId":"235533200452096000",
						"skuName":"测试修改",
						"mainPhoto":"http://oss.jcook.com.cn/file4/100003980222/100003980222_0.jpg",
						"sellPrice":12,
						"kind":1,
						"weight":1,
						"unit":"个",
						"num":1,
						"payPrice":13,
						"goodsId":null
					}
				]
			},
			skuList:[
				{
					"mallType":1,
					"appSkuId":"235533200452096000",
					"skuName":"测试修改",
					"mainPhoto":"http://oss.jcook.com.cn/file4/100003980222/100003980222_0.jpg",
					"sellPrice":12,
					"kind":1,
					"weight":1,
					"unit":"个",
					"num":1,
					"payPrice":13,
					"goodsId":null
				},
				{
					"mallType":1,
					"appSkuId":"235533200452096000",
					"skuName":"测试修改",
					"mainPhoto":"http://oss.jcook.com.cn/file4/100003980222/100003980222_0.jpg",
					"sellPrice":12,
					"kind":1,
					"weight":1,
					"unit":"个",
					"num":1,
					"payPrice":13,
					"goodsId":null
				},
			],
			detailColumns
		}
	},
	mounted() {
		if(this.$route.params.id){
			// this.getInfo(this.$route.params.id)
		}
	},
	filters: {
		tradeStatus: function (value) {
			switch (value) {
			// 交易状态(0.交易创建并等待买家付款,1.未付款交易超时关闭或支付完成后全额退款,
			// 2.交易支付成功（待发货）,3.交易结束并不可退款，4.出库（待收货）,5.订单完成,
			// 6.申请取消,7.申请拒收，8.取消订单失败9.取消订单成功10.发生拆单,11.售后换新)
			case 0:
				return '交易创建并等待买家付款'
			case 1:
				return '交易关闭'
			case 2:
				return '待发货'
			case 3:
				return '交易结束'
			case 4:
				return '待收货'
			case 5:
				return '订单完成'
			case 6:
				return '申请取消'
			case 7:
				return '申请拒收'
			case 8:
				return '取消订单失败'
			case 9:
				return '取消订单成功'
			case 10:
				return '发生拆单'
			case 11:
				return '售后换新'
			default:
				break;
			}
		},
		payType: function (value) {
			switch (value) {
			// 1.支付宝，2.微信，3.现金，4.pos，5.预缴扣除，6.银行卡，7.支票，8.转账，9.开发商代付）
			case 1:
				return '支付宝'
			case 2:
				return '微信'
			case 3:
				return '现金'
			case 4:
				return 'pos'
			case 5:
				return '预缴扣除'
			case 6:
				return '银行卡'
			case 7:
				return '支票'
			case 8:
				return '转账'
			case 9:
				return '开发商代付'
			default:
				break;
			}
		}
	},
	methods:{
		getInfo(id){
			orderInfo({orderId:id}).then(res=>{
				this.infoData = res.data
				this.skuList = res.data.skuList
			})
		},
		back(){
			this.$router.go(-1)
		}
	}
}
</script>

<style lang="less" scoped>
.top-content{
    padding-left:13px ;
    padding-bottom:20px ;
    padding-top: 5px;
    font-size: 14px;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
}
.gray-content{
    width:95%;
    background:#00000005;
    margin:auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    .tradeStatus{
        color: #000000D9;
        font-weight: 500;
        font-size: 20px;
    }
}
.white-content{
    width:95%;
    margin:auto;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 8px;
}
.box{
    width: 25%;
    display: inline-block;
    margin: auto;
    vertical-align:top;
    padding-left: 20px;
    padding-right: 20px;
}
.table-img{
    width: 40px;
    height: 40px;
    display: inline;
}
.right{
    text-align: right;
    padding-right: 20px;
}
</style>