<template>
  <!-- 门店表单 -->
  <div class="card_employee">
    <el-form ref="form" :model="form" label-width="100px">
      <el-row>
        <el-col :span="24">
          <div>基本信息</div>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="12">
          <el-form-item label="社会信用代码">
            <el-input v-model="form.name" placeholder="请输入社会信用代码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门店名称">
            <el-input v-model="form.name" placeholder="请输入门店名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人">
            <el-input v-model="form.name" placeholder="请输入联系人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人电话">
            <el-input v-model="form.name" placeholder="请输入联系人电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地市">
            <el-select v-model="form.region" placeholder="请选择城市">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在区/县">
            <el-select v-model="form.region" placeholder="请选择所在区/县">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址">
            <el-input v-model="form.name" placeholder="请输入地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述">
            <el-input type="textarea" v-model="form.desc" placeholder="请输入描述"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div>《燃气经营许可证》信息</div>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="12">
          <el-form-item label="许可证编号">
            <el-input v-model="form.name" placeholder="请输入许可证编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营类型">
            <el-select v-model="form.emptype" placeholder="请选择类型">
              <el-option v-for="item in employeeType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营区域">
            <el-input v-model="form.name" placeholder="请输入经营区域"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人名称">
            <el-input v-model="form.name" placeholder="请输入法人名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发证部门">
            <el-input v-model="form.name" placeholder="请输入发证部门"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发证时间">
            <el-date-picker v-model="form.name" type="date" placeholder="选择发证时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间">
            <el-date-picker v-model="form.name" type="date" placeholder="选择开始时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件有效期">
            <el-date-picker v-model="form.name" type="date" placeholder="选择证件有效期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div>附件</div>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="24">
          <div class="card_purple">
            <el-form-item class="card_fuel_gas margin-l-50" label="营业执照">
              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item class="card_fuel_gas" label="燃气从业资格证">
              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'formShop',
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          emptype: '',
        },
        employeeType: [{
          value: '3',
          label: '门店人员'
        }, {
          value: '4',
          label: '货车司机'
        }, {
          value: '5',
          label: '重装站人员'
        }],
        imageUrl: '',
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card_employee {
    max-height: 550px;
    overflow-y: scroll;
    padding-right: 5px;
    overflow-x: hidden;
  }
  .margin-l-50{
    margin-right: 50px;
  }
  .card_fuel_gas {
    display: flex;
    flex-direction: column;
  }

  .card_fuel_gas ::v-deep .el-form-item__label {
    width: 120px !important;
    text-align: left;
    // margin-bottom: 20px;
  }

  .card_fuel_gas ::v-deep .el-form-item__content {
    margin-left: 0px !important;
  }
  .card_purple{
    display: flex;
  }
</style>
