<script>

  export default {
    name: 'FormDrawer',
    components: {},
    props: ['show', 'formConfig', 'filters'],
    data() {
      return {
        formData: {},
        formRules: {},
        tags: {
          'el-button': el => {
            return <el-button {...{
              props: el,
              scopedSlots: el.__slot__ || {}
            }}></el-button>;
          },
          'el-input': el => {
            return <el-input v-model={this.formData[el.__vModel__]}
                             placeholder={el.placeholder}
                             {...{props: {...el}}}>
            </el-input>;
          },
        }
      }
    },
    created() {
    },
    mounted() {
    },
    render() {
      if (_.isEmpty(this.formConfig)) {
        return <el-dialog visible={this.show} title="预览" append-to-body on-close={this.close}/>;
      }
      return <el-dialog visible={this.show} title="预览" append-to-body on-close={this.close}>
        {this.buildForm()}
        <div slot="footer">
          <el-button on-click={this.close}>取 消</el-button>
          <el-button type="primary" on-click={this.submit}>确 定</el-button>
        </div>
      </el-dialog>;
    },
    watch: {
      filters: {
        handler: function (nv) {
          nv.forEach(filter => {
            this.$set(this.formData, filter.__vModel__, filter.__config__.defaultValue)
          })
        },
        deep: true
      }
    },
    computed: {},
    methods: {
      buildForm() {
        return <el-form {...{
          props: {
            model: this.formData,
            rules: this.formRules,
            ...this.formConfig,
            labelWidth: this.formConfig.labelWidth + 'px',
          },
          ref: this.formConfig.formRef,
        }}>
          <el-row gutter={this.formConfig.gutter}>
            {
              this.filters.map(filter => {
                return this.buildFormItem(filter);
              })
            }
          </el-row>
        </el-form>
      },
      buildFormItem(filter) {
        const config = filter.__config__;
        return <el-col span={config.span}>
          <el-form-item label-width={config.labelWidth} label={config.label} prop={filter.__vModel__} required={config.required}>
            {this.buildFormItemComponent(filter)}
          </el-form-item>
        </el-col>
      },
      buildFormItemComponent(filter) {
        return this.tags[filter.__config__.tag](filter);
      },
      close() {
        this.$emit('update:show', false);
      },
      submit() {
      }
    },
  }
</script>
<style scoped lang="scss">
</style>
