<template>
  <div v-if="dialogVisible">
    <el-dialog
      title="发票上传"
      :visible.sync="dialogVisible"
      append-to-body
      width="50%"
    >
      <div class="winTabs">
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="发票代码">
            <el-input v-model="invoiceCode" :disabled="montList.currentNode==10" placeholder="发票代码"></el-input>
          </el-form-item>
          <el-form-item label="开票日期">
            <el-date-picker
              v-model="makeInvoiceDate"
              :disabled="montList.currentNode==10"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item  label="附件上传" style="width: 100%;overflow: hidden">
            <el-upload
              action="#"
              accept=".jpeg,.png,.jpg,.pdf"
              :auto-upload="false"
              :on-change="handlePreview"
              :file-list="fileList"
              :disabled="montList.currentNode==10"
              :limit="1"
              >
              <el-button size="small" type="primary">点击上传</el-button>
<!--              <i slot="default" class="el-icon-plus"></i>-->
<!--              <div slot="file" slot-scope="{file}">-->
<!--                <el-image-->
<!--                  v-if="file.url.slice(-3)!=='pdf'"-->
<!--                  ref="preview"-->
<!--                  class="el-upload-list__item-thumbnail"-->
<!--                  :src="file.url"-->
<!--                  :preview-src-list="[file.url]">-->
<!--                </el-image>-->
<!--                <iframe v-else :src="file.url" width="100%" height="600px"></iframe>-->
<!--&lt;!&ndash;                <pdf&ndash;&gt;-->
<!--&lt;!&ndash;                  :src="file.url"&ndash;&gt;-->
<!--&lt;!&ndash;                  :page="pdfPage"&ndash;&gt;-->
<!--&lt;!&ndash;                  @num-pages="pageCount = $event"&ndash;&gt;-->
<!--&lt;!&ndash;                  @page-loaded="pdfPage = $event"&ndash;&gt;-->
<!--&lt;!&ndash;                  style="display: inline-block; width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;                ></pdf>&ndash;&gt;-->
<!--                <span class="el-upload-list__item-actions">-->
<!--            <span-->
<!--             class="el-upload-list__item-preview"-->
<!--             @click="handlePictureCardPreview(file)"-->
<!--            >-->
<!--             <i class="el-icon-zoom-in" >-->
<!--            </i>-->
<!--            </span>-->
<!--             <span-->
<!--                class="el-upload-list__item-delete"-->
<!--                @click="handleRemove(file)"-->
<!--                >-->
<!--          <i class="el-icon-delete"></i>-->
<!--          </span>-->
<!--      </span>-->
<!--              </div>-->
            </el-upload>
          </el-form-item>
         <div style="display: flex;justify-content: center;margin-left: -20px">
<!--           <el-button type="primary" @click="domwload" :disabled="montList.currentNode==10">发票下载</el-button>-->
           <el-button type="primary" @click="submit" :disabled="montList.currentNode==10">保存</el-button>
         </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {uploadFile,invoiceSave,invoiceDetail} from '@/api/utils'
import srcImg from '@/components/ImagePreview'
import pdf from 'vue-pdf'
export default {
  components:{
    srcImg,
  },
  props: {
    tabList: {
      //tab栏列表
      type: Array,
      default: () => [
        {
          label: "详情",
          id: "1",
          name: "detail",
          type: "detail",
          data:null,
        },
        {
          label: "流转详情",
          id: "2",
          name: "commission",
          type: "commission",
          ref: "commission",
          data: null,
        },
      ],
    },
  },
  data() {
    return {
      viewVisible: false,
      src: null,
      pdfPage : 1,
      pageCount: 0,
      dialogVisible:false,
      invoiceCode:null,
      montList:null,//父组件数据
      makeInvoiceDate:null,
      fileList:[],
      dialogImageUrl:[],
      flelUrl:[],
      Visible:false,
      businessId:'',
    };
  },
  created() {

  },
  methods: {
    //PDF预览
    previewPDF(row){
      this.src = pdf.createLoadingTask(documentConstants.previewPDFUrl+row.contractId);
      this.src.then(pdf => {
        this.viewVisible = true;
      });
    },

    //关闭窗口初始化PDF页码
    closeDialog(){
      this.pdfPage = 1;
    },

    //PDF改变页数
    previousPage(){
      var p = this.pdfPage
      p = p>1?p-1:this.pageCount
      this.pdfPage = p
    },
    nextPage(){
      var p = this.pdfPage
      p = p<this.pageCount?p+1:1
      this.pdfPage = p
    },
    domwload(){
      for (let key of this.fileList){
        console.log(key,'key',this.fileList.length)
        let a = document.createElement('a')
        a.href = key['filePath']
        a.download =key.fileName
        a.dispatchEvent(new MouseEvent('click'))
      }
    },
    initData() {
      this.activeName = this.tabList[0].id;
    },
    async submit(){
      let data={
        invoiceCode:this.invoiceCode,
        makeInvoiceDate:this.makeInvoiceDate,
        fileList:this.dialogImageUrl,
        businessId:this.montList.businessId,
        fileName:this.dialogImageUrl[0].fileName,
        filePath:this.dialogImageUrl[0].filePath,
      }
      let res = await  invoiceSave(data)
      if(res.code==200){
        this.$message.success('保存成功')
        this.$emit('getData')
        // this.$parent.handelData(this.montList.businessId)
        this.dialogVisible=false
      }else {
        this.$message.success('保存失败')
      }
    },
    handleRemove(file, fileList) {
      this.fileList=[]
    },
   async handlePreview(file){
      let data=new FormData()
      data.append('file',file.raw)
      const loading = this.$loading({
       lock: true,
       text: '上传中请稍等',
       spinner: 'el-icon-loading',
       background: 'rgba(0, 0, 0, 0.7)'
      });
      try {
        let res= await uploadFile(data)
        loading.close();
        this.dialogImageUrl=[res.data[0]]
        this.invoiceCode=res.data[0].invoiceCode
        this.makeInvoiceDate=res.data[0].makeInvoiceDate
      }catch {
        loading.close();
      }
   },
    async handlePictureCardPreview(file) {
      this.$refs.preview.clickHandler()
    },
    handle(data){
      this.dialogVisible=true
      this.montList=data
      this.invoiceCode=''
      this.makeInvoiceDate=''
      this.dialogImageUrl=[]
      this.fileList=[]
      // this.getFileList()
    },
    async getFileList(){
     let res= await invoiceDetail({businessId:this.montList.businessId})
      if(res.code==200){
        this.fileList=res.data.fileList
        this.dialogImageUrl=res.data.fileList
        this.invoiceCode=res.data.invoiceCode
        this.makeInvoiceDate=res.data.makeInvoiceDate
        this.fileList.forEach(item=>{
          item.url=item.filePath
        })
      }
      console.log(this.fileList,'=--=-=-=-=-=--')
    },
  }
};
</script>

<style lang="scss" scoped>
.demo-ruleForm{
  position: relative;
}
.winTabs{
  height: 290px;
  margin-left: 5%;
}
</style>
