<!-- 他人班表 -->
<template>
  <div>
    <Row>
      <Col span="18">
      <Input placeholder="工号/姓名" class="setInput" v-model="searchForm.userName"/>
        <DatePicker
          :clearable="false"
          :disabled="searchLoading"
          :editable="false"
          placeholder="请选择月份"
          style="width: 200px"
          type="month"
          v-model="searchDateRange"
        ></DatePicker>
        <Button
          :loading="searchLoading"
          @click="doInitSearch"
          style="margin-left: 8px;"
          type="primary"
        >查询</Button>
        <shift-advanced-search
          :disabled="searchLoading"
          @do-select-search="doInitSearch"
          @on-clear="onClear"
          @on-confirm="onConfirm"
          @on-get-org-err="onGetOrgErr"
          @on-select-admin-group="onSelectAdminGroup"
          @on-select-special-line="onSelecLine"
          @on-select-sub-center="onSelectSite"
          autoLoad
          autoSearch
        ></shift-advanced-search>
      </Col>
    </Row>
    <br />
    <Table :columns="columns" :data="dataList" :loading="searchLoading" border></Table>
    <br />
    <Page
      :current.sync="searchForm.pageNum"
      :page-size="searchForm.pageSize"
      :total="total"
      @on-change="pageChange"
      show-total
    />
  </div>
</template>

<script>
import commonListWidthAS from '@/mixin/commonListWidthAS'
import shiftEffectMonthLimit from '@/mixin/shiftEffectMonthLimit'
import ShiftAdvancedSearch from '@@c/shift-advanced-search'
import ScheduleAPI from '@api/common/schedule'
import { format, startOfMonth, endOfMonth } from 'date-fns'
import { getWeekByDate } from '@lib/tools'
export default {
  name: 'other-schedule',
  mixins: [commonListWidthAS, shiftEffectMonthLimit],
  components: { ShiftAdvancedSearch },
  data () {
    return {
      columns: [],
      defaultColumns: [
        {
          type: 'index',
          title: '序号',
          width: 65,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '中心',
          key: 'siteName',
          minWidth: 100,
          tooltip: true,
          fixed: 'left'
        },
        {
          title: '专线',
          key: 'activityName',
          minWidth: 100,
          tooltip: true,
          fixed: 'left'
        },
        {
          title: '业务小组',
          key: 'teamName',
          minWidth: 120,
          tooltip: true,
          fixed: 'left'
        },
        {
          title: '姓名',
          key: 'firstName',
          minWidth: 100,
          tooltip: true,
          fixed: 'left'
        }
      ],
      searchForm: {
        teamId: null,
        sitreId: null,
        activityId: null,
        userName: ''
      },
      dataList: []
    }
  },
  created () {
    this.columns = this.defaultColumns
    this.doSearch()
  },
  watch: {
    searchDateRange () {
      this.searchForm.startTime = format(
        startOfMonth(this.searchDateRange),
        this.$config.DATE_FORMAT
      )
      this.searchForm.endTime = format(
        endOfMonth(this.searchDateRange),
        this.$config.DATE_FORMAT
      )
    }
  },
  methods: {
    doSearch () {
      // if (!this.searchForm.teamId) {
      //   this.$Message.destroy()
      //   this.$Message.warning('请在高级查询中选择到业务小组')
      //   this.searchLoading = false
      //   return
      // }
      this.searchLoading = true
      this.$nextTick(() => {
        let {
          pageNum,
          pageSize,
          startTime,
          siteId,
          teamId,
          activityId,
          userName
        } = this.searchForm
        const currMonthTime = `${format(
          new Date(startTime),
          this.$config.MONTH_FORMAT
        )}`
        if (siteId) {
          siteId = siteId.split('_')[1]
        }
        if (teamId) {
          teamId = teamId.split('_')[1]
        }
        if (activityId) {
          activityId = activityId.split('_')[1]
        }
        ScheduleAPI.week({
          pageNum,
          pageSize,
          currMonthTime,
          siteId,
          teamId,
          activityId,
          userName
        })
          .then(({ data }) => {
            this.searchLoading = false
            this.dataList = []
            if (data.code === 200) {
              this.total = data.total
              const wrapperList = data.data.agentScheduleVoList
              if (wrapperList && wrapperList.length > 0) {
                const obj = wrapperList.find(o => o.dayScheduleVoList)
                if (
                  obj &&
                  obj.dayScheduleVoList &&
                  obj.dayScheduleVoList.length > 0
                ) {
                  const dayList = obj.dayScheduleVoList
                  this.columns = [
                    ...this.defaultColumns,
                    ...dayList.map(item => {
                      return {
                        renderHeader: (h, params) =>
                          h('div', {}, [
                            h('p', item.date),
                            h('p', getWeekByDate(item.date))
                          ]),
                        align: 'center',
                        minWidth: 110,
                        key: item.date
                      }
                    })
                  ]
                }
                wrapperList.forEach(obj => {
                  const o = {
                    siteName: obj.siteName,
                    activityName: obj.activityName,
                    teamName: obj.teamName,
                    firstName: obj.firstName
                  }
                  if (
                    obj.dayScheduleVoList &&
                    obj.dayScheduleVoList.length > 0
                  ) {
                    const dayList = obj.dayScheduleVoList
                    dayList.forEach(day => {
                      o[day.date] = day.event
                    })
                  }
                  this.dataList.push(o)
                })
              }
            }
          })
          .catch(err => {
            console.error('err', err)
            this.searchLoading = false
          })
      })
    },
    clearTeamId () {
      this.searchForm.teamId = null
    },
    onGetOrgErr () {
      this.searchLoading = false
    },
    onSelectAdminGroup (id, obj, isAuto) {
      this.searchForm.teamId = id
    },
    onSelectSite (id) {
      this.searchForm.siteId = id
    },
    onSelecLine (id) {
      this.searchForm.activityId = id
    },
    onClear () {
      this.searchForm.teamId = null
    },
    onConfirm (obj) {
      console.log('confirm obj:', obj)
      //debugger
      this.searchForm.pageNum = 1
      this.searchForm.siteId = obj.sc.id
      this.searchForm.activityId = obj.sl.id
      this.searchForm.teamId = obj.ag.id
    }
  }
}
</script>

<style lang="less" scoped>
.setInput{
  width: 200px;
  margin-right: 10px;
}
</style>
