/**
  // author：zhangyy
  // time:2023-02-09
  // desc:订单详情
*/
<template>
  <div class="orderDetail">
    <div style="text-align:right;margin:1em 0;"><el-button @click="$router.back()">返回</el-button></div>
    <div class="detail_order_num"><Icon type="ios-paper-outline" style="margin:0 0.5rem"/>
      <b>订单编号：{{orderDataList.orderNum}}</b>
      <b style="float:right;color:#ed4014;">{{orderStateDisplay(orderDataList.status)}}</b>
    </div>
    <div class="order_detail_box">
      <!-- 卖家信息 -->
      <div class="detail_buyer_box">
        <h3>买家信息</h3>
        <div>买家账户：{{orderDataList.userName}}</div>
        <div>收货人：{{orderDataList.cattleOrderAddress.contacts}}</div>
        <div>联系方式：{{orderDataList.cattleOrderAddress.phone}}</div>
        <div>
          收货地址：
          {{orderDataList.cattleOrderAddress.province}}
          {{orderDataList.cattleOrderAddress.city}}
          {{orderDataList.cattleOrderAddress.area}}
          {{orderDataList.cattleOrderAddress.addressInfo}}
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="detail_order_box">
        <h3>订单信息</h3>
        <div>下单时间：{{moment(orderDataList.addTime).format('yyyy-MM-DD hh:mm:ss') || '暂无'}}</div>
        <div>下单数量：{{orderDataList.count || 0}} 头</div>
        <div>
          订单总金额：
          <Numeral :value="orderDataList.totalMoney || 0" format="0,0.00">
            <template #prefix>
              <strong>¥</strong>
            </template>
          </Numeral>
        </div>
        <div>
          订金总金额：
          <Numeral :value="orderDataList.firstMoney || 0" format="0,0.00">
            <template #prefix>
              <strong>¥</strong>
            </template>
          </Numeral>
        </div>
        <div>
          尾款金额：
          <Numeral :value="orderDataList.lastMoney || 0" format="0,0.00">
            <template #prefix>
              <strong>¥</strong>
            </template>
          </Numeral>
        </div>
        <div>备注信息：{{orderDataList.remark || '无'}}</div>
      </div>
      <!-- 支付状态 -->
      <div class="detail_pay_box">
        <h3>支付信息</h3>
        <div>订金支付：{{payStateDisplay(orderDataList.payStatus)}}</div>
        <div>尾款支付：{{orderStateDisplay(orderDataList.status)}}</div>
      </div>
      <!-- 开票信息  -->
      <div class="detail_invoice_box">
        <h3>开票信息</h3>
        <span v-if="orderDataList.cattleOrderInvoice && orderDataList.cattleOrderInvoice.id">
          <div>发票抬头：{{orderDataList.cattleOrderInvoice.companyName}}</div>
          <div>统一社会信用代码：{{orderDataList.cattleOrderInvoice.taxNum}}</div>
          <div>注册地址：{{orderDataList.cattleOrderInvoice.companyAddress}}</div>
          <div>电话：{{orderDataList.cattleOrderInvoice.contactCell}}</div>
          <div>开户银行：{{orderDataList.cattleOrderInvoice.bankName}}</div>
          <div>银行账号：{{orderDataList.cattleOrderInvoice.bankNum}}</div>
        </span>
        <div v-else>买家不需开票</div>
      </div>
      <!-- 申请售后  -->
      <div class="detail_invoice_box" v-if="orderDataList.cattleAfterSale && orderDataList.cattleAfterSale.id">
        <h3>申请售后</h3>
        <span>
          <div>售后状态：
            <span v-if="orderDataList.cattleAfterSale.status == 1" style="color:#ff9900;font-weight:bold;">申请退款待审核</span>
            <span v-if="orderDataList.cattleAfterSale.status == 2" style="color:#19be6b;font-weight:bold;">审核通过已退款</span>
            <span v-if="orderDataList.cattleAfterSale.status == 3" style="color:#ed4014;font-weight:bold;">审核已拒绝</span>
          </div>
          <div>申请时间：{{moment(orderDataList.cattleAfterSale.addTime).format('yyyy-MM-DD hh:mm:ss') || '暂无'}}</div>
          <div>退款理由：{{orderDataList.cattleAfterSale.reason}}</div>
          <div>退款说明：{{orderDataList.cattleAfterSale.content}}</div>
          <div v-if="orderDataList.cattleAfterSale.refuseReason">拒绝原因：{{orderDataList.cattleAfterSale.refuseReason}}</div>
          <div v-if="orderDataList.cattleAfterSale.status == 1">
            <Button size="small" type="error" @click="auditRefundM(3)">拒绝申请</Button>
            <Button size="small" type="success" style="margin-left:1em;" @click="auditRefundM(2)">同意退款</Button>
          </div>
        </span>
      </div>
    </div>

    <div style="margin:1em 0;">
      <el-table :data="[orderDataList]" style="width: 100%" border size="small">
        <el-table-column label="商品图片" width="160" >
          <template #default="scope">
            <img :src="scope.row.imgUrl" style="width:100%;" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="itemName" label="商品名称" width="180" />
        <el-table-column prop="weight" label="规格" width="180" />
        <el-table-column label="单价(/头)" width="120">
          <template #default="scope">
            <Numeral :value="scope.row.price || 0" format="0,0.00">
              <template #prefix>
                <strong>¥</strong>
              </template>
            </Numeral>
          </template>
        </el-table-column>
        <el-table-column label="订金(/头)" width="120" >
          <template #default="scope">
            <Numeral :value="scope.row.previewMoney || 0" format="0,0.00">
              <template #prefix>
                <strong>¥</strong>
              </template>
            </Numeral>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="下单数量(头)" width="120" align="center" />
        <el-table-column label="订单总额" min-width="130">
          <template #default="scope">
            <Numeral :value="scope.row.totalMoney || 0" format="0,0.00">
              <template #prefix>
                <strong>¥</strong>
              </template>
            </Numeral>
          </template>
        </el-table-column>
        <el-table-column label="订金总额" min-width="130">
          <template #default="scope">
            <Numeral :value="scope.row.firstMoney || 0" format="0,0.00">
              <template #prefix>
                <strong>¥</strong>
              </template>
            </Numeral>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="130" fixed="right">
          <template #default="scope">
            <el-button  type="warning" size="small" v-if="orderDataList.status == '3' && !orderDataList.updateLogId" @click="InitiatePrice('发起改价')">发起改价</el-button>
            <el-button  type="primary" size="small" v-if="orderDataList.status == '3' &&  orderDataList.updateLogId" @click="lookPrice('查看改价')">
              <span v-if="orderDataList.cattleOrderUpdateLog.status == 1">改价待确认</span>
              <span v-if="orderDataList.cattleOrderUpdateLog.status == 2">查看改价</span>
            </el-button>
            <el-button  type="success" size="small" v-if="orderDataList.status == '2' && orderDataList.contactCell" @click="confirmlookCow">确定已看牛</el-button>
            <el-button  type="success" size="small" v-if="(orderDataList.status == '3' && !orderDataList.updateLogId) || (orderDataList.status == '3' && orderDataList.cattleOrderUpdateLog.status == 2) " @click="confirmPayLast" style="margin:1rem 0">确认支付尾款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Modal v-model="lookModal" @on-ok="confirmPrice">
        <template #header>
          <p style="text-align:center">
              <span>{{ modalTitle}}</span>
          </p>
        </template>
        <div v-if="modalTitle == '发起改价'">
          <Row style="padding:1rem">
              <Col span="11">
                <div style="color:#409EFF;margin-bottom:0.6rem">原始订单信息</div>
                <div>定金： ￥{{orderDataList.firstMoney}}</div>
                <div>尾款： ￥{{orderDataList.lastMoney}}</div>
                <div>总计： ￥{{orderDataList.totalMoney}}</div>
              </Col>
              <Col span="2">
                <Divider type="vertical" style="height:6rem"/>
              </Col>
              <Col span="11">
                <div style="color:#409EFF;margin-bottom:0.6rem">更改订单信息</div>
                <div>定金： ￥{{orderDataList.firstMoney}}</div>
                <div>尾款： ￥{{orderDataList.lastMoney}}</div>
                <div>合同总款： <Input v-model="totalPrice" size="small" placeholder="请输入总牛款金额" style="width: 130px" /></div>
              </Col>
          </Row>
          <Divider />
          <div style="padding:1rem" >
            备注信息：<Input v-model="updateComment" type="textarea" placeholder="请输入备注信息" />
          </div>
        </div>
        <template #footer v-if="modalTitle == '发起改价'">
          <div style="text-align:center;">
            <Button  @click="lookModal = false" style="margin-right:4em;">取消操作</Button>
            <Button type="primary" @click="confirmPrice">确定提交</Button>
          </div>
        </template>
        <div v-if="modalTitle == '查看改价'">
          <Row style="padding:1rem">
              <Col span="11" style="text-align:center">
                <div style="color:#409EFF;margin-bottom:0.6rem">原始订单信息</div>
                <div>定金： ￥{{orderDataList.firstMoney}}</div>
                <div>尾款： ￥{{orderDataList.cattleOrderUpdateLog.oldLastMoney}}</div>
                <div>总计： ￥{{orderDataList.cattleOrderUpdateLog.oldTotalMoney}}</div>
              </Col>
              <Col span="2">
                <Divider type="vertical" style="height:6rem"/>
              </Col>
              <Col span="11" style="text-align:center">
                <div style="color:#409EFF;margin-bottom:0.6rem">更改订单信息</div>
                <div>合同总款： ￥{{orderDataList.cattleOrderUpdateLog.totalMoney}}</div>
                <div>定金： ￥{{orderDataList.firstMoney}}</div>
                <div>尾款： ￥{{orderDataList.cattleOrderUpdateLog.lastMoney}}</div>
              </Col>
          </Row>
          <Divider />
          <div style="padding:1rem" >
            备注信息：<span >{{orderDataList.cattleOrderUpdateLog.updateComment }}</span>
          </div>
        </div>
        <template #footer v-if="modalTitle == '查看改价'">
          <Button  type="primary" @click="lookModal = false">确定</Button>
        </template>
    </Modal>

    <Modal v-model="auditRefundModal"  title="审核售后" width="25%">
      <div v-if="auditNum == 3">
        <Input v-model="auditRefuseReason" :border="false" placeholder="请填写您得审核拒绝理由" />
      </div>
      <div v-if="auditNum == 2">
        您确定同意该笔退款申请吗?
      </div>
      <template #footer>
        <Button  @click="auditRefundModal = false">取消操作</Button>
        <Button  type="primary" @click="confirmSubAudit">确定提交</Button>
      </template>
    </Modal>
  </div>
