<template>
  <el-form
    :model="form"
    ref="form"
    class="form-wrap"
    label-width="140px">
    <div class="dialog-info">
      <el-form-item
        verify
        label="景点名称"
        prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- <el-form-item
        label="景点容量"
        prop="day_check_limit">
        <el-input-number
          controls-position="right"
          v-model="form.day_check_limit"
          :min="1"
          :precision="0"
        ></el-input-number>
      </el-form-item> -->
      <!-- <el-form-item
        verify
        class="is-required"
        label="峰值报警检票数"
        prop="peak_warning_num">
        <el-input-number
          controls-position="right"
          v-model="form.peak_warning_num"
          :min="1"
          :precision="0"
        ></el-input-number>
      </el-form-item> -->
      <!-- <el-form-item
        verify
        label="工作日"
        prop="openTimeWorkday">
        <el-time-picker
          :editable="false"
          :clearable="false"
          is-range
          v-model="form.openTimeWorkday"
          value-format="HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
      </el-form-item>
      <el-form-item
        verify
        label="双休日"
        prop="openTimeWeekend">
        <el-time-picker
          :editable="false"
          :clearable="false"
          is-range
          v-model="form.openTimeWeekend"
          value-format="HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
      </el-form-item> -->
      <el-form-item
        label="状态"
        prop="isOpen">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="form.isOpen"
        ></el-switch>
        <span style="margin-left:5px">
          {{ form.isOpen?'开放':'关闭' }}
        </span>
      </el-form-item>
    </div>

    <div class="dialog-btn-wrap">
      <el-button
        type="primary"
        @click="updateScenic">
        保存
      </el-button>
    </div>
  </el-form>
</template>

<script>
import { createScenic, updateScenic } from '@/api/ticketType'
export default {
  props: {
    dialogType: {
      type: String,
      default: 'add'
    },
    currentData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      form: {
        name: '',
        // day_check_limit: 99999999,
        // peak_warning_num: 99999999,
        isOpen: 1,
        parent_id: 1
        // open_starttime: '08:00:00',
        // open_endtime: '20:00:00',
        // open_starttime_weekend: '08:00:00',
        // open_endtime_weekend: '20:00:00',
        // openTimeWorkday: ['08:00:00', '20:00:00'],
        // openTimeWeekend: ['08:00:00', '20:00:00']
      }
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    updateScenic () {
      this.$refs.form.validate(valid => {
        if (valid) {
          // this.form.open_starttime = '00:00:00'
          // this.form.open_endtime = '23:59:59'
          // this.form.open_starttime_weekend = '00:00:00'
          // this.form.open_endtime_weekend = '23:59:59'
          // this.form.open_starttime_holiday = '00:00:00'
          // this.form.open_endtime_holiday = '23:59:59'
          const handler = this.dialogType === 'add' ? createScenic : updateScenic
          const msg = this.dialogType === 'add' ? '创建' : '更新'

          handler(this.form).then(res => {
            this.$message.success(`${msg}成功`)
            this.handleClose()
            this.reset()
            this.$emit('updateList')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  watch: {
    visible (val) {
      this.reset()
      if (val) {
        if (this.dialogType === 'edit' && this.currentData) {
          console.log(this.currentData)
          this.form = Object.assign({}, this.form, this.currentData)
          // this.form.openTimeWorkday = [
          //   this.form.open_starttime || '00:00:00',
          //   this.form.open_endtime || '23:59:59'
          // ]
          // this.form.openTimeWeekend = [
          //   this.form.open_starttime_weekend || '00:00:00',
          //   this.form.open_endtime_weekend || '23:59:59'
          // ]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-info {
   ::v-deep .el-form-item {
    width: 100%;
  }
}

</style>
