<template>
  <!-- 表单渲染 -->
  <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
    <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="220px">
      <el-form-item label="位置：" class="form-cell" prop="type">
        <div class="cell-box">
          <el-select v-model="formData.type" placeholder="无" class="cell-select" @change="typeChang">
            <el-option v-for="item in dict.home_setting" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
      <div v-if="formData.type==='1'">
        <el-form-item label="操作名称：" class="form-cell" prop="operationName">
          <div class="cell-box">
            <el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="频道名称：" class="form-cell" prop="channelName">
          <div class="cell-box">
            <el-input v-model="formData.channelName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="链接：" class="form-cell" prop="url">
          <div class="cell-box">
            <el-input v-model="formData.url" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="顺序：" class="form-cell" prop="operatingPeriod">
          <div class="cell-box">
            <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
          </div>
        </el-form-item>
      </div>
      <div v-if="formData.type==='2'">
        <el-form-item label="操作名称：" class="form-cell" prop="operationName">
          <div class="cell-box">
            <el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="搜索类型：" class="form-cell" prop="searchType">
          <div class="cell-box">
            <el-select v-model="formData.searchType" placeholder="无" class="cell-select">
              <el-option v-for="item in dict.home_setting_2" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="内容：" class="form-cell" prop="content">
          <div class="cell-box">
            <el-input v-model="formData.content" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="链接：" class="form-cell" prop="url">
          <div class="cell-box">
            <el-input v-model="formData.url" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="顺序：" class="form-cell" prop="sort">
          <div class="cell-box">
            <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
          </div>
        </el-form-item>
      </div>
      <div v-if="formData.type==='3'">
        <el-form-item label="操作名称：" class="form-cell" prop="operationName">
          <div class="cell-box">
            <el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="供应商ID：" class="form-cell" prop="supplierId">
          <div class="cell-box">
            <el-input v-model="formData.supplierId" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="供应商名称：" class="form-cell" prop="supplierName">
          <div class="cell-box">
            <el-autocomplete
              v-model="formData.supplierName"
              class="cell-input"
              :fetch-suggestions="querySearch"
              placeholder="单行输入"
              :trigger-on-focus="false"
              @select="handleSelect"
            />
          </div>
        </el-form-item>
        <el-form-item label="封面与LOGO：" class="form-cell" prop="partnerLogo">
          <div class="cell-box">
            <ul class="el-upload-list el-upload-list--picture-card" style="float: left">
              <li v-for="(item, index) in imgList" :key="index" tabindex="0" class="el-upload-list__item is-success">
                <img :src="imgSrcStart+item" class="el-upload-list__item-thumbnail">
                <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check" /></label>
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="dialogImgUrl=item;dialogImgVisible=true"><i class="el-icon-zoom-in" /></span>
                  <span class="el-upload-list__item-delete" @click="handleRemoveImg(item)"><i class="el-icon-delete" /></span>
                </span>
              </li>
            </ul>
            <el-dialog append-to-body :visible.sync="dialogImgVisible">
              <img width="100%" :src="imgSrcStart+dialogImgUrl">
            </el-dialog>
            <el-upload
              ref="uploadCom"
              action="/api/bsw/common/uploadPicture"
              name="multipartFile"
              :data="{mark:'logo'}"
              list-type="picture-card"
              :headers="uploadHeaders"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleImported"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <div slot="trigger" @click="handlePushClick($event)">
                <i class="el-icon-plus" />
              </div>
            </el-upload>
            <el-dialog append-to-body :visible.sync="dialogImageVisible">
              <img width="100%" :src="dialogImageUrl">
            </el-dialog>
          </div>
          <div style="display: none;clear: both">{{ formData.partnerLogo }}</div>
        </el-form-item>
        <el-form-item label="是否设置为钻石供应商：" class="form-cell" prop="diamondSupplier">
          <div class="cell-box">
            <el-radio-group v-model="formData.diamondSupplier" size="mini">
              <el-radio label="">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="是否设置为热门供应商：" class="form-cell" prop="popularSupplier">
          <div class="cell-box">
            <el-radio-group v-model="formData.popularSupplier" size="mini">
              <el-radio label="">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="顺序：" class="form-cell" prop="sort">
          <div class="cell-box">
            <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
          </div>
        </el-form-item>
      </div>
      <div v-if="formData.type==='4'">
        <el-form-item label="操作名称：" class="form-cell" prop="operationName">
          <div class="cell-box">
            <el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="产品分类：" class="form-cell" prop="productType">
          <div class="cell-box">
            <el-select v-model="formData.productType" placeholder="无" class="cell-select">
              <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="产品ID：" class="form-cell" prop="productId">
          <div class="cell-box">
            <el-input v-model="formData.productId" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="产品运营名称：" class="form-cell" prop="productOperationName">
          <div class="cell-box">
            <el-input v-model="formData.productOperationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="是否设置为信得过产品：" class="form-cell" prop="trustworthyProduct">
          <div class="cell-box">
            <el-radio-group v-model="formData.trustworthyProduct" size="mini">
              <el-radio label="">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="是否设置为热门产品：" class="form-cell" prop="popularProduct">
          <div class="cell-box">
            <el-radio-group v-model="formData.popularProduct" size="mini">
              <el-radio label="">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="顺序：" class="form-cell" prop="index">
          <div class="cell-box">
            <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
          </div>
        </el-form-item>
      </div>
      <div v-if="formData.type==='5'">
        <el-form-item label="操作名称：" class="form-cell" prop="operationName">
          <div class="cell-box">
            <el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="排行榜类型：" class="form-cell" prop="rankingType">
          <div class="cell-box">
            <el-select v-model="formData.rankingType" placeholder="无" class="cell-select">
              <el-option v-for="item in dict.home_setting_5" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item v-if="formData.rankingType==='1'" label="供应商ID：" class="form-cell" prop="supplierId">
          <div class="cell-box">
            <el-input v-model="formData.supplierId" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item v-else label="产品ID：" class="form-cell" prop="productId">
          <div class="cell-box">
            <el-input v-model="formData.productId" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item v-if="formData.rankingType==='1'" label="供应商名称：" class="form-cell" prop="supplierName">
          <div class="cell-box">
            <el-input v-model="formData.supplierName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item v-else label="产品运营名称：" class="form-cell" prop="productOperationName">
          <div class="cell-box">
            <el-input v-model="formData.productOperationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="顺序：" class="form-cell" prop="sort">
          <div class="cell-box">
            <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
          </div>
        </el-form-item>
      </div>
      <div v-if="formData.type==='6'">
        <el-form-item label="操作名称：" class="form-cell" prop="operationName">
          <div class="cell-box">
            <el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="合作伙伴名称名称：" class="form-cell" prop="partnerName">
          <div class="cell-box">
            <el-input v-model="formData.partnerName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="合作伙伴LOGO：" class="form-cell" prop="partnerLogo">
          <div class="cell-box">
            <ul class="el-upload-list el-upload-list--picture-card" style="float: left">
              <li v-for="(item, index) in imgList" :key="index" tabindex="0" class="el-upload-list__item is-success">
                <img :src="imgSrcStart+item" class="el-upload-list__item-thumbnail">
                <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check" /></label>
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="dialogImgUrl=item;dialogImgVisible=true"><i class="el-icon-zoom-in" /></span>
                  <span class="el-upload-list__item-delete" @click="handleRemoveImg(item)"><i class="el-icon-delete" /></span>
                </span>
              </li>
            </ul>
            <el-dialog append-to-body :visible.sync="dialogImgVisible">
              <img width="100%" :src="imgSrcStart+dialogImgUrl">
            </el-dialog>
            <el-upload
              ref="uploadCom"
              action="/api/bsw/common/uploadPicture"
              name="multipartFile"
              :data="{mark:'logo'}"
              list-type="picture-card"
              :headers="uploadHeaders"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleImported"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <div slot="trigger" @click="handlePushClick($event)">
                <i class="el-icon-plus" />
              </div>
            </el-upload>
            <el-dialog append-to-body :visible.sync="dialogImageVisible">
              <img width="100%" :src="dialogImageUrl">
            </el-dialog>
          </div>
          <div style="display: none;clear: both">{{ formData.partnerLogo }}</div>
        </el-form-item>
        <el-form-item label="链接：" class="form-cell" prop="url">
          <div class="cell-box">
            <el-input v-model="formData.url" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="顺序：" class="form-cell" prop="sort">
          <div class="cell-box">
            <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
          </div>
        </el-form-item>
      </div>
      <div v-if="formData.type==='7'">
        <el-form-item label="操作名称：" class="form-cell" prop="operationName">
          <div class="cell-box">
            <el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="链接名称：" class="form-cell" prop="linkName">
          <div class="cell-box">
            <el-input v-model="formData.linkName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="链接：" class="form-cell" prop="url">
          <div class="cell-box">
            <el-input v-model="formData.url" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="顺序：" class="form-cell" prop="sort">
          <div class="cell-box">
            <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
          </div>
        </el-form-item>
      </div>
      <div v-if="formData.type>=8">
        <el-form-item label="操作名称：" class="form-cell" prop="operationName">
          <div class="cell-box">
            <el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="频道名称：" class="form-cell" prop="channelName">
          <div class="cell-box">
            <el-input v-model="formData.channelName" placeholder="单行输入" class="cell-input" />
          </div>
        </el-form-item>
        <el-form-item label="富文本内容：" class="form-cell" prop="content">
          <div class="cell-box">
            <div ref="editor" class="editor" />
          </div>
        </el-form-item>
        <el-form-item label="顺序：" class="form-cell" prop="operatingPeriod">
          <div class="cell-box">
            <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="cancelView">关闭</el-button>
      <!--      <el-button type="danger" @click="submitForm()">预览</el-button>-->
      <el-button type="primary" @click="submitForm()">保存</el-button>
      <el-button v-if="formData.homePageId" type="success" @click="submitForm(true)">发布</el-button>
    </div>
  </el-dialog>
