<template>
  <div class="order-detail-wrap">
    <nav-bar title="订单详情"/>
    <div class="wrap" v-if="data">
      <!-- 订单 -->
      <div class="order">
        <div class="header flex_sb align-c">
          <p>订单编号：{{data.orderCode }}</p>
          <span>{{data.showTagText}}</span>
        </div>
        <div class="content">
          <div class="flex_sb align-c" v-if="data.roomPriceText">
            <p>租金：</p>
            <span>{{data.roomPriceText}}</span>
          </div>
          <div class="flex_sb align-c" v-if="data.rentTimeText">
            <p>租期：</p>
            <span>{{data.rentTimeText}}</span>
          </div>
          <div class="flex_sb align-c" v-if="data.liveTimeText">
            <p>入住时间：</p>
            <span>{{data.liveTimeText}}</span>
          </div>
          <div class="flex_sb align-c remark" v-if="data.remark">
            <p>备注：</p>
            <span>{{data.remark}}</span>
          </div>
        </div>
        <div class="footer flex align-c" v-if="data.operateStatus == 1">
          <p @click="cancelOrder">取消订单</p>
        </div>
      </div>
      <div class="agent">
        <!-- 房源 -->
        <div class="room flex" v-if="data.houseInfo" @click="showDetail">
          <img :src="data.houseInfo.imgUrl" alt="" v-if="data.houseInfo.imgUrl">
          <img src="../../assets/imgs/buildings-img@2x.png" alt="" v-else>
          <div>
            <h5 class="lineTwoHidden">{{data.houseInfo.houseName}}</h5>
            <p class="lineTwoHidden">{{data.houseInfo.houseAddress}}</p>
          </div>
        </div>
        <!-- 顾问 -->
        <div class="footer flex_sb align-c" @click="goAgent(data.agentInfo.agentId)" v-if="data.agentInfo">
          <div class="flex align-c">
            <img :src="data.agentInfo.agentAvatar" alt="" v-if="data.agentInfo.agentAvatar">
            <img src="../../assets/imgs/avatar.png" alt="" v-else>
            <span>{{data.agentInfo.agentName}}</span>
          </div>
          <p>查看顾问 <i class="icon icon-jiantou-you"></i></p>
        </div>
      </div>
      <!-- 费用详情 -->
      <div class="list">
        <div class="header flex_sb align-c">
          <h4>费用详情</h4>
          <p @click="toggleShow('payDetailIsShow')" v-if="data.payInfo && data.payInfo.payDetail.length">
            {{payDetailIsShow ? '收起' : '展开'}}
            <i class="icon icon-yuanjiantou-shouqi" :class="{active: payDetailIsShow}"></i>
          </p>
        </div>
        <div class="content">
          <template v-if="data.payInfo && payDetailIsShow">
            <div
              class="flex_sb align-c"
              v-for="(item, index) in data.payInfo.payDetail" 
              :key="index">
              <p>{{item.content}}：</p>
              <span>{{item.amount}}</span>
            </div>
          </template>
          <div class="flex_sb font_b align-c">
            <p>应付金额：</p>
            <span v-if="data.payInfo">{{data.payInfo.totalAmount || '暂未产生费用'}}</span>
          </div>
          <div class="flex_sb align-c" v-if="data.payInfo && data.payInfo.totalDiscountAmount">
            <p>优惠券抵扣：</p>
            <span>{{data.payInfo.totalDiscountAmount}}</span>
          </div>
          <div class="flex_sb align-c" v-if="data.payInfo && data.payInfo.totalPaidAmount">
            <p>已支付：</p>
            <span>- {{data.payInfo.totalPaidAmount}}</span>
          </div>
        </div>
        <div class="footer flex_sb align-c">
          <p>待支付金额：</p>
          <h5 v-if="data.payInfo">{{data.payInfo.noPayAmount}}</h5>
        </div>
      </div>
      <!-- 退款详情 -->
      <div class="list" v-if="data.payInfo && data.payInfo.refundInfo">
        <div class="header flex_sb align-c">
          <h4>退款详情</h4>
          <p @click="toggleShow('refundInfoIsShow')" v-if="data.payInfo.refundInfo.refundList.length">
            {{refundInfoIsShow ? '收起' : '展开'}}
            <i class="icon icon-yuanjiantou-xiala" :class="{active: refundInfoIsShow}"></i>
          </p>
        </div>
        <div class="content">
          <template v-if="refundInfoIsShow">
            <div class="flex_sb align-c" v-for="(item, index) in data.payInfo.refundInfo.refundList" :key="index">
              <p>{{item.content}}：</p>
              <span>{{item.amount}}</span>
            </div>
          </template>
        </div>
        <div class="footer flex_sb align-c">
          <p>总退款金额：</p>
          <h5>{{data.payInfo.refundInfo.totalRefundAmount}}</h5>
        </div>
      </div>
      <!-- 支付明细 -->
      <div class="list" v-if="data.payInfo && data.payInfo.payList.length">
        <div class="header flex_sb align-c">
          <h4>支付明细</h4>
        </div>
        <div
          class="card" 
          @click="goPay(item)"
          v-for="(item, index) in data.payInfo.payList" 
          :key="index">
          <div class="head flex_sb align-c">
            <h5>{{item.content}}</h5>
            <p>{{item.payOrderCode}} <i class="icon icon-jiantou-you"></i></p>
          </div>
          <div class="message">
            <div class="flex align-c">
              <p>应付金额：</p>
              <span>{{item.amount}}</span>
            </div>
            <div class="flex align-c" v-if="item.discountedPrice">
              <p>优惠券抵扣：</p>
              <span>-{{item.discountedPrice}}</span>
            </div>
          </div>
          <div class="foot flex_sb align-c">
            <p v-if="item.paidAmount && item.orderStatus == 2">已付金额：{{item.paidAmount}}</p>
            <p v-if="item.refundAmount && (item.orderStatus == 3 || item.orderStatus == 5)">已退金额：{{item.refundAmount}}</p>
            <p v-if="item.noPayAmount && item.orderStatus == 1">未付金额：{{item.noPayAmount}}</p>
            <span :class="[{pay: item.orderStatus == 1},{active: item.orderStatus == 2 || item.orderStatus == 3}]"
            >{{item.orderStatusText}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "OrderDetail",
  components: {
    NavBar
  },
  data() {
    return {
      data: null,
      operateStatusText: null,
      payDetailIsShow: true,
      refundInfoIsShow: true,
      cancelOrderReasonList: [],
      lang: this.$store.state.langStr
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_user_order_detail;
      params.data = {
        id: this.$route.params.id
      };
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
          switch (Number(res.data.operateStatus)) {
            case 1:
              this.operateStatusText = "正常";
              break;
            case 2:
              this.operateStatusText = "申请取消";
              break;
            case 3:
              this.operateStatusText = "确认取消";
              break;
            case 4:
              this.operateStatusText = "取消驳回";
              break;
            default:
              break;
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 收起
    toggleShow(val) {
      this[val] = !this[val];
    },
    // 我的经纪人
    goAgent(id) {
      this.$router.push({
        path: `/${this.lang}/agent/${id}`
      });
    },
    // 获取取消订单原因
    getCancelReason() {
      let params = {};
      params.url = this.$apis.api_order_cancel_reason;
      this.$net.req(params, this).then(
        res => {
          this.cancelOrderReasonList = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 取消订单
    cancelOrder() {
      if (Number(this.data.operateStatus) == 1) {
        this.$Dialog
          .confirm({
            message: "确定取消订单？",
            cancelButtonText: "暂不取消"
          })
          .then(() => {
            let params = {};
            params.url = this.$apis.api_order_cancel;
            params.data = {
              orderId: this.data.id
            };
            this.$net.req(params, this).then(
              res => {
                if (Number(res.code) === 0) {
                  this.$Toast("订单取消成功");
                  setTimeout(() => {
                    this.$router.go(-1);
                  }, 1000);
                } else {
                  this.$Toast(res.msg);
                }
              },
              e => {
                this.$Toast(e.msg);
              }
            );
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 去支付
    goPay(item) {
      window.localStorage.setItem("orderInfoId", item.id);
      this.$router.push({
        path: `/${this.lang}/orderInfo/${item.id}`
      });
    },
    //查看详情
    showDetail() {
      let info = this.data.houseInfo;
      if (info.id && info.rentHouseType == 1) {
        this.$router.push({
          path: `/${this.lang}/building/${info.id}`
        });
      }
    }
  }
};
</script>

<style scoped lang='less'>
.order-detail-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  .wrap {
    > div {
      background: #fff;
      padding: 0 20px;
      margin: 0 0 10px;
    }
    > div:last-child {
      margin-bottom: 0;
      padding-bottom: 15px;
    }
    .font_b {
      p {
        color: #222;
        font-size: 14px;
      }
      span {
        color: #222;
        font-size: 20px;
        font-weight: 500;
      }
    }
    .order {
      .header {
        height: 40px;
        border-bottom: 1px solid #ddd;
        p {
          color: #333;
          font-size: 14px;
        }
        span {
          color: #ff523d;
          font-size: 14px;
        }
      }
      .content {
        color: #999;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
        > div {
          margin: 10px 0;
          p {
            flex-shrink: 0;
          }
        }
        .pay {
          color: #444;
        }
      }
      .footer {
        height: 40px;
        justify-content: flex-end;
        p {
          color: #999;
          font-size: 14px;
          width: 75px;
          height: 25px;
          border-radius: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid rgba(153, 153, 153, 1);
        }
        p.disabled {
          background: #eee;
        }
      }
    }
    .agent {
      .room {
        border-bottom: 1px solid #ddd;
        padding: 15px 0 10px;
        img {
          width: 105px;
          height: 80px;
          border-radius: 4px;
          margin-right: 15px;
          flex-shrink: 0;
        }
        h5 {
          font-size: 18px;
          color: #222;
          height: 44px;
          line-height: 22px;
          overflow: hidden;
        }
        p {
          color: #bbb;
          font-size: 13px;
          max-height: 30px;
          line-height: 15px;
          overflow: hidden;
        }
      }
      .footer {
        height: 50px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 30px;
          margin: 0 5px 0 0;
        }
        span {
          font-size: 13px;
          color: #222;
        }
        p {
          color: #bbb;
          font-size: 14px;
          i {
            margin-left: 5px;
            font-size: 12px;
          }
        }
      }
    }
    .list {
      > .header {
        padding: 20px 0 15px;
        h4 {
          font-size: 20px;
          color: #222;
        }
        p {
          color: #bbb;
          font-size: 14px;
          i {
            margin-left: 5px;
            transition: all 0.3s;
            transform: rotate(180deg);
            display: inline-block;
            font-size: 14px;
          }
          i.active {
            transform: rotate(0);
          }
        }
      }
      .content {
        margin-top: -5px;
        color: #999;
        font-size: 14px;
        > div {
          margin: 0 0 10px;
        }
      }
      .card {
        padding: 0 15px;
        background: #f9f9f9;
        border-radius: 8px;
        margin-bottom: 15px;
        .head {
          height: 40px;
          h5 {
            color: #222;
            font-size: 14px;
          }
          p {
            color: #222;
            font-size: 14px;
            i {
              font-size: 12px;
            }
          }
        }
        .message {
          color: #999;
          font-size: 14px;
          margin-top: -10px;
          > div {
            margin: 10px 0;
          }
        }
        .foot {
          height: 44px;
          border-top: 1px solid #ddd;
          p {
            color: #444;
            font-size: 14px;
          }
          span {
            color: #999;
            flex-shrink: 0;
            font-size: 14px;
          }
          span.active {
            color: #ff523d;
          }
          span.pay {
            width: 60px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: #fff;
            background: linear-gradient(
              135deg,
              rgba(255, 143, 85, 1) 0%,
              rgba(255, 108, 80, 1) 51%,
              rgba(255, 84, 61, 1) 100%
            );
            border-radius: 13px;
          }
        }
      }
      > .footer {
        height: 44px;
        border-top: 1px solid #ddd;
        p {
          color: #222;
          font-size: 14px;
        }
        h5 {
          color: #222;
          font-size: 20px;
        }
        span {
          color: #999;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
