<template>
  <div>
    <div class="content-head">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <h3>编辑</h3>
      <h5>编辑基本信息、企业资质文件</h5>
    </div>
    <div class="othercontent">
      <div>
        <div class="describe ">
          基本信息
        </div>
        <div>
          <el-form ref="perfectForm" :model="perfectForm" :rules="rules" label-width="120px" inline>
            <el-form-item label="单位名称" prop="companyName" class="item">
              <el-input v-model="perfectForm.companyName" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="注册角色" prop="role" class="item">
              <el-input v-model="perfectForm.role" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="法人姓名" prop="legalPerson" class="item">
              <el-input v-model="perfectForm.legalPerson" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="法人电话" prop="personPhone" class="item">
              <el-input v-model="perfectForm.personPhone" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="creditCode" class="item">
              <el-input v-model="perfectForm.creditCode" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="单位性质" prop="nature" class="item">
              <el-input v-model="perfectForm.nature" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="单位所在地" prop="companyLocal" class="item">
              <el-input v-model="perfectForm.companyLocal" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="行业类型" prop="type" class="item">
              <el-input v-model="perfectForm.type" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>

            <el-form-item label="资信等级" prop="CreditRating" class="item">
              <el-input v-model="perfectForm.CreditRating" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="开户银行名称" prop="bank" class="item">
              <el-input v-model="perfectForm.bank" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="开户行行号" prop="bankNumber" class="item">
              <el-input v-model="perfectForm.bankNumber" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="注册资本(万元)" prop="capital" class="item">
              <el-input v-model="perfectForm.capital" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="联系地址" prop="contactAddress" class="item">
              <el-input v-model="perfectForm.contactAddress" placeholder="请输入" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="管理员" prop="admin" class="item">
              <el-input v-model="perfectForm.admin" disabled style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactNumber" class="item">
              <el-input v-model="perfectForm.contactNumber" disabled style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="id" class="item">
              <el-input v-model="perfectForm.id" disabled style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="id" class="item">
              <el-input v-model="perfectForm.email" disabled style="width:240px"></el-input>
            </el-form-item>
            <div>
              <el-form-item label="经营范围" prop="businessScope" class="item">
                <el-input v-model="perfectForm.businessScope" :rows="4" type="textarea" placeholder="请输入内容" style="width:600px"></el-input>
              </el-form-item>
            </div>
            <div class="margin-left">
              <el-form-item label="法人身份证正反面" prop="identity" class="item">
                <el-upload 
                  :show-file-list="false" 
                  :on-success="justSuccess" 
                  :before-upload="beforejust" 
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/">
                  <img v-if="justimg" :src="justimg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-upload 
                  :show-file-list="false" 
                  :on-success="backSuccess" 
                  :before-upload="beforeback" 
                  style="margin-top: 10px;"
                  class="avatar-uploader" 
                  action="https://jsonplaceholder.typicode.com/posts/">
                  <img v-if="backimg" :src="backimg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
            <div class="margin-left">
              <el-form-item label="三证合一扫描件" prop="card" class="item">
                <el-upload 
                  :show-file-list="false" 
                  :on-success="justSuccess" 
                  :before-upload="beforejust" 
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/">
                  <img v-if="justimg" :src="justimg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="t1" style="color:#666666;margin-top:10px">(只可上传三张图片，大小不能超过10MB，此项为必填项)</div>
              </el-form-item>
            </div>
            <div class="margin-left">
              <el-form-item prop="file" class="item" margin-left="-180px">
                <div class="else">
                  <div>其他资料 <span class="red">用于上传其他证明性材料如法人变更证明，报名资料请勿在此上传，单个附件建议不超过2M。</span> </div>
                </div>
                <el-upload 
                  :on-preview="handlePreview" 
                  :on-pxove="handlepxove" 
                  :file-list="fileList" 
                  class="upload-demo" 
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
                </el-upload>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <div class="bottomButton">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible=true">提交审核</el-button>
      </div>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="提交审核">
      <el-form ref="dialogform" :model="form" :rules="rules">
        <el-form-item label="修改位置" prop="modifyLocation" class="item">
          <el-input v-model="form.modifyLocation" style="width:240px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="backButton">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import dataBreadcrumb from '@components/dataBreadcrumb.vue'

