<template>
    <div class="app-container calendar-list-container">
  
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入节日名称" v-model="listQuery.title"></el-input>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
        <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
  
      </div>
  
      <!-- 查询结果 -->
      <el-table
        size="small"
        :data="list"
        v-loading="listLoading"
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
      >
        <el-table-column type="index" label="序号" header-align="center" align="center">
        </el-table-column>
  
        <el-table-column align="center" min-width="100px" label="节日" prop="title">
        </el-table-column>
        <el-table-column align="center" min-width="200px" label="发放日期" prop="startTime">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="积分" prop="integral">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="状态" prop="statusName">
        </el-table-column>
        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleUpdate(scope.row, false)"
              >编辑</el-button
            >
            <el-button v-if="scope.row.status == 0" type="success" size="small"
                        @click="changeState(scope.row, 1)">开启</el-button>
                    <el-button v-if="scope.row.status == 1" type="warning" size="small"
                        @click="changeState(scope.row, 0)">关闭</el-button>
            <el-button type="danger" size="mini"  @click="handleDelete(scope.row,-1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
  
      <!-- 添加或修改对话框 -->
      <el-dialog
      :close-on-click-modal="false"
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        width="35%"
      >
        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
         <el-form-item  label="节日" prop="title">
              <el-input style="width: 350px" v-model="dataForm.title"></el-input>
            </el-form-item>
            <el-form-item label="发放日期" prop="startTime">
                <el-date-picker
                  v-model="dataForm.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择发放日期"
                  style="width: 350px"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="积分" prop="integral">
                <el-input-number
                  :precision="0"
                  :step="1"
                  v-model="dataForm.integral"
                ></el-input-number>
              </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
          <el-button v-else type="primary" @click="updateData">确定</el-button>
        </div>
      </el-dialog>
  
    </div>
  </template>
  
  <style>
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 200px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
    }
  </style>
  
  <script>
    import {list, createItem, updateItem, state } from "@/api/festivalManage";
    import waves from "@/directive/waves"; // 水波纹指令
    import Tinymce from '@/components/Tinymce'
  
  export default {
    components: { Tinymce },
    directives: { waves },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          title: '',
        },
        dataForm: {
          title: undefined,
          integral: undefined,
          startTime: undefined,
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: "编辑",
          create: "创建",
        },
        rules: {
          title: [{ required: true, message: "节日不能为空", trigger: "blur" }],
          startTime: [{ required: true, message: "请选择发放日期", trigger: "blur" }],
          integral: [{ required: true, message: "积分不能为空", trigger: "blur" }],
        },
      }
    },
    created() {
        this.getList();
    },
    methods: {

      resetForm() {
        this.dataForm = {
          title: undefined,
          integral: undefined,
          startTime: undefined,
        };
      },
      handleCreate() {
        this.resetForm();
        this.dialogFormVisible = true;
        this.dialogStatus = "create";
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      createData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            createItem(this.dataForm)
                  .then(() => {
                    this.getList();
                    this.dialogFormVisible = false;
  
                    this.$notify({
                      title: "成功",
                      message: "创建成功",
                      type: "success",
                      duration: 2000,
                    });
                    this.getList()
                  })
          }
        });
      },
      getList() {
        this.listLoading = true
        list(this.listQuery).then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
  
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
  
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
  
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
  
      handleUpdate(row) {
        this.dataForm = Object.assign({}, row);
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
  
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            updateItem(this.dataForm).then(() => {
                this.dialogFormVisible = false
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList()
              })
            
          }
        })
      },
      changeState(row, index) {
        state({ id: row.id, status: index }).then(response => {
                this.$notify({
                    title: '成功',
                    message: '状态修改成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            })
        },
      handleDelete(row, index) {
  
        this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          state({ id: row.id, status: index }).then(response => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
  
        })
  
      },
    }
  }
  </script>
  <style>
    .ad-avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .ad-avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .ad-avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .ad-avatar {
      display: block;
    }
  </style>
  