<template>
  <el-dialog
    title="订单详情"
    center
    :visible.sync="dialogObj.show"
    width="800px">
    <el-row align="middle" type="flex">
      <el-col :span="4"><label>订单号</label></el-col>
      <el-col :span="8">
        {{detail.out_trade_no}}
      </el-col>
      <el-col :span="4"><label>商品名称</label></el-col>
      <el-col :span="8">{{detail.goods_name}}</el-col>
    </el-row>
    <el-row align="middle" type="flex">
      <el-col :span="4"><label>用户昵称</label></el-col>
      <el-col :span="8">
        {{detail.user_nickname}}
      </el-col>
      <el-col :span="4"><label>用户手机号</label></el-col>
      <el-col :span="8">{{detail.user_mobile}}</el-col>
    </el-row>
    <el-row align="middle" type="flex">
      <el-col :span="4"><label>推广人类型</label></el-col>
      <el-col :span="8">{{detail.invite_type | inviteType}}</el-col>
      <el-col :span="4"><label>推广人ID</label></el-col>
      <el-col :span="8">{{detail.invite_id}}</el-col>
    </el-row>
    <el-row align="middle" type="flex">
      <el-col :span="4"><label>推广人收益</label></el-col>
      <el-col :span="8">{{ detail.invite_earnings ? detail.invite_earnings/100 : 0}}元</el-col>
      <template v-if="detail.buy_type === 2">
        <el-col :span="4"><label>团购信息</label></el-col>
        <el-col :span="8">团ID：{{detail.order_group_id}}<br>是否是团长：{{detail.is_captain === 0 ? '否' : '是'}}</el-col>
      </template>
    </el-row>
    <el-row>
      <el-col :span="4"><label>期数ID</label></el-col>
      <el-col :span="8">{{detail.periods_id}}</el-col>
      <el-col :span="4"><label>描述</label></el-col>
      <el-col :span="8">{{detail.desc}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><label>收货地址</label></el-col>
      <el-col :span="20">
        <template v-if="detail.user_address_id && detail.address_info">
          收货人：{{detail.address_info.receive_name}}<br>
          手机号：{{detail.address_info.receive_mobile}}<br>
          收货地址: {{detail.address_info.province_name}}{{detail.address_info.city}}{{detail.address_info.area}}{{detail.address_info.address}}
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><label>付款时间</label></el-col>
      <el-col :span="8">{{detail.pay_at}}</el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import {INVITETYPE,ORDERSTATUS,BUYTYPE} from "../../util/wordbook";
  export default {
    name: "detail",
    props:[
      'dialogObj'
    ],
    data(){
      return {
        detail:{},
        show:false
      }
    },
    methods:{
      initDialog(){
        this.detail = this.dialogObj.detail;
        console.log('this.dialogObj.detail', this.dialogObj.detail)
        this.show = this.dialogObj.show;
      }
    },
    filters:{
      payMentFilter(val){
        return val=='1'?'已付款':'未付款'
      },
      courseTypeFilter(val){
        return val.type=='1'?`正式课(${val.duration}个月)`:`试听课(${val.duration}天)`
      },
      inviteType(value){
        return INVITETYPE[value]
      },
      status(value){
        return ORDERSTATUS[value]
      },
      buyType(value){
        return BUYTYPE[value]
      },
      moneytFilter(val){
        return val = val / 100 + '元'
      }
    },
    watch:{
      'dialogObj.show'(value){
        if(value){
          this.initDialog()
          }
        },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style scoped lang="less">
  .el-col{
    height: 60px;
    img{
      width: 50px;
      border-radius: 100px;
    }
    label{
      color: #5982e6;
    }
  }
</style>