<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      订单详情
    </div>
<div class="contentx" v-if="item!=null">
  <div class="desct"></div>
<div class="order-status" v-if="item!=null" >
          <el-steps  :active="item.status==4?item.status:item.status-1" align-center finish-status="success">
            <el-step title="待支付"></el-step>
            <el-step title="待发货"></el-step>
            <el-step title="待收货"></el-step>
            <el-step title="已完成"></el-step>
          </el-steps>
</div>
           <el-card shadow="never" style="margin-top: 15px">
             <div class="operate-container"  v-if="item!=null">
               <span style="margin-left: 20px" class="color-danger">订单状态：
                  <el-tag prop="status" v-for="(ite, index) in orderOptions"    v-if="item.status==ite.dictValue">{{ite.dictLabel}}</el-tag>
               </span>
              <div class="operate-button-container"   v-if="item.deliverySn!=null" v-hasPermi="['his:storeOrder:express']">
                <el-button size="mini" @click="showExpress()" >查看物流</el-button>
              </div>
              
             </div>
     <div class="desct">
      基本信息
     </div>
      <el-descriptions :column="3" border  >
            <el-descriptions-item label="订单编号"  ><span v-if="item!=null">{{item.orderCode}}</span></el-descriptions-item>
            <el-descriptions-item label="会员"><span v-if="item.nickName!=null">{{item.nickName}}({{item.phone}})</span></el-descriptions-item>
            <el-descriptions-item label="支付方式"  ><dict-tag :options="PayOptions" :value="item.payType"/></el-descriptions-item>
            <el-descriptions-item label="订单类型"  ><dict-tag :options="orderOptions" :value="item.status"/></el-descriptions-item>
            <el-descriptions-item label="药品类型"  ><dict-tag :options="orderTypeOptions" :value="item.orderType"/></el-descriptions-item>
            <el-descriptions-item label="医生名称"  ><span v-if="item!=null">{{item.doctorName}}</span></el-descriptions-item>
            <el-descriptions-item label="患者姓名"  > <span v-if="item!=null">{{item.patientName}}</span></el-descriptions-item>
            <el-descriptions-item label="患者年龄"  ><span v-if="item!=null">{{item.patientAge}}</span></el-descriptions-item>
            <el-descriptions-item label="患者性别"  >  <dict-tag :options="sexOptions" :value="item.patientGender"/>  </el-descriptions-item>
            <el-descriptions-item label="诊断"  ><span v-if="item!=null">{{item.diagnose}}</span> </el-descriptions-item>
            <el-descriptions-item label="收货人" >  <span v-if="item!=null">{{item.userName}}</span>  </el-descriptions-item>
            <el-descriptions-item label="收货人电话" > <span v-if="item!=null">{{item.userPhone}}</span></el-descriptions-item>
            <el-descriptions-item label="详细地址" > <span>{{item.userAddress}}</span> </el-descriptions-item>
            <el-descriptions-item label="快递公司编号" > <span v-if="item!=null">{{item.deliveryCode}}</span></el-descriptions-item>
            <el-descriptions-item label="快递名称" ><span v-if="item!=null">{{item.deliveryName}}</span></el-descriptions-item>
            <el-descriptions-item label="快递单号" ><span v-if="item!=null">{{item.deliverySn}}</span></el-descriptions-item>
            <el-descriptions-item label="物流状态" ><dict-tag :options="deliveryStatusOptions" :value="item.deliveryStatus"/></el-descriptions-item>
            <el-descriptions-item label="物流跟踪状态" ><span v-if="item!=null"><dict-tag :options="deliveryTypeOptions" :value="item.deliveryType"/> </span></el-descriptions-item>

            <el-descriptions-item label="用户备注" ><span v-if="item!=null">{{item.remark}}</span></el-descriptions-item>
      </el-descriptions>
    </el-card>
 </div>
 <div class="contentx" v-if="item!=null" style="padding-bottom: 70px;">
  <div class="desct">
      商品信息
     </div>
     <el-tooltip class="item" effect="dark" :content="showList ? '显示全部' : '隐藏'" placement="top" style="float: right;">
       <el-button size="mini" circle icon="el-icon-search" @click="showListD()" />
     </el-tooltip>
  <el-table border v-if="products!=null" :data="products" size="small" style="width: 100%;margin-top: 20px" >
         <el-table-column label="商品图片" width="150" align="center">
           <template slot-scope="scope">
             <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
           </template>
         </el-table-column>
         <el-table-column label="商品编码" width="300" align="center">
           <template slot-scope="scope">
             <p>{{JSON.parse(scope.row.jsonInfo).barCode}}</p>
           </template>
         </el-table-column>
         <el-table-column label="商品名称" width="300" align="center">
           <template slot-scope="scope">
             <p>{{JSON.parse(scope.row.jsonInfo).productName}}</p>
           </template>
         </el-table-column>
         <el-table-column label="单价" width="240" align="center">
           <template slot-scope="scope">
             <p>￥{{JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}</p>
           </template>
         </el-table-column>
         <el-table-column label="规格" width="240" align="center">
           <template slot-scope="scope">
             {{JSON.parse(scope.row.jsonInfo).sku}}
           </template>
         </el-table-column>
         <el-table-column label="数量" width="180" align="center">
           <template slot-scope="scope">
             {{scope.row.num}}
           </template>
         </el-table-column>
         <el-table-column label="处方药" width="240" align="center">
           <template slot-scope="scope">
             {{scope.row.isPrescribe!=null&&scope.row.isPrescribe==1?'是':'否'}}
           </template>
         </el-table-column>
         <el-table-column label="小计"  align="center">
           <template slot-scope="scope" >
             ￥{{(scope.row.num*JSON.parse(scope.row.jsonInfo).price).toFixed(2)}}
           </template>
         </el-table-column>
       </el-table>
       <div style="float: right;margin: 20px" v-if="item.totalPrice!=null">
         合计：<span class="color-danger">￥{{item.totalPrice.toFixed(2)}}</span>
       </div>
       <div style="float: right;margin: 20px" v-if="item.orderType==2">
         剂数：<span class="color-danger">{{counts}}</span>
       </div>
  </div>
   <div class="contentx" v-if="item!=null">
  <div class="desct">
    费用信息
  </div>
 <el-descriptions   :column="3" border  >
           <el-descriptions-item label="商品合计"  ><span v-if="item.totalPrice!=null">￥{{item.totalPrice.toFixed(2)}} </span></el-descriptions-item>
           <el-descriptions-item label="处方应付金额"  ><span v-if="item.payPrice!=null"> ￥{{item.payPrice.toFixed(2)}}</span></el-descriptions-item>
          <el-descriptions-item label="运费" ><span v-if="item.payDelivery!=null">￥{{item.payDelivery.toFixed(2)}}</span></el-descriptions-item>
          <el-descriptions-item label="优惠劵" ><span v-if="item.discountMoney!=null">￥{{item.discountMoney.toFixed(2)}}</span></el-descriptions-item>
           <el-descriptions-item label="实付金额"  ><span v-if="item.payMoney!=null">￥{{item.payMoney.toFixed(2)}}</span></el-descriptions-item>
           <el-descriptions-item label="代收金额" ><span v-if="item.payRemain!=null">￥{{item.payRemain.toFixed(2)}}</span></el-descriptions-item>
</el-descriptions>
   </div>
       <!-- <div class="contentx" v-if="item!=null">
        <div class="desct">
          支付信息
        </div>
      <el-table
        border
        :data="pay"
        size="small"
        style="width: 100%;margin-top: 20px" >
          <el-table-column label="支付单号" align="center" prop="payCode" width="120px" />
          <el-table-column label="支付金额" align="center" prop="payMoney" />
          <el-table-column label="类型" align="center" prop="payTypeCode" />
          <el-table-column label="交易单号" align="center" prop="bankTransactionId" />
          <el-table-column label="银行流水号" align="center" prop="bankSerialNo" />
          <el-table-column label="创建时间" align="center" prop="createTime" />
          <el-table-column label="支付时间" align="center" prop="payTime" />
      </el-table>
             </div>


       <div class="contentx" v-if="item!=null">
     <div class="desct">
       操作信息
     </div>
   <el-table style="margin-top: 20px;width: 100%"
                 ref="orderHistoryTable"
                 :data="logs" border>
         <el-table-column label="操作时间"  width="160" align="center">
           <template slot-scope="scope">
             {{scope.row.changeTime}}
           </template>
         </el-table-column>
         <el-table-column label="备注" align="center">
           <template slot-scope="scope">
             {{scope.row.changeMessage}}
           </template>
         </el-table-column>
       </el-table>
     </div> -->

               <el-dialog :title="expressDialog.title" :visible.sync="expressDialog.open" width="600px" append-to-body>
                 
                 <el-table style="margin-top: 20px;width: 100%"
                           ref="orderHistoryTable"
                           :data="traces" border>
                   <el-table-column label="操作时间"  width="160" align="center">
                     <template slot-scope="scope">
                       {{scope.row.AcceptTime}}
                     </template>
                   </el-table-column>
                    <el-table-column label="位置" align="center">
                     <template slot-scope="scope">
                       {{scope.row.Location}}
                     </template>
                   </el-table-column>
                   <el-table-column label="描述" align="center">
                     <template slot-scope="scope">
                       {{scope.row.AcceptStation}}
                     </template>
                   </el-table-column>
                 </el-table>
               </el-dialog>
</div>
</template>

<script>
import { getStoreOrderById } from "@/api/storeOrder";
  export default {
      name: "orderDe",
      props:["data"],
      data() {
        return {
          expressDialog:{
            title:"物流信息",
            open:false,
          },
          editDy:{
            title:"修改物流单号",
            open:false,
          },
          editDyForm:{
            orderId:null,
            deliveryId:null,
          },
          showList:true,
          
          
          show:{
            title:"问诊详情",
            open:false,
          },
          pack:{
            title:"套餐包",
            open:false,
          },
          counts:null,
          money:null,
          moneyVisible:false,
          rules:{},
          sendVisible:false,
          logs:[],
          pay:[],
          nickName:null,
          storeName:null,
          PayOptions:[],
          orderOptions:[],
          payStatusOptions:[],
          express:null,
          traces:[],
          sexOptions:[],
          refundOptions:[],
          channelOptions:[],
          tuiOptions:[],
          storeOPtions:[],
          deliveryStatusOptions:[],
          deliveryPayStatusOptions:[],
          deliveryTypeOptions:[],
          orderTypeOptions:[],
          item:null,
          erpOrder:null,
          prod:null,
          products:[],
          editForm:{
            orderId:null,
            status:null,
            userAddress:null,
            remark:"",
          },
          mrules:{

          },
          form: {
            deliveryCode: null,
            deliveryName:null,
            deliverySn:null,
            orderId:null,
          }
        }
      },

      created() {

        this.getDicts("sys_store_pay_type").then(response => {
            this.PayOptions = response.data;
          });
        this.getDicts("sys_order_status").then(response => {
            this.orderOptions = response.data;
          });
        this.getDicts("sys_order_pay").then(response => {
            this.payStatusOptions = response.data;
          });
        this.getDicts("sys_store_order_type").then(response => {
            this.orderTypeOptions = response.data;
          });

        this.getDicts("sys_refund_status").then(response => {
            this.refundOptions = response.data;
          });
        this.getDicts("sys_channel").then(response => {
            this.channelOptions = response.data;
          });
        this.getDicts("sys_tui_money_status").then(response => {
              this.tuiOptions = response.data;
          });
      
        this.getDicts("sys_patient_sex").then(response => {
           this.sexOptions = response.data;
         });
         this.getDicts("sys_store_delivery_pay_status").then(response => {
               this.deliveryPayStatusOptions = response.data;
             });
         this.getDicts("sys_store_order_delivery_status").then(response => {
               this.deliveryStatusOptions = response.data;
             });
          this.getDicts("sys_delivery_type").then(response => {
                this.deliveryTypeOptions = response.data;
              });

      },
      methods: {
        getDetails(orderId) {
            this.item=null;
            var data={
              orderId:orderId
            }
            getStoreOrderById(data).then(response => {
                this.item = response.order;
                this.products = response.items;
                // this.getlogList(orderId);
                // this.getPayment(orderId);
                // if(this.item.orderType==2){
                //   this.getCount(this.item.prescribeId);
                // }
            });
        },
        getCount(id){
          getPrescribe(id).then(response => {
              this.counts =  JSON.parse(response.data.usageJson).counts
          });
        },
        getlogList(orderId){
          logList(orderId).then(response => {
              this.logs = response.rows;
          });
        },
        getPayment(orderId){
          payment(orderId).then(response => {
              console.log(response)
              this.pay = response.data;
          });
        }
      }
    }
  </script>
  <style>

    .content{
        height: 100%;
        background-color: #fff;
        padding: 0px 20px;

    }
  </style>
  <style>

    .contentx{
        height: 100%;
        background-color: #fff;
        padding: 0px 20px 20px;


        margin: 20px;
    }
    .el-descriptions-item__label.is-bordered-label{
      font-weight: normal;
    }
    .el-descriptions-item__content {
      max-width: 150px;
      min-width: 100px;
    }
    .desct{
        padding-top: 20px;
        padding-bottom: 20px;
        color: #524b4a;
        font-weight: bold;
      }
  </style>

  <style scoped>
  .order-content{
    margin: 10px;

  }

  .operate-container {
    background: #F2F6FC;
    height: 60px;
    margin: -20px -20px 0;
    line-height: 60px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }
  </style>
