<template>
  <sail-page type="maintenanceDetail" title="维保详情">
    <div slot="content">
        <van-nav-bar
          title="维保详情"
          left-arrow
          @click-left="back"
        />
        <div class="maintenance-detail-wrapper">
            <!-- <DetailFlow :flowList="flowList"></DetailFlow> -->
            <!-- <div class="detailFlow-header">
              <span>维保编号： 1738999999999</span>
            </div> -->
            <van-steps
              :active="tabActive"
              :title="`维保编号： ${maintenanceDetail.repairCode}`"
            >
              <van-step v-for="(item, index) in flowList" :key="index">{{item.name}}</van-step>
            </van-steps>
            <div v-for="(repairStatus, rIndex) in cycleRepairList" :key="rIndex">
              <FlowCard v-for="(item, index) in repairStatus[1].list" :key="index" isGreen tip="申请维保">
                <div slot="content">
                    <p>申请时间：{{item.operationTime | accurateTime}} </p>
                    <p>类型：{{item.typeName || '没有数据'}} </p>
                    <p>上门时间：{{item.goRepairTime | normalDate}} </p>
                    <p><span class="parallel">备注</span>：<span class="parallel spec-parallel">{{item.remark}}</span></p>
                    <div class="maintenance-img-list">
                         <img v-for="(item, index) in maintenanceDetail.props" :key="index" class="img-item" :src="`${hostURL}${item.propValue}`" alt="">
                       <!-- <div class="img-item"></div>
                       <div class="img-item"></div>
                       <div class="img-item"></div> -->
                    </div>
                </div>
              </FlowCard>
              <FlowCard v-for="(item, index) in repairStatus[3].list" :key="`${index}s`" :isGreen="false" isRed tip="撤销维保">
                <div slot="content">
                    <p style="padding-bottom: 30px">撤销时间：{{item.operationTime | accurateTime}} </p>
                </div>
              </FlowCard>
              <FlowCard isGreen tip="维保受理" v-for="(item, index) in repairStatus[2].list" :key="`${index}w`">
                <div slot="content">
                    <p>受理时间：{{item.acceptTime | accurateTime}} </p>
                    <p>受理维保人员：{{item.accepterName}} </p>
                    <p>联系方式：{{item.accepterPhone}} </p>
                </div>
              </FlowCard>
              <FlowCard isGreen tip="上门维修" v-for="(item, index) in repairStatus[4].list" :key="`${index}i`">
                <div slot="content">
                    <p>维修时间：{{item.operationTime | accurateTime}} </p>
                    <p>维保人员：{{item.operatorName}} </p>
                    <p>修理情况: {{item.remark}}</p>
                    <p>金额: <span class="mark-info">{{item.repairFee | currency}}</span></p>
                    <div class="maintenance-img-list">
                       <img :src="`${hostURL}${imgItem.propValue}`" v-for="(imgItem, imgIndex) in item.props" :key="imgIndex" class="img-item"></img>
                    </div>
                </div>
              </FlowCard>
              <FlowCard isGreen tip="重新预约" v-for="(item, index) in repairStatus[9].list" :key="`${index}wwss`">
                <div slot="content">
                    <p style="padding-bottom: 30px">重新预约时间：{{item.goRepairTime | normalDate}} </p>
                </div>
              </FlowCard>
              <FlowCard isGreen tip="支付" v-for="(item, index) in repairStatus[7].list" :key="`${index}wwss`">
                <div slot="content">
                    <p style="padding-bottom: 30px">支付时间：{{item.operationTime | accurateTime}} </p>
                </div>
              </FlowCard>
              <FlowCard isGreen tip="评价" v-for="(item, index) in repairStatus[8].list" :key="`${index}ww`" isAdditional>
                <div slot="content">
                    <p>评价时间：{{item.operationTime | accurateTime}} </p>
                    <p>评价内容：{{item.evaluate}} </p>
                    <div class="maintenance-img-list">
                       <img :src="`${hostURL}${imgItem.propValue}`" v-for="(imgItem, imgIndex) in item.props" :key="imgIndex" class="img-item"></img>
                    </div>
                </div>
                <div slot="additional__txt">
                    <span class="sub-txt">评价</span>
                    <van-rate class="sub-txt" disabled disabled-color="#FF9E1A" v-model="item.evaluateLevel" />
                </div>
              </FlowCard>
            </div>
            
            <van-button v-if="currentStatus === 2" @click="reApply" size="large" class="submit-btn">重新申请</van-button>
            <van-button v-show="currentStatus === 7" size="large" @click="evaluateClick" class="submit-btn">评价</van-button>
            <!-- <van-button v-show="false" size="large" class="submit-btn">在线选房</van-button> -->
            <van-button :loading="loading" @click="cancelRepair" v-if="currentStatus === 1" size="large" class="submit-btn undo-btn">撤销维保</van-button>
            <div v-if="currentStatus === 4" class="maintenance-status__button">
                <van-button :loading="loading" @click="cancelRepair" class="submit-btn__half undo-btn">撤销维保</van-button>
                <van-button @click="againDoMaintenance" class="submit-btn__half gradient-green">重新预约</van-button>
            </div>
            <div class="maintenance-pay" v-show="currentStatus === 6">
               <p class="maintenance-pay_txt">付款方式</p>
               <cube-radio-group v-model="payMethod" :options="payOptions" :hollow-style="true" />
            </div>
            <van-submit-bar v-show="currentStatus === 6"
              :price="myFee"
              :loading="feeloading"
              label="金额:"
              button-text="支付"
              @submit="onSubmit"
            />
            <p class="explain-txt" v-if="currentStatus === 8 || currentStatus === 7">
              如果维保产品不能正常使用，可<span @click="againDoMaintenance">重新预约时间</span>
            </p>
            <!-- <div class="maintenance-detail__head">
               <p class="head-code">
                 申请编号：173891741972321
               </p>
            </div> -->
        </div>
    </div>
  </sail-page>
