<template>
    <div class="routerWapper">
        <div class="portalDetailTitle" v-if="$route.name=='receiptList'">
          <span class="title">预约列表</span>
        </div>
        <div v-if="$route.name=='receiptList'" class="layoutMargin layoutPadding">
            <div class="portalTableOperates">
                <a-table bordered class="portalTable" :dataSource="receiptList" :columns="columns" size="small" :pagination="pagination" rowKey="id">
                    <span slot="homeDate" slot-scope="text,record" align="center">
                        {{!!record.homeDate? record.homeDate.split(' ')[0]: ''}} 
                    </span>
                </a-table>
            </div>
          
        </div>
        
        <div style="margin:0 auto; padding:20px 0;position:absolute;bottom:0;left:50%;transform: translate(-15%);">
          <a target="_blank" href=" " style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
          <img :src="require('@/assets/icon/jc.png')" style="float:left;"/>
          <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">沪公网安备 31011002005918号</p >
          </a>
        </div>
          
    </div>
</template>

<script>

export default {
  data() {
    return {
      receiptList: [],
      imageUrl: require('@/assets/icon/jc.png'),
      pagination: {//分页
        pageNo: 1,
        pageSize: 10,
        total: 10,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        onChange: this.pageChange
      },
      columns: [
        {
          title: '报修人',
          dataIndex: 'reportorName',
          align: 'center',
          key: 'reportorName',
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          align: 'center',
          key: 'phone',
        },
        {
          title: '报修地址',
          dataIndex: 'address',
          align: 'center',
          key: 'address',
        },
        {
          title: '报修部位',
          dataIndex: 'place',
          align: 'center',
          key: 'place',
        },
        {
          title: '报修问题',
          dataIndex: 'dscr',
          align: 'center',
          key: 'dscr',
        },
        {
          title: '上门日期',
          dataIndex: 'homeDate',
          align: 'center',
          key: 'homeDate',
          scopedSlots: {
            customRender: 'homeDate',
          },
        },
        {
          title: '上门时间',
          dataIndex: 'homeTime',
          align: 'center',
          key: 'homeTime',
        },
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.$ajax.get({
        url: this.$api.GET_RESERVATION_LIST,
        params: {
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize,
          homeDate_desc: 'desc'
        }
      }).then(res => {
        if (res.code == 200) {
          //先获取全部的自定义字段列表 
          this.receiptList = this.$com.confirm(res, 'data.content', [])
          this.pagination.total=res.data.totalRows
          // console.log(this.extList)
        }
      })
    },
    pageChange(val) {
      this.pagination.pageNo = val
      this.pagination.current = val
      this.getList()
    },
  }
}
</script>