<template>
  <a-table
    ref="table"
    size="middle"
    :scroll="{x:true}"
    bordered
    rowKey="id"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="ipagination"
    :loading="loading"
    class="j-table-force-nowrap"
    @change="handleTableChange">
    <template slot="imgSlot" slot-scope="text,record">
      <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
      <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
    </template>
  </a-table>
</template>

<script>
import { getAction, getFileAccessHttpUrl } from '@api/manage'

export default {
  name: 'FaultInfo',
  data() {
    return {
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      dataSource: [],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:45,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'设备',
          align:"center",
          dataIndex: 'deviceId_dictText'
        },
        {
          title:'部件',
          align:"center",
          dataIndex: 'departId_dictText'
        },
        {
          title:'故障类型',
          align:"center",
          dataIndex: 'breakdownType_dictText'
        },
        {
          title:'故障描述',
          align:"center",
          dataIndex: 'description'
        },
        {
          title:'故障图片',
          align:"center",
          dataIndex: 'picture',
          scopedSlots: {customRender: 'imgSlot'}
        },
        {
          title:'状态',
          align:"center",
          dataIndex: 'status_dictText'
        },
        {
          title:'审核人',
          align:"center",
          dataIndex: 'aduitBy_dictText'
        },
        {
          title:'驳回原因',
          align:"center",
          dataIndex: 'aduitRemark'
        },
        {
          title:'故障代码',
          align:"center",
          dataIndex: 'breakdownId_dictText'
        },
      ],
      url: {
        list: "/device/deviceBreakdownReport/list",
      },
    }
  },
  methods: {
    fetchData(deviceId) {
      this.loading = true;
      getAction(this.url.list,{deviceId:deviceId}).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          if(res.result.total)
          {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      console.log(pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.fetchData();
    },
    /* 图片预览 */
    getImgView(text){
      if(text && text.indexOf(",")>0){
        text = text.substring(0,text.indexOf(","))
      }
      return getFileAccessHttpUrl(text)
    },
  }
}
</script>
