<template>
  <el-dialog title="节假日价格设置" :visible.sync="oneDialogVisible" @close="closePop" :modal="false" width="66%">
    <div style="min-height: 500px">
      <div class="filter-container flex-aic-jce" ref="filter-container">
        <el-button class="filter-item" @click="handleCreate" plain><i class="el-icon-plus"></i>添加节假日</el-button>
      </div>
      <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column type="index" align="center" label="序号" width="65"></el-table-column>
      <el-table-column align="center" label="节日名称">
        <template slot-scope="scope">
          <span>{{scope.row.festivalDay}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="开始时间" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.startTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="结束时间" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.endTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租赁价格">
        <template slot-scope="scope">
          <span>{{scope.row.rentPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="免费天数">
        <template slot-scope="scope">
          <span>{{scope.row.rentFreeDay}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleUpdate(scope.row)"
          >编辑</el-button>
          <el-button
            size="small"
            type="text"
            @click="deleteHandler(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!--  添加、编辑节假日  -->
    <festival-modal :festivalInfo="festivalInfo" v-on:festivalModalEvent="festivalModalEvent" v-if="festivalVisible" :oneRow="oneRow"></festival-modal>
  </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, deleteFestival} from "api/vehicle/vehicleInfo";
  import festivalModal from "./festivalModal";
  export default {
    props: ['oneRow'],
    components: {
      festivalModal,
      ElButton,
      ElFormItem,
    },
    data() {
      return {
        oneDialogVisible: false,
        showLoadingBody: false,
        list: [],
        total: null,
        listLoading: true,
        tableKey: 0,
        festivalInfo: {}, // 当前操作项
        festivalVisible: false, // 添加、编辑节假日弹窗
      }
    },
    mounted() {
      this.oneDialogVisible = true;
      this.getList()
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      /**
       * 获取列表
       */
      getList() {
        getAllFestivalPrice({vehicleId: this.oneRow.vehicleId}).then(response => {
          if (response.status == 200) {
            this.listLoading = false
            this.list = response.data
          } else {
            this.list = []
            this.listLoading = false
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      /*
      * 添加--节假日
      */
      handleCreate(){
        this.festivalVisible = true
        this.festivalInfo = {}
      },
      /**
       * 添加、编辑节假日  返回
       */
      festivalModalEvent(e){
        this.festivalVisible = false
        if(e){
          this.getList()
        }
      },
      /**
       * 编辑--节假日
       */
      handleUpdate(row){
        this.festivalVisible = true
        this.festivalInfo = row
      },
      /**
       * 删除
       * */
      deleteHandler(row) {
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            vehicleId: this.oneRow.vehicleId, // 车型id
            festivalId: row.festivalId, // 节日id
          }
          deleteFestival(params).then(response => {
            if (response.status == 200) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            } else {
              this.$notify({
                title: '失败',
                message: response.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        })
      },
      /**
       * 关闭弹窗
       */
      closePop(){
        this.oneDialogVisible = false
        this.$emit('festivalDialogEvent', false);
      },
    }
  }
</script>
