<template>
  <div class="orderDetail">
    <el-card>
      <el-steps :active="orderDetail ? orderDetail.status : 1" align-center>
        <el-step title="买家下单付款"></el-step>
        <el-step title="商家发货"></el-step>
        <el-step title="订单完成"></el-step>
      </el-steps>
    </el-card>
    <el-card style="margin-top: 20px;">
      <div class="orderList">
        <div class="orderItem">
          <div class="orderTitle" style="justify-content: space-between;">
            <div style="display: flex; align-items: center;">
              <img class="icon" src="@/assets/image/order/icon3.png" alt="">
              <span>订单信息</span>
            </div>
            <div>
              <el-button size="mini" type="primary" @click="goShipping(1)">去发货</el-button>
              <el-button size="mini" type="primary" @click="goShipping(2)" >补单发货</el-button>
            </div>
          </div>
          <el-table :data="orderGoodsDetail" style="border: 1px solid #eee;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="订单号" prop="goods_order_sn" align="center"></el-table-column>
            <el-table-column label="商品名称" prop="title" align="center"></el-table-column>
            <el-table-column label="下单时间" prop="created_time" align="center">
              <template slot-scope="scope">
                {{ scope.row.created_time ? formatter(scope.row.created_time) : ''  }}
              </template>
            </el-table-column>
            <el-table-column label="规格/数量/单价" align="center">
              <template slot-scope="scope">
                {{ scope.row.goods_option_title }}<br/>
                {{scope.row.goods_price / 100}} 元<br/>
                x {{scope.row.total }}
              </template>
            </el-table-column>
            <el-table-column label="商品订单状态" align="center">
              <template slot-scope="scope">
                {{ goodsStatusFormatter(scope.row.goods_status) }}
              </template>
            </el-table-column>
            <el-table-column label="快递公司" prop="express_company_name" align="center">
              <template slot-scope="scope">
                {{ scope.row.express_company_name ? scope.row.express_company_name : '—' }}
              </template>
            </el-table-column>
            <el-table-column label="快递单号" prop="express_sn" align="center">
              <template slot-scope="scope">
                {{ scope.row.express_sn ? scope.row.express_sn : '—' }}
              </template>
            </el-table-column>
            <el-table-column label="发货时间" prop="send_time" align="center">
              <template slot-scope="scope">
                {{ scope.row.send_time ? formatter(scope.row.send_time) : '—' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" class-name="small-padding fixed-width" align="center" width="180">
              <template slot-scope="scope">
                <span style="font-size:12px;padding: 0 15px 0 0;" v-if="deliveryTypeText(scope.row.goods_status,scope.row.is_reissue) == '已补单'">已补单</span>
                <el-button size="mini" type="text" v-if="deliveryTypeText(scope.row.goods_status,scope.row.is_reissue) == '去补单'" @click="goShipping(4,scope.row.id)">去补单</el-button>
                <el-button size="mini" type="text" v-if="deliveryTypeText(scope.row.goods_status,scope.row.is_reissue) == '去发货'" @click="goShipping(3,scope.row.id)">去发货</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button size="mini" type="text" @click="getExpressInfoNew(scope.row)">查看物流</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--        <div class="orderItem">-->
<!--          <div class="orderTitle">-->
<!--            <img class="icon" src="@/assets/image/order/icon1.png" alt="">-->
<!--            <span>订单信息</span>-->
<!--          </div>-->
<!--          <div>-->
<!--            <el-row class="row-title">-->
<!--              <el-col :span="3" class="text-r">订单编号</el-col>-->
<!--              <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.parent_order_sn : ''}}</el-col>-->
<!--            </el-row>-->
<!--            <el-row class="row-title">-->
<!--              <el-col :span="3" class="text-r">下单时间</el-col>-->
<!--              <el-col :span="6" class="text-l">{{orderDetail ? formatter(orderDetail.created_time) : ''}}</el-col>-->
<!--            </el-row>-->
<!--            <el-row class="row-title">-->
<!--              <el-col :span="3" class="text-r">商品数量</el-col>-->
<!--              <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.goods_total : ''}}</el-col>-->
<!--            </el-row>-->
<!--            <el-row class="row-title">-->
<!--              <el-col :span="3" class="text-r">商品总价</el-col>-->
<!--              <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.goods_price / 100 : ''}}</el-col>-->
<!--            </el-row>-->
<!--            <el-row class="row-title">-->
<!--              <el-col :span="3" class="text-r">运费</el-col>-->
<!--              <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.dispatch_price / 100 : ''}}</el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--        </div>-->
        <div class="orderItem">
          <div class="orderTitle" style="justify-content: space-between; width: 75%;">
            <div style="display: flex; align-items: center;">
              <img class="icon" src="@/assets/image/order/icon2.png" alt="">
              <span>买家信息</span>
            </div>
            <el-button size="mini" type="primary" @click="modifyinfo" :disabled="orderDetail.isEditBuyerInfo">修改买家信息</el-button>
          </div>
          <div>
            <el-row class="row-title">
              <el-col :span="4" class="text-r">收货人姓名</el-col>
              <el-col :span="4" class="text-r">联系电话</el-col>
              <el-col :span="10" class="text-r">收货地址</el-col>

            </el-row>
            <el-row class="row-title">
              <el-col :span="4" class="text-l">{{ orderDetail ? orderDetail.real_name : ''}}</el-col>
              <el-col :span="4" class="text-l">{{ orderDetail ? orderDetail.mobile : ''}}</el-col>
              <el-col :span="10" class="text-l">{{orderDetail ? orderDetail.provice + orderDetail.city + orderDetail.district + orderDetail.street + orderDetail.address : ''}}</el-col>
            </el-row>
          </div>
        </div>

        <!-- <div class="orderItem">
          <div class="orderTitle">
            <img class="icon" src="@/assets/image/order/icon4.png" alt="">
            <span>操作历史</span>
          </div>
          <el-table :data="[]" style="border: 1px solid #eee; width: 75%;">
            <el-table-column label="操作时间" prop="order_sn" width="300"/>
            <el-table-column label="操作人" prop="order_sn" width="300"/>
            <el-table-column label="操作内容" prop="order_sn"/>
          </el-table>
        </div> -->
        <div class="orderItem">
          <div class="orderTitle">
            <div style="display: flex; align-items: center;  width: 70%;">
              <img class="icon" src="@/assets/image/order/icon5.png" alt="">
              <span>订单备注</span>
            </div>
            <el-button size="mini" type="primary" @click="addRemark">添加备注</el-button>
          </div>
          <div style="width: 75%; min-height: 100px; border: 1px solid #eee; padding: 10px;">

