<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label >{{this.$t('100000')}}：</label>
          <Select v-model="department" label-in-value clearable class="searchSelect">
              <Option v-for="item in departmentlist" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </div>
        <div class="filter">
            <label >{{this.$t('1036')}}：</label>
            <DatePicker type="month" :value="month" placeholder="" class="searchInput" format="yyyy-MM"
            @on-change="selectdate"></DatePicker>
          </div>
      </div>
      <div class="searchBtn">
        <Button class="twoWord intervalRight" type="primary" icon="ios-search" @click="tosearch()">{{$t('1001')}}</Button>
        <Button class="fourWord" type="primary" icon="ios-cloud-download" @click="downexcel()">{{$t('1007')}}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        :loading="loading"
        border
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        :columns="tableColumns1"></Table>
    <div class="pageDiv">
      <div class="pageDirection">
        <Page
          :total="total"
          :current="page"
          @on-change="changePage"
          show-elevator
          show-sizer
          show-total
          @on-page-size-change="handlePageSize"
          :page-size-opts="[10,20,30,40,100]"
        ></Page>
      </div>
    </div>

      <!-- 设置班次 -->
      <Modal class="settingmodal" title="" v-model="settingmodal" :styles="{width:'450px'}">
        <div class="modal_body" style="width:430px!important;padding:0 0px;">
            <div class="out_row">
                <label>{{$t(100002)}}：</label><span>{{username}}</span>
            </div>
            <div class="out_row">
                <label>{{$t(600532)}}：</label><span>{{datetime}}</span>
            </div>
            <div class="out_row">
                <label>{{$t(100045)}}：</label>
                <Select v-model="shiftid" label-in-value clearable style="width:200px;margin-left:9px;">
                    <Option v-for="item in shiftList" :value="item.id" :key="item.id">{{item.title}}</Option>
                </Select>
            </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="settingmodal = false">{{$t("1033")}}</Button>
          <Button type="primary" size="large" @click="settingadd()">{{$t("960445")}}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
