<template>
  <el-dialog title="通用价格设置" :visible.sync="oneDialogVisible" @close="closePop" :modal="false" width="30%">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <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="rentWeekendPrice">
        <el-input v-model="form.rentWeekendPrice" placeholder="请输入周末租赁价格" type="number"></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="rentWeekendDay">
        <el-input type="number" v-model="form.rentWeekendDay" 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 { vehicleCommonPriceOne, vehicleCommonPriceUpdate} from "api/vehicle/vehicleInfo";
  import {objDeepCopy} from "../../utils";
  export default {
    props: ['title', 'oneRow'],
    components: {
      ElButton,
      ElFormItem,
    },
    data() {
      return {
        oneDialogVisible: false,
        form: {
          // id: undefined,
          applicationObj: 1, // 应用对象
          vehicleId: undefined, // 车辆id
          rentFreeDay: undefined, // 免费天数扣除
          rentPrice: undefined, // 租赁价格
          rentWeekendDay: undefined, // 周末免费天数扣除
          rentWeekendPrice: undefined, // 周末租赁价格
        },
        isClick: false, // 添加、编辑-确定按钮  是否已点击
        rules: {
          rentFreeDay: {
            required: true,
            message: '请输入免费天数扣除',
            trigger: 'blur'
          },
          applicationObj: {
            required: true,
            message: '请选择应用对象',
            trigger: 'change'
          },
          rentPrice: {
            required: true,
            message: '请输入租赁价格',
            trigger: 'blur'
          },
          rentWeekendDay: {
            required: true,
            message: '请选择周末免费天数扣除',
            trigger: 'change'
          },
          rentWeekendPrice: {
            required: true,
            message: '请输入周末租赁价格',
            trigger: 'blur'
          }
        },
      }
    },
    mounted() {
      this.oneDialogVisible = true;
      this.form = {
        // id: undefined,
        applicationObj: 1, // 应用对象
        vehicleId: undefined, // 车辆id
        rentFreeDay: undefined, // 免费天数扣除
        rentPrice: undefined, // 租赁价格
        rentWeekendDay: undefined, // 周末免费天数扣除
        rentWeekendPrice: undefined, // 周末租赁价格
      },
      this.getOneDetail() // 获取车辆价格详情
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      /**
       * 获取车辆价格详情
       */
      getOneDetail(){
        vehicleCommonPriceOne({id: this.oneRow.id} ).then(response => {
          if(response.status == 200) {
            this.form = {
              // id: response.data.id,
              vehicleId: response.data.vehicleId,
              applicationObj: response.data.allModelUse ? 2 : response.data.allVehicleUse ? 3 : 1, // 周末免费天数扣除
              rentFreeDay: response.data.rentFreeDay, // 免费天数扣除
              rentPrice: response.data.rentPrice, // 租赁价格
              rentWeekendDay: response.data.rentWeekendDay, // 周末免费天数扣除
              rentWeekendPrice: response.data.rentWeekendPrice, // 周末租赁价格
            }
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      /**
       * 关闭弹窗
       */
      closePop(){
        this.oneDialogVisible = false
        this.$emit('generalDialogEvent', 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
            vehicleCommonPriceUpdate(params).then(response => {
              if (response.status == 200) {
                this.$notify({
                  title: '成功',
                  message: '保存成功',
                  type: 'success',
                  duration: 2000
                })
                this.$emit('generalDialogEvent', true);
              } else {
                this.$notify({
                  title: '失败',
                  message: response.message,
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            this.isClick = false
          }
        })
      },
    }
  }
</script>
