<template>
  <div class="page-body">
    <div class="head-box">
      <div class="head-box-top">
        <div class="top-call" />
        <div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
        <div class="top-call"><title-menus ref="titleMenus" menu-index="99" style="padding-top: 15px" /></div>
        <div class="top-call"><user-login ref="userLogin" /></div>
        <div class="top-call"><language-setting ref="languageSetting" /></div>
      </div>
    </div>
    <div class="content-box">
      <div style="width: 88%;padding-left: 9%;padding-top: 130px">
        <div class="page-title" style="text-align: center">填写注册信息</div>
        <div class="form-table-box">
          <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
            <el-form-item label="企业名称：" class="form-cell" prop="enterpriseName">
              <div class="cell-box">
                <el-input v-model="formData.enterpriseName" placeholder="请输入企业名称" class="cell-input" />
              </div>
            </el-form-item>
            <el-form-item label="企业联系人：" class="form-cell" prop="enterpriseContactPerson">
              <div class="cell-box">
                <el-input v-model="formData.enterpriseContactPerson" placeholder="请输入联系人" class="cell-input" />
              </div>
            </el-form-item>
            <el-form-item label="企业联系人手机号：" class="form-cell" prop="enterpriseContactPersonPhone">
              <div class="cell-box">
                <el-input v-model="formData.enterpriseContactPersonPhone" placeholder="请输入手机号" class="cell-input" />
              </div>
            </el-form-item>
            <el-form-item label="注册地址：" class="form-cell" required>
              <div class="cell-box">
                <el-select v-model="formData.registeredAddressProvince" placeholder="省" style="width: 120px" @change="findAreaByCodeAndType(formData.registeredAddressProvince,2, 'cityOpts')">
                  <el-option v-for="item in provinceOpts" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
                <el-select v-model="formData.registeredAddressCity" placeholder="市" style="width: 160px" @change="findAreaByCodeAndType(formData.registeredAddressCity,3, 'countyOpts')">
                  <el-option v-for="item in cityOpts" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
                <el-select v-model="formData.registeredAddressArea" placeholder="区/县" style="width: 160px">
                  <el-option v-for="item in countyOpts" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
              </div>
              <div class="cell-box">
                <el-input v-model="formData.registeredAddressStreet" placeholder="详细地址（例如：和平路北大街106号）" class="cell-input" />
              </div>
            </el-form-item>
            <el-form-item label="企业邮箱：" class="form-cell" prop="enterpriseEmail">
              <div class="cell-box">
                <el-input v-model="formData.enterpriseEmail" placeholder="请输入邮箱" class="cell-input" />
              </div>
            </el-form-item>
          </el-form>
          <div style="width: 100%;text-align: center">
            <el-button type="primary" @click="submitForm()">完成</el-button>
          </div>
        </div>
      </div>
    </div>
    <home-footer ref="homeFooter" />
    <el-backtop />
  </div>
</template>
<script>
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'

