<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">修改平台信息</div>
    </div>
    <div class="content-container">
      <div class="main-info">
        <el-form :model="formObj" ref="formObj" :rules="rulesObj" label-width="80px" 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 label="平台名称">邢台条件科技平台</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="is-required" label="平台网址" prop="website">
                    <el-input v-model="formObj.website" placeholder="请填写平台网址" @fousc="" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="is-required" label="管理机构" prop="">
                    <el-input v-model="formObj.website" placeholder="请填写管理机构名称" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" 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 class="is-required" 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 class="is-required" 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 class="is-required" 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 class="is-required" 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 class="is-required" label="联系人" prop="linkman">
                    <el-input v-model="formObj.linkman" placeholder="请填写平台联系人" maxlength="10"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" label="职位" prop="linkman">
                    <el-input v-model="formObj.linkman" placeholder="请填写联系人职位" maxlength="20"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="is-required" label="所在机构" prop="website">
                    <el-input v-model="formObj.website" placeholder="请填写联系人所在机构" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="is-required" 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>
                <!-- :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 align="center">
                    <el-button type="primary" @click="submitForm('formObj')">保存</el-button>
                  </el-form-item>
                </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-col :span="24">
              <el-form-item align="right">
                <div>最后修改人：XXXX</div>
                <div>最后修改时间：2018/08/23 18：52：12</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import cityPicker from '@/components/CityPicker'

  export default {
    data() {
      return {
        plf_user: '',
        plf_name: '',
        imageUrl: '', // 临时地址
        imgName: '', // 图片的name
        uploadUrl: '',
        dynamicTags: [],
        isShowAdd: true,
        inputVisible: false,
        inputValue: '',
        province: '',
        city: '',
        formObj: {
          linkman: '',
          tel: '',
          mail: '',
          address: '',
          website: '',
          industry: '',
          desc: ''
        },
        rulesObj: {
        }
      }
    },
    computed: {
    },
    created() {
    },
    methods: {
      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.formObj.linkman,
            //   'logo': this.imgName,
            //   'linkphone': this.formObj.tel,
            //   'linkemail': this.formObj.mail,
            //   'province': this.province,
            //   'city': this.city,
            //   'addr': this.formObj.address,
            //   'url': this.formObj.website,
            //   'industry': this.formObj.industry,
            //   'descp': this.formObj.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
    },
    components: {
      cityPicker
    }
  }
</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;
      }

      .el-tag + .el-tag{
        margin-left: 10px;
      }
      .button-new-tag{
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }
      .input-new-tag{
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
      }
    }
    .shortW{
      width:300px;
    }
  }
</style>
