form skenario

<template>
  <div class="container">
        <div class="form-group">
            <label>Nama</label>
            <input type="text" class="form-control" v-model="skenario.nama">
        </div>
        <div class="form-group">
            <label>Deskripsi</label>
            <input type="text" class="form-control" v-model="skenario.deskripsi">
        </div>
        <div class="form-group">
            <label>Tahun Awal</label>
            <input type="number" class="form-control" v-model="skenario.tahun_awal">
        </div>
        <div class="form-group">
            <label>Tahun Akhir</label>
            <input type="number" class="form-control" v-model="skenario.tahun_akhir">
        </div>
        <div class="form-group">
            <label>Skenario Tsunami?</label>
            <b-form-checkbox
            id="checkbox-1"
            v-model="skenario.tsunami"
            name="tsunami"
            value="true"
            unchecked-value="false">
            </b-form-checkbox>
        </div>
        <div v-show="skenario.tsunami" class="form-group">
            <label>Upload Raster Peta Tsunami</label>
            <br />
            <b-form-file
                v-model="files.tinggi_tsunami"
                placeholder="Upload File Raster disini"
                drop-placeholder="Lepas file di sini..."
                accept=".tif"
            ></b-form-file>
        </div>
        <div class="form-group">
            <label>Upload Raster Peta Administrasi Daerah</label>
            <br />
            <b-form-file
                v-model="files.administrasi_daerah"
                placeholder="Upload File Raster disini"
                drop-placeholder="Lepas file di sini..."
                accept=".tif"
            ></b-form-file>
        </div>
        <div class="form-group">
            <label>Upload Raster Peta Kemiringan</label>
            <br />
            <b-form-file
                v-model="files.kemiringan"
                placeholder="Upload File Raster disini"
                drop-placeholder="Lepas file di sini..."
                accept=".tif"
            ></b-form-file>
        </div>
        <div class="form-group">
            <label>Upload Raster Peta Rencana Detail Tata Ruang</label>
            <br />
            <b-form-file
                v-model="files.rdtr"
                placeholder="Upload File Raster disini"
                drop-placeholder="Lepas file di sini..."
                accept=".tif"
            ></b-form-file>
        </div>
        <div class="form-group">
            <label>Upload Raster Land Use</label>
            <div v-for="(item, index) in ((skenario.tahun_akhir - skenario.tahun_awal) + 1)" :key="index" class="form-group">
                <hr />
                <label>Tahun {{ skenario.tahun_awal + index }}</label>
                <br />
                <b-form-file
                    v-model="files.land_use[index]"
                    placeholder="Upload File Raster disini"
                    drop-placeholder="Lepas file di sini..."
                    accept=".tif"
                ></b-form-file>
            </div>
        </div>
        <button @click="save()" class="btn btn-primary">Submit</button>
  </div>
</template>

<style scoped>
body {
  background: #eee !important;
}
</style>

<script>
import Skenario from '@/api/skenario'

// @ is an alias to /src
export default {
  name: 'Skenario.form',
  beforeUpdate: function() {
    this.skenario.params.administrasi_daerah = this.files.administrasi_daerah.name
    this.skenario.params.kemiringan = this.files.kemiringan.name
    this.skenario.params.rencana_detail_tata_ruang = this.files.rencana_detail_tata_ruang.name
    this.skenario.params.tinggi_tsunami = this.files.tinggi_tsunami.name
  },
  data () {
    return {
      skenario: {
        nama: null,
        deskripsi: null,
        tahun_awal: 2018,
        tahun_akhir: 2019,
        tsunami: false,
        params: {
            administrasi_daerah: null,
            kemiringan: null,
            rencana_detail_tata_ruang: null,
            tinggi_tsunami: null
        },
      },
      files: {
            tinggi_tsunami: null,
            administrasi_daerah: null,
            kemiringan: null,
            rdtr: null,
            land_use: []
        }
    }
  },
  mounted: function() {
    this.init()
  },
  methods: {
    init: async function() {
      if(this.$route.params.id) {
          let skenario = await Skenario.show(this.$$route.params.id)
          this.skenario = skenario.data.data
      }
    },
    save: async function() {
        try {
            const submit = await Skenario.create(this.skenario)
            if (submit.data.status == true) {
                alert("Input Sukses")
                this.$router.push({ name: 'skenario.index'})
            } else {
                alert("Input Gagal")
            }
        } catch (e) {
            alert("Input Gagal")
            console.log(e)
        }
    }
  }
}
</script>