<template>
  <div class="companyCertify-wrap common-set-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="企业名称" prop="name" class="">
            <!-- <el-input v-model="ruleForm.name" placeholder="请输入地址" class="w-500"></el-input> -->
            <limitInput
              :inputWidth="500"
              :inputValue.sync="ruleForm.name"
              :holder="'请输入企业名称'"
              :maxLength="20">
            </limitInput>
          </el-form-item>
          <el-form-item label="所在地区" prop="region" class="city-area">
            <vue-office-area :projectName="projectName" :postUrl="postUrl" :areaOptions="areaOptions" @selected="selected"></vue-office-area>
          </el-form-item>
          <el-form-item label="详细地址" prop="addressDetail" class="">
            <limitInput
              :inputWidth="500"
              :inputValue.sync="ruleForm.addressDetail"
              :holder="'请输入详细地址'"
              :maxLength="40">
            </limitInput>
          </el-form-item>
          <el-form-item label="营业执照注册号" prop="registNum" class="">
            <limitInput
              :inputWidth="500"
              :inputValue.sync="ruleForm.registNum"
              :holder="'请输入营业执照注册号'"
              :maxLength="20">
            </limitInput>
          </el-form-item>
          <el-form-item label="证件类型" prop="cardType" class="">
            <div>
              <el-radio v-model="ruleForm.cardType" label="0">多证合一营业执照（原“注册号”字样，调整为18位的“统一社会信用代码”）</el-radio>
            </div>
            <div>
              <el-radio v-model="ruleForm.cardType" label="1">普通营业执照（仍然标识为15位的“注册号”）</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="营业执照" prop="qcloudImageUrl" class="">
            <single-upload
              :imgSrc.sync="ruleForm.qcloudImageUrl"
              :uploadLimit="8"
              :field="'businessCard'">
            </single-upload>
          </el-form-item>
          <el-form-item label="手持证件照片" prop="idPhoto" class="">
            <single-upload
              :imgSrc.sync="ruleForm.idPhoto"
              :field="'idPhoto'">
            </single-upload>
          </el-form-item>
          <el-form-item label="授权书" prop="authPhoto" class="">
            <single-upload
              :imgSrc.sync="ruleForm.authPhoto"
              :field="'authPhoto'">
            </single-upload>
          </el-form-item>
          <el-form-item label="状态" prop="status" class="status-item">
            <el-tag type="danger" v-if="ruleForm.status==0"><i class="el-icon-error"></i>审核失败</el-tag>
            <el-tag type="success" v-if="ruleForm.status==1"><i class="el-icon-success"></i>审核成功</el-tag>
            <el-tag v-if="ruleForm.status==2"><i class=""></i>审核中</el-tag>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button><el-button type="primary" @click="submitReview('ruleForm')">提交审核</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import limitInput from '@/components/limit-input.vue';
import singleUpload from '@/components/single-upload.vue';

import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
  name: "companyCertify",
  data() {
    return {
      projectName:  '', // 当前项目名
      postUrl: '/api-admin/dict-district-list',// 地区选择请求 url 参数
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: '/index',
          relocation: true
        },
        {
          name: '设置',
          path: '/companyAddress'
        },
        {
          name: '企业设置',
          path: '/companyAddress'
        },
        {
          name: '企业地址',
          path: ''
        }
      ],

      ruleForm: {
        name: '',
        region: '',
        addressDetail: '',
        registNum: '',
        cardType: '0',//
        qcloudImageUrl: '',
        idPhoto: '',
        authPhoto: '',
        status: 0
      },
      rules: {
        name: [
          {required: true,message: '请输入企业名称',  trigger: 'blur' }
        ],
        addressDetail: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        registNum: [
          { required: true, message: '请输入营业执照注册号', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择地区', trigger: 'blur' }
        ],
        cardType: [
          { required: true, message: '请选择证件类型', trigger: 'blur' }
        ],
        qcloudImageUrl: [
          { required: true, message: '请上传营业执照', trigger: 'blur' }
        ],
        idPhoto: [
          { required: true, message: '请上传照片', trigger: 'blur' }
        ],
        authPhoto: [
          { required: true, message: '请上传授权书', trigger: 'blur' }
        ],

      },

      // 省市县
      areaOptions: {
        provinceName: '',
        provinceId: '',
        cityName: '',
        cityId: '',
        countryName: '',
        countyId: ''
      },

      upUrl: 'upload-img',// 上传地址
      baseUrl: '',
    }
  },
  computed: {

  },
  beforeMount() {
    var that = this
    var host = window.location.origin;
    console.log("当前host:",host)
    if (host.indexOf('localhost') != '-1') {
      that.baseUrl = 'http://gicdev.demogic.com';
    }else {
      that.baseUrl = host
    }

    that.upUrl = that.baseUrl + '/api-plug/upload-img?wxFlag=1'
  },
  methods: {

    /**
     * 省市县选择
     */
    selected(val) {
      console.log(val)
      var that = this
      if (!!val.country) {
        that.ruleForm.region = val;
        console.log(val.areaId)
        that.ruleForm.areaId = val.areaId
      }else {
        that.ruleForm.region = ''
      }
    },

    /**
     * 保存
     */
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate((valid) => {
        console.log(valid, that.ruleForm)
        if (valid) {

        } else {
          return false;
        }
      });
    },500),

    /**
     * 保存---api
     */
    postSave() {
      const that = this;

    },

    /**
     * 审核提交
     */
    submitReview: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {

        } else {
          return false;
        }
      });
    },500),

    /**
     * 审核---api
     */
    postReview() {
      const that = this;
    }
  },
  mounted() {

  },
  components: {
    navCrumb,
    limitInput,
    singleUpload
  }
}

</script>
<style lang="less" scoped>
.right-content {
  /*width: 100%;*/
  padding: 24px;
  min-height: calc(100% - 240px);

  .right-box {
    background: #fff;
    padding: 24px;
    min-height: 500px;

    .m-t-24 {
      margin-top: 24px;
    }

    .w-500 {
      width: 500px;
    }

    .status-item {
      .el-tag {
        line-height: 34px;
      }
      i {
        font-size: 16px;
        margin-right: 10px;
      }
    }

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

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 180px;
      height: 180px;
      line-height: 180px;
      text-align: center;
    }
    .avatar {
      width: 180px;
      height: 180px;
      display: block;
    }

    .upload-tip {
      color: #606266;
      font-size: 12px;
      line-height: 22px;
    }
  }
}
</style>
