<template>
  <div class="page-body">
    <div class="head-box">
      <div class="head-box-top">
        <div class="top-call" />
        <div class="top-call"><img src="@/assets/home_images/cisnet_logo_b.png"></div>
        <div class="top-call"><title-menus ref="titleMenus" menu-index="7" style="padding-top: 15px" /></div>
        <div class="top-call"><user-login ref="userLogin" /></div>
        <div class="top-call"><language-setting ref="languageSetting" /></div>
      </div>
    </div>
    <div class="content-box">
      <div style="width: 88%;padding-left: 9%;">
        <div class="showcase">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
            <el-breadcrumb-item>我要供应{{ title }}产品</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!--我要供应-->
        <div class="page-title">我要供应{{ title }}产品</div>
        <div class="form-table-box">
          <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
            <el-form-item label="产品名称：" class="form-cell" prop="productName">
              <div class="cell-box">
                <el-input v-model="formData.productName" placeholder="请输入产品名称" class="cell-input" />
              </div>
            </el-form-item>
            <el-form-item label="产品分类：" class="form-cell" required style="margin: 0">
              <div class="cell-box" style="display: flex">
                <el-form-item prop="productType">
                  <el-select v-model="formData.productType" placeholder="产品大类" style="width: 240px" @change="changeProductType">
                    <el-option v-for="item in productTypeOpts" :key="item.id" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item prop="productSubType" style="margin-left: 5px">
                  <el-select v-model="formData.productSubType" placeholder="产品小类" style="width: 320px">
                    <el-option v-for="item in productSubTypeOpts" :key="item.id" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item v-if="formData.productType&&formData.productType<5" label="产品属性：" class="form-cell">
              <div class="cell-box" style="max-width: 600px">
                <el-row>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">品牌</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeBrand" placeholder="品牌" />
                  </el-col>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">消耗电流</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeConsumptionCurrent" placeholder="消耗电流" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">产品名</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeProductName" placeholder="产品名" />
                  </el-col>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">额定功率</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeRatedPower" placeholder="额定功率" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">型号</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeModel" placeholder="型号" />
                  </el-col>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">反应时间</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeReactionTime" placeholder="反应时间" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">工作电压</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeWorkingVoltage" placeholder="工作电压" />
                  </el-col>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">封装</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeEncapsulation" placeholder="封装" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">质量保证</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeQualityAssurance" placeholder="质量保证" />
                  </el-col>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">产地</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeProducingArea" placeholder="产地" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">数量</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeNumber" placeholder="数量" />
                  </el-col>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">颜色</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeColor" placeholder="颜色" />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">适用场景</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeApplicableScenarios" placeholder="适用场景" />
                  </el-col>
                  <el-col :span="5" class="grid-content">
                    <div class="grid-label">批号</div>
                  </el-col>
                  <el-col :span="7" class="grid-content">
                    <el-input v-model="formData.attributeBatchNumber" placeholder="批号" />
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
            <el-form-item label="产品价格区间（元）：" class="form-cell" required style="margin: 0">
              <div class="cell-box" style="display: flex">
                <el-form-item prop="minPrice">
                  <el-input v-model.number="formData.minPrice" placeholder="价格区间下限" class="cell-input" style="width: 300px" />
                </el-form-item>
                <div style="width: 20px;text-align: center">~</div>
                <el-form-item prop="maxPrice">
                  <el-input v-model.number="formData.maxPrice" placeholder="价格区间上限" class="cell-input" style="width: 300px" />
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="产品特点：" class="form-cell" prop="productFeature">
              <div class="cell-box">
                <el-tag
                  v-for="tag in productFeature"
                  :key="tag"
                  closable
                  size="small"
                  :type="tagTypes[formData.productType||0]"
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  v-show="inputVisible"
                  ref="saveTagInput"
                  v-model="inputValue"
                  class="input-new-tag"
                  placeholder="请输入特点标签文本"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                />
                <el-button v-show="!inputVisible && productFeature.length < 5" plain round :type="tagTypes[formData.productType||0]" class="button-new-tag" icon="el-icon-price-tag" @click="showInput">添加</el-button>
              </div>
            </el-form-item>
            <el-form-item label="产品照片：" class="form-cell" prop="productPic">
              <div class="cell-box">
                <el-upload
                  ref="uploadCom"
                  action="/api/bsw/product/uploadProductPic"
                  name="productPic"
                  list-type="picture-card"
                  :headers="uploadHeaders"
                  :limit="5"
                  :on-exceed="handleExceed"
                  :on-success="handleImported"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog append-to-body :visible.sync="dialogImageVisible">
                  <img width="100%" :src="dialogImageUrl">
                </el-dialog>
              </div>
            </el-form-item>
            <el-form-item label="产品概述：" class="form-cell" prop="productDescribe">
              <div class="cell-box">
                <div ref="editor" class="editor" />
              </div>
            </el-form-item>
            <el-form-item label="其他说明：" class="form-cell" prop="notes">
              <div class="cell-box">
                <el-input v-model="formData.notes" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
              </div>
            </el-form-item>
            <el-form-item label="交易保障承诺：" class="form-cell" prop="letterOfCommitment">
              <div class="cell-box">
                <el-checkbox v-model="formData.letterOfCommitment"><em>卖家承诺履约合规诈骗包赔，保障产品交易安全</em></el-checkbox>
              </div>
            </el-form-item>
          </el-form>
          <div style="width: 100%;text-align: center">
            <el-button @click="cancelView">返回</el-button>
            <!--            <el-button type="success" @click="submitForm()">保存</el-button>-->
            <el-button type="primary" @click="submitForm()">提交</el-button>
          </div>
        </div>
      </div>
    </div>
    <home-footer ref="homeFooter" />
    <el-backtop />
  </div>
