<template>
  <sail-page type="userMaintenanceList" title="我的维保">
    <div slot="content">
        <van-nav-bar
          title="我的维保"
          left-arrow
          @click-left="back"
        />
        <emptyPageCard :isEmptyType="maintenanceList.length === 0?'maintenance':'normal'"/>
        <div class="maintenance-list-wrapper">
            <StatusCard :code="item.repairCode" :statusDesc="statusMap[item.status]" v-for="(item, index) in maintenanceList" :key="index" :targetUrl="`/maintenanceDetail/${item.id}`" iconType="maintenance">
              <div slot="content">
                 <p class="maintenance-user">类型：{{item.typeName || '没有数据'}} </p>
                 <p>上门时间：{{item.goRepairTime|normalDate}}</p>
                 <p><span class="parallel">备注</span>：<span class="parallel spec-parallel">{{item.remark}}</span></p>
              </div>
             <span slot="footer">价格：<span class="status-fee">{{item.repairFee | currency}} 元</span></span>
            </StatusCard>
        </div>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import StatusCard from "@/common/widget/statusCard";
import { mapState } from "vuex";
import emptyPageCard from "@/common/widget/emptyPageCard.vue";
export default {
  components: {
    sailPage,
    StatusCard,
    emptyPageCard
  },
  computed: {
    ...mapState({
      maintenanceList: state => state.repairModule.maintenanceList
    })
  },
  asyncData({store, route}) {
    return store.dispatch("repairModule/findMaintenanceList").then(res => {
         
    });
  },
  data: function(){
    // 1待受理 2.已撤销3.待上门维修/已受理 4.待处理（上门维修未维修好） 5.待支付(15天内维保期公寓支付给第三方) 6.待收款/待支付（客户支付） 7.待评价 8.已完成 ,
    return {
      statusMap: {
        1: "待受理",
        2: "已撤销",
        3: "已受理",
        4: "待处理",
        5: "待支付",
        6: "待支付",
        7: "待评价",
        8: "已完成"
      }
    }; 
  },
  methods: {
    back() {
      this.$router.push("/MyPage");
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
    @nice-gray: #585858;
    @nice-red: #FF2929;
    .maintenance-list-wrapper {
      margin-top: 12px;
      .parallel {
        display: inline-block;
        vertical-align: top;
      }
      .spec-parallel {
        display: inline-block;
        width: 85%;
        word-break: break-word;
      }
      .maintenance-user {
        color: @nice-gray;
        font-weight: bold;
      }
      .status-fee {
        color: @nice-red;
      }
    }
</style>1