<!--            <el-timeline-item-->
<!--              v-for="(remarkItem, index) in orderDetail.remark"-->
<!--              :key="index"-->
<!--              color="#0bbd87"-->
<!--              :timestamp="formatter(remarkItem.date_time)">-->
<!--              {{remarkItem.content}}-->
<!--            </el-timeline-item>-->
<!--            </el-timeline>-->
<!--            <div ">暂无留言备注</div>-->

            <p v-if="orderDetail.remark.length == 0" style="color:#999;">暂无备注</p>
            <div v-for="(remarkItem, index) in orderDetail.remark" :key="index" class="remark-con">
              <span class="remark-time">{{ formatter(remarkItem.date_time) }}</span>
              <span class="remark-text">{{ remarkItem.content }}</span>
            </div>

          </div>
        </div>
      </div>
    </el-card>
    <!-- 修改买家信息 -->
    <el-dialog
      title="修改买家信息"
      :visible.sync="modifyinfoDialog"
      width="30%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      center
      >
      <div style="margin: 0 20px;">
        <el-form ref="addressForm" :model="addressForm" label-width="100px">
          <el-form-item label="收货人姓名：">
            <el-input size="mini" v-model="addressForm.shipping_name" placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input size="mini" v-model="addressForm.tel" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="收货地址：">
            <el-cascader :class="{ 'only-eidt-placeholder' : onlyEidtPlaceholder }" v-model="addressForm.areaList" :props='props' @change="handleChanges" ref="ssqCascader" :placeholder="addOrEditPlaceholder" style="width:100%"></el-cascader>
          </el-form-item>
          <el-form-item label="街道：">
            <el-input size="mini" v-model="addressForm.street" placeholder="请输入街道"></el-input>
          </el-form-item>
          <el-form-item label="详细地址：">
            <el-input size="mini" v-model="addressForm.address" placeholder="请输入详细地址"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="modifyinfoDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleModifyInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 发货 -->
    <el-dialog
      :title="titleInfo"
      :visible.sync="goShippingDialog"
      width="25%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      >
      <div style="margin: 0 10%">
        <el-form ref="form" label-width="100px">
          <el-form-item label="快递公司：">
            <el-select size="mini" v-model="expressNum" filterable placeholder="请选择快递公司" style="width: 100%;">
              <el-option
                v-for="item in expressLists"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号：">
            <el-input size="mini" v-model="express_sn" placeholder="请输入快递单号"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="goShippingDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleGoShipping">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加订单备注"
      :visible.sync="addRemarkDialog"
      width="25%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      >
      <div style="padding: 20px 10% 1px; background: #F7F8FA;">
        <el-form ref="form" label-width="100px">
          <el-form-item label="添加备注：">
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入订单备注"
              v-model="remark">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addRemarkDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="getRemarkOrder">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看物流 -->
    <el-dialog  title="物流信息" width="50%" class="cutclass" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="dialogCheck" append-to-body>
      <div class="logistics">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            color="#0bbd87"
            :size="activity.size"
            :timestamp="activity.msg_time">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
        <div v-if="activities.length == 0">暂无物流信息</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {orderInfo, sendOrder, expressInfoNew, remarkOrder, orderInfoEdit,deliveryOrder, deliveryOrderAgain, toReissueOrderData} from '@/api/module/order'
