<!--  -->
<template>
  <el-dialog title="关联发票" :visible.sync="dialogVisible" width="800px" :before-close="handleCancel">
    <el-table v-loading="loading" :selection="selectArr" stripe border height="50vh" :data="list" ref="table" width="100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="(row) => row.selectable"></el-table-column>
      <el-table-column label="发票缩略图" align="center" prop="files">
        <template v-slot="scope">
          <el-image style="width: 10px; height: 10px" @click="handleShowPdf(scope.row.files[0].url)" v-if="scope.row.files && scope.row.files.length && isPdf(scope.row.files[0].url)" :src="scope.row.files && scope.row.files.length ?scope.row.files[0].url : ''" fit="cover"></el-image>
          <el-image style="width: 100px; height: 100px" v-else :preview-src-list="filterPreView(scope.row.files)" :src="scope.row.files && scope.row.files.length ?scope.row.files[0].url : ''" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="发票代码" prop="invoiceCode" />
      <el-table-column label="发票号码" prop="invoiceNum" />
      <el-table-column label="开票日期" prop="invoiceDate" width="180">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.invoiceDate) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination :total="total" :autoScroll="false" :pageSizes="[1000]" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="handleConfirm" size="small">确 定</el-button>
    </span>
    <!-- 文件在线预览 -->
    <FilePreview :previewFile="previewFile" :fileUrl="fileUrl" @update="handleFileClose" />
  </el-dialog>
</template>

<script>
import { getInvoicePage } from "@/api/bs/invoice";
import { isPdf } from '@/utils'
export default {
  name: '',
  props: {
    isOpen: Boolean,
    userList: Array,
    selectIds: Array
  },
  components: {
    FilePreview: () => import('@/components/FilePreview'),
  },
  created() {
    this.getList()
  },
  data() {
    return {
      previewFile: false,
      // 总条数
      fileUrl: 'http://60.204.223.58:9090/baoxiao/赵夫琳2022年终总结(1)_20230111090534.pdf',
      total: 0,
      // 我的发票列表
      list: [],
      dialogVisible: false,
      loading: false,
      tableList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 1000,
        files: null,
        createBy: null,
        createTime: [],
        updateBy: null,
        invoiceType: null,
        invoiceCode: null,
        invoiceNum: null,
        invoiceDate: [],
        seller: null,
        taxAmount: null,
        excludingTaxAmount: null,
        totalAmount: null,
        deptId: null,
        deptName: null,
        remark: null,
      },
      selectArr: [],
    }
  },
  watch: {
    isOpen: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.handleInitForm()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleFileClose() {
      this.previewFile = false
    },
    handleShowPdf(url) {
      this.fileUrl = url
      this.previewFile = true
    },
    isPdf,
    filterPreView(list) {
      return (list || []).map(item => item.url)
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getInvoicePage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.list = (response.data.list || []).map(item => {
          if (this.selectIds.includes(item.id)) {
            return {
              ...item,
              selectable: false
            }
          } else {
            return {
              ...item,
              selectable: true
            }
          }
        })
        this.total = response.data.total;
        this.loading = false;
      });
    },
    handleSelectionChange(val) {
      this.selectArr = val;
    },
    handleCancel() {
      this.$emit('onCancel')
    },
    handleConfirm() {
      console.log('selectIds', this.selectIds);
      this.$emit('onConfirm', this.selectArr)
    },
    handleInitForm() {
      this.queryParams.pageNo = 1
      this.getList()
    },
  }
}

</script>
<style lang='scss' scoped>
</style>