<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">报修记录</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="已显示所有数据"
      @load="GetRepaireList"
    >
      <van-cell
          v-for="item in listdata"
          :key="item.vrepairapplycode"

          border
        >
          <template #default>

            <van-row class="borderTop"  @click="toDetail(item.vrepairapplycode)">
              <van-col span="24">
                <van-row>
                  <van-col span="5" class="title1">维修类型</van-col>
                  <van-col span="19">{{ item.billtypeName }}</van-col>
                </van-row>
                  <van-row>
                  <van-col span="5" class="title1">报修时间</van-col>
                  <van-col span="19">{{ item.dapplydate }}</van-col>
                </van-row>
                 <van-row>
                  <van-col span="5" class="title1">维修时间</van-col>
                  <van-col span="19">{{ item.drequiredate }}</van-col>
                </van-row>

               <van-row>
                  <van-col span="5" class="title1">维修状态</van-col>
                  <van-col span="19" >{{item.vbillstatusName}}</van-col>
                </van-row>
              </van-col>

            </van-row>
          </template>
        </van-cell>
    </van-list>
  </div>
</template>

<script>
import { GetRepaireList } from '@/common/api/loginApi.js'
export default {
  name: 'login',
  data () {
    return {
      listdata: [], // 欠费信息
      radio: '', // 单选框

      loading: false,
      finished: false
    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);
    this.$util.persistLogin(this)
  },
  methods: {
    GetRepaireList: function () {
      var that = this
      let phone = that.$store.state.data.tel
      if (that.$util.isEmpty(phone)) {
        that.$router.push('/')
        return
      }
      GetRepaireList(phone).then((res) => {
        console.info('GetRepaireList', res)
        if (!res.isSuccess) {
          that.$toast(res.errMsg)
          return
        }
        res.data.forEach(function (item, index, array) {
          // eslint-disable-next-line eqeqeq
          if (item.billtype == 2) {
            item.billtypeName = '整改通知单'
          // eslint-disable-next-line eqeqeq
          } else if (item.billtype == 3) {
            item.billtypeName = '投诉单'
          // eslint-disable-next-line eqeqeq
          } else if (item.billtype == 4) {
            item.billtypeName = '咨询单'
          // eslint-disable-next-line eqeqeq
          } else if (item.billtype == 5) {
            item.billtypeName = '增值服务单'
          } else {
            item.billtypeName = '报事单'
          }

          // eslint-disable-next-line eqeqeq
          if (item.vbillstatus == 2) {
            item.vbillstatusName = '已处理未回访'
          // eslint-disable-next-line eqeqeq
          } else if (item.vbillstatus == 3) {
            item.vbillstatusName = '已回访'
          } else {
            item.vbillstatusName = '已报事未处理'
          }
          that.$set(that.listdata, index, item)
        })
        that.loading = false
        that.finished = true
      })
    },
    // 单选按钮点击事件
    jiaofei: function (event, id) {
      // console.info("click1 event", event);
      // console.info("click1 value", id);
      // console.info("click1", e.target.innerText);
      this.$toast('缴费业务未开通')
    },
    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.go(0)
    },
    toDetail (code) { // 点击进入详情页
      this.$router.push('GetRepairDetail?code=' + code)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
  color: #999;
}
.value1 {
  color: #999;
  font-size: 18px;
}
</style>
