<template>
  <j-modal title="排班" :width="1000" :visible="visible" switchFullscreen @cancel="handleCancel" :footer="true">

    <a-spin :spinning="loading">
      <div class='month'>
        <ul>
          <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
          <li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
          <li class='year-month'>
            <span class='choose-year'>{{ currentYear }}年</span>
            <span class='choose-month'>{{ currentMonth }}月</span>
          </li>
          <li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
        </ul>
        <br>
      </div>
      
      <div>
        <a-table bordered :data-source="dataSource" :columns="columns" :scroll="{ x:300 }"
          :pagination="ipagination" @change="handleTableChange">
          <template v-for='(dayobject,i) in days' :slot="dayobject.day.getDate()" style="color: #ff6b81">
            <div style="height: 35px;">
              <div style="text-align: center;margin-top: -10px;">
                <p>{{dayobject.day.getDate()}}</p>
                <div style="margin-top: -10px;">
                <p v-if='dayobject.day.getDay()==0'>日</p>
                <p v-else-if='dayobject.day.getDay()==1'>一</p>
                <p v-else-if='dayobject.day.getDay()==2'>二</p>
                <p v-else-if='dayobject.day.getDay()==3'>三</p>
                <p v-else-if='dayobject.day.getDay()==4'>四</p>
                <p v-else-if='dayobject.day.getDay()==5'>五</p>
                <p v-else-if='dayobject.day.getDay()==6'>六</p>
                </div>
              </div>
            </div>
          </template>
          
          
          <span v-for='(d,i) in tpdata' style="margin-left: -11px;" :slot="d" slot-scope="text, record, index">
            <a-dropdown :trigger="['click']">
              <a-tag color="blue" v-if="text=='休息'" @click="UserType(d,record)">{{text}}</a-tag>
              <a-tag color="#87d068" v-else-if="text!='休息'&&text!=''&&text!=null" @click="UserType(d,record)">{{text}}</a-tag>
              <a-tag color="#FFFFFF" v-else @click="UserType(d,record)" style="width: 40px;">.</a-tag>
                <a-menu slot="overlay">
                  <a-menu-item key="0">
                    <a @click="shiftOks(0,d,record,index)">休息</a>
                  </a-menu-item>
                  <a-menu-item v-if="isShow" v-for="(item,index) in shiftlist" :key="item.id">
                    <a @click="shiftOks(item,d,record,index)">{{item.name}}</a>
                  </a-menu-item>
                  
                </a-menu>
              </a-dropdown>
            
            
          </span>
         
        </a-table>
      </div>

      </a-calendar>
      <a-modal v-model="visibles" title="班次" @ok="shiftOk()">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">

              <a-col :xl="10" :lg="10" :md="8" :sm="24">
                <a-form-item label="班次名称">
                  <a-select v-model="shiftname" placeholder="请选择班次">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="a">休息</a-select-option>
                    <a-select-option v-for="(item,index) in shiftlist" :value="item.id">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

            </a-row>
          </a-form>
        </div>
      </a-modal>

    </a-spin>
  </j-modal>
</template>