</template>

<script>
import { Message,Modal,Spin } from 'view-ui-plus'
import { defineComponent, reactive,onMounted,ref} from 'vue'
import { ElMessage,ElMessageBox} from 'element-plus'
import { useRouter } from 'vue-router';
import {cow,order} from '@/request/api'
import moment from 'moment'

export default defineComponent({
  components:{
  },
  setup() {
    let orderDataList = ref({cattleOrderAddress:{},cattleOrderInvoice:{},cattleAfterSale:{}})
    let lookModal = ref(false)
    let modalTitle = ref('发起改价')
    let updateComment = ref()
    let totalPrice = ref()
    let orderStatusList = ref([
      {label:'待支付',val:1},
      {label:'待看牛',val:2},
      {label:'待付尾款',val:3},
      {label:'待交割',val:4},
      {label:'已完成',val:5},
      {label:'申请售后',val:6},
      {label:'已取消',val:7},
    ])

    const $router = useRouter();
    // 查询订单详情
    async function getCattleOrderInfo(id){
      await cow.getCattleOrderInfo({orderNum:id}).then(res=>{
        if(res.code == 101){
          orderDataList.value = res.data
        }else{
          Message.warning({content: res.message || '操作失败'})
        }
      })
    }

    // 查看改价
    function lookPrice(title){
      modalTitle.value = title
      lookModal.value = true
    }

    // 发起改价
    function InitiatePrice(title){
      modalTitle.value = title
      lookModal.value = true
    }

    //确定
    async function confirmPrice(){
      const params={
        orderNum:orderDataList.value.orderNum,
        status:1,
        updateComment:updateComment.value,
        totalMoney:totalPrice.value,
      } 
      await cow.UpdatePrice(params).then(res=>{
        if(res.code == 101){
          lookModal.value = false
          getCattleOrderInfo($router.currentRoute.value.query.id)
          Message.success({content: res.message || '操作成功'})
        }else{
          Message.warning({content: res.message || '操作失败'})
        }
      })
    }

    // 订单状态回执
    function payStateDisplay(val){
      switch(val){
        case 2:
          return '待付款'
        break;
        case 3:
          return '已付订金'
        break;
        case 5:
          return '已退款'
        break;
      }
    }

    // 订单状态回执
    function orderStateDisplay(val){
      switch(val){
        case 1:
          return '待付订金'; break;
        case 2:
          return '待看牛'; break;
        case 3:
          return '待付尾款'; break;
        case 4:
          return '待交割'; break;
        case 5:
          return '已取消'; break;
        case 6:
          return '已完成'; break;
        case 7:
          return '申请售后'; break;
        case 8:
          return '已退款'; break;
      }
    }

    // 确认已经看牛
    function confirmlookCow(){
      ElMessageBox.confirm(
        '请确认：买家是否已完成看牛？',
        '确定已看牛',
        {
          confirmButtonText: '是的，已看',
          cancelButtonText: '还未看牛',
          type: 'warning',
          closeOnClickModal:false
        }
      )
        .then(async() => {
          const params ={
            orderNum:orderDataList.value.orderNum,
          }
          await cow.confirmAppointCattle(params).then(res=>{
            if(res.code == 101){
              getCattleOrderInfo($router.currentRoute.value.query.id)
              Message.success({content: res.message || '确认已看牛'})
            }else{
              Message.warning({content: res.message || '操作失败'})
            }
          })
        })
        .catch(() => {
          Message.warning({content: '还未看牛'})
        })
    }

    // 确认支付尾款
    function confirmPayLast(){
      ElMessageBox.confirm(
        '请确认：买家是否已支付尾款？',
        '确定支付尾款',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal:false
        }
      ).then(async() => {
          const params ={
            orderNum:orderDataList.value.orderNum,
          }
          await cow.confirmLastPay(params).then(res=>{
            if(res.code == 101){
              getCattleOrderInfo($router.currentRoute.value.query.id)
              Message.success({content: res.message || '确认成功'})
            }else{
              Message.warning({content: res.message || '确认失败'})
            }
          })
        })
    }
    
    let auditRefundModal = ref(false) //审核售后modal
    let auditRefuseReason = ref('') //拒绝理由
    let auditNum = ref('')
    // 审核退款申请
    function auditRefundM(val){
      auditNum.value = val
      auditRefundModal.value = true
    }
    // 确定提交审核
    async function confirmSubAudit(){
      if(auditNum.value == 3 && !auditRefuseReason.value){
        Message.warning({content:'请填写拒绝的理由'})
        return
      }
      let sendParams = {}
      sendParams.id =  orderDataList.value.cattleAfterSale.id
      sendParams.status = auditNum.value
      sendParams.refuseReason = auditRefuseReason.value
      await order.cattleAudit(sendParams).then(res=>{
        if(res.code == 101){
          auditRefundModal.value = false
          Message.success({content: res.message || '操作成功'})
          getCattleOrderInfo($router.currentRoute.value.query.id)  //获取订单详情
        }else{
          Message.warning({content: res.message || '操作失败'})
        }
      }).catch(e=>{
        Message.warning({content: e.message || '确认失败'})
      })
    }

    onMounted(async()=>{
      getCattleOrderInfo($router.currentRoute.value.query.id)  //获取订单详情
    })

    
    return {
      orderDataList,lookModal,modalTitle,modalTitle,updateComment,totalPrice,orderStatusList,moment,auditRefundModal,auditNum,auditRefuseReason,
      getCattleOrderInfo,InitiatePrice,lookPrice,confirmPrice,confirmlookCow,payStateDisplay,orderStateDisplay,confirmPayLast,auditRefundM,confirmSubAudit
    }
  },
})
</script>

<style lang="scss" scoped>
.orderDetail{
  padding: 1em 2em;
  .detail_order_num{padding: 1em .5em; background-color: #fff;}
  .order_detail_box{
    border-top: 3px solid #19be6b; background-color: #fff;
    display: flex; flex-wrap:wrap;
    .detail_buyer_box{
      width: 33%; height: 250px; border-right: 1px dotted #ccc; padding: 1em 2em; margin:1em 0;
      div{margin-top:10px;}
    }
    .detail_order_box{
      width: 33%; height: 250px; border-right: 1px dotted #ccc; padding: 1em 2em;margin:1em 0;
      div{margin-top:10px;}
    }
    .detail_pay_box{
      width: 33%; height: 250px; padding: 1em 2em;margin:1em 0;
      div{margin-top:10px;}
    }
    .detail_invoice_box{
      width: 33%; height: 250px; padding: 1em 2em; border-right: 1px dotted #ccc; margin:1em 0;
      div{margin-top:10px;}
    }
  }
}
</style>
<style lang="scss">
.orderDetail{

}
</style>