import {dateFormat} from '@/utils'
import {getAreaList} from '@/api/module/retreat/address'
export default {
  props: {
    // 订单信息
    orderDetail: {
      type: Object
    },
    // 商品订单 信息
    orderGoodsDetail: {
      type: Array,
    },
    expressLists: {
      type: Array
    }
  },
  data() {
    return {
      expressNum: '',
      express_sn: '',
      remark: '',
      modifyinfoDialog: false,
      goShippingDialog: false,
      addRemarkDialog: false,
      dialogCheck: false,
      titleInfo: '',
      addressForm: {
        shipping_name: '',
        tel: '',
        address: '',
        street: '',
        areaList: [] // 省市区
      },
      activities: [],
      multipleSelection: [],
      props: {
        expandTrigger: 'click',
        lazy: true,
        lazyLoad: this.lazyLoad,
        value: "id",
        label: 'name',
        leaf: 'leaf'
      },
      addOrEditPlaceholder: '',
      onlyEidtPlaceholder: false,
      goShippingNum: 0, // 发货类型
      goods_ids: null, // 发货的商品订单 id
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /** 商品 发货状态 */
    goodsStatusFormatter(status) {
      let res = '—';
      if (status == 0) {
        res = '未发货'
      }else if (status == 1) {
        res = '已发货'
      }else if (status == 2) {
        res = '已收货'
      }else if (status == 3) {
        res = '配货中'
      }else if (status == 4) {
        res = '拒收'
      }
      return res
    },
    /**
     * 商品订单 操作类型
     * gs:goods_status    ir:is_reissue
     * 返回值有三种情况：去发货，补单，已补单（不可点击）
     * */
    deliveryTypeText(gs,ir) {
      return gs == 0 ? '去发货' : ir == 0 ? '去补单' : '已补单'
    },
    /**
     * 时间戳转换为日期格式
     * 项目中，后台一般均返回10位数的时间戳，在公用的封装方法dateFormat中，第一个入参，需要*1000 ，具体参考 new Date(时间戳) 方法
     *  */
    formatter(time) {
      return dateFormat(time * 1000, 'Y-m-d H:i:s')
    },
    /**
     * 发货
     * val 发货类型：1-商品的批量发货；2-批量补单发货；3-单商品发货；4-单格个商品订单 补单发货
     * */
    // 发货，补单，补单发货
    goShipping(val, id) {
      //console.log(361,this.multipleSelection);
      this.goShippingNum = val
      this.goods_ids = []
      this.expressNum = ''
      this.express_sn = ''
      let isContinue = true;

      // 批量发货
      if(this.goShippingNum === 1) {
        if (this.multipleSelection.length === 0) {
          this.$message({type: 'warning',message: '请先选择需要发货的商品'});
          return
        }
        for(let i = 0; i < this.multipleSelection.length; i++) {
          // 批量发货 goods_status 0:未发货,1:已发货,2:已收货,3:配货中,4：拒收
          if (this.multipleSelection[i].goods_status > 0) {
            this.$message({type: 'warning',message: '所选商品中部分已发货，请重新选择'});
            isContinue = false
            break;
          }else {
            let idNum = Number(this.multipleSelection[i].id);
            this.goods_ids.push(idNum);
          }
        }

        if(!isContinue) {
          // 批量发货时候，goods_ids 为数组 [3,4,5]
          this.goods_ids = []
          return;
        }

        this.titleInfo = '去发货'
        this.goShippingDialog = true
      }

      // 批量补单
      if(this.goShippingNum === 2) {
        if (this.multipleSelection.length === 0) {
          this.$message({type: 'warning',message: '请先选择需要补单发货的商品'});
          return
        }

        for(let i = 0; i < this.multipleSelection.length; i++) {
          // 批量补单 is_reissue 1-已补发；2-未补发

          // 首先，先发货了，才能补单
          if( this.multipleSelection[i].goods_status > 0 ) {
            if (this.multipleSelection[i].is_reissue) {
              this.$message({type: 'warning',message: '所选商品中部分已补单，请重新选择'});
              isContinue = false;
              break;
            }else {
              let idObj = {id: Number(this.multipleSelection[i].id)};
              this.goods_ids.push(idObj);
            }
          }else {
            isContinue = false;
            this.$message({type:'warning',message:'所选商品中部分未发货，不能进行补单操作，请重新选择'});
            break
          }
        }

        if(!isContinue) {
          this.goods_ids = []
          return;
        }

        this.titleInfo = '补单发货'
        this.goShippingDialog = true
      }

      // 单商品订单 发货
      if(this.goShippingNum === 3) {
        this.goods_ids = id;
        this.titleInfo = '去发货'
        this.goShippingDialog = true
      }

      // 单格个商品订单 补单发货
      if (this.goShippingNum === 4) {
        this.goods_ids = id;
        this.titleInfo = '去补单'
        this.goShippingDialog = true
      }
      //console.log(5555555,this.goods_ids);
    },
    /** ReissueOrder*/
    /** 批量发货，批量补单发货，单个发货，单个补单发货 */
    handleGoShipping() {
      if (!this.expressNum) {
        this.$message({
          type: 'warning',
          message: '请选择快递公司'
        })
        return
      }
      if (!this.express_sn) {
        this.$message({
          type: 'warning',
          message: '请输入快递单号'
        })
        return
      }

      // 物流公司，名称
      let expressName = ''
      this.expressLists.map((item) => {
        if (item.value == this.expressNum) {
          expressName = item.label
        }
      })

      // 批量 去发货
      if( this.goShippingNum === 1) {
        let paramsObj = {
          order_goods_ids: this.goods_ids,
          express_company_name: expressName, // 快递公司 名称
          express_sn: this.express_sn,    // 快递单号
          //express_code: ''
        }

        deliveryOrder(paramsObj).then(res=> {
          if(res.code == 1) {
            this.$message({type:'success',message:'发货成功'});
            this.goShippingDialog = false
            this.handleInfo()
          }else {
            this.$message({type:'error',message: res.message ? res.message : '发货失败'});
          }
        });
      }

      // 批量 补单发货
      if (this.goShippingNum === 2 ) {
        debugger
        let listObj = { list: [] }
        this.goods_ids.forEach((item,index)=> {
          item['express_name'] = expressName;
          item['express_sn'] = this.express_sn;
          item['express_code'] = this.expressNum;
        })
        listObj.list = this.goods_ids;

        //console.log("批量补单发货",listObj);

        deliveryOrderAgain(listObj).then(res=> {
          if(res.code == 1) {
            this.$message({type:'success',message:'补单发货成功'});
            this.goShippingDialog = false
            this.handleInfo()
          }else {
            this.$message({type:'error',message: res.message ? res.message : '补单发货失败'});
          }
        });
      }

      // 单商品订单 发货
      if(this.goShippingNum === 3) {
        let paramsObj = {
          order_goods_ids: [],//this.goods_ids,
          express_company_name: expressName, // 快递公司 名称
          express_sn: this.express_sn,    // 快递单号
          //express_code: ''
        }
        paramsObj.order_goods_ids.push(this.goods_ids);
        //console.log(11111,paramsObj);

        deliveryOrder(paramsObj).then(res=> {
          if(res.code == 1) {
            this.$message({type:'success',message:'发货成功'});
            this.goShippingDialog = false
            this.handleInfo()
          }else {
            this.$message({type:'error',message: res.message ? res.message : '发货失败'});
          }
        });
      }

      // 单个商品订单 补单发货
      if(this.goShippingNum === 4) {
        let singleOrderObj = { list: []};
        let orderObj = {
          id: 0,
          express_name: '',
          express_sn: '',
          express_code: '',
        }

        orderObj.id = this.goods_ids;
        orderObj.express_name = expressName;
        orderObj.express_code = this.expressNum;
        orderObj.express_sn = this.express_sn;

        singleOrderObj.list.push(orderObj);
        deliveryOrderAgain(singleOrderObj).then(res=> {
          if(res.code == 1) {
            this.$message({type:'success',message:'补单发货成功'});
            this.goShippingDialog = false
            this.handleInfo()
          }else {
            this.$message({type:'error',message: res.message ? res.message : '补单发货失败'});
          }
        });
      }

      // sendOrder(params).then(res => {})
    },
    // 订单详情
    handleInfo() {
      this.detailDialog = true
      let id = this.orderDetail.id
      this.$emit('updateOrder',id);
    },
    // 选中的表格
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /** 修改 买家信息 */
    modifyinfo() {
      this.addressForm = {
        shipping_name: '',
        tel: '',
        address: '',
        street: '',
        areaList: []
      }

      this.$nextTick(()=> {
        this.$refs.ssqCascader.$refs.panel.activePath = []
      });

      if(this.orderDetail.real_name) {
        this.addressForm.shipping_name = this.orderDetail.real_name;
      }
      if(this.orderDetail.mobile) {
        this.addressForm.tel = this.orderDetail.mobile;
      }

      // 因为 后台返回的省市区 每个字段都是 汉字，所以这样处理，通过 placeholder 去回显 后台返回的数据，
      if(this.orderDetail.provice && this.orderDetail.city && this.orderDetail.district) {
        //console.log(66,this.addressForm.areaList);
        this.addOrEditPlaceholder = this.orderDetail.provice + '/' + this.orderDetail.city + '/' + this.orderDetail.district;
        this.onlyEidtPlaceholder = true;
        this.addressForm.areaList[0] = this.orderDetail.provice
        this.addressForm.areaList[1] = this.orderDetail.city
        this.addressForm.areaList[2] = this.orderDetail.district
      }else {
        this.onlyEidtPlaceholder = false;
        this.addOrEditPlaceholder = "请选择具体的省市区"
        this.addressForm.areaList = []
      }

      if(this.orderDetail.street) {
        this.addressForm.street = this.orderDetail.street;
      }
      if(this.orderDetail.address) {
        this.addressForm.address = this.orderDetail.address;
      }

      this.modifyinfoDialog = true
    },
    /**  保存 买家信息 */
    handleModifyInfo() {
      // console.log(555,this.addressForm.areaList);
      // let ssqLabelList = this.$refs['ssqCascader'].getCheckedNodes()[0].pathLabels;
      // console.log(444,ssqLabelList)

      if (!this.addressForm.shipping_name) {
        this.$message({
          type: 'warning',
          message: '请输入收货人姓名'
        })
        return
      }
      if (!this.addressForm.tel) {
        this.$message({
          type: 'warning',
          message: '请输入联系电话'
        })
        return
      }
      // 手机号码格式校验
      const reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.addressForm.tel)) {
        this.$message({
          type: 'warning',
          message: '手机号码格式有误'
        })
        return
      }
      if (!this.addressForm.areaList) {
        this.$message({
          type: 'warning',
          message: '请选择省市区'
        })
        return
      }
      if (!this.addressForm.street) {
        this.$message({
          type: 'warning',
          message: '请输入街道'
        })
        return
      }
      if (!this.addressForm.address) {
        this.$message({
          type: 'warning',
          message: '请输入收货地址'
        })
        return
      }

      // 省市区 转化
      let ssqLabelList = [];
      if(!this.onlyEidtPlaceholder) {
        ssqLabelList = this.$refs['ssqCascader'].getCheckedNodes()[0].pathLabels;
      }else {
        ssqLabelList = this.addressForm.areaList;
      }

      let params = {
        order_sn	: this.orderDetail.order_sn,
        shipping_name: this.addressForm.shipping_name,
        province_name: ssqLabelList[0] ? ssqLabelList[0] : '',
        city_name: ssqLabelList[1] ? ssqLabelList[1] : '',
        district_name: ssqLabelList[2] ? ssqLabelList[2] : '',
        street_name: this.addressForm.street,
        address: this.addressForm.address,
        tel: this.addressForm.tel,
      }

      orderInfoEdit(params).then(res => {
        if (res.code == 1) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.modifyinfoDialog = false
          this.handleInfo()
        }else {
          this.$message({type:'error',message:res.message ? res.message : '修改失败'});
        }
      })
    },
    /** 查看 商品订单  物流信息 */
    getExpressInfoNew(row) {
      // 如果 商品订单没有发货，则不用请求了
      if(row.goods_status == 0) {
        this.$message({type:'warning',message:'您还未发货，暂无物流信息'});
        return
      }

      this.dialogCheck = true
      let params = {
        goods_order_sn: row.goods_order_sn,
        sku_id: row.goods_option_id
      }
      expressInfoNew(params).then(res => {
        if (res.code == 1 && res.data) {
          this.activities = res.data.order_track ? res.data.order_track : [];
        }
      })
    },
    /** 添加备注 */
    addRemark() {
      this.remark = ''
      this.addRemarkDialog = true
    },
    /** 订单备注 */
    getRemarkOrder() {
      if (!this.remark) {
        this.$message({
          type: 'warning',
          message: '请输入订单备注'
        })
        return
      }

      let params = {
        order_sn: this.orderDetail.order_sn,
        remark: this.remark
      }
      remarkOrder(params).then(res => {
        if (res.code == 1) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.addRemarkDialog = false
          this.handleInfo()
        }
      })
    },
    // 三级联动
    lazyLoad(node, resolve) {
      this.getArea(node, resolve);
    },
    getArea(node, resolve) {
      const level = node.level;
      let limboNode = {};
      if(level === 0) {
        limboNode = {pid: 0}
      }
      if(level === 1) {
        limboNode = { pid: node.value };
      }
      if(level === 2) {
        limboNode = { pid: node.value };
      }

      getAreaList(limboNode).then(res => {
        let result = {};
        if (level === 0) {
          result = res.data
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name;
            item.children=[];
            item.leaf = 0;  // 可以控制 是否有下级   值为true都不行，必须等于0
          })
        }

        if (level === 1) {
          result = res.data
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name
            item.children=[];
            //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
            item.leaf = 0
          })
        }

        if (level === 2) {
          result = res.data
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name
            item.leaf = 1;
          })
        }
        resolve(result)
      })
    },
    handleChanges(value) {
      this.addressForm.areaList = value;
      this.onlyEidtPlaceholder = false // 说明操作下拉进行完整的选择值操作了，即 this.addressForm.areaList 是数组，元素为id
    },
  }
}
</script>

