<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> -->
      <template v-if="$route.query.id">
        <stepTwo @submit="submit" v-if="Object.keys(step2Data).length" :data="step2Data"></stepTwo>
      </template>
      <template v-else>
        <stepTwo @submit="submit" :data="step2Data"></stepTwo>
      </template>
      <!-- <div class="step-two" v-if="active === 1">
      </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) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      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)
            loading.close()
          })
          .catch(() => {
            loading.close()
          })
      } else {
        createTemplate(Object.assign({ title: this.$route.query.title, rule: this.$route.query.rule }, data))
          .then(res => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.$router.go(-1)
            loading.close()
          })
          .catch(() => {
            loading.close()
          })
      }
    },
    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>
