<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">企业信息</div>
      <div class="contian-operate">
        <el-button type="primary" @click="queryCompanyProduct">企业产品</el-button>
      </div>
    </div>
    <div class="content-container">
      <div class="main-info">
        <el-form :model="formObj" :rules="rules" ref="formObj" label-width="86px" class="update-wrapper demo-ruleForm">
          <el-row :gutter="25">
            <el-col :span="14">
              <el-row :gutter="20" class="update-main">
                <el-col :span="24">
                  <el-form-item class="is-required" label="企业名称" prop="name">
                    <el-input v-model="formObj.name" placeholder="请填写企业全部名称" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="创立年份" prop="createYear">
                    <el-date-picker
                      :editable="false"
                      v-model="formObj.createYear"
                      type="year"
                      placeholder="请选择企业的创立年份">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="官方网址" prop="website">
                    <el-input v-model="formObj.website" placeholder="如: www.ekexiu.xom"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业规模" prop="">
                    <el-select v-model="selectLongTime" placeholder="请选择员工数量范围">
                      <el-option
                        v-for="item in longTime"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @current-change="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业类型" prop="createYear">
                    <el-select v-model="selectLongTime" placeholder="请选择最符合的一项">
                      <el-option
                        v-for="item in longTime"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @current-change="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所在城市" prop="">
                    <cityPicker></cityPicker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业邮编" prop="website">
                    <el-input v-model="formObj.website" type="number" placeholder="请填写企业邮编" maxlength="20"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="企业地址" prop="address">
                    <el-input v-model="formObj.address" placeholder="请填写企业详细地址" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系人" prop="linkman">
                    <el-input v-model="formObj.linkman" placeholder="请填写企业联系人" maxlength="10"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="tel">
                    <el-input v-model="formObj.tel" placeholder="请填写联系电话" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系邮箱" prop="mail">
                    <el-input v-model="formObj.mail" placeholder="请填写联系邮箱" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客服电话" prop="tel">
                    <el-input v-model="formObj.tel" placeholder="请填写客服电话" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
                <el-col :span="12">
                  <el-form-item label="工作时间" prop="linkman">
                    <el-input v-model="formObj.linkman" placeholder="请填写客服工作时间" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客服邮箱" prop="mail">
                    <el-input v-model="formObj.mail" placeholder="请填写客服邮箱" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所属行业">
                    <dynamicTags :tagInfo="tagIndustry" :dyStr="formObj.industry" v-on:turnTags="turnIndustryTags($event)" ref="tagComponent"></dynamicTags>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="专注领域">
                    <dynamicTags :tagInfo="tagSubject" :dyStr="formObj.subject" v-on:turnTags="turnSubjectTags($event)"></dynamicTags>
                  </el-form-item>
                </el-col>
                
                <!-- :labelW="80"
                  :widthselect="200"
                  :prov="province"
                  :city="city"
                  v-on:selectProv="getSelectProv($event)"
                  v-on:selectCity="getSelectCity($event)" -->
                
                
                <el-col :span="24">
                  <el-form-item class="is-required" label="企业简介" prop="desc">
                    <el-input type="textarea" :rows="8" v-model="formObj.desc" placeholder="请填写一个简单的介绍，让大家更好地了解您的企业" maxlength="5000"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="企业资质">
                    <dynamicTags :tagInfo="tagProve" :dyStr="formObj.prove" v-on:turnTags="turnProveTags($event)"></dynamicTags>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="供应商领域">
                    <dynamicTags :tagInfo="tagSubjectG" :dyStr="formObj.subjectG" v-on:turnTags="turnSubjectGTags($event)"></dynamicTags>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="客户领域">
                    <dynamicTags :tagInfo="tagSubjectC" :dyStr="formObj.subjectC" v-on:turnTags="turnSubjectCTags($event)"></dynamicTags>
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="el-btn-col">
                  <div class="el-btn-col-box">
                    <el-button type="primary" @click="submitForm('formObj')">保存</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <div class="update-logo">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  ref="uploadLogo"
                  :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>
                <div class="update-tip">PNG/JPG/JPEG格式<br>大小2M以内</div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import queryDict from '@/utils/queryDict'

  import cityPicker from '@/components/CityPicker'
  import dynamicTags from '@/components/DynamicTags'

  export default {
    props: {
      plat: {
        type: Object
      }
    },
    components: {
      dynamicTags,
      cityPicker
    },
    data() {
      return {
        tagIndustry: {
          lableTit: '所属行业',
          placeholder: '请填写企业所属的行业，如：制造业、互联网、服务业',
          limitCount: 15,
          tagsNum: 3
        },
        tagSubject: {
          lableTit: '专注领域',
          placeholder: '请填写企业专注的领域，如：腐蚀防护、石墨烯、纳米材料',
          limitCount: 15,
          tagsNum: 20
        },
        tagProve: {
          lableTit: '企业资质',
          placeholder: '请填写企业获得的资质，如：ISO9000认证、高新技术企业认证',
          limitCount: 50,
          tagsNum: 5,
          tagblock: true
        },
        tagSubjectG: {
          lableTit: '供应商领域',
          placeholder: '请填写企业上游所涉及的领域',
          limitCount: 15,
          tagsNum: 10
        },
        tagSubjectC: {
          lableTit: '客户领域',
          placeholder: '请填写企业下游所涉及的领域',
          limitCount: 15,
          tagsNum: 5
        },
        plf_user: '',
        plf_name: '',
        imageUrl: '', // 临时地址
        imgName: '', // 图片的name
        uploadUrl: '',
        // httpUrl.hQuery.baseInfo.upload
        // optionsCity: provinceAndCityData,
        // selectedOptions: [],
        dynamicTags: [],
        isShowAdd: true,
        inputVisible: false,
        inputValue: '',
        province: '',
        city: '',
        formObj: {
          name: '',
          linkman: '',
          tel: '',
          mail: '',
          address: '',
          website: '',
          industry: '',
          subject: '',
          desc: '',
          prove: '',
          subjectG: '',
          subjectC: ''
        },
        rules: {
          mail: [
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
    },
    created() {
      this.getDictoryData()
      // this.plf_user = Cookies.get('plf_user')
      // this.getPlatInfo(this.plf_user)
    },
    methods: {
      getDictoryData() {
        const that = this
        queryDict.applyDict('QYGM', function(dictData) {
          dictData.map(item => {
            that.cableMain[item.code] = item.caption
          })
        }) // 企业规模
        queryDict.applyDict('QYLX', function(dictData) {
          dictData.map(item => {
            that.addr[item.code] = item.caption
          })
        }) // 企业类型
        queryDict.applyDict('XZQH', function(dictData) {
          dictData.map(item => {
            that.citys[item.code] = item.fullCaption
          })
        }) // 城市级联
      },
      queryCompanyProduct() {
        this.$router.replace({ name: 'compProduct' })
      },
      turnIndustryTags(msg) {
        this.formObj.industry = msg
      },
      turnSubjectTags(msg) {
        this.formObj.subject = msg
      },
      turnProveTags(msg) {
        this.formObj.prove = msg
      },
      turnSubjectGTags(msg) {
        this.formObj.subjectG = msg
      },
      turnSubjectCTags(msg) {
        this.formObj.subjectC = msg
      },
      getSelectProv(prov) {
        this.province = prov
      },
      getSelectCity(city) {
        this.city = city
      },
      getPlatInfo(id) {
        // this.$axios.get(httpUrl.hQuery.baseInfo.query, {
        //   params: {
        //     id: id
        //   }
        // }).then((res) => {
        //   console.log(res);
        //   let str = res.data;
        //   this.plf_name = str.name;
        //   this.imageUrl = str.logo ? util.ImageUrl('platform' + str.logo) : util.defaultSet.img.plat;
        //   this.imgName = str.logo;
        //   this.ruleFormUpdate.linkman = str.linkman;
        //   this.ruleFormUpdate.tel = str.linkphone;
        //   this.ruleFormUpdate.mail = str.linkemail;
        //   if (str.province) {
        //     this.province = str.province;
        //   }
        //   if (str.city) {
        //     this.city = str.city;
        //   }
        //   this.ruleFormUpdate.address = str.addr;
        //   this.ruleFormUpdate.website = str.url;
        //   if (str.industry) {
        //     this.ruleFormUpdate.industry = str.industry;
        //     this.dynamicTags = str.industry.split(',');
        //     if (this.dynamicTags.length === 10) {
        //       this.isShowAdd = false;
        //     }
        //   }
        //   this.ruleFormUpdate.desc = str.descp;
        // });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs.uploadLogo.submit() // 确认上传图片
            if (this.province) {
              if (!this.city) {
                this.$alert('请您选择所在城市', '提示', {
                  confirmButtonText: '确定',
                  type: 'warning',
                  center: true
                })
                return
              }
            }
            // let paramsData = {
            //   'id': this.plf_user,
            //   'name': this.plf_name,
            //   'linkman': this.ruleFormUpdate.linkman,
            //   'logo': this.imgName,
            //   'linkphone': this.ruleFormUpdate.tel,
            //   'linkemail': this.ruleFormUpdate.mail,
            //   'province': this.province,
            //   'city': this.city,
            //   'addr': this.ruleFormUpdate.address,
            //   'url': this.ruleFormUpdate.website,
            //   'industry': this.ruleFormUpdate.industry,
            //   'descp': this.ruleFormUpdate.desc
            // }
            // this.$axios.post(httpUrl.hQuery.baseInfo.update, paramsData).then((res) => {
            //   this.$message({
            //     message: '平台信息修改成功！',
            //     type: 'success'
            //   });
            //   Cookies.set('plf_logo', this.imgName);
            //   this.$router.push({path: '/WorkHome'});
            //   this.reload();
            // }).catch(error => {
            //   console.log(error);
            // });
          } else {
            return false
          }
        })
      },
      // upload img
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
        this.imgName = res.data[0].uri
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG && !isPNG) {
          this.$message.error('请上传PNG/JPG/JPEG格式的图片')
        }
        if (!isLt2M) {
          this.$message.error('上传logo大小不能超过 2MB!')
        }
        return (!isJPG || !isPNG) && isLt2M
      }
      // upload img
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .main-info{
    /*min-width: 1100px;*/
    .update-logo{
      width: 280px;
      .avatar-uploader{
        .el-upload{
          /*center-items(280px,187px);*/
          border: 1px dashed #d9d9d9;
          cursor: pointer;
          position: relative;
          .el-upload:hover {
            border-color: #dadada;
          }
          .avatar-uploader-icon{
            font-size: 40px;
            color: #8c939d;
            width: 280px;
            height: 187px;
            line-height: 187px;
            text-align: center;
          }
        }
      }
      .update-tip{
        margin-top:15px;
        text-align:center;
        font-size:14px;
        /*color:$secondaryFont;*/
      }
    }
    .update-main{
      padding-left:25px;
      .update-title{
        font-size:30px;
        line-height:54px;
        margin-bottom:16px;
        padding-left:10px;
      }
    }
    .shortW{
      width:300px;
    }
  }
</style>
