<template>
  <el-form ref="form" :model="dynamic" label-width="160px">
    <el-form-item label="所属楼盘">
      <el-select v-model="dynamic.buildingId" placeholder="请选择">
        <el-option v-for="(build,i) in buildings.list || []" :key="i" :label="build.buildingName" :value="build.buildingId"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="项目动态标题">
      <el-input v-model="dynamic.title"></el-input>
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="dynamic.desc"></el-input>
    </el-form-item>
    <el-form-item label="主图">
      <el-upload
        class="avatar-uploader"
        :action="upFileUrl"
        name='file'
        :show-file-list="false"
        :before-upload="beforeImgUpload"
        :on-success="handleAvatarSuccess">
        <img v-if="dynamic.imgUrl" :src="dynamic.imgUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <!-- <el-form-item label="链接地址">
      <el-input v-model="dynamic.url"></el-input>
    </el-form-item> -->
    <el-form-item label="内容">
      <div id="websiteEditorElem" style="height: 400px"></div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import apis from '../../config/api'
import E from 'wangeditor'

const { mapState: mapDynamicState, mapActions: mapDynamicActions, mapMutations: mapDynamicMutations } = createNamespacedHelpers('dynamic')
const { mapState: mapBuildingState, mapActions: mapBuildingActions } = createNamespacedHelpers('building')
const { mapActions: mapImgActions } = createNamespacedHelpers('img')

export default {
  data () {
    return {
      upFileUrl: apis.file.upload.url,
    }
  },
  computed: {
    ...mapDynamicState({
      detail: x => x.detail,
    }),
    dynamic: {
      get () {
        return this.detail
      },
      set (val) {
        return this.updateDetail(val)
      }
    },
    ...mapBuildingState({
      buildings: x => x.buildings
    }),
  },
  methods: {
    ...mapBuildingActions([
      'getBuildings'
    ]),
    ...mapDynamicMutations([
      'updateDetail'
    ]),
    ...mapDynamicActions([
      'getDetail',
      'addDynamics',
      'editDynamics'
    ]),
    ...mapImgActions([
      'uploadImg'
    ]),
    beforeImgUpload (file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
        return false
      }
      // if (file.size / 1024 > 300) {
      //   this.$message.error('图片大小不允许超过300k!')
      //   return false
      // }
      this.loading = this.$loading({
        lock: true,
        text: '上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      return true
    },
    handleAvatarSuccess (res) {
      this.updateDetail({...this.dynamic, imgUrl: res.data})
      this.loading.close()
    },
    onSubmit () {
      if (!this.detail.dynamicId) {
        // 新增
        this.addDynamics({
          detail: JSON.stringify(this.detail)
        }).then(() => {
          this.onCancel()
        })
      } else {
        // 修改
        this.editDynamics({
          detail: JSON.stringify(this.detail)
        }).then(() => {
          this.onCancel()
        })
      }
    },
    onCancel () {
      this.$router.push({name: 'dynamiclist'})
    }
  },
  mounted () {
    const _that = this
    const phoneEditor = new E('#websiteEditorElem')
    phoneEditor.customConfig.onchange = function (html) {
      _that.dynamic = {..._that.dynamic, url: html}
    }
    // phoneEditor.customConfig.uploadImgServer = this.upFileUrl
    // phoneEditor.customConfig.uploadFileName = 'uploadFiles'

    phoneEditor.customConfig.customUploadImg = function (files, insert) {
      _that.uploadImg(files[0]).then(data => {
        insert(data)
      })
    }
    phoneEditor.customConfig.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'fontSize',  // 字号
      'fontName',  // 字体
      'italic',  // 斜体
      'underline',  // 下划线
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'justify',  // 对齐方式
      'image',  // 插入图片
    ]
    phoneEditor.create()
    
    this.getBuildings({
      pageNum: 1,
      pageSize: 100,
    }).then(() => {
      if ((this.$route.query.id || '') !== '') {
        this.getDetail({id: this.$route.query.id}).then((data) => {
          phoneEditor.txt.html(data.url)
        })
      }
    })
  }
}
</script>

<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