</template>
<script>
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 {
  dicts: ['home_setting', 'home_setting_2', 'home_setting_5', 'product_type'],
  data() {
    return {
      uploadHeaders: { 'Authorization': getToken() },
      imgSrcStart: process.env.VUE_APP_BASE_API,
      editor: false, // 富文本对象
      dialogImageUrl: '',
      dialogImageVisible: false,
      imgList: [],
      dialogImgUrl: '',
      dialogImgVisible: false,
      visible: false,
      title: '添加首页内容',
      formData: {
        type: '1',
        operationName: '', // 操作名称
        channelName: '', // 频道名称
        url: '', // 链接
        searchType: '', // 搜索类型
        content: '', // 内容
        supplierId: '', // 供应商id
        supplierName: '', // 供应商名称
        popularSupplier: '', // 是否热门供应商
        diamondSupplier: '', // 是否设置为钻石供应商
        productType: '', // 产品分类
        productId: '', // 产品ID
        productOperationName: '', // 产品运营名称
        trustworthyProduct: '', // 是否设置为信得过产品
        popularProduct: '', // 是否设置为热门产品
        rankingType: '1', // 排行榜类型
        partnerName: '', // 合作伙伴名称名称
        partnerLogo: '', // 合作伙伴LOGO
        linkName: '', // 链接名称
        sort: 1, // 顺序
        homePageId: null
      },
      rules: {}
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  mounted() {},
  methods: {
    typeChang() {
      if (this.formData.type >= 8) {
        this.$nextTick(() => {
          if (!this.editor) {
            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.content = html
            }
            editor.create()
            this.editor = editor
          }
          this.editor.txt.html(this.formData.content)
        })
      } else {
        if (this.editor) {
          this.editor.txt.clear()
          this.editor = null
        }
      }
    },
    checkEnterpriseName(rule, value, callback) {
      this.$nextTick(_ => {
        HttpReq.backstageApi.checkEnterpriseName({
          name: value, id: this.formData.supplierId
        }).then((res) => {
          if (res.data) {
            callback()
          } else {
            callback(new Error(res.msg))
          }
        })
      })
    },
    querySearch(queryString, cb) {
      HttpReq.backstageApi.associateQueryEnterpriseName({
        name: queryString
      }).then((res) => {
        cb(res.data)
      })
    },
    handleSelect(item) {
      this.formData.supplierId = item.id
    },
    showView() {
      this.visible = true
    },
    hideView() {
      if (this.$refs.uploadCom) {
        this.$refs.uploadCom.clearFiles()
      }
      if (this.editor) {
        this.editor.txt.clear()
        this.editor = null
      }
      this.$refs.formViewRef.resetFields()
      this.imgList = []
      this.formData = {
        type: '1',
        operationName: '', // 操作名称
        channelName: '', // 频道名称
        url: '', // 链接
        searchType: '', // 搜索类型
        content: '', // 内容
        supplierId: '', // 供应商id
        supplierName: '', // 供应商名称
        popularSupplier: '', // 是否热门供应商
        diamondSupplier: '', // 是否设置为钻石供应商
        productType: '', // 产品分类
        productId: '', // 产品ID
        productOperationName: '', // 产品运营名称
        trustworthyProduct: '', // 是否设置为信得过产品
        popularProduct: '', // 是否设置为热门产品
        rankingType: '1', // 排行榜类型
        partnerName: '', // 合作伙伴名称名称
        partnerLogo: '', // 合作伙伴LOGO
        linkName: '', // 链接名称
        sort: 1, // 顺序
        homePageId: null
      }
      this.visible = false
    },
    cancelView() {
      this.hideView()
    },
    release() {
      HttpReq.backstageApi.releaseHomePage({ ids: [this.formData.homePageId] }).then((res) => {
        this.$notify({
          title: res.msg,
          type: res.code === 200 ? 'success' : 'error',
          duration: 2500
        })
        if (res.code === 200) {
          this.cancelView()
          this.$parent.loadData()
        }
      })
    },
    submitForm(isRelease) {
      this.$refs.formViewRef.validate((valid, obj) => {
        if (valid) {
          if (this.formData.homePageId) {
            HttpReq.backstageApi.updateHomePage(this.formData).then((res) => {
              this.$notify({
                title: res.msg,
                type: res.code === 200 ? 'success' : 'error'
              })
              if (res.code === 200) {
                if (isRelease) {
                  this.release()
                } else {
                  this.cancelView()
                  this.$parent.loadData()
                }
              }
            })
          } else {
            HttpReq.backstageApi.addHomePage(this.formData).then((res) => {
              this.$notify({
                title: res.msg,
                type: res.code === 200 ? 'success' : 'error'
              })
              if (res.code === 200) {
                if (isRelease) {
                  this.release()
                } else {
                  this.cancelView()
                  this.$parent.loadData()
                }
              }
            })
          }
        } else {
          this.$message({
            message: '表单信息有误，请核对无误后提交！',
            type: 'error'
          })
        }
      })
    },
    loadData(homePageId) {
      if (homePageId) {
        this.title = '编辑首页内容'
        HttpReq.backstageApi.queryHomePageById({ homePageId }).then((res) => {
          if (res.code === 200) {
            this.formData = Object.assign(this.formData, res.data)
            if (this.formData.partnerLogo) {
              this.imgList = this.formData.partnerLogo.split(';')
            }
            if (this.formData.type >= 8) {
              this.typeChang()
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      } else {
        this.title = '添加首页内容'
      }
      this.showView()
    },
    handleExceed() {
      this.$message({
        message: '超出最大上传数量限制',
        type: 'info'
      })
    },
    handlePushClick(event) {
      if (this.formData.partnerLogo !== '') {
        event.stopPropagation()
        this.$message({
          message: '超出最大上传数量限制',
          type: 'info'
        })
      }
    },
    handleRemoveImg(item) {
      this.imgList.splice(this.imgList.indexOf(item), 1)
      const arr = this.formData.partnerLogo.split(';')
      arr.splice(arr.indexOf(item), 1)
      this.formData.partnerLogo = arr.join(';')
    },
    handleRemove(file, fileList) {
      HttpReq.backstageApi.deletePicture({
        multipartFile: file.response.pictures
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: 'success',
          duration: 2500
        })
        const arr = []
        fileList.forEach(item => {
          arr.push(item.response.pictures)
        })
        this.formData.partnerLogo = arr.join(';')
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImageVisible = true
    },
    handleImported(response, file, fileList) {
      this.$nextTick(() => {
        const arr = this.formData.partnerLogo ? this.formData.partnerLogo.split(';') : []
        arr.push(response.pictures)
        this.formData.partnerLogo = arr.join(';')
        this.$notify({
          title: '上传成功！',
          type: 'success',
          duration: 2500
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.editor{
  text-align:left;
  width: 580px;
}
.cell-box {
  min-width: 120px;
  .cell-input {
    width: 420px;
  }
  .cell-select {
    width: 220px;
  }
  >>>.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>