</template>

<script>
import sailPage from "@/components/sail-page.vue";
//import DetailFlow from "@/common/widget/detailFlow";
import FlowCard from "@/common/widget/flowCard";
import { Dialog } from "vant";
import { mapState } from "vuex";
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  components: {
    sailPage,
    //DetailFlow,
    FlowCard
  },
  computed: {
    ...mapState({
      maintenanceDetail: state => state.repairModule.maintenanceDetail,
      //repairStatus: state => state.repairModule.repairStatus,
      cycleRepairList: state => state.repairModule.cycleRepairList,
      newPayForm:state => state.myBillModule.newPayForm  
    }),
    myFee() {
      if(this.cycleRepairList.length === 0) {
        return 0;
      }
      let sum = 0;
      this.cycleRepairList.map(item => {
        if(item[4].list.length === 0) {
          sum += 0;
        }else {
          sum = item[4].list[0].repairFee * 100;
        }
      });
      return sum;
      
    },
    myFeeId() {
      if(this.cycleRepairList.length === 0) {
        return 0;
      }
      let id = 0;
      this.cycleRepairList.map(item => {
        if(item[4].list.length === 0) {
          id = 0;
        }else {
          id = item[4].list[0].id;
        }
      });
      return id;
      
    },
    tabActive() {
      let targetIndex = 0;
      let list = this.maintenanceDetail.operationList;
      this.currentStatus = this.maintenanceDetail.status;
      this.flowList.map((item, index) => {
        if (item.status === this.currentStatus) {
          targetIndex = index;
        }
      });
      if(this.maintenanceDetail.status === 6) {
        targetIndex = 3;
      }
      return targetIndex;
    }
  },
  asyncData({ store, route }) {
    let id = route.params.id;
    return store.dispatch("repairModule/cGetDetails", id).then(res => {
      
    });
  },
  mounted(){
    this.$store.commit("myBillModule/INTE_NEW_PAY_FORM");
  },
  initData() {},
  data: function() {
    return {
      // tabActive: 1,
      hostURL: URL,
      value: 3,
      feeloading: false,
      loading: false,
      currentStatus: 1,
      payMethod: "wePay",
      payOptions: [
        {
          label: "微信",
          value: "wePay"
        }
      ],
      flowList: [
        {
          name: "申请维保",
          status: 1
        },
        {
          name: "维保受理",
          status: 3
        },
        {
          name: "上门维修",
          status: 4
        },
        {
          name: "支付",
          status: 5
        },
        {
          name: "评价",
          status: 7
        },
        {
          name: "完成",
          status: 8
        }
      ]
    };
  },
  methods: {
    back() {
      this.$router.push("/userMaintenanceList");
    },
    onSubmit() {
      this.feeloading = true;
      this.newPayForm.businessId = this.myFeeId;
      this.newPayForm.orderAmount = this.myFee/100;
      this.newPayForm.orderTitle = "维保缴费";      
      this.newPayForm.orderType = "2";      
      this.newPayForm.remark = "";
      
      //return
      this.$store.dispatch("myBillModule/payBillNewByWx",
        this.newPayForm
      ).then(res=>{
        this.feeloading = false;           
        if(res.data.code === 10000){             
          location.href = res.data.data.ccbPay;
        }else{
          res.Toast.fail(res.data.msg);
          return;
        }
      });
      // this.$store.dispatch('repairModule/cPayment', {
      //   id: this.myFeeId,
      //   repairFee: this.myFee/100
      // }).then(res => {
      //   this.feeloading = false
      //   if(res.data.code === 10000) {
      //     location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc03a72497d53424&redirect_uri=http%3a%2f%2fc.sailapartment.com%2fwx%2fwxuser.html&response_type=code&scope=snsapi_base&state=${
      //       res.data.data.wxPay
      //     }&connect_redirect=1#wechat_redirect`;
      //   }        
      //   // if(res.data.code === 10000) {
      //   //    location.href = res.data.data.ccbPay
      //   // }
      //   else {
      //     res.Toast(res.data.msg)
      //     return
      //   }
      // })
    },
    reApply() {
      this.$router.push({path: "/maintenanceApply/normal/normal"});
    },
    evaluateClick() {
      this.$router.push({path: `/evaluateRepair/${this.maintenanceDetail.id}`});
    },
    againDoMaintenance() {
      //this.againLoading = true;
      this.$router.push({path: `/maintenanceApply/${this.maintenanceDetail.id}/${this.maintenanceDetail.repairCode}`});
    },
    cancelRepair() {
      Dialog.confirm({
        title: "撤销维保",
        message: "确定撤销维保申请"
      }).then(() => {
        this.loading = true;
        this.$store
          .dispatch("repairModule/cRevokeRepair", this.$route.params.id)
          .then(res => {
            this.loading = false;
            if(res) {
              this.$store.commit("repairModule/CHANGE_REPAIR_STATUS", 2);
              this.cycleRepairList[this.cycleRepairList.length - 1][3].list.push({
                operType:3,
                operationTime:res.data.data.revokeTime
              });
            }

          });
      }).catch(() => {
        // on cancel
      });
      
    }
  }
};
</script>
<style lang="less">
@nice-bold: #222222;
@nice-red: #ff2929;
@nice-gray: #747474;
.maintenance-detail-wrapper {
  padding-bottom: 10vh;
  .parallel {
    display: inline-block;
    vertical-align: top;
  }
  .spec-parallel {
    display: inline-block;
    width: 85%;
    word-break: break-word;
  }
  .cube-radio-wrap {
    padding: 11px 11px;
  }
  .cube-radio {
    padding: 0;
  }
  .cube-radio-ui {
    margin-right: 1.02em;
  }
  .cube-radio-label {
    color: @nice-bold;
  }
  .van-button--danger {
    background: linear-gradient(to right, #5fcea1, #2baa76);
    border: 0;
  }
  .van-submit-bar__price span {
    font-weight: bold;
  }
  .van-submit-bar__price {
    color: @nice-gray;
    text-align: left;
    font-size: 15px;
    margin-left: 25%;
  }
  .van-submit-bar__price-integer,
  .van-submit-bar__price-decimal {
    color: @nice-red;
    font-weight: bold;
  }
  .van-submit-bar__price-integer {
    padding-left: 15px;
  }
  .van-step--horizontal {
    text-align: left;
  }
  .van-steps__message {
    margin-bottom: 2px;
  }
  .van-steps__title {
    text-align: left;
    color: #222222;
    text-shadow: 0 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: #747474;
@nice-blue: #4f7bf2;
@nice-bold: #222222;
@nice-red: #ff2929;

.maintenance-detail-wrapper {
  .mark-info {
    color: @nice-red;
  }
  .maintenance-status__button {
    margin-left: -15px;
  }
  .maintenance-pay {
    padding-bottom: 30.63px;
  }
  .maintenance-pay_txt {
    color: @nice-bold;
    margin-top: 14.5px;
    margin-bottom: 11.5px;
    margin-left: 18px;
    text-align: left;
  }
  .sub-txt {
    display: inline-block;
    vertical-align: middle;
  }
  .explain-txt {
    color: @nice-gray;
    font-size: 13px;
    margin-top: 16.5px;
    span {
      color: @nice-blue;
      padding-left: 8px;
    }
  }
  .maintenance-img-list {
    display: flex;
    justify-content: start;
    .img-item {
      width: 65.24px;
      height: 65.24px;
      background: white;
      margin-right: 13.76px;
      margin-top: 10.5px;
    }
  }
}
</style>1
