<template>
  <div class="main">
    <div class="form-tips">{{ page.tips }}</div>
    <v-form ref="form" :fields="page.form.fields" @submit="onSubmit"></v-form>
    <div class="fixed-box">
      <div class="fixed-inner">
        <div class="fixed-button" @click="handleSubmit">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import pages from '@/pages'
import VForm from '@/components/Form'
import * as api from '@/api/index'

export default {
  name: 'Create',
  components: { VForm },
  metaInfo() {
    return {
      title: this.page.title
    }
  },
  data() {
    return {}
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(route) {
        if (!route.query.channel) {
          this.$dialog
            .alert({
              message: '请选择事务'
            })
            .then(() => {
              this.$router.replace({
                name: 'channel',
                query: this.$route.query
              })
            })
        }
      }
    }
  },
  computed: {
    // 页面配置
    page() {
      const channel = this.$route.query.channel
      return pages[channel] ? pages[channel]['create'] : {}
    },
    channelId() {
      return this.$route.query.channel_id
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.submit()
    },
    onSubmit() {
      let data = this.$refs.form.ruleForm
      data.affair_id = this.channelId
      api.createAffair(data).then(() => {
        this.$dialog
          .alert({ confirmButtonText: '确定', message: '提交成功' })
          .then(() => {
            this.$router.push({ name: 'list', query: this.$route.query })
          })
      })
    }
  }
}
</script>

<style lang="scss"></style>
