<template>
  <el-dialog title="节假日" :visible.sync="oneDialogVisible" @close="closePop" :modal="false" width="40%">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-form-item label="节日名称" prop="festivalDay">
        <el-input v-model="form.festivalDay" placeholder="请输入节日名称"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="form.startTime" type = "date" placeholder = "开始时间" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="form.endTime" type = "date" placeholder = "结束时间" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="租赁价格" prop="rentPrice">
        <el-input type="number" v-model="form.rentPrice" placeholder="请输入租赁价格"></el-input>
      </el-form-item>
      <el-form-item label="免费天数" prop="rentFreeDay">
        <el-input type="number" v-model="form.rentFreeDay" placeholder="请输入免费天数"></el-input>
      </el-form-item>
      <el-form-item label="应用对象" prop="applicationObj">
        <el-select
          style="width: 100%;"
          class="filter-item"
          v-model="form.applicationObj"
          placeholder="请选择应用对象"
        >
          <el-option key="1" label="应用于当前车辆" :value="1"></el-option>
          <el-option key="2" label="应用于同车型车辆" :value="2"></el-option>
          <el-option key="3" label="应用于所有车辆" :value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="flex-aic-jcc" style="margin-top: 10px;">
      <el-button plain @click="closePop">取消</el-button>
      <el-button type="primary" v-if="!isClick" class="handle-ok" @click="handleOk('form')">确定</el-button>
      <el-button type="primary" v-if="isClick" class="handle-ok" style="opacity: 0.4;" :disabled="true">确定</el-button>
    </div>
  </el-dialog>
</template>
<script type="javascript">
  import {mapGetters} from 'vuex';
  import ElFormItem from '../../../node_modules/element-ui/packages/form/src/form-item.vue'
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  import { getAllFestivalPrice, saveOrUpdateFestivalPrice } from "api/vehicle/vehicleInfo";
  import {objDeepCopy} from "../../utils";
  export default {
    props: ['festivalInfo', 'oneRow'],
    components: {
      ElButton,
      ElFormItem,
    },
    data() {
      return {
        isClick: false, // 添加、编辑-确定按钮  是否已点击
        oneDialogVisible: false,
        form: {
          festivalId: undefined,
          startTime: undefined, // 开始时间
          endTime: undefined, // 结束时间
          festivalDay: undefined, // 节日名称
          rentFreeDay: undefined, // 免费天数
          rentPrice: undefined, // 租赁价格
          vehicleId: undefined, // 车型id
          applicationObj: 1, // 应用对象
        },
        rules: {
          festivalDay: {
            required: true,
            message: '请输入节日名称',
            trigger: 'blur'
          },
          rentFreeDay: {
            required: true,
            message: '请输入免费天数',
            trigger: 'blur'
          },
          applicationObj: {
            required: true,
            message: '请选择应用对象',
            trigger: 'change'
          },
          rentPrice: {
            required: true,
            message: '请输入租赁价格',
            trigger: 'blur'
          },
          startTime: {
            required: true,
            message: '请选择开始时间',
            trigger: 'blur'
          },
          endTime: {
            required: true,
            message: '请选择结束时间',
            trigger: 'blur'
          }
        }
      }
    },
    mounted() {
      this.oneDialogVisible = true;
      this.form = {
        festivalId: undefined,
        startTime: undefined, // 开始时间
        endTime: undefined, // 结束时间
        festivalDay: undefined, // 节日名称
        rentFreeDay: undefined, // 免费天数
        rentPrice: undefined, // 租赁价格
        vehicleId: this.oneRow.vehicleId, // 车型id
        applicationObj: 1, // 应用对象
      }
      if(this.festivalInfo.festivalId){
        // 编辑
        this.getOne()
      }
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      /**
       * 获取节假日详情
       */
      getOne(){
        let _this = this
        getAllFestivalPrice({festivalId: this.festivalInfo.festivalId, vehicleId: _this.oneRow.vehicleId} ).then(response => {debugger
          if(response.status == 200) {
            if( response.data.length > 0) {
              this.form = {
                festivalId: response.data[0].festivalId,
                startTime: response.data[0].startTime,
                endTime: response.data[0].endTime,
                applicationObj: response.data[0].allModelUse ? 2 : response.data[0].allVehicleUse ? 3 : 1, // 周末免费天数扣除
                festivalDay: response.data[0].festivalDay, // 节日名称
                rentFreeDay: response.data[0].rentFreeDay, // 免费天数
                rentPrice: response.data[0].rentPrice, // 租赁价格
                vehicleId: _this.oneRow.vehicleId, // 车型id
              }
            }
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      /**
       * 关闭弹窗
       */
      closePop(){
        this.oneDialogVisible = false
        this.$emit('festivalModalEvent', false);
      },
      /**
       * 确定
       */
      handleOk(){
        if(this.isClick) {
          return
        }
        this.isClick = true
        const set = this.$refs
        set['form'].validate(valid => {
          if (valid) {
            let params = objDeepCopy(this.form)
            params.allModelUse = params.applicationObj == 2 ? 1 : 0
            params.allVehicleUse = params.applicationObj == 3 ? 1 : 0
            params.applicationObj = undefined
            saveOrUpdateFestivalPrice(params).then(response => {
              if (response.status == 200) {
                this.$notify({
                  title: '成功',
                  message: '保存成功',
                  type: 'success',
                  duration: 2000
                })
                this.$emit('festivalModalEvent', true);
              } else {
                this.isClick = false
                this.$notify({
                  title: '失败',
                  message: response.message,
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            this.isClick = false
          }
        })
      },
    }
  }
</script>
