<template>
    <div style="width: 1200px;margin: 0 auto">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card style="margin-top: 10px">
          <el-row :gutter="10">
            <el-col :span="12">
              <span >订单状态：{{order.column2}}</span>
            </el-col>
            <el-col :span="12" style="cursor: pointer;">
              <span @click="seeOrderStatus()"  > 订单跟踪 ></span>
            </el-col>
          </el-row>
          </el-card>
        </el-col>



        <el-col :span="24">
           <el-card>
             <el-row :gutter="10">
               <el-col :span="24">
                 <span>{{order.gname}} ></span>
               </el-col>

               <el-col :span="4">
                 <span>{{order.serverName}}</span>
               </el-col>
               <el-col :span="8">
                 <span>{{order.serverPhone}}</span>
               </el-col>
               <el-col :span="6">
                 <span>{{this.serverUser.serverLevel}}</span>
               </el-col>
               <el-col :span="3">
                 <span>{{this.serverUser.serverAge}}年工龄</span>
               </el-col>
               <el-col :span="3">
                 <span>好评率：{{this.serverUser.rate}}</span>
               </el-col>

             </el-row>
           </el-card>
        </el-col>

        <el-col :span="24">
          <el-card >
            <el-row :gutter="10">
              <el-col :span="24">
                <span>上门时间:{{order.serviceStartTime}}  ></span>
              </el-col>

              <el-col :span="12">
                <span>顾客信息:{{member.name}} {{member.privacyUser}}</span>
              </el-col>
              <el-col :span="12">
                <span>{{member.address}}{{member.detailed}}</span>
              </el-col>
              <el-col :span="24">
                <span>备注 {{order.memo}}</span>
              </el-col>
            </el-row>


          </el-card>
        </el-col>

        <el-col :span="24">
          <el-card >
            <el-row :gutter="10">
              <el-col :span="12">
                <span>订单编号 {{order.orderIndex}}</span>
                <el-button size="mini">复制</el-button>
              </el-col>

              <el-col :span="12">
                <span>下单时间 {{order.createTime}}</span>
              </el-col>
              <el-col :span="12">
                <span>服务类别 {{order.categoryName}}</span>
              </el-col>
              <el-col :span="12">
                <span>数量 {{order.goodsCounts}}小时</span>
              </el-col>
              <el-col :span="12">
                <span>服务单价 {{order.price}} 元 / 小时</span>
              </el-col>
              <el-col :span="12">
                <span>订单金额 ￥{{order.orderAmount}}</span>
              </el-col>
            </el-row>


          </el-card>
        </el-col>

        <el-col :span="24">
          <el-card >
            <el-row :gutter="10">
              <el-col :span="24">
                <span>优金豆  -￥{{order.beanAmount}}</span>

              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card >
            <el-row :gutter="10">
              <el-col :span="24">
                <span>追加服务 </span>
              </el-col>
              <el-col :span="12">
                <span>追加数量  {{order.addCount}}小时</span>
              </el-col>
              <el-col :span="12">
                <span>金额 ￥{{order.addAmount}}</span>
              </el-col>
            </el-row>


          </el-card>
        </el-col>

        <el-col :span="24">
          <el-card >
            <el-row :gutter="10">
              <el-col :span="12">
                <span>服务数量 {{parseInt(order.addCount)+parseInt(order.goodsCounts)}}小时</span>
              </el-col>

              <el-col :span="12">
                <span>订单实付 ￥{{order.totalAmount}}</span>
              </el-col>
            </el-row>


          </el-card>
        </el-col>


        <el-col :span="24" v-if="order.refStatus!=null&&order.refStatus!=''&&order.refStatus!=undefined">
          <el-card >
            <el-row :gutter="10">
              <el-col :span="24">
                <span>退款信息 </span>
              </el-col>
              <el-col :span="12">
                <span>退款金额 {{refund.refundMoney}}元</span>
              </el-col>
              <el-col :span="12">
                <span>退款原因 {{refund.refundReason}}</span>
              </el-col>
              <el-col :span="12">
                <span>拒绝原因 商家与顾客已协商好</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="order.maintenanceAmount!=null&&order.maintenanceAmount!=''&&order.maintenanceAmount!=undefined">
          <el-card >
            <el-row :gutter="10">
              <el-col :span="12">
                <span>收取维修/配件费 </span>
              </el-col>

              <el-col :span="12">
                <span>收取金额 {{order.maintenanceAmount}}元</span>
              </el-col>
              <el-col :span="12" >
                <span>费用说明 {{order.maintenanceRemark}}</span>
              </el-col>
            </el-row>


          </el-card>
        </el-col>

      </el-row>

      <!--订单跟踪-->
      <el-dialog title="订单跟踪" :visible.sync="recordOpen" width="600px">
        <ul>

          <li v-for='item in orderRecord'>
            <el-row>
              <el-col :span="12" >
                {{item.nowState}}
              </el-col>

              <el-col :span="12" push="6">
                {{item.createTime}}
              </el-col>
            </el-row>

            <el-divider></el-divider>




          </li>
        </ul>

      </el-dialog>


    </div>