export default {
  components: { titleMenus, userLogin, languageSetting, homeFooter },
  dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],
  data() {
    return {
      uploadHeaders: { 'Authorization': getToken() },
      imgSrcStart: process.env.VUE_APP_BASE_API,
      dialogImageUrl: '',
      dialogImageVisible: false,
      visible: false,
      title: '',
      imgList: [],
      dialogImgUrl: '',
      dialogImgVisible: false,
      provinceOpts: [],
      cityOpts: [],
      countyOpts: [],
      formData: {
        annualInspectionDate: '', // 审核日期
        businessLicense: '', // 营业执照的照片名称
        businessScope: '', // 经营范围
        businessScopeIntroduction: '', // 业务范围介绍
        businessStatus: '', // 经营状态
        enterpriseAddress: '', // 企业地址
        enterpriseContactPerson: '', // 企业联系人
        enterpriseContactPersonPhone: '', // 企业联系人手机号
        enterpriseEmail: '', // 企业邮箱
        enterpriseIntroduction: '', // 企业介绍
        enterpriseName: '', // 企业名称
        enterpriseType: '', // 企业类型
        establishmentDate: '', // 成立日期
        industry: '', // 所属行业
        legalRepresentative: '', // 法定代表人
        mainProductsIntroduction: '', // 主营产品介绍
        operatingPeriod: '', // 经营期限
        registeredAddressArea: '', // 注册地址-区
        registeredAddressCity: '', // 注册地址-市
        registeredAddressProvince: '', // 注册地址-省
        registeredAddressStreet: '', // 注册地址-街道
        registeredCapital: '', // 注册资本
        registrationAuthority: '', // 登记机关
        supplierLevel: '1', // 供应商级别
        taxpayerIdentificationNumber: '', // 纳税人识别号
        unifiedSocialCreditCode: '', // 统一社会信用代码
        sysUserId: null
      },
      rules: {
        enterpriseName: { required: true, message: '请填写企业名称', trigger: 'blur' },
        enterpriseContactPerson: { required: true, message: '请填写企业联系人', trigger: 'blur' },
        enterpriseContactPersonPhone: { required: true, message: '请填写企业联系人手机号', trigger: 'blur' },
        registeredAddressProvince: { required: true, message: '请填写企业地址', trigger: 'blur' },
        registeredAddressCity: { required: true, message: '请填写企业地址', trigger: 'blur' },
        registeredAddressStreet: { required: true, message: '请填写企业地址', trigger: 'blur' },
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    cancelView() {
      this.$router.go(-1)
    },
    submitForm() {
      this.$refs.formViewRef.validate((valid, obj) => {
        if (valid) {

        } else {
          this.$message({
            message: '表单信息有误，请核对无误后提交！',
            type: 'error'
          })
        }
      })
    },
    handleProgress(file) {
      if (this.formData.businessLicense.split(';').length >= 2) {
        this.$message({
          message: '超出最大上传数量限制',
          type: 'info'
        })
        return false
      }
    },
    handleExceed() {
      this.$message({
        message: '超出最大上传数量限制',
        type: 'info'
      })
    },
    handleRemoveImg(item) {
      this.imgList.splice(this.imgList.indexOf(item), 1)
      const arr = this.formData.businessLicense.split(';')
      arr.splice(arr.indexOf(item), 1)
      this.formData.businessLicense = arr.join(';')
    },
    handleRemove(file, fileList) {
      if (!file.response) {
        return
      }
      HttpReq.backstageApi.deleteBusinessLicense({
        businessLicense: file.response.businessLicense
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: 'success',
          duration: 2500
        })
        const arr = this.formData.businessLicense.split(';')
        arr.splice(arr.indexOf(file.response.businessLicense), 1)
        this.formData.businessLicense = arr.join(';')
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImageVisible = true
    },
    handleImported(response, file, fileList) {
      this.$nextTick(() => {
        const arr = this.formData.businessLicense ? this.formData.businessLicense.split(';') : []
        arr.push(response.businessLicense)
        this.formData.businessLicense = arr.join(';')
        this.$notify({
          title: '上传成功！',
          type: 'success',
          duration: 2500
        })
      })
    },
    findAreaByCodeAndType(code, type, optsName) {
      switch (optsName) {
        case 'provinceOpts':
        case 'cityOpts':
          this.formData.registeredAddressCity = null
          this.formData.registeredAddressArea = null
          break
        case 'countyOpts':
          this.formData.registeredAddressArea = null
      }
      this.findAreaQueryOnly(code, type, optsName)
    },
    findAreaQueryOnly(code, type, optsName) {
      HttpReq.backstageApi.findAreaByCodeAndType({
        code, type
      }).then((res) => {
        this[optsName] = res
      })
    },
    loadData() {
      this.findAreaQueryOnly(0, 1, 'provinceOpts')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
  cursor:pointer;
}
.clear {
  clear: both
}
.inline-block {
  display: inline-block;
}
.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}
.showcase {
  padding: 1px 0;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
.form-table-box {
  width: 1080px;
  margin: 20px auto;
  padding: 30px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
  border-radius: 10px;
}
.head-box {
  width: 100vw;
  top: 0;
  position: fixed;
  background: none repeat scroll 0 0 white;
  z-index: 999;
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
  .head-box-top {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .top-call {
      height: 80px;
      padding-top: 15px;
    }
  }
}
.content-box {
  min-height: calc(100vh - 300px);
  font-family: Source Han Sans CN;
  user-select: none;
  .page-title {
    margin-top: 20px;
    padding: 0 20px;
    font-size: 26px;
    font-weight: bold;
    color: #333333;
  }
}
.line-btn {
  display: flex;
  justify-content: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  .btn-o {
    margin: 0 25px;
    width: 360px;
    padding: 6px 10px;
    background: #F7601A;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid transparent;
    font-size: 22px;
    color: #FFFFFF;
    cursor:pointer;
    user-select: none;
  }
  .btn-o:hover {
    border: 1px solid rgba(30, 144, 255, 0.8);
    color: #1482f0;
  }
  .btn-l {
    margin: 0 25px;
    width: 360px;
    padding: 10px;
    background: #1961C5;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid transparent;
    font-size: 22px;
    color: #FFFFFF;
    cursor:pointer;
    user-select: none;
  }
  .btn-l:hover {
    border: 1px solid rgba(0,0,0,0.3);
    color: #F7601A;
  }
  .btn-b {
    margin: 0 10px;
    width: 168px;
    padding: 6px;
    background: #EFF6FF;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    text-align: center;
    font-size: 20px;
    color: #1961C5;
    cursor:pointer;
    user-select: none;
  }
  .btn-b:hover {
    border: 1px solid rgba(30, 144, 255, 0.9);
  }
  .active {
    color: #FFFFFF;
    font-weight: 400;
    background: #1961C5;
  }
}
.grid-content {
  border: 1px solid rgba(100, 100, 100, 0.3);
  padding: 0;
}
.grid-label {
  background: #dedede;
  padding: 0 10px;
}
.editor{
  text-align:left;
  width: 680px;
}
::v-deep .w-e-text-container {
  height: 560px !important;
}
.cell-box {
  min-width: 120px;
  .cell-input {
    width: 620px;
  }
  .cell-select {
    width: 220px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 28px;
    line-height: 24px;
    padding: 0 8px;
  }
  .input-new-tag {
    width: 140px;
    height: 28px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  >>>.el-input__inner {
    border: 1px solid rgba(100, 100, 100, 0.1);
    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 5px;
  }
  >>>.el-input.is-disabled .el-input__inner {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
    background: white;
    cursor: text;
  }
  >>>.el-input.is-disabled .el-input__icon {
    cursor: text;
  }
  >>>.el-icon-circle-check {
    color: #13ce66;
  }
  //>>>.el-icon-arrow-up:before {
  //  content: '';
  //}
}
</style>
