<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">{{baoshi}}详情</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-cell

          border
        >
          <template #default>

            <van-row class="borderTop"  >
              <van-col span="24">
                   <van-row>
                  <van-col span="5" class="title1">门牌房号</van-col>
                  <van-col span="19">{{ hname }}</van-col>
                </van-row>
                 <van-row>
                  <van-col span="5" class="title1">业主</van-col>
                  <van-col span="19">{{ ownername }}</van-col>
                </van-row>
                  <van-row>
                  <van-col span="5" class="title1">{{baoshi}}位置</van-col>
                  <van-col span="19">{{ data.vplace }}</van-col>
                </van-row>
                  <van-row>
                  <van-col span="5" class="title1">{{baoshi}}内容</van-col>
                  <van-col span="19">{{ data.vcontent }}</van-col>
                </van-row>
                <van-row>
                  <van-col span="5" class="title1">{{baoxiu}}类型</van-col>
                  <van-col span="19">{{ data.billtypeName }}</van-col>
                </van-row>
                  <van-row >
                  <van-col span="5" class="title1">{{baoxiu}}时间</van-col>
                  <van-col span="19">{{ data.dapplydate }}</van-col>
                </van-row>
                 <van-row v-show="isBaoxiuDate">
                  <van-col span="5" class="title1">维修时间</van-col>
                  <van-col span="19">{{ data.drequiredate }}</van-col>
                </van-row>

               <van-row>
                  <van-col span="5" class="title1">维修状态</van-col>
                  <van-col span="19" >{{data.vbillstatusName}}</van-col>
                </van-row>
              </van-col>
              <van-col span="24">
               <van-row>
                  <van-col span="5" class="title1">图片</van-col>
                  <van-col span="19" >
                      <van-uploader v-model="fileList" multiple disabled  :deletable='false'/>
                  </van-col>
                </van-row>
              </van-col>

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

  </div>
</template>

<script>
import { GetRepairDetail } from '@/common/api/loginApi.js'
export default {
  name: 'login',
  data () {
    return {
      hname: '',
      ownername: '',
      data: {}, // 报修详情信息
      fileList: [], // 图片列表
      baoshi: '',
      baoxiu: '',
      isBaoxiuDate: true

    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);

    this.$util.persistLogin(this)
    this.hname = this.$store.state.data.hname
    this.ownername = this.$store.state.data.ownername
    this.GetRepairDetail()
  },
  methods: {
    GetRepairDetail: function () {
      var that = this
      console.info('router', that.$route)
      let code = that.$route.query.code
      if (that.$util.isEmpty(code)) {
        that.$router.go(-1)
        return
      }
      GetRepairDetail(code).then((res) => {
        console.info('GetRepairDetail', res)
        if (!res.isSuccess) {
          that.$toast(res.errMsg)
          return
        }
        this.data = res.data
        // eslint-disable-next-line eqeqeq
        if (this.data.billtype == 3) {
          this.baoshi = '投诉'
          this.baoxiu = '投诉'
          this.isBaoxiuDate = false
        } else {
          this.baoshi = '报事'
          this.baoxiu = '报修'
          this.isBaoxiuDate = true
        }
        // eslint-disable-next-line eqeqeq
        if (this.data.billtype == 2) {
          this.data.billtypeName = '整改通知单'
        // eslint-disable-next-line eqeqeq
        } else if (this.data.billtype == 3) {
          this.data.billtypeName = '投诉单'
        // eslint-disable-next-line eqeqeq
        } else if (this.data.billtype == 4) {
          this.data.billtypeName = '咨询单'
        // eslint-disable-next-line eqeqeq
        } else if (this.data.billtype == 5) {
          this.data.billtypeName = '增值服务单'
        } else {
          this.data.billtypeName = '报事单'
        }

        // eslint-disable-next-line eqeqeq
        if (this.data.vbillstatus == 2) {
          this.data.vbillstatusName = '已处理未回访'
        // eslint-disable-next-line eqeqeq
        } else if (this.data.vbillstatus == 3) {
          this.data.vbillstatusName = '已回访'
        } else {
          this.data.vbillstatusName = '已报事未处理'
        }
        this.data.dapplydate = this.$util.getDate(this.data.dapplydate)
        res.data.fileList.forEach(function (item, index, array) {
          that.$set(that.fileList, index, item)
        })
        console.info('filelist', that.fileList)
      })
    },

    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.go(0)
    }

  }
}
</script>

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