<template>
  <el-dialog
    :title="title"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
    :visible.sync="show"
    width="800px">
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" >
        <el-row>
          <el-col :span="4"><label>不上课日期</label></el-col>
          <el-col :span="20">
            <el-form-item>
              <el-date-picker
                style="width: 100%"
                v-model="noLessonDate"
                type="dates"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions1"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </div>
  </el-dialog>

</template>

<script>
  import {updateConfigApi,saveConfigApi} from "../../service/api";
  import {TEACHERTYPE} from "../../util/wordbook";
  import page from '../framework/page'
  export default {
    name: "dialogObj",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        show:false,
        id: '',
        title: '',
        loading:true,
        form:{
          key:'no_lesson_date',
          value:'no_lesson_date',
          desc:[]
        },
        noLessonDate: [],
        rules:{
          noLessonDate:[
            { required: true, message: '请选择日期', trigger: 'change' }
          ]
        },
        pickerOptions1: {
          disabledDate(time) {
            return !(time.getTime() > Date.now());
          }
        }
      }
    },
    components:{
      page
    },
    methods:{
      save(){
        if(this.noLessonDate.length === 0){
          this.$message({
            type: 'error',
            message: '请选择不上课时间!'
          });
          return;
        }
        let json = {
          key: this.form.key,
          value: this.form.value
        }
        let _desc = this.form.desc || [];
        if (this.noLessonDate.length > 0) {
          _desc = _desc.concat(this.noLessonDate)
          _desc = this.dedupe(_desc)
        }

        json.desc = JSON.stringify(_desc);
        if (this.id) {
          updateConfigApi(this.id,json).then(res=>{
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
            this.noLessonDate = _desc
            this.$emit("reflash");
            this.show = false;
          })
        } else {
          saveConfigApi(json).then(res=>{
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
            this.noLessonDate = _desc
            this.$emit("reflash");
            this.show = false;
          })
        }

      },
      initDialog(){
        this.show = this.dialogObj.show;
        if (this.dialogObj.id) {
          this.id = this.dialogObj.id;
        }
        this.title = this.dialogObj.title;
        this.form.desc = this.dialogObj.desc;
        this.noLessonDate = this.form.desc;
          this.loading = false
      },
      dedupe(array){
        return Array.from(new Set(array));
      }
    },
    watch:{
      dialogObj:{
        handler: function () {
          this.loading = true;
          this.initDialog()
        },
        deep: true
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  /*.el-col {*/
    /*height: 50px;*/
    /*text-align: center;*/
    /*margin-bottom: 20px;*/
    /*line-height: 40px;*/
    /*.el-select{*/
      /*width: 100%;*/
    /*}*/
    /*img{*/
      /*width: 50px;*/
      /*border-radius: 100px;*/
    /*}*/
    /*label{*/
      /*color: #5982e6;*/
    /*}*/
  /*}*/
  .dialog-footer{
    display: block;
    text-align: center;
    margin-top: 30px;
  }
  .msg_sender_wrp {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    /*position: absolute;*/
    /*left: 100%;*/
    /*top: 50%;*/
    width: 500px;
    /*z-index: 500;*/
    /*-ms-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/
    /*background: #FFFFFF;*/
    /*box-shadow: 0 1px 20px 0 #E4E8EB;*/
    /*border-radius: 2px;*/
  }
  .el-icon-circle-plus-outline {
    font-size: 28px;
  }
  .weui-desktop-msg-sender__tabs {
    line-height: 38px;
    background-color: #FFFFFF;
  }
  ul, ol {
    padding-left: 0;
    list-style-type: none;
  }
  .weui-desktop-msg-sender__tab {
    padding: 0 15px;
    float: left;
    cursor: pointer;
  }
  .weui-desktop-msg-sender__tab_appmsg:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg3f92fe.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:before {
    content: " ";
    display: inline-block;
    width: 22px;
    height: 20px;
    vertical-align: middle;
    margin: -0.2em 5px 0 0;
  }
  .weui-desktop-msg-sender__tab_text:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_text3f92fe.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab_img:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img3f92fe.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab_audio:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio3f92fe.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab_video:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video3f92fe.svg) no-repeat 0 0;
  }
</style>