<template>
  <div v-if="dialogVisible">
  <el-dialog
    title="发票详情"
    :visible.sync="dialogVisible"
    width="75%"
    append-to-body
  >
  <div class="app-container">
<!--    <el-form-->
<!--      :model="queryParams"-->
<!--      ref="queryForm"-->
<!--      size="small"-->
<!--      :inline="true"-->
<!--    >-->
<!--      <el-form-item label="任务名称" >-->
<!--        <el-input-->
<!--          v-model="queryParams.taskName"-->
<!--          placeholder="请输入部门名称"-->
<!--          clearable-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="申请人">-->
<!--        <el-input-->
<!--          v-model="queryParams.applyUserName"-->
<!--          placeholder="请输入申请人"-->
<!--          clearable-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="创建日期" >-->
<!--        <el-date-picker-->
<!--          v-model="value1"-->
<!--          type="daterange"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          icon="el-icon-search"-->
<!--          size="small"-->
<!--          @click="handleQuery"-->
<!--        >搜索</el-button-->
<!--        >-->
<!--        <el-button icon="el-icon-refresh" size="small" @click="resetQuery"-->
<!--        >重置</el-button-->
<!--        >-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <el-row :gutter="10" class="mb8">

    </el-row>

    <div class="table">
      <el-button v-if="typem==='上传'" type="primary" style="margin-bottom: 10px" size="small" @click="updat">上传</el-button>
      <el-table
        v-loading="loading"
        :data="deptList"
        row-key="deptId"
        max-height="400px"
        highlight-current-row
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          prop="seriervs"
          label="序号"
          type="index"
        ></el-table-column>
        <el-table-column
          prop="makeInvoiceDate"
          label="开票日期"
          min-width="50"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="发票代码"
          align="center"
          prop="invoiceCode"
        >
        </el-table-column>
        <el-table-column
          label="上传时间"
          align="center"
          prop="createTime"
        >
        </el-table-column>
        <el-table-column
          label="文件路径"
          align="center"
          prop="filePath"
        >
          <template slot-scope="scope">
<!--            <pdf-->
<!--              :src="scope.row.filePath"-->
<!--            ></pdf>-->
<!--              <embed :src="scope.row.filePath" width="100%" height="100%" type="application/pdf">-->
            <iframe  v-if="scope.row.filePath.substring(scope.row.filePath.length-3)=='pdf'" style="width: 100%;height: 100%"  :src="scope.row.filePath"></iframe>
            <el-image
              v-if="scope.row.filePath.substring(scope.row.filePath.length-3)=='png' || scope.row.filePath.substring(scope.row.filePath.length-3)=='jpg' || scope.row.filePath.substring(scope.row.filePath.length-3)=='jpeg'"
              style="width: 100%; height: 100%"
              :src="scope.row.filePath"
              :preview-src-list="[scope.row.filePath]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
           <div style="display: flex">
             <el-button v-if="scope.row.filePath.substring(scope.row.filePath.length-3)=='pdf'" @click="download(scope.row)" type="primary">预览下载PDF</el-button>
             <el-button v-else type="primary" @click="downloadImg(scope.row)">下载图片</el-button>
             <el-button type="danger" v-if="typem==='上传'" @click="deleteD(scope.row)">删除</el-button>
           </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="display: flex;justify-content: flex-end ;margin: 15px 0px 0px 0px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </div>
  </div>
    <invoice ref="invoice" @getData="getData" />
  </el-dialog>
  </div>
</template>

<script>
import {
  todoPage,
} from "@/api/system/dept";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import  moment from 'moment'
import modal from './modal'

import {batchAudit, getUserList, Invoiceaudit, invoiceDelete, invoiceListD} from "@/api/utils";
import pdf from 'vue-pdf'
import invoice from './InvoiceUpload.vue'
export default {
  // provide() {
  //   return {
  //     getList: this.getList
  //   };
  // },
  components:{
    modal,pdf,invoice
  },
  data() {
    return {
      dialogVisible:false,

      // 遮罩层
      loading: false,
      deptList:[],
      // 重新渲染表格状态
      refreshTable: true,
      pageNo:1,
      pageSize:10,
      total:0,
      row:{},
      list:[],
      typem:'',
    };
  },
  created() {

  },
  methods: {
    moment,
    updat(){
     this.$refs.invoice.handle(this.row)
    },
    downloadImg(val){
      let a = document.createElement('a')
      a.href =val.filePath
      a.download = `${val.fileName}`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageNo=val
      this.getData()
    },
    doawd(val){
      console.log('------------')
      window.open(val.filePath, )
    },
    deleteD(val){
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass:'my-model', // 设置MessageBox 的自定义类名
      }).then(() => {
        //提交信息
        invoiceDelete(val).then(res=>{
          if(res.code==200){
            this.$message.success('删除成功')
            this.getData()
          }else {
            this.$message.error(res.msg || '删除失败')
          }
        })
      }).catch(() => {

      });
    },
    download(row){
      window.open(row.filePath, )
      // let a = document.createElement('a')
      // a.href =row.filePath
      // a.download = `${row.fileName}`
      // document.body.appendChild(a)
      // a.click()
      // document.body.removeChild(a)
    },
    getData(val){
      invoiceListD(val || this.row).then(res=>{
        this.deptList=res.data.records
        this.total=res.data.total
      })
    },
    handle(val,type){
      this.typem=type
      this.row=val
      this.dialogVisible=true
      this.getData(val)
    }
  },
};
</script>
<style lang="scss" scoped>
.table {
  height: calc(100% - 80px);
}
::v-deep {
  .el-table {
    height: 100%;
    width: 100%;
    .el-table__body-wrapper {
      width: 100% !important;
      height: calc(100% - 50px) !important; // 表格高度减去表头的高度
      overflow-y: scroll;
    }
  }
}
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner{
  display: none !important;
}
/* 去掉全选按钮 */
::v-deep .el-table .disabledCheck .cell::before{
  content: '';
  text-align: center;
}

</style>
