<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="rulesObj" ref="formObj" label-width="80px" class="update-wrapper demo-ruleForm">
          <el-row :gutter="25">
            <el-col :span="18">
              <el-row :gutter="20" class="update-main">
                <el-col :span="24">
                  <el-form-item label="产品图片" prop="img">
                    <uploadFile :upImgsStr="formObj.img" :uploadImg="uploadImg" @uploadfun="uploadfun"></uploadFile>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item 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 :dyStr="keywordObj" :tagInfo="tagKeyword" @turnTags="turnKeywordTags($event)"></dynamicTags>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="产品简介" prop="cnt">
                    <el-input type="textarea" :rows="4" v-model="formObj.cnt" placeholder="请填写产品简介" maxlength="250"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="厂商型号" prop="spec">
                    <el-input v-model="formObj.spec" placeholder="请填写厂商型号" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="产地" prop="producingArea">
                    <el-input v-model="formObj.producingArea" placeholder="请填写产地" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="官方价格" prop="price">
                    <el-input v-model="formObj.price" placeholder="请填写官方价格" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="性能参数" prop="parameter">
                    <el-input type="textarea" :rows="6" v-model="formObj.parameter" placeholder="请填写产品简介" maxlength="1000"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="详情描述" prop="descp">
                    <el-input type="textarea" :rows="8" v-model="formObj.descp" 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 {
    addProduct,
    updateProduct,
    queryProductOne,
    queryProductKeyword,
    uploadProductLogo
  } from '@/api/companyCen'
  import {
    requiredTip
  } from '@/utils/validator'
  import { urlParse } from '@/utils'

  import dynamicTags from '@/components/DynamicTags'
  import uploadFile from '@/components/uploadFile'

  export default {
    data() {
      return {
        companyId: '',
        productId: '',
        tagKeyword: {
          lableTit: '关键词',
          placeholder: '请填写相关的关键词，如：腐蚀防护、石墨烯、纳米材料',
          limitCount: 10,
          tagsNum: 5
        },
        keywordObj: [],
        formLoading: true,
        formObj: {
          name: '',
          img: '',
          logo: '',
          cnt: '',
          descp: '',
          spec: '',
          producingArea: '',
          price: '',
          parameter: '',
          createTime: '',
          keyword: []
        },
        rulesObj: {
          img: [{ required: true, message: requiredTip('产品图片'), trigger: 'blur' }],
          name: [{ required: true, message: requiredTip('产品名称'), trigger: 'blur' }],
          cnt: [{ required: true, message: requiredTip('产品简介'), trigger: 'blur' }]
        },
        uploadImg: {
          url: uploadProductLogo,
          tip: '上传产品图片',
          width: '200px',
          height: '200px',
          limit: 3
        }
      }
    },
    components: {
      dynamicTags,
      uploadFile
    },
    created() {
      this.companyId = urlParse('cid')
      if (urlParse('id')) {
        this.productId = urlParse('id')
        this.getProductInfo()
        this.getProductKeyword()
      }
    },
    methods: {
      getProductInfo() {
        var that = this
        that.$http.get(queryProductOne, {
          id: that.productId
        }, function(res) {
          that.formLoading = false
          if (res.success) {
            const obj = res.data
            that.formObj = {
              name: obj.name,
              img: obj.img,
              logo: obj.logo,
              cnt: obj.cnt,
              descp: obj.descp,
              spec: obj.spec,
              producingArea: obj.producingArea,
              price: obj.price,
              parameter: obj.parameter,
              createTime: obj.createTime
            }
          }
        })
      },
      getProductKeyword() {
        var that = this
        that.$http.get(queryProductKeyword, {
          id: that.productId
        }, function(res) {
          if (res.success && res.data) {
            const str = res.data
            var objKey = []
            if (str.length > 0) {
              str.map(item => {
                objKey.push(item.keyword)
              })
            }
            that.keywordObj = objKey
            that.formObj.keyword = objKey
          }
        })
      },
      submitForm(formName) {
        var that = this
        that.$refs[formName].validate((valid) => {
          if (valid) {
            const form = that.formObj
            const paramsData = {
              companyId: that.companyId,
              name: form.name,
              img: form.img,
              logo: form.logo,
              cnt: form.cnt,
              spec: form.spec,
              descp: form.descp,
              producingArea: form.producingArea,
              price: form.price,
              parameter: form.parameter,
              keyword: JSON.stringify(form.keyword)
            }
            if (that.productId) {
              const paramsId = { id: that.productId }
              const obj = Object.assign(paramsId, paramsData)
              that.$http.put(updateProduct, obj, function(res) {
                if (res.success) {
                  that.$message({
                    message: '产品信息修改成功',
                    type: 'success'
                  })
                  that.$router.push({
                    name: 'compProduct',
                    query: { cid: that.companyId }
                  })
                }
              })
            } else {
              that.$http.post(addProduct, paramsData, function(res) {
                if (res.success) {
                  that.$message({
                    message: '产品信息添加成功',
                    type: 'success'
                  })
                  that.$router.push({
                    name: 'compProduct',
                    query: { cid: that.companyId }
                  })
                }
              })
            }
          } else {
            return false
          }
        })
      },
      turnKeywordTags(msg) {
        this.formObj.keyword = msg
      },
      uploadfun(value) {
        this.formObj.img = value
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  
</style>
