<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" :rules="rules" ref="formObj" label-width="86px" class="update-wrapper demo-ruleForm">
          <el-row :gutter="25">
            <el-col :span="18">
              <el-row :gutter="20" class="update-main">
                <el-col :span="24" style="margin-bottom: 20px;margin-left:80px">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="is-required" label="产品名称" prop="name">
                    <el-input v-model="formObj.name" placeholder="请填写产品名称" maxlength="30"></el-input>
                  </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>
                <el-col :span="24">
                  <el-form-item class="is-required" label="产品简介" prop="desc">
                    <el-input type="textarea" :rows="4" v-model="formObj.desc" placeholder="请填写产品简介" maxlength="250"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item 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="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="name">
                    <el-input v-model="formObj.name" placeholder="请填写官方价格" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="性能参数" prop="desc">
                    <el-input type="textarea" :rows="6" v-model="formObj.desc" placeholder="请填写产品简介" maxlength="1000"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item 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" 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-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  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
        },
        dialogImageUrl: '',
        dialogVisible: false,
        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() {
    },
    methods: {
      queryCompanyProduct() {
        this.$router.replace({ name: 'compProduct' })
      },
      turnSubjectTags(msg) {
        this.formObj.subject = msg
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      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() // 确认上传图片
            // 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>
