<script>
import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'
import {getConfigByNameAsync} from '@vue2-client/services/api/common'

export default {
  name: 'Demo',
  components: {XFormGroup},
  data() {
    return {
      visible: true,
      /** 与 XFormGroup 内 allFormData 同步，用于展示总表单数据 */
      allFormDataSnapshot: {}
    }
  },
  created() {
    getConfigByNameAsync('changeMeterFormGroup', 'af-revenue').then(res => {
      this.$refs.xFormGroupDemo.init({
        ...res,
        serviceName: 'af-revenue',
        formShow: {showfillgasInfo: false},
        modifyModelData: { },
        extData: {
         user:{}
        }
      })
    })
  },
  computed: {
    allFormDataJson() {
      try {
        return JSON.stringify(this.allFormDataSnapshot, null, 2)
      } catch (e) {
        return String(e)
      }
    }
  },
  methods: {
    /**
     * 事件参数为 (groupName, 当前组 formData)，但总数据已在子组件 allFormData 中合并完毕
     */
    xFormGroupDataChange() {
      const group = this.$refs.xFormGroupDemo
      if (!group || !group.allFormData) return
      this.allFormDataSnapshot = JSON.parse(JSON.stringify(group.allFormData))
    },
    submitForm() {
      this.$refs.xFormGroupDemo.onSubmit().then(res => {
        console.log('所有表单的结果', res)
      })
    },
    async meterBaseChange(attr, value) {
      if (!(value || value === 0)) {
        return
      }
      this.$refs.xFormGroupDemo.updateGroupValues('fillgasInfo', {
        f_remanent_gas: value + 11,
        f_stair_use: 12
      })
      if(this.allFormDataSnapshot.baseInfo.f_gasmodel_id) {
        this.$refs.xFormGroupDemo.xFormShow('x-form-show', 'fillgasInfo', 2)
      } 
    }
  }
}
</script>

<template>
  <a-card>
    <a-button @click="submitForm">提交测试</a-button>
    <a-divider orientation="left">总表单数据</a-divider>
    <pre class="all-form-data-preview">{{ allFormDataJson }}</pre>
    <XFormGroup ref="xFormGroupDemo" @x-form-group-data-change="xFormGroupDataChange" @meter-base-change="meterBaseChange"></XFormGroup>
  </a-card>
</template>

<style scoped lang="less">
.all-form-data-preview {
  max-height: 320px;
  overflow: auto;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.5;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}
</style>