<script>
  import {
    httpAction,
    getFileAccessHttpUrl,
    getAction,
    deleteAction
  } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import '@/assets/less/TableExpand.less'

  export default {
    name: "UserShiftModal",
    mixins: [JeecgListMixin],
    data() {
      return {
        tts:false,
        tpdata:[],
        dataSource: [],
        columns: [],
        queryParam: {
          shiftDate: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        },
       
        currentMonth: new Date().getMonth(),
        currentYear: new Date().getYear(),
        days: [],
        visibles: false,
        shiftDate: null,
        show: 1,
        id: null,
        shiftname: "",
        username: "",
        deptlist: null,
        shiftlist: null,
        title: "操作",
        visible: false,
        key: null,
        index: null,
        vs: false,
        model: {},
        isShow:true,
        listData: [],
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        url: {
          add: "/userShift/userShift/addUserShift",
          userShift: "/userShift/userShift/queryByUser",
          shift: "/shift/shift/list",
          list: "/sys/user/queryMothByUser",
          moth: "/userShift/userShift/queryMothByUser",
          deptlist: "/sys/sysDepart/listAll",
          delUserShift: '/userShift/userShift/delete'
        },
      }
    },
    created() {
     // this.getListData(null)
      this.initData(null)
      this.queryShift()
    },
    methods: {
      UserType(e,a){
        this.isShow=true;
        var d = new Date(this.formatDate(this.currentYear, this.currentMonth, e))
        if(a.category==106){
          if(d.getDay()==0){
            this.isShow=false;
          }
         
        }else{
          if(d.getDay()==0||d.getDay()==6){
            this.isShow=false;
          }
        }
      },
      shiftOks(a,b,c,d){
        console.log(c)
        console.log(d)
        var date=this.currentYear + "-" + this.currentMonth + "-" + b + " 00:00:000"; 
        var name=a.name;
        if(a==0||a=="0"){
          name="休息";
        httpAction(this.url.add, {
          userId: c.id,
          shiftId:0,
          shiftDate: date
        }, "post").then((res) => {
          if (res.success) {
           
          }
        })
        }else{
          httpAction(this.url.add, {
            userId: c.id,
            shiftId:a.id,
            shiftDate: date
          }, "post").then((res) => {
            if (res.success) {
             
            }
          })
        }
        
        
        if (b==1) {
          c.a1=name;
        } else if (b == 2) {             
          c.a2=name;
        } else if (b == 3) {             
         c.a3=name;
        } else if (b == 4) {             
         c.a4=name;
        } else if (b == 5) {             
         c.a5=name;
        } else if (b == 6) {           
         c.a6=name;
        } else if (b == 7) {             
         c.a7=name;
        } else if (b== 8) {             
          c.a8=name;
        } else if (b== 9) {            
          c.a9=name;
        } else if (b== 10) {             
          c.a10=name;
        } else if (b == 11) {            
          c.a11=name;
        } else if (b == 12) {            
         c.a12=name;
        } else if (b == 13) {              
          c.a13=name;
        } else if (b == 14) {              
         c.a14=name;
        } else if (b == 15) {              
          c.a15=name;
        } else if (b == 16) {             
          c.a16=name;
        } else if (b== 17) {              
          c.a17=name;
        } else if (b== 18) {              
          c.a18=name;
        } else if (b == 19) {             
          c.a19=name;
        } else if (b == 20) {             
         c.a20=name;
        } else if (b == 21) {              
          c.a21=name;
        } else if (b == 22) {             
          c.a22=name;
        } else if (b == 23) {             
          c.a23=name;
        } else if (b == 24) {            
         c.a24=name;
        } else if (b== 25) {              
          c.a25=name;
        } else if (b == 26) {              
          c.a26=name;
        } else if (b == 27) {             
          c.a27=name;
        } else if (b == 28) {              
          c.a28=name;
        } else if (b == 29) {              
          c.a29=name;
        } else if (b == 30) {             
         c.a30=name;
        } else if (b == 31) {
          c.a31=name;
        }
       
       
      },
    
      pickPre: function(year, month) {
        var d = new Date(this.formatDate(year, month, 1))
        d.setDate(0)
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
        this.queryParam.shiftDate=this.formatDate(d.getFullYear(), d.getMonth() + 1, 1) + " 00:00:000";
        this.$options.methods.searchQuery.call(this)
      },

      pickNext: function(year, month) {
        var d = new Date(this.formatDate(year, month + 1, 1))
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    this.queryParam.shiftDate=this.formatDate(d.getFullYear(), d.getMonth() + 1, 1) + " 00:00:000";
     this.$options.methods.searchQuery.call(this)
      },

      initData: function(cur) {
        this.columns = [];
        var date
        if (cur) {
          date = new Date(cur)
        } else {
          var now = new Date()
          date = now;
        }
        this.currentDay = date.getDate()
        this.currentYear = date.getFullYear()
        this.currentMonth = date.getMonth() + 1
        this.currentWeek = date.getDay() // 1...6,0

        var str = this.formatDate(
          this.currentYear,
          this.currentMonth,
          this.currentDay
        )
        this.days.length = 0
        var moth = new Date(str);
        moth.setDate(28)

        moth.setMonth(moth.getMonth() + 1);
        moth.setDate(0);
        this.columns.push({
          title: '名称',
          dataIndex: 'realname',
          width: '100px'
        })
        for (var i = 1; i <= moth.getDate(); i++) {
          var d = new Date(this.formatDate(this.currentYear, this.currentMonth, i))
          this.tpdata.push(i)
          var dayobjectSelf = {
            width: '49px',
            slots: {
              title: d.getDate()
            },
            dataIndex: "a" + d.getDate(),
            scopedSlots: {customRender:i},
            
          } // 用一个对象包装Date对象  以便为以后预定功能添加属性
          var dat = {};
          dat.day = d;
          
          this.days.push(dat)
          this.columns.push(dayobjectSelf) // 将日期放入data 中的days数组 供页面渲染使用
        }
      },

      // 返回 类似 2016-01-02 格式的字符串
      formatDate: function(year, month, day) {
        var y = year
        if (month > 12) {
          y = y + 1;
          month = 1;
        };
        var m = month
        if (m < 10) m = '0' + m
        var d = day
        if (d < 10) d = '0' + d
        return y + '-' + m + '-' + d
      },

      delUserShift(e) {
        this.vs = true;
        console.log(e)
        deleteAction(this.url.delUserShift, {
          id: e
        }).then((res) => {
          if (res.success) {
            this.$message.success(res.message);

          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.vs = false;
          this.getListData(moment(this.queryParam.entryDate).format('YYYY-MM-DD HH:mm:ss'));
        })
      },
     queryUserShifts(){
       this.queryParam.shiftDate=moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
       this.$options.methods.searchQuery.call(this);
       
     },

      shiftOk() {
        if (this.shiftname == null || this.shiftname == "") {
          this.$message.warning("请选择班次!");
          return;
        }else if (this.shiftname=="a"){
          var shiftid="";
          if (this.key == 1) {
            shiftid=this.dataSource[this.index].a1;
            this.dataSource[this.index].a1="";
          } else if (this.key == 2) {
            shiftid=this.dataSource[this.index].a2;
            this.dataSource[this.index].a2="";
          } else if (this.key == 3) {
           shiftid= this.dataSource[this.index].a3;
           this.dataSource[this.index].a3="";
          } else if (this.key == 4) {
           shiftid= this.dataSource[this.index].a4;
           this.dataSource[this.index].a4="";
          } else if (this.key == 5) {
           shiftid= this.dataSource[this.index].a5;
           this.dataSource[this.index].a5="";
          } else if (this.key == 6) {
           shiftid= this.dataSource[this.index].a6;
           this.dataSource[this.index].a6="";
          } else if (this.key == 7) {
           shiftid= this.dataSource[this.index].a7;
           this.dataSource[this.index].a7="";
          } else if (this.key == 8) {
            shiftid=this.dataSource[this.index].a8;
            this.dataSource[this.index].a8="";
          } else if (this.key == 9) {
           shiftid= this.dataSource[this.index].a9;
            this.dataSource[this.index].a9="";
          } else if (this.key == 10) {
            shiftid=this.dataSource[this.index].a10;
            this.dataSource[this.index].a10="";
          } else if (this.key == 11) {
           shiftid= this.dataSource[this.index].a11;
            this.dataSource[this.index].a11="";
          } else if (this.key == 12) {
            shiftid=this.dataSource[this.index].a12;
           this.dataSource[this.index].a12="";
          } else if (this.key == 13) {
            shiftid=this.dataSource[this.index].a13;
            this.dataSource[this.index].a13="";
          } else if (this.key == 14) {
            shiftid=this.dataSource[this.index].a14;
           this.dataSource[this.index].a14="";
          } else if (this.key == 15) {
            shiftid=this.dataSource[this.index].a15;
            this.dataSource[this.index].a15="";
          } else if (this.key == 16) {
            shiftid=this.dataSource[this.index].a16;
            this.dataSource[this.index].a16="";
          } else if (this.key == 17) {
            shiftid=this.dataSource[this.index].a17;
            this.dataSource[this.index].a17="";
          } else if (this.key == 18) {
            shiftid=this.dataSource[this.index].a18;
            this.dataSource[this.index].a18="";
          } else if (this.key == 19) {
            shiftid=this.dataSource[this.index].a19;
            this.dataSource[this.index].a19="";
          } else if (this.key == 20) {
           shiftid= this.dataSource[this.index].a20;
           this.dataSource[this.index].a20="";
          } else if (this.key == 21) {
            shiftid=this.dataSource[this.index].a21;
            this.dataSource[this.index].a21="";
          } else if (this.key == 22) {
            shiftid=this.dataSource[this.index].a22;
            this.dataSource[this.index].a22="";
          } else if (this.key == 23) {
            shiftid=this.dataSource[this.index].a23;
            this.dataSource[this.index].a23="";
          } else if (this.key == 24) {
           shiftid= this.dataSource[this.index].a24;
           this.dataSource[this.index].a24="";
          } else if (this.key == 25) {
            shiftid=this.dataSource[this.index].a25;
            this.dataSource[this.index].a25="";
          } else if (this.key == 26) {
            shiftid=this.dataSource[this.index].a26;
            this.dataSource[this.index].a26="";
          } else if (this.key == 27) {
            shiftid=this.dataSource[this.index].a27;
            this.dataSource[this.index].a27="";
          } else if (this.key == 28) {
            shiftid=this.dataSource[this.index].a28;
            this.dataSource[this.index].a28="";
          } else if (this.key == 29) {
            shiftid=this.dataSource[this.index].a29;
            this.dataSource[this.index].a29="";
          } else if (this.key == 30) {
           shiftid= this.dataSource[this.index].a30;
           this.dataSource[this.index].a30="";
          } else if (this.key == 31) {
            shiftid=this.dataSource[this.index].a31;
            this.dataSource[this.index].a31="";
          }
          
          if(shiftid!=null &&shiftid!=""){
            deleteAction(this.url.delUserShift, {
              id: this.dataSource[this.index].id,
              date:this.shiftDate
            }).then((res) => {
             if(res.success){
               
             }
            })
          }
        }else{
        for (var i = 0; i < this.shiftlist.length; i++) {
          if (this.shiftname == this.shiftlist[i].id) {
            if (this.key == 1) {
              this.dataSource[this.index].a1=this.shiftlist[i].name;
            } else if (this.key == 2) {             
              this.dataSource[this.index].a2=this.shiftlist[i].name;
            } else if (this.key == 3) {             
             this.dataSource[this.index].a3=this.shiftlist[i].name;
            } else if (this.key == 4) {             
             this.dataSource[this.index].a4=this.shiftlist[i].name;
            } else if (this.key == 5) {             
             this.dataSource[this.index].a5=this.shiftlist[i].name;
            } else if (this.key == 6) {           
             this.dataSource[this.index].a6=this.shiftlist[i].name;
            } else if (this.key == 7) {             
             this.dataSource[this.index].a7=this.shiftlist[i].name;
            } else if (this.key == 8) {             
              this.dataSource[this.index].a8=this.shiftlist[i].name;
            } else if (this.key == 9) {            
              this.dataSource[this.index].a9="";
            } else if (this.key == 10) {             
              this.dataSource[this.index].a10=this.shiftlist[i].name;
            } else if (this.key == 11) {            
              this.dataSource[this.index].a11=this.shiftlist[i].name;
            } else if (this.key == 12) {            
             this.dataSource[this.index].a12=this.shiftlist[i].name;
            } else if (this.key == 13) {              
              this.dataSource[this.index].a13=this.shiftlist[i].name;
            } else if (this.key == 14) {              
             this.dataSource[this.index].a14=this.shiftlist[i].name;
            } else if (this.key == 15) {              
              this.dataSource[this.index].a15=this.shiftlist[i].name;
            } else if (this.key == 16) {             
              this.dataSource[this.index].a16=this.shiftlist[i].name;
            } else if (this.key == 17) {              
              this.dataSource[this.index].a17=this.shiftlist[i].name;
            } else if (this.key == 18) {              
              this.dataSource[this.index].a18=this.shiftlist[i].name;
            } else if (this.key == 19) {             
              this.dataSource[this.index].a19=this.shiftlist[i].name;
            } else if (this.key == 20) {             
             this.dataSource[this.index].a20=this.shiftlist[i].name;
            } else if (this.key == 21) {              
              this.dataSource[this.index].a21=this.shiftlist[i].name;
            } else if (this.key == 22) {             
              this.dataSource[this.index].a22=this.shiftlist[i].name;
            } else if (this.key == 23) {             
              this.dataSource[this.index].a23=this.shiftlist[i].name;
            } else if (this.key == 24) {            
             this.dataSource[this.index].a24=this.shiftlist[i].name;
            } else if (this.key == 25) {              
              this.dataSource[this.index].a25=this.shiftlist[i].name;
            } else if (this.key == 26) {              
              this.dataSource[this.index].a26=this.shiftlist[i].name;
            } else if (this.key == 27) {             
              this.dataSource[this.index].a27=this.shiftlist[i].name;
            } else if (this.key == 28) {              
              this.dataSource[this.index].a28=this.shiftlist[i].name;
            } else if (this.key == 29) {              
              this.dataSource[this.index].a29=this.shiftlist[i].name;
            } else if (this.key == 30) {             
             this.dataSource[this.index].a30=this.shiftlist[i].name;
            } else if (this.key == 31) {
              this.dataSource[this.index].a31=this.shiftlist[i].name;
            }
            httpAction(this.url.add, {
              userId: this.dataSource[this.index].id,
              shiftId: this.shiftname,
              shiftDate: this.shiftDate
            }, "post").then((res) => {
              if (res.success) {
               
              }
            })
          }
        }
}
        this.visibles = false;
      },
     
      close() {
        this.selectedRowKeys = [];
        this.queryParam = {};
        this.shiftname = "";
        this.id = null;
        this.$emit('close');
        this.dataSource=[];
        this.visible = false;
      },
      queryShift() {
        httpAction(this.url.shift, "", "get").then((res) => {
          if (res.success) {
            this.shiftlist = res.result.records;
          }
        }).finally(() => {

        })

      },

      handleCancel() {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>
  .month {
    width: 100%;
    color: #333333;
    background: #ffffff;
    margin-top: -20px;
  }

  .month ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    height: 30px;
    list-style-type: none;
  }

  .year-month {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;
  }

  .choose-month {
    text-align: center;
    font-size: 12px;
  }

  .arrow {
    padding: 15px;
    color: #999999;
  }

  .month ul li {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }


  .weekdays {
    margin: 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    color: #999;
    justify-content: space-around;
    background: #ffffff;
  }

  .weekdays li {
    display: inline-block;
    width: 13.6%;
    text-align: center;
  }

  .days {
    padding: 10px;
    background: #ffffff;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .ts {
    padding: 20px;
    background: #ffffff;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .days li {
    list-style-type: none;
    display: inline-block;
    width: 14.2%;
    text-align: center;
    padding-bottom: 4px;
    padding-top: 5px;
    font-size: 13px;
    color: #000;
    height: 40px;
  }

  .days li .active {
    padding: 8px 10px;
    border-radius: 5%;
    background: #00b8ec;
    color: #fff;

  }

  .days li .other-month {
    padding: 5px;
    color: gainsboro;
  }

  .days li:hover .act {
    padding: 6px 10px;
    border-radius: 50%;
    background: #e1e1e1;
    color: #fff;
  }
</style>