</template>
<script>
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'

export default {
  components: { titleMenus, userLogin, languageSetting, homeFooter },
  dicts: ['product_rank', 'product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7'],
  data() {
    const checkPrice = (rule, value, callback) => {
      if (!value) {
        return callback()
      }
      if (!Number.isInteger(value)) {
        return callback(new Error('请输入数字值'))
      }
      setTimeout(() => {
        if (this.formData.minPrice && value < this.formData.minPrice) {
          return callback(new Error('区间值错误'))
        }
        if (this.formData.maxPrice && value > this.formData.maxPrice) {
          return callback(new Error('区间值错误'))
        }
        return callback()
      }, 500)
    }
    return {
      title: '',
      uploadHeaders: { 'Authorization': getToken() },
      imgSrcStart: process.env.VUE_APP_BASE_API,
      editor: false, // 富文本对象
      dialogImageUrl: '',
      dialogImageVisible: false,
      visible: false,
      tagTypes: ['', 'primary', 'success', 'warning', 'danger', 'info', 'info', 'info'],
      productTypeOpts: [],
      productSubTypeOpts: [],
      inputVisible: false,
      inputValue: '',
      productFeature: [], // 产品特点tag列表
      formData: {
        productId: null,
        customerId: null, // 供应商id
        enterpriseName: '', // 供应商名称
        productName: '', // 产品名称
        productType: '', // 产品大类
        productSubType: null, // 产品小类
        minPrice: null, // 价格区间-小
        maxPrice: null, // 价格区间-大
        productFeature: null, // 产品特点
        productPic: '', // 产品图片
        productDescribe: '', // 产品描述（富文本）
        notes: null, // 其他说明
        letterOfCommitment: false, // 交易保障承诺
        attributeBrand: '', // 属性-品牌
        attributeConsumptionCurrent: '', // 属性-消耗电流
        attributeProductName: '', // 属性-产品名称
        attributeRatedPower: '', // 属性-额定功率
        attributeModel: '', // 属性-型号
        attributeReactionTime: '', // 属性-反应时间
        attributeWorkingVoltage: '', // 属性-工作电压
        attributeEncapsulation: '', // 属性-封装
        attributeQualityAssurance: '', // 属性-质量保证
        attributeProducingArea: '', // 属性-产地
        attributeNumber: '', // 属性-数量
        attributeColor: '', // 属性-颜色
        attributeApplicableScenarios: '', // 属性-品牌
        attributeBatchNumber: '', // 属性-批号
        rank: '1' // 产品品级
      },
      rules: {
        productName: { required: true, message: '请填写产品名称', trigger: 'blur' },
        productType: { required: true, message: '请选择产品分类', trigger: 'blur' },
        productPic: { required: true, message: '请上传产品图片', trigger: 'blur' },
        productDescribe: { required: true, message: '请填写产品概述', trigger: 'blur' },
        letterOfCommitment: { required: true, message: '请勾选交易保障承诺', trigger: 'blur' },
        minPrice: [
          { required: true, message: '请填写产品价格区间下限', trigger: 'blur' },
          { validator: checkPrice, trigger: 'blur' }
        ],
        maxPrice: [
          { required: true, message: '请填写产品价格区间上限', trigger: 'blur' },
          { validator: checkPrice, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  mounted() {
    this.$nextTick(() => {
      HttpReq.webClientApi.personalCenterInfo().then((res) => {
        if (res.data.supplierStatus > 1) {
          this.$confirm(`您的供应商信息暂未审核，请待审核完成后再操作。`, '提示', {
            confirmButtonText: '去完善信息',
            cancelButtonText: '返回',
            type: 'warning'
          }).then(() => {
            this.$router.push({ path: `/console/userInfo` })
          }).catch(() => {
            this.$router.go(-1)
          })
        }
      })
    })
  },
  methods: {
    onDictReady(dict) {
      if (this.$route.params.type === 'hardware') {
        this.title = '硬件'
        this.productTypeOpts = dict.product_type.slice(0, 4)
      } else if (this.$route.params.type === 'other') {
        this.title = '其他'
        this.productTypeOpts = dict.product_type.slice(4)
      } else {
        this.title = ''
        this.productTypeOpts = dict.product_type
      }
      this.loadData()
    },
    handleClose(tag) {
      this.productFeature.splice(this.productFeature.indexOf(tag), 1)
      this.formData.productFeature = this.productFeature.join(';')
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue && !this.productFeature.filter(item => { return item === inputValue }).length) {
        this.productFeature.push(inputValue)
        this.formData.productFeature = this.productFeature.join(';')
      }
      this.inputValue = ''
      this.inputVisible = false
    },
    handleExceed() {
      this.$message({
        message: '超出最大上传数量限制',
        type: 'info'
      })
    },
    handleRemove(file, fileList) {
      HttpReq.backstageApi.deleteProductPic({
        productPic: file.response.productPic
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: 'success',
          duration: 2500
        })
        const arr = []
        fileList.forEach(item => {
          arr.push(item.response.productPic)
        })
        this.formData.productPic = arr.join(';')
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImageVisible = true
    },
    handleImported(response, file, fileList) {
      this.$nextTick(() => {
        const arr = this.formData.productPic ? this.formData.productPic.split(';') : []
        arr.push(response.productPic)
        this.formData.productPic = arr.join(';')
        this.$notify({
          title: '上传成功！',
          type: 'success',
          duration: 2500
        })
      })
    },
    cancelView() {
      this.$router.push({ path: `/publish` })
    },
    submitForm() {
      this.$refs.formViewRef.validate(valid => {
        if (valid) {
          HttpReq.backstageApi.addProduct(this.formData).then((res) => {
            if (res.code === 200) {
              this.cancelView()
            }
            this.$notify({
              title: res.msg,
              type: res.code === 200 ? 'success' : 'error',
              duration: 2500
            })
          })
        } else {
          this.$message({
            message: '表单信息有误，请核对无误后提交！',
            type: 'error'
          })
        }
      })
    },
    changeProductType() {
      this.formData.productSubType = null
      this.productSubTypeOpts = this.dict['product_type_' + this.formData.productType]
    },
    loadData() {
      if (this.editor) {
        return
      }
      this.$nextTick(() => {
        const _this = this
        const editor = new E(this.$refs.editor)
        editor.config.zIndex = 5
        editor.config.customUploadImg = function(files, insert) {
          files.forEach(image => {
            upload(_this.imagesUploadApi, image).then(res => {
              const data = res.data
              const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
              insert(url)
            })
          })
        }
        editor.config.onchange = (html) => {
          this.formData.productDescribe = html
        }
        editor.create()
        // 初始化数据
        editor.txt.html(this.formData.productDescribe)
        this.editor = editor
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
  cursor:pointer;
}
.clear {
  clear: both
}
.inline-block {
  display: inline-block;
}
.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}
.showcase {
  padding: 1px 0;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
.form-table-box {
  width: 1080px;
  margin: 20px auto;
  padding: 30px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
  border-radius: 10px;
}
.head-box {
  top: 0;
  background: none repeat scroll 0 0 white;
  z-index: 999;
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
  .head-box-top {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .top-call {
      height: 80px;
      padding-top: 15px;
    }
  }
}
.content-box {
  min-height: 70vh;
  margin-top: 94px;
  font-family: Source Han Sans CN;
  user-select: none;
  .page-title {
    margin-top: 20px;
    padding: 0 20px;
    font-size: 26px;
    font-weight: bold;
    color: #333333;
  }
}
.line-btn {
  display: flex;
  justify-content: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  .btn-o {
    margin: 0 25px;
    width: 360px;
    padding: 6px 10px;
    background: #F7601A;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid transparent;
    font-size: 22px;
    color: #FFFFFF;
    cursor:pointer;
    user-select: none;
  }
  .btn-o:hover {
    border: 1px solid rgba(30, 144, 255, 0.8);
    color: #1482f0;
  }
  .btn-l {
    margin: 0 25px;
    width: 360px;
    padding: 10px;
    background: #1961C5;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid transparent;
    font-size: 22px;
    color: #FFFFFF;
    cursor:pointer;
    user-select: none;
  }
  .btn-l:hover {
    border: 1px solid rgba(0,0,0,0.3);
    color: #F7601A;
  }
  .btn-b {
    margin: 0 10px;
    width: 168px;
    padding: 6px;
    background: #EFF6FF;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    text-align: center;
    font-size: 20px;
    color: #1961C5;
    cursor:pointer;
    user-select: none;
  }
  .btn-b:hover {
    border: 1px solid rgba(30, 144, 255, 0.9);
  }
  .active {
    color: #FFFFFF;
    font-weight: 400;
    background: #1961C5;
  }
}
.grid-content {
  border: 1px solid rgba(100, 100, 100, 0.3);
  padding: 0;
}
.grid-label {
  background: #dedede;
  padding: 0 10px;
}
.editor{
  text-align:left;
  width: 680px;
}
::v-deep .w-e-text-container {
  height: 560px !important;
}
.cell-box {
  min-width: 120px;
  .cell-input {
    width: 620px;
  }
  .cell-select {
    width: 220px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 28px;
    line-height: 24px;
    padding: 0 8px;
  }
  .input-new-tag {
    width: 140px;
    height: 28px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  >>>.el-input__inner {
    border: 1px solid rgba(100, 100, 100, 0.1);
    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 5px;
  }
  >>>.el-input.is-disabled .el-input__inner {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
    background: white;
    cursor: text;
  }
  >>>.el-input.is-disabled .el-input__icon {
    cursor: text;
  }
  >>>.el-icon-circle-check {
    color: #13ce66;
  }
  //>>>.el-icon-arrow-up:before {
  //  content: '';
  //}
}
</style>
