<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">
            <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.addtime)  : ''}}</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">{{goodsNum}}</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">{{goodsPrice}}</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">{{goodsFreight}}元</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 && orderDetail.status > 2">修改收货信息</el-button>
          </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.shipping_name  : ''}}</el-col>
              <el-col :span="3" class="text-r">联系电话</el-col>
              <el-col :span="6" class="text-l">{{orderDetail ? orderDetail.phone  : ''}}</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.province + orderDetail.city + orderDetail.county + orderDetail.town + orderDetail.address : ''}}</el-col>
              <el-col :span="3" class="text-r"></el-col>
              <el-col :span="6" class="text-l"></el-col>
            </el-row>
          </div>
        </div>
        <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)" :disabled="orderDetail && orderDetail.status > 1">去发货</el-button>
              <el-button size="mini" @click="goShipping(2)" :disabled="orderDetail && orderDetail.status != 2">补单发货</el-button>
            </div>
          </div>
          <el-table :data="orderDetail ? orderDetail.item : []" style="border: 1px solid #eee;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="订单号" prop="order_sn" />
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                {{scope.row.goods_list[0].title}}
              </template>
            </el-table-column>
            <el-table-column label="商品规格">
              <template slot-scope="scope">
                {{scope.row.goods_list[0].goods_option_title}}
              </template>
            </el-table-column>
            <el-table-column label="单价">
              <template slot-scope="scope">
                {{scope.row.goods_list[0].price}}
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                {{scope.row.goods_list[0].num}}
              </template>
            </el-table-column>
            <el-table-column label="商品状态">
              <template slot-scope="scope">
                {{scope.row.goods_list[0].goods_status == 0 ? '未发货' : '已发货'}}
              </template>
            </el-table-column>
            <el-table-column label="快递公司">
              <template slot-scope="scope">
                {{scope.row.goods_list[0].deliver_Name}}
              </template>
            </el-table-column>
            <el-table-column label="快递单号" prop="Tel">
              <template slot-scope="scope">
                {{scope.row.goods_list[0].deliver_no}}
              </template>
            </el-table-column>
            <el-table-column label="操作" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="goShipping(3, scope.row.goods_list[0].goods_id)" :disabled="scope.row.goods_list[0].goods_status > 0">{{getStatus(scope.row.goods_list[0].goods_status, scope.row.goods_list[0].is_reissue)}}</el-button>
                <el-button v-if="scope.row.goods_list[0].goods_status > 0" size="mini" type="text" @click="getExpressInfoNew(scope.row.order_sn, scope.row.goods_list[0].goods_id, scope.row.goods_list[0].sku_id)">查看物流</el-button>
              </template>
            </el-table-column>
          </el-table>
        </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;">{{orderDetail ? orderDetail.remark : ''}}</div>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="修改买家信息"
      :visible.sync="modifyinfoDialog"
      width="25%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      >
      <div style="margin: 0 10%">
        <el-form ref="addressForm" :model="addressForm" label-width="100px">
          <el-form-item label="收货人姓名：">
            <el-input size="mini" v-model="addressForm.name" placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input size="mini" v-model="addressForm.mobile" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="收货地址：">
            <el-cascader v-model="addressForm.areaList" :props='props' placeholder="请选择具体的省市区" style="width:100%"></el-cascader>
            <el-input size="mini" v-model="addressForm.street_name" placeholder="请输入街道"></el-input>
            <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" 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="formatter(activity.msgTime)">
            {{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} from '@/api/module/order'
import {dateFormat} from '@/utils'
import {getAreaList} from '@/api/module/retreat/address'
export default {
  props: {
    orderDetail: {
      type: Object
    },
    expressLists: {
      type: Array
    }
  },
  data() {
    return {
      expressNum: '',
      express_sn: '',
      remark: '',
      modifyinfoDialog: false,
      goShippingDialog: false,
      addRemarkDialog: false,
      dialogCheck: false,
      titleInfo: '',
      addressForm: {
        name: '',
        mobile: '',
        address: '',
        street_name: '',
        areaList: [] // 省市区
      },
      activities: [],
      multipleSelection: [],
      props: {
        expandTrigger: 'click',
        lazy: true,
        lazyLoad: this.lazyLoad,
        value: "id",
        label: 'name',
        leaf: 'leaf'
      },
      goShippingNum: 0,
      goods_ids: null
    }
  },
  computed: {
    goodsFreight() {
      let freight = 0
      if (this.orderDetail) {
        this.orderDetail.item.map(item => {
          freight += item.freight
        })
      }
      return freight
    },
    goodsPrice() {
      let price = 0
      if (this.orderDetail) {
        this.orderDetail.item.map(item => {
          price += item.goods_list[0].price
        })
      }
      return price
    },
    goodsNum() {
      let goodsNum = 0
      if (this.orderDetail) {
        this.orderDetail.item.map(item => {
          goodsNum += item.goods_list[0].num
        })
      }
      return goodsNum
    }
  },
  methods: {
    getStatus(status, is_reissue) {
      return status == 0 ? '去发货' : status == 1 && is_reissue == 1 ? '已补单' : status == 1 && is_reissue == 0 ? '已发货' : '已完成'
    },
    formatter(time) {
      return dateFormat(time, 'Y-m-d H:i:s')
    },
    goShipping(val, id) {
      this.goShippingNum = val
      this.goods_ids = id

      this.expressNum = ''
      this.express_sn = ''

      if (this.multipleSelection.length == 0 && val != 3) {
        this.$message({
          type: 'warning',
          message: '请选择需要发货的商品'
        })
        return
      }

      switch(val) {
        case 1: 
          this.titleInfo = '去发货'
          this.goShippingDialog = true
          break
        case 2: 
          this.titleInfo = '补单发货'
          this.goShippingDialog = true
          break
        case 3: 
          this.titleInfo = '去发货'
          this.goShippingDialog = true
          break
        default:
          break
      }
    },
    // 订单详情
    handleInfo() {
      this.detailDialog = true
      // let order_sn = '20200318e095e2d09354'
      let order_sn = this.orderDetail.parent_order_sn

      orderInfo({order_sn: order_sn}).then(res => {
        if (res.code == 1) {
          this.orderDetail = res.data
        }
      })
    },
    // 选中的表格
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    modifyinfo() {
      this.addressForm = {
        name: '',
        mobile: '',
        address: '',
        street_name: ''
      }
      this.modifyinfoDialog = true
    },
    // 修改买家信息
    handleModifyInfo() {
      if (!this.addressForm.name) {
        this.$message({
          type: 'warning',
          message: '请输入收货人姓名'
        })
        return
      }
      if (!this.addressForm.mobile) {
        this.$message({
          type: 'warning',
          message: '请输入联系电话'
        })
        return
      }
      // 手机号码格式校验
      const reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.addressForm.mobile)) {
        this.$message({
          type: 'warning',
          message: '手机号码格式有误'
        })
        return
      }
      if (!this.addressForm.areaList) {
        this.$message({
          type: 'warning',
          message: '请选择省市区'
        })
        return
      }
      if (!this.addressForm.street_name) {
        this.$message({
          type: 'warning',
          message: '请输入街道'
        })
        return
      }
      if (!this.addressForm.address) {
        this.$message({
          type: 'warning',
          message: '请输入收货地址'
        })
        return
      }

      let params = {
        id: this.orderDetail.parent_order_sn,
        shipping_name: this.addressForm.name,
        mobile: this.addressForm.mobile,
        street_name: this.addressForm.street_name,
        address: this.addressForm.address,
        province_name: this.addressForm.areaList[0],
        city_name: this.addressForm.areaList[1],
        district_name: this.addressForm.areaList[2]
      }
      orderInfoEdit(params).then(res => {
        if (res.code == 1) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.modifyinfoDialog = false
          this.handleInfo()
        }
      })
    },
    // 去发货
    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, index) => {
        if (item.value == this.expressNum) {
          expressName = item.label
        }
      })

      let goods_ids = []
      if (this.goShippingNum != 3) {
        this.multipleSelection.map(item => {
          goods_ids.push(item.goods_list[0].goods_id)
        })
      } else {
        goods_ids = [this.goods_ids]
      }

      let params = {
        order_goods_ids: goods_ids,
        express_company_name: expressName,
        express_sn: this.express_sn,
        express_code: this.expressNum
      }
      sendOrder(params).then(res => {
        if (res.code == 1) {
          this.$message({
            type: 'success',
            message: '商品已发货'
          })
          this.goShippingDialog = false
          this.handleInfo()
        }
      })
    },
    // 查看物流
    getExpressInfoNew(sn, goodsId, skuId) {
      this.dialogCheck = true

      let params = {
        order_sn: sn,
        goods_id: goodsId,
        sku_id: skuId
      }
      expressInfoNew(params).then(res => {
        if (res.code == 1) {
          this.activities = res.data.orderTrack
        }
      })
    },
    addRemark() {
      this.remark = ''
      this.addRemarkDialog = true
    },
    // 订单备注
    getRemarkOrder() {
      if (!this.remark) {
        this.$message({
          type: 'warning',
          message: '请输入订单备注'
        })
        return
      }

      let params = {
        order_id: this.orderDetail.item[0].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)
      })
    },
  }
}
</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-bottom: 0;
  }
  /deep/.el-input--medium .el-input__inner {
    height: 28px;
  }
  
  .orderDetail {
    height: 660px;
    overflow-y: auto;

  }
  .text-r {
    justify-content: flex-end;
    background: #F7F8FA;
  }
  .text-l {
    text-align: left;
  }
  .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;
  }
</style>