export default {
  components: {
    dataBreadcrumb
  },
  data() {
    // 测试省份
    let islocal = (rule, value, callback) => {
      if (this.form.province && this.form.county && this.form.city) {
        callback(new Error('请选择城市'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      breads: ['组织管理', '单位信息'],
      perfectForm: {
        personPhone: '',
        personName: '',
        companyLocal: '',
        grade: '',
        bankCard: '',
        contactPhone: '',
        creditCode: '',
        nature: '',
        type: '',
        bank: '',
        capital: '',
        management: '',
        bankNumber: '',
        contactAddress: '',
        admin: '',
        contactNumber: '',
        id: '',
        email: '',
        businessScope: ''
      },
      form: {
        modifyLocation: ''
      },
      rules: {
        identity: [
          { required: true }
        ],
        card: [
          { required: true }
        ],
					
        businessScope: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        legalPerson: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        personPhone: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        creditCode: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        CreditRating: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        bank: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        bankNumber: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        capital: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        contactAddress: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        admin: [{
          required: true
        }],
        contactNumber: [{
          required: true
        }],
        id: [{
          required: true
        }],
        email: [{
          required: true
        }],
        modifyLocation: [{
          required: true,
          message: '请输入修改位置',
          trigger: 'blur'
        }],
        companyName: [{
          required: true,
          message: '请输入单位名称',
          trigger: 'blur'
        }],
        local: [{
          required: true,
          validator: islocal,
          trigger: 'blur'
        }],
        role: [{
          required: true,
          message: '请输入角色',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    cancel() {
      this.$router.go(-1)
    },
    sure() {
      this.dialogFormVisible = false
    }
  }
}
</script>


<style scoped>
	.upload>div {
		color: rgba(102, 102, 102, 1);
		font-weight: 400;
	}

	.label-form {
		font-size: 16px;
		margin-top: 30px;
		margin-bottom: 1opx;
		font-weight: 400;
	}

	.company h4 {
		font-size: 22px;
		font-weight: bold;
		color: rgba(0, 0, 0, 1);
		margin-top: 62px;
		margin-bottom: 50px;
	}

	.el-input {
		width: 240px;
		height: 40px;
	}

	.nextButton {
		width: 300px;
		height: 48px;
		background: rgba(4, 134, 254, 1);
		border-radius: .40px;
		line-height: 46px;
		margin-top: 45px;
		margin-bottom: 8px;
		color: #fff
	}

	.item .el-form-item__label {
		font-weight: bold;
	}

	.password-tips {
		margin-bottom: 0;
		color: rgba(144, 147, 153, 1);
		font-weight: 400;
		font-size: 12px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		background: rgba(247, 247, 247, 1);
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}

	.getcode,
	.getphonecode {
		position: relative;
	}

	.getcode>.code {
		/*margin: 400px auto;*/
		width: 68px;
		height: 32px;
		/*border: 1px solid red;*/
		position: absolute;
		top: 0;
		left: 330px;
	}

	.getphonecode>.phonecode {
		font-size: 14px;
		font-weight: 400;
		color: rgba(51, 136, 255, 1);
		position: absolute;
		top: 13px;
		left: 400px;
	}

	.else .red {
		color: #FF6161;
		font-size: 14px;
	}

	.perfect-head {
		width: 9px;
		margin-top: 66px;
		margin-bottom: 37px;
	}

	.perfect-head>div>text {
		font-weight: bold;
	}

	.result {
		width: 100%;
		height: 300px
	}

	.result h4 {
		font-size: 30px;
		font-weight: 600;
		color: rgba(75, 193, 103, 1);
		margin-top: 100px;
		margin-bottom: 20px;
	}

	.result h5 {
		font-size: 18px;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);
		line-height: 30px;
		text-align: center;
	}

	.othercontent>div {
		background: #fff;
	}

	.margin-left {
		margin-left: 30px;
	}
</style>
