<template>
  <div class="app-container">
    <el-card class="box-card" style="padding: 20px 10px;margin-bottom: 20px;">
      <el-row>
        <div class="contract">
          <div>
            <p>合同名称</p>
            <el-input v-model="list.contractName" placeholder="请输入合同名称" style="width: 500px;" />
          </div>
          <div>
            <p>合同编号</p>
            <el-input v-model="list.contractNumber" placeholder="请输入合同编号" style="width: 500px;" />
          </div>
        </div>

        <div class="titlesa">
          <span>合同附件</span>
          <span style="color: #D05C39;">*支持上传pdf、jpg/jpeg、png格式</span>
        </div>
        <div>
          <el-upload action="https://ht.9026.com/api/File" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
        <div class="titlesa">
          <span>发票附件</span>
          <span style="color: #D05C39;">*支持上传pdf、jpg/jpeg、png格式</span>
        </div>
        <div>
          <el-upload action="https://ht.9026.com/api/File" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
        <div class="titlesa">
          <span>贸易合同</span>
          <span style="color: #D05C39;">*支持上传pdf、jpg/jpeg、png格式</span>
        </div>
        <div>
          <el-upload action="https://ht.9026.com/api/File" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </el-row>
    </el-card>

    <el-card
      v-for="(item,index) in list"
      ref="draft"
      :key="index"
      class="box-card"
      style="padding: 20px 10px;margin: 20px 0px;"
    >
      <el-row>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" style="padding:0 15px;">
          <el-form ref="form" :model="form" label-width="90px">

            <el-form-item label="汇票名称" :rules="[{ message: '姓名不能为空不能为空'}]">
              <el-input v-model="form.name" class="ipwidth" placeholder="请填写汇票名称" />
            </el-form-item>
            <el-form-item label="金额" :rules="[{ message: '电话号码不能为空'}]">
              <el-input v-model="form.money" class="ipwidth" placeholder="请填写金额" />
            </el-form-item>
            <el-form-item label="预计贴现日" :rules="[{ message: '身份证不能为空'}]">
              <el-date-picker v-model="value1" type="date" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="利率" :rules="[{ message: '身份证不能为空'}]">
              <el-input v-model="form.count" class="ipwidth" placeholder="请填写利率" />
            </el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" style="padding:0 15px;">
          <el-form ref="form" :model="form" label-width="110px">

            <el-form-item label="汇票号码" :rules="[{ message: '姓名不能为空不能为空'}]">
              <el-input v-model="form.nom" class="ipwidth" placeholder="请填写汇票号码" />
            </el-form-item>
            <el-form-item label="承兑日期" :rules="[{ message: '电话号码不能为空'}]">
              <el-date-picker v-model="value2" type="date" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="最高贷款额度" :rules="[{ message: '身份证不能为空'}]">
              <el-input v-model="form.max_mony" class="ipwidth" placeholder="请填写最高贷款额度" />
            </el-form-item>
            <el-form-item label="利息" :rules="[{ message: '身份证不能为空'}]">
              <el-input v-model="form.rate" class="ipwidth" placeholder="请填写利息" />
            </el-form-item>

            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" style="padding:0 15px;">
          <el-form ref="form" :model="form" label-width="80px">

            <el-form-item label="承兑人">
              <el-input v-model="form.accepetper" placeholder="请选择承兑人" class="ipwidth" />
              <!-- <el-dropdown>
							 <el-input v-model="form.accepetper" placeholder="请选择承兑人" class="ipwidth">
							 </el-input>
							  <el-dropdown-menu slot="dropdown">
							    <el-dropdown-item command="承兑人杜甫">承兑人杜甫</el-dropdown-item>
								<el-dropdown-item command="承兑人李白">承兑人李白</el-dropdown-item>
								<el-dropdown-item command="新增承兑人" divided>新增承兑人	</el-dropdown-item>
							  </el-dropdown-menu>
							</el-dropdown> -->
            </el-form-item>
            <el-form-item label="出票日期">
              <el-date-picker v-model="value3" type="date" placeholder="选择日期" class="ipwidth" />
            </el-form-item>
            <el-form-item label="服务费率">
              <el-input v-model="form.serpointo" class="ipwidth" placeholder="请填写服务费率" />
            </el-form-item>

          </el-form>

        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" style="padding:0 15px;">
          <el-form ref="form" :model="form.drawper" label-width="85px">
            <el-form-item label="出票人">
              <el-input v-model="form.region" placeholder="请选择出票人" class="ipwidth" />
            </el-form-item>
            <el-form-item label="汇票到期日">
              <el-date-picker v-model="value4" type="date" placeholder="选择日期" class="ipwidth" />
            </el-form-item>
            <el-form-item label="服务费">
              <el-input v-model="form.serpointt" class="ipwidth" placeholder="请填写服务费" />
            </el-form-item>
          </el-form>

        </el-col>

      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="margin:0 30px;;">
          <div class="titlesa">
            <span>附件</span>
            <span style="color: #D05C39;">*支持上传pdf、jpg/jpeg、png格式</span>
          </div>
          <div>
            <el-upload
              accept=".pdf, .jpg, .jpeg, .png"
              action="https://ht.9026.com/api/File"
              :file-list="fileArr"
              list-type="picture-card"
              :show-file-list="true"
              :auto-upload="false"
              :before-upload="beforeUpload"
              :on-success="upSuccess"
              :on-error="upError"
              :on-change="imgPreview"
            >

              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-col>
      </el-row>
      <div class="addnew">
        <el-button type="primary" @click="deletedraft">删除汇票</el-button>
      </div>
    </el-card>
    <div class="commit">
      <div class="addnew">
        <el-button type="primary" @click="adddraft">新增汇票</el-button>
      </div>
      <div class="addall">
        <el-button type="warning" style="width: 180px;height: 45px;font-size: 16px;" @click="onSubmit">确认上传
        </el-button>
      </div>
    </div>

  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      resource: '',
      radio: '1',
      activeNames: '',
      list: [{
        contractName: '',
        contractNumber: '',
        name: '',
        money: '',
        count: '',
        nom: '',
        max_mony: '',
        rate: '',
        serpointo: '',
        serpointt: '',
        drawper: '',
        accepetper: ''
      }],
      form: {
        contractName: '',
        contractNumber: '',
        name: '',
        money: '',
        count: '',
        nom: '',
        max_mony: '',
        rate: '',
        serpointo: '',
        serpointt: '',
        drawper: '',
        accepetper: ''
      },
      pdfUrl: '',
      numPages: [],
      fileArr: [],
      upLoadImgUrl: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  methods: {
    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['pdf', 'jpg', 'jpeg', 'png']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$msg('上传文件只能是 pdf、jpg、jpeg、png', 'error')
        return false
      }
    },
    imgPreview(file) {
      this.fileArr = []
      this.fileArr.push(file)
      this.form.position = ''
      console.log(file)
      this.form.position = file.name
      const fileName = file.name
      const regex = /(.jpg|.jpeg|.gif|.png|.pdf)$/
      if (regex.test(fileName.toLowerCase())) {
        this.upLoadImgUrl = URL.createObjectURL(file.raw) // 获取URL
        this.pdfUrl = this.getPdfUrl(file)
        console.log(this.upLoadImgUrl)
      } else {
        this.$message.error('请选择图片文件')
      }
    },
    // 上传成功
    upSuccess(res) {
      this.$message({
        message: '上传成功',
        type: 'success'
      })
    },
    // 上传失败
    upError(e) {
      this.$message({
        message: '上传失败',
        type: 'error'
      })
    },
    getPdfUrl(file) {
      console.log(file)
      const url = window.URL.createObjectURL(file.raw) // 将文件转化成url
      // 加载pdf
      const loadingTask = pdf.createLoadingTask(url)
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages
          console.log(this.numPages)
        })
        .catch((err) => {
          console.error('pdf 加载失败', err)
        })
      return url
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    adddraft() {
      const form = {
        contractName: '',
        contractNumber: '',
        name: '',
        money: '',
        count: '',
        nom: '',
        max_mony: '',
        rate: '',
        serpointo: '',
        serpointt: '',
        drawper: '',
        accepetper: ''
      }
      console.log(this.list)
      this.list.push(form)
    },
    deletedraft() {
      this.list.pop()
      console.log(this.list)
    }
  }
}
</script>

<style lang="scss">
	.line {
		text-align: center;
	}

	.ipwidth {
		width: 100%;
	}

	.el-radio__label {
		margin-left: 80px;
	}

	.el-collapse-item__header {
		font-weight: 600;
		color: #606266;
	}

	.addnew {
		display: flex;
		justify-content: flex-end;
	}

	.addall {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40px;
	}

	.titlesa {
		margin: 20px 0;

		span:nth-child(2) {
			font-size: 10px;
			margin: 0 20px
		}
	}

	.contract {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.el-upload {
		width: 100px;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.commit {
		margin: 20px 0;
	}
</style>
