<template>
  <sail-page type="ApplyDetail" title="申请详情">
    <div slot="content">
        <div class="apply-detail-wrapper">
            <!-- <DetailFlow :flowList="flowList"></DetailFlow> -->
            <van-nav-bar
              title="申请详情"
              left-arrow
              @click-left="back"
            />
            <van-steps
              :active="tabActive"
              :title="`申请编号：${applyDetail.applyCode}`"
            >
              <van-step v-for="(item, index) in flowList" :key="index">{{item.name}}</van-step>
            </van-steps>
            <FlowCard tip="申请入住" :isAdditional="applyDetail.marryStatus === 1" isGreen>
              <div slot="content">
                  <p>申请时间：{{applyDetail.applyTime | accurateTime}} </p>
                  <p>申请人：{{applyDetail.applicantName}} </p>
                  <p>身份证号：{{applyDetail.applicantCardCode}} </p>
                  <p>联系方式：{{applyDetail.applicantPhone}} </p>
                  <p>性别：{{sexMap[applyDetail.applicantSex]}} </p>
                  <p>学历：{{applyDetail.educationName}} </p>
                  <p>职业：{{applyDetail.occupationName}} </p>
                  <p>是否为党员：{{applyDetail.partyMember === 1 ? '是' : '否'}} </p>
                  <p>所在单位：{{applyDetail.company}} </p>
                  <p>申请项目：{{applyDetail.regionName}} </p>
              </div>
              <div slot="additional__txt" class="mark-info">
                  <p>婚姻状态：已婚 </p>
                  <p>配偶姓名：{{applyDetail.spouseName}} </p>
                  <p>配偶联系方式：{{applyDetail.spousePhone}} </p>
                  <p>配偶身份证号：{{applyDetail.spouseCardCode}}</p>
              </div>
            </FlowCard>
            <FlowCard tip="核验资料" v-show="(applyDetail.status !== 1 && applyDetail.status !== 3 && applyDetail.status !== 8 && applyDetail.status !== 4) " :isGreen="applyDetail.checkStatus === 2">
              <div slot="content">
                  <p>核验时间：{{applyDetail.checkTime | chinaDate }} </p>
                  <p>核验情况：{{checkMap[applyDetail.checkStatus]}} </p>
                  <p v-show="applyDetail.checkPeopleName">核验人：{{applyDetail.checkPeopleName}}</p>
                  <p v-show="applyDetail.checkStatus === 3">备注：{{applyDetail.checkAppplyMsg}} </p>
              </div>
            </FlowCard>
            <FlowCard tip="备案" v-show="(applyDetail.status !== 1 && applyDetail.status !== 3 && applyDetail.status !== 8 && applyDetail.status !== 9 && applyDetail.status !== 16 && applyDetail.status !== 4) " :isGreen="applyDetail.keepOnRecordStatus === 2">
              <div slot="content">
                  <p>备案时间：{{applyDetail.keepOnRecordTime | chinaDate }} </p>
                  <p>核验情况：{{keepOnMap[applyDetail.keepOnRecordStatus]}} </p>
                  <p v-show="applyDetail.keepOnRecordStatus === 3">备注：{{applyDetail.keepOnRecordDesc}} </p>
              </div>
            </FlowCard>
            <FlowCard tip="在线选房" v-show="applyDetail.status !== 3 && applyDetail.status !== 1 && applyDetail.status !== 2 && applyDetail.status !== 8 && applyDetail.status !== 9 && applyDetail.status !== 4 && applyDetail.status !== 16 && applyDetail.status !== 17" isGreen isAdditional>
              <div slot="content">
                  <p>提交时间：{{applyDetail.chooseTime | accurateTime}} </p>
                  <p>预约项目：{{applyDetail.chooseRegionName || '没有数据'}} </p>
                  <p>预约户型：{{applyDetail.chooseLayoutName || '没有数据'}} </p>
                  <p>预约房间：{{`${applyDetail.chooseBuildingNum || '(无数据)'}栋${applyDetail.chooseUnit || '(无数据)'}单元${applyDetail.chooseFloor || '(无数据)'}层${applyDetail.chooseRoomNum || '(无数据)'}号`}}</p>
              </div>
             
            </FlowCard>
            <FlowCard tip="缴纳定金" v-show="applyDetail.status !== 3 && applyDetail.status !== 1 && applyDetail.status !== 2 && applyDetail.status !== 8 && applyDetail.status !== 4 && applyDetail.status !== 9 && applyDetail.status !== 16&& applyDetail.status !== 17" isGreen isAdditional>
              <div slot="content">
                  <p>缴费时间：{{applyDetail.payTime|accurateTime}} </p>
                  <p>订单编号：{{applyDetail.paymentPo?applyDetail.paymentPo.orderCode:''}} </p>
                  <p>金额：<span style="color:#E58E45;">{{applyDetail.fee | currency}}</span></p>
                  <p>状态：{{applyDetail.payStatusName}}</p>
              </div>
              <div slot="additional__txt" class="mark-info">                  
                <router-link to="/reservationProtocol">
                    <p style="color:#E58E45;">
                      
                        赛嶺公寓预定协议
                        <svg class="icon depoist-icon" aria-hidden="true">
                            <use xlink:href="#icon-qianjin"/>
                        </svg>                   
                    </p>
                  </router-link>
              </div>
              <div slot="additional__txt" class="mark-info" v-if="applyDetail.status===5">
                  <p>请于 {{applyDetail.lockDay}}之前 前往{{applyDetail.chooseAddress}} 办理入住。 </p>
                  <p>地址：{{applyDetail.chooseProvinceName}}{{applyDetail.chooseCityName}}{{applyDetail.chooseDistrictName}} </p>
                  <p>过期房间将不予保留，请准时前往。</p>
              </div>
            </FlowCard>
            <FlowCard tip="办理入住" v-show="applyDetail.status === 5" isGreen>
              <div slot="content" class="mark-info" v-if="applyDetail.status===5">
                  <p>请于 {{applyDetail.lockDay}}之前 前往{{applyDetail.chooseAddress}} 办理入住。 </p>
                  <p>地址：{{applyDetail.chooseProvinceName}}{{applyDetail.chooseCityName}}{{applyDetail.chooseDistrictName}} </p>
                  <p>过期房间将不予保留，请准时前往。</p>
              </div>
            </FlowCard>
            <FlowCard tip="办理入住" v-show="applyDetail.status === 6" isGreen>
              <div slot="content">
                  <p>办理时间：{{applyDetail.handleTime|normalDate}} </p>
                  <p>项目：{{applyDetail.regionName}} </p>
                  <p>户型：{{applyDetail.layoutName}} </p>
                  <p>房间：{{`${applyDetail.buildingNum}栋${applyDetail.unit}单元${applyDetail.floor}层${applyDetail.roomNum}号`}}</p>
                  <p>合同有效期：{{applyDetail.liveStartTime|normalDate}} - {{applyDetail.liveEndTime|normalDate}} </p>
              </div>
            </FlowCard>
            <div slot="additional__txt" v-if="applyDetail.status===2">
                  <p style="text-align: left;color:red;padding-left: 15px;margin-top: 15px;">在线选房功能暂未开放，请前往赛嶺公寓线下选房并办理入住。</p>
              </div>
            <!-- <FlowCard tip="完成" v-show="applyDetail.status === 6" isGreen>
              <div slot="content" style="padding-bottom: 10px;">
                  <p style="padding-top: 10px;">完成</p>
                  
              </div>
            </FlowCard> -->
            <FlowCard v-show="applyDetail.status === 7" tip="办理入住" :isGreen="false">
              <div slot="content" >
                  <p style="color: #D63B3B;padding-bottom:30px">未在规定时间办理入住，过期失效。</p>
              </div>
            </FlowCard>
            <FlowCard v-show="applyDetail.status === 8" tip="撤销申请" :isGreen="false">
              <div slot="content" >
                  <p style="padding-bottom:30px">撤销时间：{{applyDetail.cancelTime|accurateTime}}</p>
              </div>
            </FlowCard>

            <van-button @click="applyRefund" :loading="loading" v-show="applyDetail.status === 7" size="large" class="submit-btn gradient-green">申请退款</van-button>
            <van-button @click="reApply" :loading="loading" v-show="applyDetail.status === 8 || applyDetail.status === 9" size="large" class="submit-btn gradient-green">重新申请</van-button>
           <!--<van-button @click="onlineSelectedHouse" v-show="applyDetail.checkStatus === 2 && applyDetail.status === 2" size="large" class="submit-btn gradient-green">在线选房</van-button>  
            <van-button @click="onlineSelectedHouse" v-show="applyDetail.status === 12 || applyDetail.status === 14" size="large" class="submit-btn gradient-green">重新选房</van-button> -->
            <van-button :loading="loading" @click="cancelApply" v-show="applyDetail.status === 4" size="large" class="submit-btn undo-btn">撤销申请</van-button>
             <!-- <van-button :loading="loading" @click="payApply" v-show="applyDetail.status === 10" size="large" class="submit-btn gradient-green">支付</van-button> -->
        </div>
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
//import DetailFlow from '@/common/widget/detailFlow'
import FlowCard from "@/common/widget/flowCard";
import { Dialog } from "vant";
  
