<template>
  <v-container>
    <v-card id="drop-area"
            flat>
      <v-card-title class="text-center">
        开服时间设置
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text>
        <v-row>
          <v-col>
            <v-text-field label="开服时间"
                          v-model="newtime"
                          @change="describechanage"
                          :disabled="!canedit"
                          variant="outlined"></v-text-field>
          </v-col>
          <v-col cols="2">
            <v-switch v-model="canedit"
                      :disabled="!loaded"
                      label="修改"></v-switch>
          </v-col>
        </v-row>

      </v-card-text>
      <v-card-actions>
        <v-row justify="center">
          <v-col cols="5">
            <v-btn variant="flat"
                   color="secondary"
                   :disabled="mytime == newtime"
                   :loading="uploading"
                   @click="modifyopentime"
                   block>修改</v-btn>
          </v-col>
        </v-row>
      </v-card-actions>
    </v-card>
    <v-snackbar v-model="snackbar"
                :timeout="2000">
      {{ errstr }}
      <template v-slot:action="{ attrs }">
        <v-btn color="blue"
               text
               v-bind="attrs"
               @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script>
import { uploadformData } from '@/utils/upload'
export default {
  name: 'upload',
  data() {
    return {
      errstr: '',
      snackbar: false,
      optime: '',
      mytime: '',
      newtime: '',
      loaded: false,
      canedit: false,
      uploading: false,
    }
  },
  mounted: function () {
    this.getopentime()
  },
  methods: {
    getopentime() {
      this.loaded = false
      let formData = new FormData()
      uploadformData('/getopentime', formData, null)
        .then((response) => {
          const { data } = response
          this.optime = data.optime
          this.mytime = data.mytime
          this.newtime = data.mytime
          this.loaded = true
          console.log('getopentime succ')
          this.$forceUpdate()
        })
        .catch((err) => {
          this.uploading = false
          this.errstr = err.message
          this.snackbar = true
          console.log('getopentime err:%o', err)
        })
    },
    modifyopentime() {
      this.uploading = true
      let formData = new FormData()
      formData.append('opentime', this.newtime)
      uploadformData('/modifyopentime', formData, null)
        .then((response) => {
          const { data } = response
          this.mytime = data
          this.newtime = data.mytime
          console.log('modifyopentime succ')
          this.uploading = false
          this.$forceUpdate()
        })
        .catch((err) => {
          this.uploading = false
          this.errstr = err.message
          this.snackbar = true
          console.log('modifyopentime err:%o', err)
        })
    },
  },
}
</script>

<style>
</style>