<template>
  <div class="mod-config">    
    <!-- 订单详细更新 -->
    <div class="orderType">
      <span v-if="orderDetails.orderStatus == 0" class="item hightLight0">待付款</span>
      <span v-if="orderDetails.orderStatus == 1" class="item hightLight1">待发货</span>
      <span v-if="orderDetails.orderStatus == 2" class="item hightLight2">已发货</span>
      <span v-if="orderDetails.orderStatus == 3" class="item hightLight3">已完成</span> 
    </div>
    <div>
      <ul class="list">
        <div class="liName">用户信息</div>
        <li><span class="infoTitle">用户名：</span><span>{{orderDetails.userInfo.userName !== null ? orderDetails.userInfo.userName : '暂无'}}</span></li>
        <!-- <li><span class="infoTitle">用户ID：</span><span>{{orderDetails.userId}}</span></li> -->
        <li><span class="infoTitle">联系电话：</span><span>{{orderDetails.userInfo.userPhone}}</span></li> 
        <li style="clear:both"></li>           
        <!-- <li><span class="infoTitle">电 话：</span><span>187898544875</span></li> -->
        <!-- <li><span class="infoTitle">地 址：</span><span>天津市天津市天津市天津市天津市天津市</span></li> -->
        <li class="line"></li>
        <div class="liName">订单信息</div>
        <li><span class="infoTitle">订单ID：</span><span>{{orderDetails.orderSn}}</span></li>
        <li><span class="infoTitle">订单状态：</span>
          <span v-if="orderDetails.orderStatus == 0" class="hightLight">待付款</span>
         <span v-if="orderDetails.orderStatus == 1" class="hightLight">待发货</span>
          <span v-if="orderDetails.orderStatus == 2" class="hightLight">已发货</span>
          <span v-if="orderDetails.orderStatus == 3" class="hightLight">已完成</span>          
          <!-- <el-button v-if="orderDetails.orderStatus == 1" @click="godeliver" class="text_button" size="mini" type="text">去发货</el-button>           -->
        </li>
        <!-- <li><span class="infoTitle">商品总数：</span><span>{{orderDetails.}}</span></li> -->
        <li><span class="infoTitle">订单金额：</span><span>￥{{orderDetails.orderPrice}}</span></li>
        <li><span class="infoTitle">交付邮费：</span><span>￥{{orderDetails.shippingPrice}}</span></li>
        
        <li v-if="orderDetails.orderStatus > 0"><span class="infoTitle" >实际支付金额：</span><span>￥{{orderDetails.realPrice}}</span></li>
        <li><span class="infoTitle">创建时间：</span><span>{{orderDetails.createTime}}</span></li>
        <li><span class="infoTitle" v-if="orderDetails.orderStatus > 0">支付时间：</span><span>{{orderDetails.paymentDate}}</span></li>
        <li style="width: 100%;" v-if="orderDetails.orderStatus > 0"><span class="infoTitle">支付方式：</span>
          <span v-if="orderDetails.paymentMethod == 2"><icon-svg name="zhifubao"></icon-svg> <span>支付宝支付</span></span>
          <span v-if="orderDetails.paymentMethod == 1"><icon-svg name="weixin"></icon-svg> <span>微信支付</span></span>
          <span v-if="orderDetails.paymentMethod == 4"><img  src="../../../../static/img/oder_chong.png"  width="22px" height="22px"> <span>疯币支付</span></span>
          <span v-if="orderDetails.paymentMethod == 3">
            <!-- <icon-svg name="zhifubao"></icon-svg>  -->
            <span>IOS内购</span>
          </span>
        </li>        
        <li class="line"></li>
        <div style="clear:both"></div>
        <div v-if="orderDetails.orderStatus > 0">
          <div class="liName">优惠信息</div>
          <!-- <li><span class="infoTitle">优惠金额：</span><span>0</span></li>
          <li><span class="infoTitle">会员商品优惠：</span><span>0</span></li> -->
          <li><span class="infoTitle">积分抵扣：</span><span>{{orderDetails.districtPrice}}</span></li>
          <li class="line"></li>
        </div>
        <div style="clear:both"></div>
        <div class="liName">物流信息  <a href="#" @click="changeAddressShow" v-if="orderDetails.orderStatus <= 1"><i class="el-icon-edit"></i>修改收货信息</a></div>
        <li><span class="infoTitle">收货人：</span><span>{{orderDetails.consignee.consigneeName}}</span>&nbsp;&nbsp;&nbsp;<span>{{orderDetails.consignee.consigneeMobile}}</span></li>
        <li><span class="infoTitle">收货地址：</span><span>{{orderDetails.consignee.province}}-{{orderDetails.consignee.city}}-{{orderDetails.consignee.county}}-{{orderDetails.consignee.address}}</span></li> 
       
        <!-- <el-alert title="`该订单下共有 2 条物流信息`" type="info">
        </el-alert> -->
        <li class="flexbox deliverBox" style="width: 100%;"  v-if="sheetList.length > 0">
          <el-row :gutter="20" style="100%">

            <el-col  :md="12" :lg="8" class="item" v-for="(item, index) in sheetList" :key="index">          
            <div class="deliver_heade"> 
              <div><span class="infoTitle">物流公司：</span><span>{{item.expressCompanyName}}</span></div>
              <div><span class="infoTitle">运单号：</span><span style="margin-right:10px">{{item.expressOrderSn}}</span>
                <el-button  type="primary" size="mini" plain @click="seeSheetDetails(item)">查看物流进度</el-button>
              </div> 
              <div></div>            
            </div>
          </el-col>           
             
        </el-row>
        </li>

        <li class="line" style="margin:10px 0;"></li>
        <!-- 订单商品 -->
        <div class="liName">商品信息</div>
        <el-table :data="orderDetails.goodsList"   
      style="width: 100%">
      <el-table-column       
        label="商品名"
        width="280">
        <template slot-scope="scope">
          <div class="flexbox">
            <img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="scope.row.productImage" width="30px" height="30px">
            <div class="proname">{{ scope.row.productName}}</div>
          </div>
        </template>
      </el-table-column>      
      <el-table-column
        prop="productPrice"
        label="价格"
        width="180">
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="数量" width="80">
      </el-table-column>
    </el-table>
      </ul>
    </div>
    <!-- 抽屉 -->
    <el-dialog  
    title="物流详情"
    :visible.sync="tracesShow"   
    @close="drawerHandleClose">    
    <div class="deliver_info"> 
                <div>运单信息：{{currentSheet.expressCompanyName}} - {{currentSheet.expressOrderSn}}</div>               
                <div class="scroll" style="padding: 10px;" v-if="traces.length > 0">
                  <el-timeline :reverse="reverse">
                    <el-timeline-item  v-for="(activity, index2) in traces" :key="index2" :icon="activity.icon"                      
                      :timestamp="activity.acceptTime">
                      {{ activity.acceptStation }}
                    </el-timeline-item>                    
                  </el-timeline>
                </div>
                <div v-else  class="noinfo">-暂无物流信息-</div>
              </div>
  </el-dialog>
    <el-dialog
      title="修改收货信息"
      :visible.sync="changeAddVisible"
      width="500"
      :close="changeAddHandleClose">
      <div>
        <el-form ref="addressFormRef" :model="addressForm" label-width="120px" :rules="addressFormRule">
        <el-form-item label="收货人:" prop="name">
          <el-input v-model="addressForm.name"></el-input>
        </el-form-item>
        <el-form-item label="收货联系电话:" prop="tel">
          <el-input v-model="addressForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="收货地址:">
          <!-- <el-input v-model="addressForm.address"></el-input> -->   
            <!-- 省市区-->
            <!-- 省 -->
            <el-select  v-model="addressForm.provinceCode" placeholder="请选择省份" style="width:200px" @change="provinceChange">
              <el-option
                v-for="item in provinceEntity"
                :key="item.regionCode"
                :label="item.provName"
                :value="item.regionCode">
              </el-option>
            </el-select>
            <el-select v-model="addressForm.cityCode" placeholder="请选择市" @change="cityChange">         
              <el-option
                v-for="item in cityEntity.cityList"
                :key="item.regionCode"
                :label="item.cityName"
                :value="item.regionCode">
              </el-option>
            </el-select>
            <el-select v-model="addressForm.countyCode" placeholder="请选择区" @change="countyChange">
              <el-option
                v-for="item in countyEntity.countyList"
                :key="item.regionCode"
                :label="item.countyName"
                :value="item.regionCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址:" prop="addressXX">
            <el-input type="textarea" v-model="addressForm.addressXX"></el-input>        
          </el-form-item>
        </el-form>         
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeAddHandleClose">取 消</el-button>
        <el-button type="primary" @click="changeAddress">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
    <setDeliverDialog ref="setDeliverDialog" :visible="setDeliverVisible" :selectData="orderList"
      @closeDeliverDialog='closeDeliverDialog'></setDeliverDialog>
  </div>
