<template>
  <kr-print-designer ref="printDesigner" :temp-value="value" :widget-options="widgets" @save="handleSave" />
</template>
<script>
import { OutStockOptions, InStockOptions } from '../data/options'
const baseUrl = process.env.VUE_APP_BASE_API;
export default {
  data() {
    return {
      tenantId: '',
      templateId: '',
      // printData: [],
      value: {},
      widgets: [],
    }
  },

  methods: {
    handleSave(data) {
      const obj = {
        contentJsonUpdate: {
          id: data.id,
          type: data.type,
          title: data.title,
          width: data.width,
          height: data.height,
          pageWidth: data.pageWidth,
          pageHeight: data.pageHeight,
          tempItems: data.tempItems,
        },
        id: data.id,
        tenantId: this.tenantId,
        title: data.title,
      }
      console.log(obj, 'handleSave')
      this.addNewModel(obj)
    },

    // 手动初始话模板数据
    initTemp() {
      this.$refs.printDesigner.initTemp(this.value, this.widgets)
    },

    addNewModel(data) {
      this.$axios.post(baseUrl + "/print/updateTemplates", data)
        .then(res => {
          console.log(res, 'res')
          if (res.data.code == 200) {
            this.$message.success("保存成功！")
            // this.$router.back()
          } else {
            this.$message.error("保存失败！")
          }
        })
        .catch(err => {
          console.error(err);
          this.$message.error("保存失败！")
        });
    },

    getWidgets(type, tenantId) {
      const url = baseUrl + `/print/printDatas?type=${type}&tenantId=${tenantId}`
      this.$axios.get(url)
        .then(res => {
          console.log(res, 'res')
          const arr = []
          res.data.data.forEach(item => {
            delete item.printComponents.defaultValue
            arr.push(item.printComponents)
          });
          this.widgets = arr
          console.log(this.widgets, 'this.widgets ')

          //传入值变化后，需要手动初始化模板数据，否则不会同步
          this.initTemp()
        })
        .catch(err => {
          console.error(err);
        });
    },

    getPrintData(tenantId, templateId) {
      const url = baseUrl + `/print/getTemplate?tenantId=${tenantId}&templateId=${templateId}`
      this.$axios.get(url)
        .then(res => {
          console.log(res, 'res')
          this.value = res.data.data.contentJson
          if (!this.value.tempItems || !this.value.tempItems.length) {
            this.value.tempItems = []
          }
          this.getWidgets(this.value.type, tenantId)
        })
        .catch(err => {
          console.error(err);
        });
    },
  },

  created() {
    // this.printData = this.$route.query.printData
    this.tenantId = this.$route.query.tenantId
    this.templateId = this.$route.query.templateId
    try {
      // this.value = this.printData
      // this.getWidgets(this.value.type)
      this.getPrintData(this.tenantId, this.templateId)
    } catch (err) {
      console.error(err)
    }
  },
}
</script>
