<template>
  <div classs="noLesson">
    <el-row type="flex" class="add-btn" justify="end">
      <el-col :span="6">
        <el-button type="success" plain @click="add" v-if="!$store.state.readonly">添加不上课日期</el-button>
      </el-col>
    </el-row>
    <div class="card" style="margin-bottom: 10px;">
      <el-card :body-style="{ padding: '0px' }" v-for="(currentDate, index) in list" :key="index">
        <span class="time">{{ currentDate }}</span>
        <div class="bottom clearfix">
          <el-button type="text" class="button" @click="del(currentDate)" v-if="$store.state.deletePermission && !$store.state.readonly">删除</el-button>
        </div>
      </el-card>
    </div>
    <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getList"/>
  </div>
</template>

<script>
  import dialogCom from './dialog'
  import {getConfigListApi,deleteConfigApi,getConfigDetailApi,updateConfigApi} from "../../service/api";
  export default {
    name: "index",
    data() {
      return {
        dialogObj:{
          value:'',
          desc:'',
          show:false,
          id:''
        },
        list: [],
        id: ''
      }
    },
    components:{
      dialogCom
    },
    mounted(){
      this.getList()
    },
    methods: {
      changeShow(data){
        this.dialogObj.show=data
      },
      getList(){
        let json = {
          key:'no_lesson_date'
        };
        getConfigListApi(json).then(res => {
          if(res.list.length > 0){
            let _desc = res.list[0].desc;
            this.id = res.list[0].id;
            this.list = _desc ? JSON.parse(_desc) : [];
          }
        })
      },
      add(){
        this.dialogObj.title = '添加不上课日期';
        this.dialogObj.desc = this.list || [];
        this.dialogObj.show = true
        if (this.list.length > 0){
          this.dialogObj.id = this.id;
        } else {
          this.dialogObj.id = '';
        }
      },
      edit(data){
        getConfigDetailApi(data.id).then((res) => {
          this.dialogObj.title = '修改不上课日期';
          this.dialogObj.desc = res.desc;
          this.dialogObj.show = true
        });
      },
      del(data){
        this.$confirm('此操作将删除该记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let json = {
            key: 'no_lesson_date',
            value: 'no_lesson_date'
          }
          let _desc = [];
          this.list.forEach((val)=>{
            if(val !== data) {
                _desc.push(val);
            }
          })
          json.desc = JSON.stringify(_desc);
          updateConfigApi(this.id,json).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList();
          })
        });
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .add-btn {
    margin: 10px 0;
  }
  .noLesson {
    padding: 20px 0;
  }
  .card {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    & >div {
      width: 236px;
      margin-top: 10px;
      margin-left: 10px;
      padding: 10px;
    }
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>