<template>
  <div class="execution">
    <basic-container v-loading="loading">
        <el-form :inline="true"  class="demo-form-inline">
        <!-- 基础信息 -->
        <div class="zm_info_header">
            <span>基本信息</span>
          </div>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="下单时间">
              <span>{{info.createTime || ''}}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="订单编号">
              <span>{{info.orderNo || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="下单用户">
                <span>{{info.orderUser || ''}}</span>
              </el-form-item>
            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">
              <el-form-item label="购买数量">
                <span>{{info.goodsNumber || ''}}</span>
              </el-form-item>
            </div></el-col>
          </el-row>

        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="商品金额">
                <span>{{info.price || ''}}</span>
              </el-form-item>
            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">
              <el-form-item label="状态">
                <span>{{info.stateName || ''}}</span>
              </el-form-item>
            </div></el-col>
          </el-row>

        <div class="zm_info_header">
          <span>收货信息</span>
        </div>
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="收货人姓名">
              <span>{{info.name || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="收货人电话">
              <span>{{info.phone || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="收货人地址">
              <span>{{info.address || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>


        <div class="zm_info_header">
          <span>所购商品</span>
        </div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
                <el-row :gutter="15" style="width: 100%;margin:20px 0px">
                  <el-col :span="24">
                    <el-table class="tableClass" :data="formData.result" >
                      <el-table-column
                        v-for="key in formData.listkey"
                        :key="key"
                        :prop="key"
                        :label="key"></el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
          </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark" style="width: 600px;margin:0px auto">
            <el-button v-if="this.stateName==='待发货'"
              type="primary" size="medium" @click="shipsImmediately">立即发货</el-button>
            <el-button v-if="contains()!=-1"
              type="primary" size="medium" @click="cancelOrderClick">取消订单</el-button>
          </div></el-col>
        </el-row>

        </el-form>
      <!-- 立即发货对话框 -->
      <el-dialog
        title="订单发货" :visible.sync="dialogVisibleShipsImmediately" width="40%"
        :before-close="handleClose">
        <el-form ref="form" :model="form">
          <el-form-item :initDropDownBox="initDropDownBox" label="请选择快递公司 :" prop="expressCompany" label-width="200px">
            <!-- 下拉 -->
            <el-select v-model="form.expressCompany" size="30px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="请填写快递单号 :" prop="waybillNo" label-width="200px">
            <el-input v-model="form.waybillNo" size="30px"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="loading" @click="confirmDelivery"
                           style="width: 200px; height: 40px;display:block;margin:0 auto;" >
                  确认发货</el-button>
            </span>
      </el-dialog>

      <!-- 取消订单对话框 -->
      <el-dialog
        title="取消订单" :visible.sync="cancelOrderDialog" width="50%"
        :before-close="handleClose">
        <el-form ref="form" :model="form">
          <el-form-item  label="退货地址 :" prop="" label-width="200px">
            <span>{{info.refundAddress||'暂未添加'}}</span>
          </el-form-item>
          <el-form-item  label="退还金额 :" prop="" label-width="200px">
            <span v-if="info.payTypeName==='现金支付'">{{info.refundMoney+'元'||''}}</span>
            <span v-if="info.payTypeName==='A币支付'">{{info.refundMoney+'A币'||''}}</span>
          </el-form-item>
          <el-form-item  label="支付金额 :" prop="" label-width="200px">
            <span v-if="info.payTypeName==='现金支付'">{{info.payMoney+'元'||''}}</span>
            <span  v-if="info.payTypeName==='A币支付'">{{info.payMoney+'A币'||''}}</span>
          </el-form-item>
          <el-form-item  label="商家金额 :" prop="" label-width="200px">
            <span>{{info.goodsMoney+'元'||''}}</span>
          </el-form-item>
          <el-form-item  label="备注 :" prop="refundRemark" label-width="200px">
            <el-input type="textarea"  v-model="refundRemark"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="loading" @click="confirmCancelOrderSubmit"
                       style="width: 200px; height: 40px;display:block;margin:0 auto;" >
              确认取消</el-button>
        </span>
      </el-dialog>
      <el-button type="primary" class="self_center" style="width: 100px;margin-top: 16px;" @click="$router.go(-1)">返回</el-button>
    </basic-container>
  </div>
</template>

<script>
  import {getOrderInfo} from '@/api/mall/merchantMallorder'
  import {ZmMixin} from '@/mixins/ZmMixin.js'
  export default {
    name:"businessOrder",
    mixins: [ZmMixin],
    components: {
    },
    data() {
      return {
        refundRemark:'1-300字',
        stateName:'',
        options:[],// 快递公司下拉
        cancelOrderDialog:false,
        dialogVisibleShipsImmediately:false,
        formData: {
          result: [],
          listkey:[],
        },
        form:{
          waybillNo:'',//快递单号
          expressCompany:2,//快递公司
          orderNo:''
        },
        reverse: true,
        editing: false,
        saving: false,
        loading: false,
        info: {},
      }
    },
    mounted() {
      this.loadInfo()
    },
    computed: {
      id() {
        return this.$route.query.id
      },
      userEvaluationImg() {
        if (this.info) {
          let urls = []
          let shopImg = this.info.userEvaluationImg
          if (shopImg) {
            urls = shopImg.split(",")
          }
          return urls
        }
        return []
      },
      initDropDownBox() {
        this.$axios.get("/general/mallExpressCompany/dropDownBox/courierCompany").then(e => {
          this.options = Object.values(e.data)
        })
      }
    },
    methods: {
      // 取消订单提交事件
      confirmCancelOrderSubmit(){
        cancelOrderMethod(
      {orderNo:this.form.orderNo,
            refundRemark:this.refundRemark,
            }
          ).then(r=>{
          console.log("取下订单提交事件-返回结果："+JSON.stringify(r))
          this.$message.success('取消订单成功')
        }).catch(e=>{
          this.error('取消订单失败')
        })
        this.cancelOrderDialog=false
        // 修改
      },
      contains(){
        let text='待支付,已支付,待签约,待发货，待收货'
        return text.search(this.info.stateName)
      },
      generateTable(r){
        this.formData.listkey=[]
        this.formData.result=[]
        this.formData.result=r
        //提取表头字段====
        for (let i = 0, l = this.formData.result.length; i < l; i++) {
          for (let key in this.formData.result[i]) {
            if (this.formData.listkey.indexOf(key)==-1){
              this.formData.listkey.push(key)
            }else{
            }
          }
        }
      },
      handleClose(done) {done();},
      // 立即发货
      shipsImmediately(){
        this.form.orderNo=this.id
        this.$axios.get("/admin/merchantMallOrder/isVirtualGoods",{
          params:{orderNo:this.id},
        }).then(response => {

          console.log("结果返回："+JSON.stringify(response))
          // if(response.data.data){
          //   this.form.orderNo=this.id
          //   this.dialogVisibleShipsImmediately = true
          // }else {
          //   // 虚拟商品 二次确认直接发货
          //   this.$confirm('是否确认发货？', '提示', {
          //     confirmButtonText: '确定',
          //     cancelButtonText: '取消',
          //     type: 'warning'
          //   }).then(data => {
          //     shipsImmediately(this.form).then(r => {
          //       this.$message.success('发货成功')
          //     }).catch(e =>{
          //       console.log('错误', e.message)
          //     })
          //   })
          // }
        }, error => {
          console.log('错误', error.message)
        })

      },
      // 确认发货-提交按钮
      confirmDelivery(){
        shipsImmediately(this.form).then(r => {
          this.dialogVisibleShipsImmediately = false
          this.$message.success('发货成功')
          return r.data
        }).catch(e =>{
          console.log('错误', e.message)
        })
      },
      // 取消订单
      cancelOrderClick(){
        this.$confirm('请确认是否取消该订单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(data => {
          this.cancelOrderDialog = true
        })
      },
      loadInfo() {
        this.loading = true
        getOrderInfo({
          id: this.id
        }).then(r => {
          this.loading = false
          this.info = this.zmRes(r)
          console.log("[订单详情]"+JSON.stringify(r.data.data))
          this.stateName=this.info.stateName
          this.form.orderNo=this.info.orderNo
          let table=[]
            table.push({商品列表图:''})
            table.push({商品名称:''})
            table.push({商品规格:''})
            table.push({商品单价:''})
            table.push({购买数量:''})
            table.push({商品总价:''})
            table[0].商品列表图=r.data.data.mallPayInfo.goodsListImage
            table[0].商品名称=r.data.data.mallPayInfo.goodsListName
            table[0].商品规格=r.data.data.mallPayInfo.goodsListSpec
            table[0].商品单价=r.data.data.mallPayInfo.goodsListPrice
            table[0].购买数量=r.data.data.mallPayInfo.goodsListNumber
            table[0].商品总价=r.data.data.mallPayInfo.goodsListTotalPrice

          this.generateTable(table)
        }).catch(r => {
          this.loading = false
          this.error('加载信息失败')
        })
      },
    }
  }
</script>

<style scoped>
  .zm_info_header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    background: #dedede;
  }

  .zm_info_body {
    display: flex;
    flex-direction: column;
    padding: 16px;
  }
  el-form-item{
    margin-right: 20px;
  }

  .zm_info_row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .zm_label {
    width: 120px;
  }

  .zm_info_body .zm_info_row:not(:first-child) {
    margin-top: 10px;
  }
  .bg-purple {
  }
  .bg-purple-light {
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

</style>
