<style scoped>
  .shiftform {}

  .shiftform .yuan {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .shifttc .el-input__inner {
    border-radius: 4px;
    height: 40px;
  }
</style>
<template>
  <div class="shiftform">
    <div>
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-column-table sticky-tow-column-table sticky-right-column-table" separator="none" title="班次"
        :data="shiftList" dense :columns="columns" row-key="name">
        <template v-slot:top>
          <div class="col-2 q-table__title">班次</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" icon="add" label="新增班次" @click="Editshift(null)" />
          </div>
        </template>
        <template v-slot:body-cell-Name="props">
          <q-td :props="props" class="row">
            <div class="yuan" :style="{ background: props.row.Color }"></div>
            <div>{{props.row.Name}}</div>
          </q-td>
        </template>
        <template v-slot:body-cell-time="props">
          <q-td :props="props">
            <div class="text-blue">{{props.row.StartTime}}<span v-if="props.row.EndTime"
                style="margin: 0 3px;">--</span>{{props.row.EndTime}}</div>
          </q-td>
        </template>
        <template v-slot:bottom>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div v-if="addshiftpower">
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                @click="Editshift(props.row)" />
              <template>
                <q-btn flat size="xs" icon="iconfont icon-shanchu" color="negative" style="font-weight:400"
                  class="q-mr-xs" label="删除" @click="removeshift(props.row)" />
              </template>
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
    <q-dialog v-model="isShowEditshift" content-class="bg-grey-1" persistent transition-show="scale"
      transition-hide="scale">
      <q-card style="width: 600px;max-width:600px;">
        <q-card-section>
          <div class="text-h6">{{shiftOption.Id==0?'新增班次':'修改班次'}}</div>
        </q-card-section>
        <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
          <div class="row wrap">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="shiftOption.Name" ref="Name"
              class="col-12" label="班次名称" :rules="[val => !!val || '请填写班次名称']" />
          </div>
          <div class="row wrap " v-if="shiftOption.Color==''">
            <q-input filled stack-label class="col-12" label="背景颜色" v-model="shiftOption.Color" ref="color"
              :rules="['anyColor']">
              <template v-slot:append>
                <q-icon name="colorize" class="cursor-pointer">
                  <q-popup-proxy transition-show="scale" transition-hide="scale">
                    <q-color v-model="shiftOption.Color" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="row wrap shifttc">
            <el-time-select class="q-mr-lg" v-model="shiftOption.StartTime" :picker-options="{
                                start: '00:00',
                                step: '00:05',
                                end: '23:55',
                                maxTime:shiftOption.EndTime
                            }" placeholder="班次开始时间(格式00:00)">
            </el-time-select>
            <el-time-select v-model="shiftOption.EndTime" :picker-options="{
                                start: '06:00',
                                step: '00:05',
                                end: '23:55',
                                minTime:shiftOption.StartTime
                            }" placeholder="班次结束时间(格式00:00)">
            </el-time-select>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="isShowEditshift=false" />
          <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
            @click="onSubmit()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
  import {
    getStudentFollowUpPageList,
  } from '../../api/studyabroad/index'
  import {
    getScrollShiftList,
    setScrollShiftInfo,
    delScrollShiftInfo
  } from '../../api/course/roll'
  export default {
    meta: {
      title: "滚动排班"
    },
    props: [],
    data() {
      return {
        loading: false,
        isShowEditshift: false,
        saveLoading: false,
        msg: {
          rowsPerPage: 9999,
        },
        colorlist: ['#f1c40f', '#e67e22', '#e74c3c', '#f39c12', '#d35400', '#c0392b', '#1abc9c', '#2ecc71', '#3498db',
          '#9b59b6', '#16a085', '#27ae60', '#2980b9', '#8e44ad',
        ], //写死的颜色
        columns: [{
            name: 'Name',
            label: '名称',
            field: 'Name',
            align: 'left'
          },
          {
            name: 'time',
            label: '时间范围',
            align: 'left',
            field: 'time'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'RoomId'
          }
        ],
        addshiftpower: true, //是否有操作的权限
        shiftOption: {},
        shiftList: [],
      }
    },
    created() {
      this.getList()
    },
    mounted() {

    },
    methods: {
      getList() {
        getScrollShiftList({}).then(res => {
          if (res.Code == 1) {
            this.shiftList = res.Data;
            this.removeColor()
            if (res.Data.length > 0) {
              this.$emit('getLists', res.Data)
            }
          }
        })
      },
      removeColor() {
        this.shiftList.forEach(x => {
          this.colorlist.forEach((j, ji) => {
            if (x.Color == j) {
              this.colorlist[ji] = ''
            }
          })
        })
      },
      //新增修改班次
      Editshift(obj) {
        if (obj) {
          this.shiftOption = JSON.parse(JSON.stringify(obj));
        } else {
          let Color = '';
          for (let i = 0; i < this.colorlist.length; i++) {
            let x = this.colorlist[i];
            if (x != '') {
              Color = x;
              break
            }
          }
          this.shiftOption = {
            Id: 0,
            Name: '',
            Color: Color,
            StartTime: '',
            EndTime: '',
          };
        }
        this.isShowEditshift = true;
      },
      onSubmit() {
        this.$refs.Name.validate()
        if (!this.$refs.Name.hasError) {
          if (!this.shiftOption.StartTime) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择班次开始时间`
            })
            return
          }
          if (!this.shiftOption.EndTime) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请选择班次结束时间`
            })
            return
          }
          this.saveLoading = true;
          //掉接口
          setScrollShiftInfo(this.shiftOption).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '操作成功',
                position: 'top'
              })
              this.getList();
            }
            this.saveLoading = false;
            this.isShowEditshift = false;
          })
        }
      },
      //删除
      removeshift(obj) {
        let that = this;
        this.$q.dialog({
          title: "提示",
          message: '是否删除该班次信息？',
          isShowEditClassRoomForm: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          delScrollShiftInfo({
            ShiftId: obj.Id
          }).then(res => {
            if (res.Code == 1) {
              that.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '操作成功',
                position: 'top'
              })
              that.getList();
            }
          })
        });
      },
    },
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>
<style scoped>

</style>