</template>

<script>


  import { getAddress } from '../../../api/system/orderAdress'
  import { getUser } from '../../../api/system/ServiceUserService'
  import { listCode } from '../../../api/system/dict/code'
  import { listRecord } from '../../../api/system/orderRecord'
  import { listRefund } from '../../../api/system/orderRefund'


  export default {
    name: 'index',
    data(){
      return{
        order:{},
        activeNames: ['1'],
        imgSrc:'',
        goodsList:[],
        member:{},
        serverUser:{},
        recordOpen:false,
        orderRecord:[],
        refStatusOptions:[],
        refund:{},
      }
    },
    create() {

    },
    mounted(){
      this.order=this.$route.query.Order;
      this.queryAdress();
      this.getServicceUser();
      this.getRefStatus();
      this.getRefund();
    },
    methods:{
      queryAdress(){
        getAddress(this.order.orderId).then(res=>{
          this.member=res.data;
        })
      },
      getServicceUser(){
        getUser(this.order.serverId).then(res=>{
          this.serverUser=res.data;
          this.serverUser.rate=parseFloat(this.serverUser.rate)*100 + '%'
          let params={
            codeValue:'服务等级'
          }
          listCode(params).then(res=>{
            for(let i in res.rows){
              if(this.serverUser.serverLevel==res.rows[i].decodeId){
                this.serverUser.serverLevel=res.rows[i].decodeValue
              }
            }

          })

        })
      },
      seeOrderStatus(){
        console.log(111)
        listRecord(this.order).then(res=>{
          console.log(res)
          this.orderRecord=res.rows;

          let param={
            codeValue:'订单状态'
          }
          listCode(param).then(ress=>{
            for(let index in res.rows){
              for(let i in ress.rows){
                if(res.rows[index].nowState==ress.rows[i].decodeId){
                  res.rows[index].nowState=ress.rows[i].decodeValue;
                  if(this.orderRecord[index].operateInfo!=''&&this.orderRecord[index].operateInfo!=null){
                    res.rows[index].nowState='追加服务'
                  }


                  if(res.rows[index].nowState=='005'){

                  }
                }
              }
            }

          })
          this.recordOpen=true;
        })
      },
      /** 获取订单退款子状态和信息*/
      getRefStatus(){
        let param={
          codeValue:'退款状态',
        }
        listCode(param).then(res=>{
          this.refStatusOptions=res.rows
        })
      },
      getRefund(){
        this.order.createTime=null;
        listRefund(this.order).then(ress=>{
          this.refund=ress.rows[0]
          console.log(this.refund)
        })
      }


    }
  }
</script>

<style scoped>
  .el-card{
    margin-bottom: 20px;
  }

  li {list-style-type:none;}
  ul{
    padding-inline-start:0px
  }


</style>
