<template>
  <div>
    <div class="form-wrapper">
      <el-form label-width="100px" :model="detail">
        <!-- <el-form-item label="项目">
          <el-select v-model="detail.buildingId" placeholder="请选择">
            <el-option
                    v-for="item in buildingList"
                    :key="item.buildingId"
                    :label="item.buildingName"
                    :value="item.buildingId">
            </el-option>
          </el-select>
        </el-form-item> -->
        
        <el-form-item label="获取积分：">
          <el-input v-model="detail.pointsAmount"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

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

const { mapActions: mapPointsActions } = createNamespacedHelpers("points");
const {
  mapState: mapBuildingState,
  mapActions: mapBuildingActions
} = createNamespacedHelpers("building");
export default {
  name: "goodsEdit",
  data() {
    return {
      upFileUrl: apis.file.upload.url,
      detail: {
        buildingId: '',
        pointsAmount: '',
        ruleId: '',
      },
      options: [{
          value: '1',
          label: '已上架'
        }, {
          value: '0',
          label: '已下架'
        }],
      buildingList: [],
    };
  },
  created() {
    this.init();
  },
  computed: {
    ...mapBuildingState({
      buildings: x => x.buildings
    }),
    uploadHeaders () {
        const token = localStorage.getItem('x-token') || ''
        return {
            Authorization: `Bearer ${token}`
        }
    }
  },
  methods: {
    ...mapBuildingActions(["getBuildings"]),
    ...mapPointsActions(["getPointsDetail", "editPoints", "addGoods"]),
    init() {
      this.detail.ruleId = this.$route.params.id
      if (this.detail.ruleId !== undefined) {
        this.getPointsDetail({ id: this.$route.params.id }).then(data => {
          this.detail.buildingId = data.buildingId
          this.detail.pointsAmount = data.pointsAmount
          this.detail.goodsId = data.goodsId
        });
      }
    },
    beforeImgUpload(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
        return false;
      }

      this.showLoadding("上传中...");
      return true;
    },

    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        // console.log(res)
        this.detail.imgUrl = res.data
    },

    submitForm() {
      this.showLoadding("保存中...");
      // if (this.detail.goodsId === '' || this.detail.goodsId === undefined) {
      //   console.log('添加')
      //   this.addGoods(this.detail)
      //   .then(res => {
      //     this.hideLoadding();
      //     this.$notify.info("保存成功");
      //      this.$router.go(-1)
      //   })
      //   .catch(err => {
      //     this.hideLoadding();
      //     this.$notify.error(err.message);
      //   });
      //   return;
      // }
      this.editPoints(this.detail)
        .then(res => {
          this.hideLoadding();
          this.$notify.info("保存成功");
           this.$router.go(-1)
        })
        .catch(err => {
          this.hideLoadding();
          this.$notify.error(err.message);
        });
    },

    showLoadding(text) {
      this.loading = this.$loading({
        text,
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)"
      });
    },

    hideLoadding() {
      if (this.loading) this.loading.close();
    }
  },
  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((data) => {
      this.buildingList = data.records;
    });
  }
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  width: 60%;
}
</style>

<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>
