<template>
  <div class="app-container">
    <el-card class="box-card" style="padding: 20px 10px;">
      <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>
        </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>
        </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-select v-model="form.region" placeholder="请选择承兑人" class="ipwidth">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </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" label-width="85px">
            <el-form-item label="出票人">
              <el-select v-model="form.region" placeholder="请选择出票人" class="ipwidth">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </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">
            <p>附件</p>
            <p style="color: #D05C39;">*支持上传pdf、jpg/jpeg、png格式</p>
          </div>
          <div>
            <el-upload action="#" 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-col>
      </el-row>
      <div class="addnew">
        <el-button type="info">新增汇票</el-button>
      </div>
      <div class="addall">
        <el-button type="warning" style="width: 180px;height: 45px;font-size: 16px;">确认上传</el-button>
      </div>
    </el-card>

    <div />
  </div>
</template>

<script>
export default {
  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: '',
      form: {
        name: '',
        money: '',
        count: '',
        nom: '',
        max_mony: '',
        rate: '',
        serpointo: '',
        serpointt: ''

      },
      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: {
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    handleChange() {

    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</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;
  }
</style>
