<template>
  <div class="create-box">
    <app-card :title="!$route.query.id ? '新建模板' : '编辑模板'">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
      </el-steps>
      <div class="step-one" v-if="active === 0">
        <el-form ref="form" :model="form" style="width: 50%; margin: 0 auto" label-width="100px">
          <el-form-item label="模板名称">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="编号生成规则">
            <el-radio-group v-model="form.rule">
              <el-radio label="0">规则一</el-radio>
              <el-radio label="1">规则二</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="active = 1">下一步</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="step-two" v-if="active === 1">
        <stepTwo @submit="submit" :data="step2Data"></stepTwo>
      </div>
    </app-card>
  </div>
</template>

<script>
import stepTwo from '../components/stepTwo.vue'
import { createTemplate, getDetails, updateTemplate } from '../api'
// import UploadImage from '@/components/upload/UploadImage.vue'
// import { createBanner, getDetails, updateBanner } from '../api'
export default {
  components: {
    stepTwo
    // UploadImage
  },
  data() {
    return {
      active: 0,
      form: {
        title: '',
        rule: '0'
      },
      step2Data: {}
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  methods: {
    submit(data) {
      if (this.$route.query.id) {
        data.id = this.$route.query.id
        updateTemplate(Object.assign(this.form, data)).then(res => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$router.go(-1)
        })
      } else {
        createTemplate(Object.assign(this.form, data)).then(res => {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          this.$router.go(-1)
        })
      }
    },
    getDetails() {
      getDetails({ id: this.id }).then(res => {
        const data = res.data
        this.form = {
          title: data.title,
          rule: data.rule
        }
        this.step2Data = JSON.parse(data.info)
      })
    }
  },
  mounted() {
    if (this.id) {
      this.getDetails()
    }
  }
}
</script>

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