<template>
  <avue-form-design
    style="height: 90vh"
    :show-github-star="false"
    :storage="false"
    :options="options"
    ref="formDesign"
    :toolbar="toolbar"
    :my-config="false"
    :includeFields="includeFields"
    :customFields="customFields"
    aside-left-width="270px">
    <template slot="toolbar-left">
      <el-button
        style="margin-left:10px"
        type="text"
        icon="el-icon-success"
        @click="handleSaveData">保存数据</el-button>
    </template>
    <template slot="toolbar">
      <el-button
        style="margin-left:10px"
        type="text"
        icon="el-icon-files"
        @click="handlePublic">发布</el-button>
    </template>
  </avue-form-design>
</template>

<script type="text/ecmascript-6">
import { getAttrs, saveFormModel, getFormModel } from '@/api/model/genenrteTable'
import { updateModel } from '@/api/model/modelManger'
  export default {
    beforeRouteLeave(to, from, next) {
    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
      this.$destroy(true)
      next()
    },
    data() {
      return {
        attrs: [],
        // includeFields: ['input', 'textarea', 'number', 'radio', 'checkbox', 'select', 'cascader', 'tree', 'datetime', 'date', 'time'],
        includeFields: [],
        options: {
          column: []
        },
        toolbar: ['generate', 'preview'],
        customFields: [],
        allAttrs: []

      }
    },
    computed: {
      tableTata() {
        return this.$store.state.table.tableTata
      }
    },
    beforeMount() {
      Object.assign(this.$data, this.$options.data())
    },
    mounted() {
      this.init()
    },
    watch: {
      tableTata: {
        deep: true,
        immediate: true,
        handler(newVal, oldVal) {
          this.customFields = this.allAttrs.filter((attr) => !newVal.some(val => val.prop === attr.prop))
        }
      }
    },
    methods: {
      handleSaveData() {
        this.getData().then((options) => {
          saveFormModel({
            modelId: this.$route.query.id,
            ...options
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success('保存成功')
              // this.$router.push({ path: '/standard/formModel' })
            }
          })
        })
      },
      getData() {
        return this.$refs.formDesign.getData('json')
      },
      init() {
        const id = this.$route.query.id
        this.getFormModelData(id)
        this.getAttrs(id)
      },
      getAttrs(modelId) {
        getAttrs({ modelId }).then(res => {
          if (res.code === 200) {
            // this.attrs = res.rows
            this.generateCustomFields(res.rows)
          }
        })
      },
      generateCustomFields(attrs) {
        attrs.map((filed) => {
          this.allAttrs.push({
            type: 'input',
            label: filed.attr_name,
            span: 24,
            display: true,
            prop: filed.id,
            icon: 'el-icon-menu',
            status: filed.status,
            sortable: true,
            fixed: false,
            filter: false
          })
        })
        this.customFields = this.allAttrs
        .filter(attr => !this.options.column.some(val => val.prop === attr.prop))
      },
      getFormModelData(modelId) {
        getFormModel({ modelId }).then((res) => {
          const reg = /\\/g
          if (res.code === 200) {
            this.options = Object.keys(res.data).length > 0
            ? JSON.parse(JSON.stringify(res.data).replace(reg, '\\')) : this.options
          }
        })
      },
      handlePublic() {
        updateModel({ id: this.$route.query.id, formStatus: '1' }).then((res) => {
          if (res.code === 200) {
            this.$message.success('发布成功')
            this.$router.push({ path: '/standard/formModel' })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
