<template>
  <div>
    <a-table
      ref="table"
      size="middle"
      :scroll="{x:true}"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="data"
      :pagination="ipagination"
      :loading="loading"
      class="j-table-force-nowrap"
      @change="handleTableChange">

      <template slot="deviceName" slot-scope="text,record">
        <div>{{record.deviceTypeId_dictText}}/{{record.departId_dictText}}</div>
      </template>
      <template slot="docfilePath" slot-scope="text,record">
        <a-icon v-if="text" type="file-text" theme="twoTone" @click="handlePreview(text,'docfile')"/>
      </template>
      <template slot="photoPath" slot-scope="text,record">
        <a-icon v-if="text"  type="picture" theme="twoTone" @click="handlePreview(text,'image')"/>
      </template>
      <template slot="videoPath" slot-scope="text,record">
        <a-icon v-if="text"  type="video-camera" theme="twoTone" @click="handlePreview(text,'video')"/>
      </template>
    </a-table>
    <FilePreview :visible="previewVisible" :fileUrl="previewFileUrl" :fileType="previewFileType" @close="handleClosePreview" />
  </div>
</template>
<script>
import { getAction } from '@api/manage'
import FilePreview from '@comp/FilePreview/index.vue'

export default {
  name: 'ProcessDocs',
  components: { FilePreview },
  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,
      data: [],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'作业项',
          align:"center",
          dataIndex: 'manualName'
        },
        {
          title:'设备',
          align:"center",
          dataIndex: 'deviceTypeId',
          scopedSlots: { customRender: 'deviceName' }
        },
        {
          title:'修程',
          align:"center",
          dataIndex: 'repairRange_dictText'
        },
        {
          title:'检修项/故障类型',
          align:"center",
          dataIndex: 'regularDetailId'
        },
        {
          title:'技术要求',
          align:"center",
          // width: 100,
          dataIndex: 'content'
        },
        {
          title:'文本资料',
          align:"center",
          dataIndex: 'docfilePath',
          scopedSlots: { customRender: 'docfilePath' }
        },
        {
          title:'图片资料',
          align:"center",
          dataIndex: 'photoPath',
          scopedSlots: { customRender: 'photoPath' }
        },
        {
          title:'视频资料',
          align:"center",
          dataIndex: 'videoPath',
          scopedSlots: { customRender: 'videoPath' }
        },
      ],
      url: {
        list: '/manual/manual/list',
      },
      previewVisible: false,
      previewFileUrl: '',
      previewFileType: '',
    }
  },
  methods: {
    fetchData(deviceTypeId) {
      this.loading = true
      // 加载工艺文件数据
      getAction(this.url.list, {deviceTypeId:deviceTypeId}).then((res) => {
        if(res.success) {
          this.data = res.result.records;
        }
      }).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();
    },
    handlePreview(fileUrl,fileType) {
      this.previewFileUrl = fileUrl;
      this.previewFileType = fileType;
      this.previewVisible = true;
    },
    // 关闭预览弹窗
    handleClosePreview() {
      this.previewVisible = false;
      this.previewFileUrl = "";
      this.previewFileType = "";
    },
  }
}
</script>
<style scoped>
.custom-column {
  white-space: normal; /* 允许换行 */
}
</style>
