<template>
  <div class="page-body">
    <div class="page-search row items-center">

    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" title="我的排班计划" :data="dataList" :columns="columns" row-key="name">
        <template v-slot:body-cell-PlanList="props">
          <q-td>
            <div v-for="(item,index) in props.row.PlanList">
              {{index+1}}{{item.ItemName}}
            </div>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div>
              <template v-if="props.row.DutyStatus==0">
                <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400"
                  :label="props.row.DutyStatusStr" />
              </template>
              <template v-if="props.row.DutyStatus==1">
                <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="开始值班"
                  @click="StartSchedule(props.row)" />
              </template>
              <template v-if="props.row.DutyStatus==2">
                <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400"
                  :label="props.row.DutyStatusStr" />
              </template>
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    queryMyDutyPlanPage,
  } from '../../api/scheduling/schedu'
  export default {
    meta: {
      title: "我的排班计划"
    },
    components: {},
    data() {
      return {
        currentUrl: "",
        columns: [{
            name: 'PlanDate',
            label: '日期',
            align: 'left',
            field: 'PlanDate',
          },
          {
            name: 'SchoolName',
            label: '校区',
            field: 'SchoolName',
            align: 'left'
          },
          {
            name: 'ShiftName',
            label: '时间（班次）',
            align: 'left',
            field: 'ShiftName'
          },
          {
            name: 'PlanList',
            label: '任务清单',
            align: 'left',
            field: 'PlanList'
          },
          {
            name: 'ReciveMan',
            label: '接班对象',
            align: 'left',
            field: 'ReciveMan'
          },
          {
            name: 'GiveMan',
            label: '交班对象',
            align: 'left',
            field: 'GiveMan'
          },
          {
            name: 'CreateByName',
            label: '排班人',
            align: 'left',
            field: 'CreateByName'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'Id'
          }
        ],
        dataList: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
        },
        pageCount: 0,
      }
    },
    created() {

    },
    mounted() {
      this.getMyDutyPage();
    },
    methods: {
      getMyDutyPage() {
        this.loading = true;
        queryMyDutyPlanPage(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.Count;
          }
          this.loading = false;
        })
      },
      //分页改变
      changePage(val) {
        this.msg.pageIndex = val;
      },
      //开始值班
      StartSchedule(obj) {
        this.$router.push({
          path: "/scheduling/scheduleBoard",
          query: {
            Id: obj.Id,
            Shift: obj.Shift
          }
        });
      }
    },
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