export default {
  computed: {
    ...mapState({
      applyDetail: state => state.applyModule.applyDetail,
    }),
    tabActive() {
      let targetIndex = 0;
      this.flowList.map((item, index) => {
        if(this.applyDetail.status === item.status) {
          targetIndex = item.index;
        }
      });
      if(this.applyDetail.status === 4) {
        targetIndex = 1;
      }
      if(this.applyDetail.status === 3) {
        targetIndex = 1;
      }
      if(this.applyDetail.status === 6) {
        targetIndex = 5;
      }
      if(this.applyDetail.status === 7) {
        targetIndex = 3;
      }
      if(this.applyDetail.status === 9) {
        targetIndex = 1;
      }
      if(this.applyDetail.status === 8) {
        targetIndex = 0;
      }
      if(this.applyDetail.status === 12) {
        targetIndex = 4;
      }
      if(this.applyDetail.status === 13) {
        targetIndex = 4;
      }
      if(this.applyDetail.status === 14) {
        targetIndex = 4;
      }
      if(this.applyDetail.status === 15) {
        targetIndex = 3;
      }
      if(this.applyDetail.status === 17) {
        targetIndex = 2;
      }
      return targetIndex;
    }
  },
  asyncData({store, route}) {
    let id = route.params.id;
    return store.dispatch("applyModule/applyLiveDetail", id).then(res => {
         
    });
  },
  components: {
    sailPage,
    //DetailFlow,
    FlowCard
  },
  data: function(){
    return {
      loading: false,
      sexMap: {
        1: "男",
        2: "女"
      },
      checkMap: {
        0:"核验中",
        2: "申请通过",
        3: "申请不通过"
      },
      keepOnMap:{
        0:"核验中",
        2: "备案通过",
        3: "备案不通过"
      }, 
      flowList: [{
        name: "申请入住",
        status: 0,
        index: 0
      }, {
        name: "核验资料",
        status: 1,
        index: 1
      },
      {
        name: "备案",
        status: 16,
        index: 2
      },
      {
        name: "在线选房",
        status: 2,
        index: 3
      },
      {
        name: "缴纳定金",
        status: 10,
        index: 4
      },
      {
        name: "办理入住",
        status: 5,
        index: 5
      }
        // , {
        //   name: "完成",
        //   status: 6,
        //   index: 5
        // },
      ]
    }; 
  },
  methods: {
    back() {
      this.$router.push({path:"/userApplyList"});
      //this.$router.back()
    },
    applyRefund() {
      Dialog.alert({
        title: "提示",
        message: "请前往赛嶺公寓办理退款"
      });
    },
    reApply() {
      
      this.$router.push({path: "/applyCheckIn"});
    },
    cancelApply() {
      Dialog.confirm({
        title: "撤销申请",
        message: "确定撤销申请?"
      }).then(() => {
        this.$store.dispatch("applyModule/cancelApply", this.applyDetail.id).then(res => {
          //this.loading = false;
          if(res.data.code === 10000) {
            res.Toast.success("撤销申请成功！");
            this.$store.commit("applyModule/CHANGE_APPLY_DETAIL_STATUS", 8);
          }
        });
      }).catch(() => {
        // on cancel
      });
      //this.loading = true;
        
    },
    onlineSelectedHouse() {
      this.$router.push({ path: `/onlineSelectHouse/${this.$route.params.id}` }); // -> 编程式跳转
    },
    payApply() {
      this.$router.push("/payDepositBill/detailPay");
    }
  }
};
</script>
<style lang="less">
  .apply-detail-wrapper {
    overflow: hidden;
    padding-bottom: 20px;
    .van-step--horizontal {
        text-align: left;
    }
    .van-steps__message {
      margin-bottom: 2px;
    }
    .van-steps__title {
        text-align: left;
        color: #222222;
        text-shadow:0 .2px #222222;
        background: white;
        font-size: 14px;
    }    
    .van-steps--horizontal .van-steps__items {
        overflow: initial;
    }
    .van-step--horizontal .van-step__title {
      // width: 30px;
      // margin-top: -15px;
      // margin-left: 5px;
    }
    .van-step--horizontal:last-child .van-step__title {
      position: relative;
      left: 10px;
    }
  }
</style>
<style lang="less" scoped>
    @nice-gray: #585858;
    @nice-red: #D63B3B;
    .apply-detail-wrapper {
      .mark-info {
        color: @nice-red;
        margin-left: -30px;
        position: relative;
        .depoist-icon {
          position: absolute;
          top: 5px;
          right: 10px;
          font-size: 14px;
          color:#222222;
        }
      }
    }
</style>1