import moment from 'moment'
export default {
    data () {
        return {
            loading: false,
            username: '', // 名称
            datetime: '', // 日期
            shiftid: 0, // 班次
            shiftList: [],
            shiftAllList: [],
            settingmodal: false,
            department: '0',
            departmentlist: [],
            month: moment(new Date().getTime()).format('YYYY-MM'), // 当前时间,
            startdate: '',
            daynums: 0, // 月份天数
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            borderColor: '',
            usermid: 0, // 用户mid
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: 90
                },
                {
                    title: this.$t(100001),
                    key: 'sectionName',
                    minWidth: 120
                },
                {
                    title: this.$t(100002),
                    key: 'username',
                    minWidth: 120
                }
            ]
        }
    },
    created () {
    // this.search()
        this.initdepartment()
        this.tableTitle() // 获取标题
    },
    methods: {
        settingadd () {
            let data = {
                usermid: this.usermid,
                shiftid: this.shiftid,
                date: this.datetime
            }
            axios.request({
                url: '/config/WorkingCalendar/UpdateUserWokingGroup',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t(1112))
                    this.settingmodal = false
                    this.search() // 重新请求
                } else {
                    this.$Message.error(this.$t(8000003))
                }
            })
        },
        tableTitle () {
            let params = {
                date: this.month
            }

            axios.request({
                url: '/config/workinggroup/GetWokingGroupDate',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1 && res.data.data.length > 0) {
                    this.tilteData(res.data.data)
                    this.daynums = res.data.data.length
                }
            })
        },
        tilteData (data) {
            this.tableColumns1 = [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: 60
                },
                {
                    title: this.$t(100001),
                    key: 'sectionName',
                    minWidth: 120
                },
                {
                    title: this.$t(100002),
                    key: 'username',
                    minWidth: 80
                }
            ]
            let arr = this.tableColumns1
            data.forEach(item => {
                let week = ''
                switch (item.week) {
                case 0:
                    week = '日';
                    break;
                case 1:
                    week = '一';
                    break;
                case 2:
                    week = '二';
                    break;
                case 3:
                    week = '三';
                    break;
                case 4:
                    week = '四';
                    break;
                case 5:
                    week = '五';
                    break;
                case 6:
                    week = '六';
                    break;
                default:
                    break;
                }
                arr.push({
                    title: item.day + ' (' + week + ')',
                    key: 'day' + item.day,
                    minWidth: 80,
                    render: (h, params) => {
                        var bgColor = ''
                        var rowobj = params.row
                        var shiftStr = ''
                        for (var key in rowobj) {
                            if (key === 'day' + item.day) {
                                shiftStr = rowobj[key]
                            }
                        }
                        if (shiftStr === '休息') {
                            bgColor = 'gray'
                        } else if (shiftStr === '') {
                            bgColor = ''
                        } else {
                            bgColor = 'green'
                        }
                        return h(
                            'div',
                            {
                                style: {
                                    color: '#fff',
                                    backgroundColor: bgColor,
                                    margin: '0px -18px',
                                    textAlign: 'center',
                                    minHeight:'36px',
                                    // padding: '4px 0px',
                                    cursor: 'pointer'
                                },
                                on: {
                                    click: () => {
                                        this.username = params.row.username
                                        this.datetime = this.month + '-' + (item.day < 10 ? '0' + item.day : item.day)
                                        this.usermid = params.row.usermid

                                        // 找班次id
                                        this.shiftid = 0
                                        if (this.shiftAllList.length > 0) {
                                            let userData = this.shiftAllList[params.index].shifts
                                            if (userData.length > 0) {
                                                let shiftData = userData[item.day - 1]
                                                this.shiftid = shiftData.shiftid
                                                this.setShift()
                                            }
                                        }
                                    }
                                }
                            },
                            shiftStr
                        )
                    }
                })
            })
            this.tableColumns1 = arr
        },
        initdepartment () {
            axios.request({
                url: '/config/ProjectUser/getUserDepartment',
                method: 'get'
            }).then(res => {
                this.departmentlist = res.data.data
                this.departmentlistadd = res.data.data
            })
        },
        setShift (mid, dayNum) {
            this.initshift()
            this.settingmodal = true // 弹窗出现
        },
        initshift () {
            var param = { id: this.department }
            axios.request({
                url: '/config/ProjectShift/getShiftListsBySectionid',
                params: param,
                method: 'get'
            }).then(res => {
                this.shiftList = res.data.data
            })
        },
        selectdate (e) {
            this.month = e
        },
        tosearch () {
            this.tableTitle() // 获取标题
            this.page = 1
            // this.pagesize = 10
            this.search()
        },
        search () {
            this.loading = true
            if (this.department == '' || this.department == 0) {
                this.$Message.error(this.$t(100239))
                return false
            }
            var params = {
                sectionid: this.department,
                date: this.month,
                page: this.page,
                pagesize: this.pagesize,
                toexcel: 0
            }
            axios
                .request({
                    url: '/config/WorkingCalendar/GetSectionWokingGroup',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.loading = false
                    if (res.data.ret === 1 && res.data.data.length > 0) {
                        this.total = res.data.total
                        this.page = res.data.page
                        this.shiftAllList = res.data.data
                        this.mockTableData1(res.data.data)
                    } else {
                        this.total = 0
                        this.page = 1
                        this.tableData1 = []
                    }
                })
        },
        downexcel () {
            if (this.department == '' || this.department == 0) {
                this.$Message.error(this.$t(100239))
                return false
            }
            var params = {
                sectionid: this.department,
                date: this.month,
                page: 1,
                pagesize: 9999999,
                toexcel: 1
            }
            axios
                .request({
                    url: '/config/WorkingCalendar/GetSectionWokingGroup',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        mockTableData1 (tablelist) {
            let data = []
            let daynums = this.daynums
            tablelist.forEach(item => {
                let arr = {}
                arr.usermid = item.usermid
                arr.sectionName = item.usergroupname
                arr.username = item.username
                for (var i = 0; i < daynums; i++) {
                    let num = i + 1
                    let dayStr = 'day' + num
                    let shiftname = ''
                    if (item.shifts.length > 0) {
                        let shiftobj = item.shifts[i]
                        for (var key in shiftobj) {
                            if (key === 'shiftname') {
                                shiftname = shiftobj[key]
                            }
                        }
                        arr[dayStr] = shiftname
                    } else {
                        arr[dayStr] = ''
                    }
                }
                data.push(arr)
            })
            this.tableData1 = data
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search()
        }

    }
}
</script>
<style lang="less" scoped>
.demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
label {
  width: 100px;
  display: inline-block;
  text-align: right;
}
.out_row{
  margin:10px 0px;
}

</style>
