<template>
  <div class="admin-lightapp-form">
    <x-border :title="viewModel.name" icon="icon-5333-yeifen" ref="xBorder" v-if="viewModel">
        <web-auto-form @formLoad="formLoad" :serviceConfig="viewModel" ref="zkAutoForm" :notConvert="false" @saveForm="saveForm" v-loading="isLoading"></web-auto-form>
    </x-border>
  </div>
</template>

<script>
  import './var.scss'
  import './styles' 
 import ala from '@/service/ala'
  export default {
    name: 'admin-lightapp-form',
    data () {
      return {
        data: null,
        viewModel: null,
        isLoading: true
      }
    },
    props: {
      widgetData: {},
      widget: {}
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var tableName = this.$route.query.TableName
        if (!tableName) {
          ala.error('轻应用表名不能为空')
          return
        }
        this.viewModel = await ala.lightAppToFrom(this.$route.query.TableName, this.$route.query.id)
        this.isLoading = false
      },
      async saveForm (models) {
        models.userId = ala.userId()
        let par = {
          tableName: this.$route.query.TableName,
          dataJson: JSON.stringify(models),
          id: this.$route.query.id
        }
        var response = await ala.lightAppSave(par)
        if (response) {
          this.$ala.toMessage(response)
        }
      },
      getPath () {
        this.init().then(() => {
          this.$refs.zkAutoForm.$emit('form_change_widget_data', this.viewModel)
          this.$refs.xBorder.$emit('changeTitle', this.viewModel.name)
        })
      },
      formLoad (val) {
        if (val) {
          this.loading = false
        }
      }
    },
    watch: {
      widgetData: 'getPath'
    }
  }
</script>
<style lang="scss">
.admin-lightapp-form{
  .el-loading-mask {
    height: 600px;
  }
}
</style>