<style scoped>
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eee;
    text-align: center;
  }
  /deep/.el-step__head.is-success {
    color: #3AA0FF;
    border-color: #3AA0FF;
  }
  /deep/.el-step__title.is-success {
    color: #3AA0FF;
  }
  /deep/.el-col {
    border: 1px solid #eee;
    padding: 0 10px;
    height: 38px;
    display: flex;
    align-items: center;
  }
  /deep/.el-dialog__body {
    padding: 20px;
  }
  /deep/.el-input--medium .el-input__inner {
    height: 28px;
  }
  /*/deep/input::-webkit-input-placeholder{*/
  /*  color:#606266;*/
  /*}*/
  /*/deep/input::-moz-placeholder{*/
  /*  color:#606266;*/
  /*  opacity: 1*/
  /*}*/

  .orderDetail {
    height: 660px;
    overflow-y: auto;

  }
  .text-r {
    justify-content: center;
    background: #F7F8FA;
    align-items: center;
  }
  .text-l {
    justify-content: center;
    align-items: center;
  }
  .orderItem {
    margin-bottom: 20px;
  }
  .orderTitle {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  .icon {
    height: 20px;
    margin-right: 10px;
  }
  .row-title {
    font-size: 14px;
    color: #333;
  }
  .dialog-footer {
    margin: 0 10%;
  }
  .logistics {
    height: 600px;
    overflow-y: auto;
    padding: 10px;
  }

  /*  留言框样式 */
  .remark-con {
    line-height:28px;
    color: #333;
    box-shadow :0 2px 10px 0 rgba(0,0,0,0.05);
    margin: 10px;
    padding: 10px;
  }
  .remark-con > p {
    margin: 0;
    padding: 10px;
  }
  .remark-con .remark-time {
    padding: 0 20px;
  }
  .remark-con .remark-text {

  }
  /deep/.only-eidt-placeholder .el-input input::-webkit-input-placeholder, /deep/.only-eidt-placeholder .el-input textarea::-webkit-input-placeholder{
    color: #666;
  }
  /deep/.only-eidt-placeholder .el-input input:-moz-placeholder, /deep/.only-eidt-placeholder .el-input textarea:-moz-placeholder {
    color: #666;
    opacity: 1;
  }
  /deep/.only-eidt-placeholder .el-input input::-moz-placeholder, /deep/.only-eidt-placeholder .el-input textarea::-moz-placeholder {
    color: #666;
    opacity: 1;
  }
  /deep/.only-eidt-placeholder .el-input input:-ms-input-placeholder, /deep/.only-eidt-placeholder .el-input textarea::-ms-input-placeholder {
    color: #666;
  }
</style>
