<template>
  <div class="apply-detail-wrap">
    <nav-bar title="申请详情"/>
    <div class="wrap">
      <!-- 状态 -->
      <div>
        <div class="wrap-padding server">
          <div class="header flex_sb align-c">
            <h4>{{data.applyStatusText}}</h4>
          </div>
          <div class="content">
            <div class="message">
              <div class="flex align-c">
                <p>{{data.applyStatusDesc}}</p>
              </div>
            </div>
            <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 class="info">
                <h5>{{data.houseInfo.houseName}}</h5>
                <div class="flex">
                  <p>{{data.houseInfo.moneySymbol}}</p>
                  <span>{{data.houseInfo.roomPrice}}</span>
                  <i>/{{data.houseInfo.rentTimeUnit}}</i>
                </div>
              </div>
            </div>
          </div>
          <div class="footer flex_sb align-c">
            <p>咨询编号：{{data.applyCode}}</p>
            <span
              v-clipboard:copy="data.applyCode"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >复制</span>
          </div>
        </div>
      </div>
      <!-- 顾问 -->
      <div v-if="data.agentInfo">
        <div class="wrap-padding agent">
          <div class="header flex_sb align-c">
            <h4>我的顾问</h4>
          </div>
          <div class="content">
            <div class="flex">
              <img :src="data.agentInfo.agentAvatar" alt="" v-if="data.agentInfo.agentAvatar">
              <img src="../../assets/imgs/avatar.png" alt="" v-else>
              <div>
                <h5>{{data.agentInfo.agentName}}</h5>
                <p>{{data.agentInfo.agentIntro}}</p>
              </div>
            </div>
            <div class="btn">
              <van-button
                type="default"
                class="wechat"
                v-clipboard:copy="data.agentInfo.wechatId"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">
                复制微信
              </van-button>
              <a :href="'tel:' + data.agentInfo.mobile" class="phone">拨打电话</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 申请信息 -->
      <div>
        <div class="wrap-padding message">
          <div class="header flex_sb align-c">
            <h4>申请信息</h4>
          </div>
          <div class="content">
            <div class="message">
              <div class="flex_sb align-c">
                <p>入住人：</p>
                <span>{{data.name}}</span>
              </div>
              <div class="flex_sb align-c">
                <p>联系电话：</p>
                <span>{{data.mobile}}</span>
              </div>
              <div class="flex_sb align-c">
                <p>电子邮箱：</p>
                <span>{{data.email}}</span>
              </div>
              <div class="flex_sb align-c">
                <p>微信号：</p>
                <span>{{data.wechatId}}</span>
              </div>
              <div class="flex_sb align-c">
                <p>入住时间：</p>
                <span>{{data.liveTime}}</span>
              </div>
              <div class="flex_sb align-c">
                <p>备注：</p>
                <span>{{data.extremarks || '无'}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "ApplyDetail",
  components: {
    NavBar
  },
  data() {
    return {
      data: {},
      lang: this.$store.state.langStr
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_user_order_apply_detail;
      params.data = {
        id: this.$route.params.id
      };
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    //查看详情
    showDetail() {
      let info = this.data.houseInfo;
      if (info.id && info.rentHouseType == 1) {
        this.$router.push({
          path: `/${this.lang}/building/${info.id}`
        });
      }
    },
    // 复制
    onCopy: function() {
      this.$Toast("复制成功");
    },
    onError: function() {
      this.$Toast("复制失败，请手动选择复制。");
    }
  }
};
</script>

<style scoped lang='less'>
.apply-detail-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  .wrap {
    > div {
      margin-bottom: 10px;
      background: #fff;
      .wrap-padding {
        padding: 0 20px;
        .header {
          height: auto;
          padding: 20px 0 15px;
          h4 {
            color: #222;
            font-size: 20px;
          }
        }
        .content {
          .room {
            padding: 0 0 15px;
            margin-top: -5px;
            img {
              width: 133px;
              height: 100px;
              border-radius: 4px;
              margin-right: 15px;
              flex-shrink: 0;
            }
            .info {
              h5 {
                color: #222;
                font-size: 17px;
                max-height: 60px;
                line-height: 20px;
                overflow: hidden;
                margin: 0 0 12px;
                word-break: break-word;
              }
              div {
                align-items: baseline;
                p {
                  color: #ff523d;
                  font-size: 14px;
                }
                span {
                  color: #ff523d;
                  font-size: 24px;
                  font-weight: bold;
                }
                i {
                  color: #222;
                  font-size: 14px;
                }
              }
            }
          }
          .message {
            color: #999;
            font-size: 14px;
            > div {
              margin: 10px 0;
              p {
                flex-shrink: 0;
                margin-right: 26px;
              }
            }
            .pay {
              color: #444;
            }
          }
        }
        .footer {
          height: 40px;
          border-top: 1px solid #ddd;
          p {
            color: #222;
            font-size: 14px;
          }
          i {
            color: #bbb;
            font-size: 14px;
          }
        }
      }
      .wrap-padding.server {
        .header {
          padding-bottom: 8px;
        }
        .content {
          .message {
            color: #bbb;
            > div {
              margin: 0 0 15px;
            }
          }
        }
        .footer {
          height: 50px;
          p {
            color: #999;
          }
          span {
            color: #ff523d;
            font-size: 14px;
          }
        }
      }
      .wrap-padding.message {
        padding-bottom: 15px;
        .content {
          margin-top: -15px;
        }
      }
      .wrap-padding.agent {
        padding-bottom: 15px;
        .content {
          .flex {
            margin: 0 0 15px;
          }
          img {
            width: 70px;
            height: 70px;
            border-radius: 70px;
            margin-right: 15px;
            flex-shrink: 0;
          }
          h5 {
            font-size: 18px;
            color: #222;
            margin-bottom: 5px;
          }
          p {
            font-size: 13px;
            color: #999;
            line-height: 19px;
            word-wrap: break-word;
            overflow: hidden;
            word-break: break-all;
          }
          .btn {
            display: flex;
            button,
            .phone {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              height: 45px;
              border-radius: 25px;
              font-size: 18px;
              background: #ff523d;
              border: 1px solid #ff523d;
              i {
                color: #fff;
                font-size: 14px;
                margin-right: 10px;
              }
              a {
                color: #fff;
              }
            }
            button:first-child {
              margin-right: 10px;
              color: #ff523d;
              background: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
