<template>
  <div class="repair-record-box">
    <ul class="custom-list-box">
      <li
        class="record-item white-box"
        v-for="item in recordList"
        :key="item.id"
        @click="
          $router.push({
            path: '/repairDetail',
            query: {
              id: item.id,
            },
          })
        "
      >
        <div class="item-head custom-status-box">
          <p class="company">{{ item.companyName }}</p>
          <div :class="['status-btn', setStatusStyle(item.status)]">
            {{ item.statusName }}
          </div>
        </div>

        <div class="item-content">
          <div class="img-box" style="width: 40%">
            <img :src="item.fileUrl != null ? item.fileUrl[0] : ''" alt="" />
          </div>
          <div class="content-box" style="width: 55%">
            {{ item.description }}
          </div>
        </div>
        <div class="item-foot">
          <p class="time">
            <i class="iconfont icon-shijian"></i>{{ item.createdAt }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { list } from '@/service/api_repair'
import Base from '@/pages/base/base'
import auth from '@/service/auth'
export default {
    data() {
        return {
            dc_key: ['REPAIR_STATUS'],
            recordList: [],
            params: {
                pageNum: 1,
                pageSize: 10,
                createdBy: auth.currUser().id
            },
            totalPage: 1,
            allData: []
        }
    },
    mixins: [Base],
    created() {
        this.initDict(this.dc_key).then((res) => {
            this.selectData()
        })
    },
    methods: {
        selectData() {
            const _this = this
            list(this.params).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const jsonMap = _this.getItemJson(item)
                        _this.recordList.push(jsonMap)
                    })
                }
            })
        },
        getItemJson: function(item) {
            const fileUrls = item.fileUrl ? item.fileUrl.split(',') : []
            const fileUrl = []
            fileUrls.forEach((item) => {
                item = this.$constant.BASE_URI + '/wx/fileController/download/' + item
                fileUrl.push(item)
            })
            item.fileUrl = fileUrl
            item.statusName = this.dc_map.REPAIR_STATUS[item.status]
            return item
        },
        quickSelect(item) {
            if (this.quickSleced.val && this.quickSleced.val === item.val) {
                this.quickSleced = {}
            } else {
                this.quickSleced = item
            }
        },
        afterRead(file) {
            console.log(file)
        },
        setStatusStyle(status) {
            let statusClass = null
            switch (status) {
                case 'unAcceptance':
                    statusClass = 'pending-btn'
                    break
                case 'acceptance':
                    statusClass = 'accepted-btn'
                    break
                case 'processed':
                    statusClass = 'processed-btn'
                    break
                case 'evaluated':
                    statusClass = 'evaluated-btn'
                    break
            }
            return statusClass
        }
    },
    filters: {
        statusFilter(val) {
            let res = null
            switch (val) {
                case 'unAcceptance':
                    res = '待处理'
                    break
                case 'acceptance':
                    res = '已受理'
                    break
                case 'processed':
                    res = '已处理'
                    break
                case 'evaluated':
                    res = '已评价'
                    break
            }
            return res
        }
    }
}
</script>
<style lang="scss" scoped>
.repair-record-box {
  width: 100%;
  height: 100%;
  // .record-list {
  //   .item-head,
  //   .item-content {
  //     position: relative;
  //     padding: 25px 0;

  //     &::after {
  //       position: absolute;
  //       box-sizing: border-box;
  //       content: " ";
  //       pointer-events: none;
  //       right: 16px;
  //       bottom: 0;
  //       left: 16px;
  //       border-bottom: 1px solid #ebedf0;
  //       -webkit-transform: scaleY(0.5);
  //       transform: scaleY(0.5);
  //     }
  //   }
  //   .item-foot {
  //     padding: 25px 0;
  //     color: $text5;
  //     i {
  //       font-size: 28px;
  //       margin-right: 10px;
  //     }
  //   }
  //   .item-head {
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;
  //     color: $color4;
  //   }
  //   .item-content {
  //     display: flex;
  //     .img-box {
  //       width: 400px;
  //       height: 160px;
  //       border-radius: 10px;
  //       overflow: hidden;
  //       position: relative;
  //       > img {
  //         width: 100%;
  //         position: absolute;
  //         top: 0;
  //         left: 0;
  //         right: 0;
  //         bottom: 0;
  //         margin: auto;
  //         display: block;
  //       }
  //     }
  //     .content-box {
  //       padding-left: 30px;
  //       box-sizing: border-box;
  //       line-height: 1.5;
  //       text-overflow: -o-ellipsis-lastline;
  //       overflow: hidden;
  //       text-overflow: ellipsis;
  //       display: -webkit-box;
  //       -webkit-line-clamp: 3;
  //       line-clamp: 3;
  //       -webkit-box-orient: vertical;
  //     }
  //   }
  // }
}
</style>