</template>

<script>
import AddOrUpdate from './buyorderdetail-add-or-update'
import setDeliverDialog from './set-deliver-dialog'
export default {
  data() {
    return {
      orderList:[],
      dataForm: {
        key: ''
      },
      traces:[],      // 物流轨迹
      tracesShow:false, 
      currentSheet:{},

      reverse: true,
      activities: [ ],
      deliverData: [],  // 物流信息
     
      setDeliverVisible: false,
      dataListLoading: false,
      dataListSelections: [],
      // addOrUpdateVisible: false,
      query: {
        orderSn: 0,
        ordertype:null
      },
      changeAddVisible: false,
      orderDetails:{},
      addressForm:{
        provinceCode:null,  //省份串码
        provinceName:null,
        cityCode:null,  //市区串码
        cityName:null,
        countyCode:null, //省份串码
        countyName:null,
        name:'',
        tel:'',
        addressXX:''
      },
      provinceEntity:[], // 城市列表
      cityEntity:[], // 市
      countyEntity:[], // 区
      optionProps: {
        checkStrictly: true,
        value: "regionCode",
        label: "provName",
        children: "children"
      },
      addressFormRule:{
        name: [
            { required: true, message: '请输入收货人信息', trigger: 'blur' }           
          ],
          tel: [
            { required: true, message: '请输入收货联系电话信息', trigger: 'blur' }           
          ],
          county: [
            { required: true, message: '请选择收货地址', trigger: 'blur' }           
          ],
          addressXX: [
            { required: true, message: '请输入详细地址信息', trigger: 'blur' }           
          ],         
      },
      sheetList:[],       // 面单列表
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.query.orderSn = this.$route.query.orderSn;
    this.query.ordertype = this.$route.query.ordertype;
    console.log(this.$route.query.orderSn)
    this.getData()
    // this.getOrderSheetList()
  },
  methods: { 
    drawerHandleClose(){
      console.log('关闭')
      this.traces = []
      this.tracesShow = false
      this.currentSheet = {}
    },
    // 获取某一快递的物流进度
    seeSheetDetails(item){
      console.log('正在查询快递进度',item)
      this.currentSheet = item
      let loading = this.$loading({
                lock: true,
                text: '正在获取物流信息...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            }); 
      var mobileLeng = this.orderDetails.consignee.consigneeMobile.length
      this.$http({
        url: this.$http.adornUrl('/book/buyOrder/queryExpress'),
        method: 'get',
        params: this.$http.adornParams({ 
          'expressOrderSn': item.expressOrderSn, 
          'expressCompanyCode': item.expressCompanyCode,         
          'customerName': this.orderDetails.consignee.consigneeMobile.substring(mobileLeng-4, mobileLeng)
        })
      }).then(({ data }) => {
        if(data.code == 0){
          if(data.result.traces.length > 0){
            this.traces = data.result.traces
            this.tracesShow = true
            console.log(data,'data')
            loading.close()
          }else{
            this.$message('暂无物流信息哦~');
            loading.close()
          }
        }
        
      }).catch(({e}) => {
        console.log(e,'e')
        loading.close()
      })
    },  
    countyChange(e){   
      console.log(e,'countyName')   
      this.countyEntity.countyList.find((val,index,arr)=>{ 
        this.addressForm.countyName = val.countyName        
          return val.regionCode == e
        })
        console.log('this.addressForm.countyName', this.addressForm)
    },  
    cityChange(e){
    //  console.log('修改了市',e)
      this.addressForm.countyCode = null  
      this.countyEntity = this.cityEntity.cityList.find((val,index,arr)=>{    
        this.addressForm.cityName = val.cityName     
          return val.regionCode == e
        })
      console.log(' this.addressForm.cityName',  this.addressForm.cityName)
    },
    provinceChange(e){
      // console.log('修改了省份',e)
      this.addressForm.cityCode = null;
      this.addressForm.countyCode = null   
      this.cityEntity = this.provinceEntity.find((val,index,arr)=>{
          this.addressForm.provinceName = val.provName
          return val.regionCode == e
        })
        console.log('this.addressForm.provinceName',this.addressForm.provinceName)   
    },
    changeAddHandleClose(){
      this.changeAddVisible = false
      this.addressForm.provinceCode = null
      this.addressForm.cityCode = null;
      this.addressForm.countyCode = null
      this.addressForm.provinceName = null
      this.addressForm.cityName = null;
      this.addressForm.countyName = null
      this.provinceEntity = []
      this.cityEntity = []
      this.countyEntity = []
      this.$refs['addressFormRef'].clearValidate()
      this.$nextTick(() => {
        this.addressForm.name = ''
        this.addressForm.tel = ''
        this.addressForm.addressXX = ''
      // this.$refs['addressFormRef'].resetFields();
      })
      // $refs[formName].resetFields()
      console.log('关闭了', this.addressForm)
    },
    changeAddressShow(){
      this.$http({
        url: this.$http.adornUrl('/api/province/getProvince'),
        method: 'post',
        // params: this.$http.adornParams({ 
        //   'orderId': this.query.orderId         
        // })
      }).then(({ data }) => {
        console.log('获取地址三级列表', data)
        if(data.code == 0){
          this.provinceEntity = data.provinceEntity
          this.addressForm.addressXX = this.orderDetails.consignee.address
          this.addressForm.provinceCode = this.orderDetails.consignee.provinceCode
          this.addressForm.cityCode = this.orderDetails.consignee.cityCode
          this.addressForm.countyCode = this.orderDetails.consignee.countyCode
          this.addressForm.provinceName = this.orderDetails.consignee.provinceCode
          this.addressForm.cityName = this.orderDetails.consignee.cityCode
          this.addressForm.countyName = this.orderDetails.consignee.countyCode
          this.addressForm.name = this.orderDetails.consignee.consigneeName
          this.addressForm.tel = this.orderDetails.consignee.consigneeMobile
          console.log(this.provinceEntity,'this.provinceEntity')
          this.cityEntity = this.provinceEntity.find((val,index,arr)=>{
          return val.regionCode == this.addressForm.provinceCode
        })
        this.countyEntity = this.cityEntity.cityList.find((val,index,arr)=>{         
          return val.regionCode == this.addressForm.cityCode
        })
        }
      }).catch( e => {
        console.log(e,'e')
      })      
      this.changeAddVisible = true
      console.log('显示修改收货地址')
    },
    // 修改收货信息
    changeAddress(){      
      this.$refs['addressFormRef'].validate((valid) => {
          if (valid) {            
            console.log('修改收货地址')
            this.$http({
              url: this.$http.adornUrl('/book/buyOrder/modifyConsigneeAddress'),
              method: 'post',
              data: this.$http.adornData({ 
                'orderSn': this.query.orderSn,
               // 'province': this.addressForm.provinceName,
               // 'city':  this.addressForm.cityName,
              //  'county':  this.addressForm.countyName,
                'address':  this.addressForm.addressXX,
                'consigneeName':  this.addressForm.name,
                'consigneeMobile':  this.addressForm.tel,
                "provinceCode": this.addressForm.provinceCode,
                "cityCode": this.addressForm.cityCode,
                "countyCode": this.addressForm.countyCode,
                //'orderId': this.addressForm.orderId   

              })
              }).then(({ data }) => {
                console.log('修改地址返回值', data)
                this.$message.success('修改地址成功！')
                this.changeAddHandleClose()
                this.getData()
                
              }).catch( e => {
                console.log(e,'e')
              })
          } else {           
            return false;
          }
        });
    },
   
    // 获取订单下的快递单
    getOrderSheetList(){
      this.$http({        
        url: this.$http.adornUrl('/express/getPrintTemplateList'),
        method: 'get',
        params: this.$http.adornParams({          
          'expressOrderSn': this.query.orderSn,          
        })
        /// data: {}
      }).then(({ data }) => {
        console.log(data.result,'面单列表')
        if (data && data.code === 0) {
          this.sheetList = data.result.data
          // this.MDtotalPage = data.result.totalDataSize
        } else {
          // this.PrintSheetList = []
          // this.totalPage = 0
        }       
      })
    },    
    // 获取数据列表
    getData() {
      this.dataListLoading = true   
      this.$http({
        // url: this.$http.adornUrl(`/book/buyOrder/appGetOrderInfo/${this.query.ordertype}`),
        url: this.$http.adornUrl(`/book/buyOrder/orderDetail`),
        method: 'get',
        params: this.$http.adornParams({          
          'orderSn': this.query.orderSn,          
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data.result,'data.result')
          this.orderDetails = data.result          
          if(this.orderDetails.goodsList.length > 0){
            console.log('存在商品数据', this.orderDetails.goodsList.length)
            var ids = []
            ids.push(this.orderDetails.goodsList[0].expressInfo.expressOrderSn)
            this.sheetList.push(this.orderDetails.goodsList[0].expressInfo)
            for (let index = 0; index < this.orderDetails.goodsList.length; index++) {
              if (!ids.includes(this.orderDetails.goodsList[index].expressInfo.expressOrderSn)) {
                ids.push(this.orderDetails.goodsList[index].expressInfo.expressOrderSn)
                this.sheetList.push(this.orderDetails.goodsList[index].expressInfo)}
                console.log(this.orderDetails.goodsList[index].expressInfo.expressOrderSn,'expressOrderSn')
            }
            console.log(ids,this.sheetList,'this.sheetList')
          }
          // if(this.query.ordertype != 0){  // 不是待付款订单时
          //   this.getdeliverDetails()   
          // }    
        } else {
          this.orderDetails = {}
          return this.$message.error('商品详情获取失败，请重试')
        }
        this.dataListLoading = false
      })
    }, 
    closeDeliverDialog(val) {
      this.setDeliverVisible = false
      this.getData()
    },
    // 去发货
    godeliver() {
      this.orderList[0] = this.query.orderSn
      this.setDeliverVisible = true
    }
  },
  components: {
    setDeliverDialog
  }
}
</script>

<style lang="less" scoped>
.orderType{
  overflow: hidden; margin-bottom: 20px;
  .item{
    color: #fff;
    display: inline-block;
    padding: 10px;
    border-radius: 0 20px 20px 0;
  }
  .hightLight0{
    background-color: #e6a23c;
  }
  .hightLight1{
    background-color: #409eff;    
  }
  .hightLight2{
    background-color: #f56c6c;
  }
  .hightLight3{
    background-color: #67c23a;
  }
}
.noinfo {
    color: #ddd;
    text-align: center;
    padding: 20px;
} 
.scroll{margin-top: 15px; height: 300px;}
.deliverBox{
  flex-wrap: wrap; justify-content: space-between;
  .item{padding-right: 15px; min-width: 300px;
    .deliver_heade{margin-top: 15px;}
  }
}
.el-timeline{
  li{
    float: none;
  }
}
.flexbox {
  display: flex;
}
.deliver_info{border-radius: 10px;}
.infoTitle {
  display: inline;
}

ul.list {
  overflow: hidden;
  color: #515a6e;

  li {
    list-style: none;
    width: 50%;
    line-height: 26px;
    float: left;
    font-size: 12px;

  }

  .hightLight {
    color: #f56c6c;
  }

  .line {
    width: 100%;
    border-bottom: 1px solid #eee;
    margin: 10px 0;
  }
}

.liName {
  font-size: 12px;
  margin-bottom: 10px;
  font-weight: bold;
}

.text_button {
  padding: 0;
}
.el-icon-truck:before {
    content: "\e740";
}

.el-timeline-item:first-child {   
    .el-timeline-item__node {
        background-color: rgb(11, 189, 135);
    }
    color:  rgb(11, 189, 135) !important;
}

.el-timeline-item {
    width: 100%;
    position: relative;
    padding-bottom: 20px;
}

.el-timeline-item__node--large {
    left: -2px;
    width: 14px;
    height: 14px;
}

.el-timeline-item__node {
    position: absolute;
    background-color: #e4e7ed;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-timeline-item__node--normal {
    left: -1px;
    width: 12px;
    height: 12px;
}

.el-timeline-item__wrapper {
    position: relative;
    padding-left: 28px;
    top: -3px;
}

.el-timeline li {
    list-style: none;
}

.el-timeline-item__tail {
    position: absolute;
    left: 4px;
    height: 100%;
    border-left: 2px solid #e4e7ed;
}

.el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
    display: none;
}

.el-timeline-item__timestamp {
    color: #c3c3c3;
    font-size: 14px;
    ;
}
 /deep/ .el-select-dropdown{width: 200px !important;}
:deep(.el-select-dropdown__list) {
  width: 200px !important;
}
 /deep/ .el-select-dropdown__list{width: 200px !important;}


</style>
