<template>
  <div class="planCalendar">
    <div class="filter">
      <label><span v-text="$t('1132')">产线层级</span>:</label>
      <Cascader :data="datalevel" :value="leveldata" @on-change="changelevel" trigger="click" change-on-select style="display:inline-block;width:300px;"></Cascader>
    </div>
    <div class="filter">
      <label>时间选择:</label>
      <DatePicker type="month" @on-change="timechange" clearable :value="filterObj.time" format="yyyy-MM" placement="bottom-end"
        placeholder="Select time" style="width: 120px"></DatePicker>
    </div>
    <div class="buttonall">
      <Button type="primary" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
      <Button type="success" icon="md-close-circle" @click="clearFilter()">{{$t(1039)}}</Button>
      <Button type="primary" icon="md-download" @click="toExcel()">{{$t(1007)}}</Button>
      <Button type="warning" icon="ios-search" @click="showHistory()">{{$t(700154)}}</Button>
    </div>

    <div v-if="!isShowHistory">
      <Table style="margin-top:10px" class="table1" border :data="tableData1" :columns="tableColumns1"></Table>
    </div>
    <div v-if="isShowHistory" class="divborder">
      <Table style="margin-top:10px" width='100%' highlight-row :data="tableData3" :columns="tableColumns3"></Table>
      <div style="margin: 10px;overflow: hidden">
        <Button class="fl" type="success" icon="md-close-circle" @click="hideHistory()">{{$t(1028)}}</Button>
        <div style="float: right;">
          <Page :total="total3" :current="page3" @on-change="changePage3" show-elevator show-sizer show-total
            @on-page-size-change="handlePageSize3" :page-size-opts="[10,20,30,40,100]"></Page>
        </div>
      </div>
    </div>

    <Modal title="计划详情" v-model="changePlanTimeModel" @on-ok="handlerChangePlanTime('changePlanTimeObj')" :loading="loading"
      :styles="{top: '40px',width:'700px'}">
      <div class="location">{{location}}</div>
      <div class="modal_body" style="width:100% !important;padding:0 10px;">
        <Table style="margin-top:10px" class="table2" border :data="tableData2" :columns="tableColumns2" :span-method="handleSpan"></Table>
      </div>
    </Modal>

  </div>

</template>
<script>
import moment from 'moment'
import axios from '@/libs/api.request'
export default {
    components: {},
    data () {
        const w = 70

        return {
            leveldata: [],
            levelid: 0,
            datalevel: [],

            filterObj: {
                time: ''
            },

            w: 80,
            tableData1: [],
            tableColumns1: [{
                title: this.$t(960432),
                key: 'location',
                align: 'center',
                width: 120
            },
            {
                title: 'February',
                align: 'center',
                children: []
            }
            ],
            table_child: [{
                title: 'WeekI',
                align: 'center',
                key: 'week1',
                children: [{
                    title: 'Mon',
                    align: 'center',
                    key: 'Mon1',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                },
                {
                    title: 'Tues',
                    align: 'center',
                    key: 'Tues1',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Wed',
                    align: 'center',
                    key: 'Wed1',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Thurs',
                    align: 'center',
                    key: 'Thurs1',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Fri',
                    align: 'center',
                    key: 'Fri1',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sat',
                    align: 'center',
                    key: 'Sat1',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sun',
                    align: 'center',
                    key: 'Sun1',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }
                ]
            },
            {
                title: 'WeekII',
                align: 'center',
                key: 'week2',
                children: [{
                    title: 'Mon',
                    align: 'center',
                    key: 'Mon2',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                },
                {
                    title: 'Tues',
                    align: 'center',
                    key: 'Tues2',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Wed',
                    align: 'center',
                    key: 'Wed2',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Thurs',
                    align: 'center',
                    key: 'Thurs2',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Fri',
                    align: 'center',
                    key: 'Fri2',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sat',
                    align: 'center',
                    key: 'Sat2',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sun',
                    align: 'center',
                    key: 'Sun2',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }
                ]
            },
            {
                title: 'WeekIII',
                align: 'center',
                key: 'week3',
                children: [{
                    title: 'Mon',
                    align: 'center',
                    key: 'Mon3',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                },
                {
                    title: 'Tues',
                    align: 'center',
                    key: 'Tues1',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Wed',
                    align: 'center',
                    key: 'Wed3',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Thurs',
                    align: 'center',
                    key: 'Thurs3',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Fri',
                    align: 'center',
                    key: 'Fri3',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sat',
                    align: 'center',
                    key: 'Sat3',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sun',
                    align: 'center',
                    key: 'Sun3',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }
                ]
            },
            {
                title: 'WeekIV',
                align: 'center',
                key: 'week4',
                children: [{
                    title: 'Mon',
                    align: 'center',
                    key: 'Mon4',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                },
                {
                    title: 'Tues',
                    align: 'center',
                    key: 'Tues4',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Wed',
                    align: 'center',
                    key: 'Wed4',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Thurs',
                    align: 'center',
                    key: 'Thurs4',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Fri',
                    align: 'center',
                    key: 'Fri4',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sat',
                    align: 'center',
                    key: 'Sat4',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sun',
                    align: 'center',
                    key: 'Sun4',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }
                ]
            },
            {
                title: 'WeekⅤ',
                align: 'center',
                key: 'week5',
                children: [{
                    title: 'Mon',
                    align: 'center',
                    key: 'Mon5',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                },
                {
                    title: 'Tues',
                    align: 'center',
                    key: 'Tues5',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Wed',
                    align: 'center',
                    key: 'Wed5',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Thurs',
                    align: 'center',
                    key: 'Thurs5',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Fri',
                    align: 'center',
                    key: 'Fri5',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sat',
                    align: 'center',
                    key: 'Sat5',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sun',
                    align: 'center',
                    key: 'Sun5',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }
                ]
            }, {
                title: 'WeekⅥ',
                align: 'center',
                key: 'week6',
                children: [{
                    title: 'Mon',
                    align: 'center',
                    key: 'Mon6',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                },
                {
                    title: 'Tues',
                    align: 'center',
                    key: 'Tues6',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Wed',
                    align: 'center',
                    key: 'Wed6',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Thurs',
                    align: 'center',
                    key: 'Thurs6',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Fri',
                    align: 'center',
                    key: 'Fri6',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sat',
                    align: 'center',
                    key: 'Sat6',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }, {
                    title: 'Sun',
                    align: 'center',
                    key: 'Sun6',
                    width: w,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                backgroundColor: this.getBackColor(params)
                            },
                            class: 'status',
                            on: {
                                click: (row) => {
                                    this.showModal(params)
                                }
                            }
                        }, '')
                    }
                }
                ]
            }
            ],
            loading: false,
            location: '',
            changePlanTimeModel: false,

            changePlanTimeObj: [],
            tableData2: [],
            tableColumns2: [{
                title: this.$t(8000027),
                key: 'startTime',
                width: 120
            },
            {
                title: this.$t(930094),
                key: 'item',
                width: 160
            },
            {
                title: '计划用时',
                key: 'costTime',
                width: 90,
                align: 'center'
            },
            {
                title: '状态',
                key: 'statename',
                width: 80
            },
            {
                title: '调整时间',
                key: 'changeToTime',
                render: (h, params) => {
                    // if (params.row.isPlan && params.row.status === 2) { // params.row.status === 2
                    return h('DatePicker', {
                        props: {
                            type: 'datetime',
                            format: 'yyyy-MM-dd',
                            placement: 'bottom-end',
                            placeholder: 'Select date',
                            value: params.row[params.column.key],
                            key: params.index,
                            disabled: !!((params.row.status === 1 || params.row.status === 3))
                        },
                        style: {

                        },
                        on: { //! ！！
                            'on-change': (date) => {
                                if (date) {
                                    params.row[params.column.key] = date
                                    this.changePlanTimeObj[params.index][params.column.key] = date
                                } else {
                                    params.row[params.column.key] = '' // 必须有各种判断，否则清空时无法解除之前的禁用
                                    this.changePlanTimeObj[params.index][params.column.key] = ''
                                }
                            }
                        }
                    })
                    // } else {
                    //   return h('span', params.row.changeToTime)
                    // }
                }
            }
            ],

            isShowHistory: false,
            total3: 0, // 刀位列表total
            page3: 1, // 刀位列表当前页数
            pagesize3: 10, // 刀位列表pagesize
            tableData3: [], // 刀位列表数据容器
            tableColumns3: [{ // 列表字段属性集合
                type: 'index2',
                title: this.$t(1008),
                key: 'xuhao',
                render: (h, params) => {
                    return h('span', params.index + (this.page3 - 1) * this.pagesize3 + 1)
                },
                width: 120
            },
            {
                title: this.$t(800191),
                key: 'location',
                width: 200
            },
            {
                title: this.$t(930094),
                key: 'item',
                width: 200
            },
            {
                title: this.$t(930095),
                key: 'startTime',
                width: 160
            },
            {
                title: this.$t(930096),
                key: 'changeToTime',
                width: 160
            },
            {
                title: this.$t(930097),
                key: 'changer',
                width: 120
            },
            {
                title: this.$t(930098),
                key: 'changeTime'
            }
            ]
        }
    },
    created () {
        var month = moment(new Date().getTime()).format('MMMM')
        this.tableColumns1 = [{
            title: this.$t(960432),
            key: 'location',
            align: 'center',
            width: 120
        },
        {
            title: month,
            align: 'center',
            children: []
        }
        ]
        this.tableColumns1[1].children = this.table_child

        this.initlevel()
    },
    methods: {
        initlevel () {
            axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    const arr = []
                    this.datalevel = res.data.data
                    arr.push(res.data.data[0].value)
                    this.leveldata = []
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        changelevel (data) { // 切换产线层级，触发事件
            this.filterObj.sectionid = data[data.length - 1]
        },
        search () {
            let data = {
                time: this.filterObj.time,
                sectionid: this.filterObj.sectionid
            }
            if (data.sectionid === 0 || data.sectionid === undefined) {
                this.$Message.error(this.$t(1037))
                return false
            }
            if (data.time === undefined || data.time === null || data.time === '') {
                this.$Message.error(this.$t(930100))
                return false
            }
            this.changeThTitle(data.time)
            axios.request({
                url: '/tpm/Plan/GetCalendar',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    var month = moment(this.filterObj.time).format('MMMM')
                    this.tableColumns1 = [{
                        title: this.$t(960432),
                        key: 'location',
                        align: 'center',
                        width: 120
                    },
                    {
                        title: month,
                        align: 'center',
                        children: []
                    }
                    ]
                    this.tableColumns1[1].children = this.table_child
                    let index = 1,
                        week, weekNum = 1,
                        arr = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
                        data = []
                    res.data.data.forEach(machineInfo => {
                        let temp = {
                            location: machineInfo.location,
                            machineid: machineInfo.machineid
                        }
                        temp.timeList = []
                        machineInfo.data.forEach(statusInfo => {
                            week = index % 7 === 0 ? 7 : index % 7
                            temp[arr[week - 1] + Math.ceil((index - (weekNum - 1) * 35) / 7)] = statusInfo.status
                            temp.timeList.push(statusInfo.date)
                            index++
                        })
                        data.push(temp)
                        weekNum++
                    })
                    // console.log(data)
                    this.tableData1 = data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        handlerChangePlanTime (name) {
            let params = []
            if (this.changePlanTimeObj.length > 0) {
                this.changePlanTimeObj.forEach(plan => {
                    if (plan.changeToTime != '' && plan.changeToTime != undefined && plan.isPlan) { //
                        params.push({
                            id: plan.id,
                            time: plan.changeToTime
                        })
                    }
                })
            }
            if (params.length > 0) {
                var data = {
                    items: params
                }
                axios.request({
                    url: '/tpm/Plan/ModifyCalendarItem',
                    data,
                    method: 'post'
                }).then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1060'))
                        this.changePlanTimeModel = false
                        this.search()
                    } else {
                        this.$Message.error(this.$t('1061'))
                        // 解决ok按钮loading的问题
                        this.clearLoading()
                    }
                })
            } else {
                this.changePlanTimeModel = false
            }
        },
        timechange (t) {
            this.filterObj.time = t + '-01'
        },
        changeThTitle (t) {
            let timeArr = []
            let index = 0
            if (t instanceof Array || t === null || t === '') {
                for (i = 1; i <= 42; i++) {
                    timeArr.push('')
                }
            } else {
                // 确定该月份1号对应周几
                let ymdayDate = new Date(t) // 当月1号
                let week = ymdayDate.getDay() === 0 ? 7 : ymdayDate.getDay() // 当月1号是周几：1-6 0=周日
                let dayNum = new Date(ymdayDate.getFullYear(), ymdayDate.getMonth() + 1, 0).getDate() // 当月有多少天
                // 计算前面需要补充几天，后面需要补充几天，并生成42位的日期数组
                let frontNum = week - 1 // 前面需要补充的天数
                let endNum = 42 - frontNum - dayNum // 后面需要补充的天数

                if (frontNum > 0) {
                    for (var i = frontNum; i > 0; i--) {
                        timeArr.push(this.getNextDate(ymdayDate, -i))
                    }
                }
                for (var i = 1; i <= dayNum; i++) {
                    timeArr.push(this.getNextDate(ymdayDate, i - 1))
                }
                if (endNum > 0) {
                    for (var i = 1; i <= endNum; i++) {
                        timeArr.push(this.getNextDate(ymdayDate, i + dayNum - 1))
                    }
                }
            }
            // console.log(timeArr)
            // console.log('当月1号是周' + week) //当月1号是周几
            // console.log('年' + ymdayDate.getFullYear()) //年
            // console.log('月' + (ymdayDate.getMonth() + 1)) //月
            // console.log('日' + ymdayDate.getDate()) //日
            // console.log('当月有' + dayNum + '天') //当月有多少天
            // console.log('前面需要补充' + frontNum + '天') //前面需要补充多少天
            // console.log('后面需要补充' + endNum + '天') //后面需要补充多少天
            // 修改表头Title
            let title
            let arr
            this.tableColumns1[1].children.forEach((weekItem, wk) => {
                weekItem.children.forEach((dayItem, dk) => {
                    title = this.tableColumns1[1].children[wk].children[dk].title
                    arr = title.split('\n')
                    this.tableColumns1[1].children[wk].children[dk].title = arr[0] + '\n' + timeArr[index]
                    index++
                })
            })
        },
        getBackColor (params) {
            return params.row[params.column.key] === 1 ? 'green' : (params.row[
                params.column.key] === 2 ? 'orange' : (params.row[
                    params.column.key] === 3 ? 'red' : 'white'))
        },
        showModal (table_params) {
            // if (table_params.row[table_params.column.key] === 1 || table_params.row[table_params.column.key] === 3) { // 已完成,逾期的不能调整日期
            //   return false
            // }
            // if (table_params.row[table_params.column.key] === 1 || table_params.row[table_params.column.key] === 3) { // 已完成,逾期的不能调整日期
            //   return false
            // }
            let machineid = table_params.row.machineid
            let time = table_params.row.timeList[table_params.column._index - 1]
            let location = table_params.row.location
            this.location = location
            let data = {
                machine: machineid,
                time: this.filterObj.time,
                time: time

            }
            // 获取列表数据
            axios.request({
                url: '/tpm/Plan/GetCalendarItem',
                data,
                method: 'post'
            }).then(res => {
                this.changePlanTimeObj = []
                let tempData = []
                if (res.data.ret === 1) {
                    let index
                    res.data.data.forEach(planItem => {
                        var statename = this.$t('800083')
                        if (planItem.status === 2) {
                            statename = this.$t('1133')
                        } else if (planItem.status === 3) {
                            statename = this.$t('1134')
                        }
                        index = 1
                        if (planItem.data.length === 0) {
                            this.changePlanTimeObj.push({
                                changeToTime: planItem.changeToTime,
                                id: planItem.id,
                                isPlan: true
                            })
                            tempData.push({
                                changeToTime: planItem.changeToTime,
                                startTime: planItem.startTime,
                                status: planItem.status,
                                statename: statename,
                                costTime: '',
                                item: '',
                                isPlan: true,
                                itemLength: planItem.data.length,
                                id: planItem.id
                            })
                        } else {
                            planItem.data.forEach(item => {
                                if (index === 1) {
                                    this.changePlanTimeObj.push({
                                        changeToTime: planItem.changeToTime,
                                        id: planItem.id,
                                        isPlan: true
                                    })
                                    tempData.push({
                                        changeToTime: planItem.changeToTime,
                                        startTime: planItem.startTime,
                                        status: planItem.status,
                                        statename: statename,
                                        costTime: item.costTime,
                                        item: item.item,
                                        isPlan: true,
                                        itemLength: planItem.data.length,
                                        id: planItem.id
                                    })
                                } else {
                                    this.changePlanTimeObj.push({
                                        changeToTime: planItem.changeToTime,
                                        id: planItem.id,
                                        isPlan: false
                                    })
                                    tempData.push({
                                        changeToTime: '',
                                        startTime: '',
                                        status: '',
                                        costTime: item.costTime,
                                        item: item.item,
                                        isPlan: false,
                                        itemLength: 0,
                                        id: planItem.id
                                    })
                                }
                                index++
                            })
                        }
                    })
                    this.tableData2 = tempData
                    this.changePlanTimeModel = true
                } else {
                    this.tableData2 = []
                }
            })
        },
        handleSpan ({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            if (row.isPlan && columnIndex === 0) {
                return {
                    rowspan: row.itemLength === 0 ? 1 : row.itemLength,
                    colspan: 1
                }
            } else if (columnIndex === 0) {
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
            if (row.isPlan && columnIndex === this.tableColumns2.length - 1) {
                return {
                    rowspan: row.itemLength === 0 ? 1 : row.itemLength,
                    colspan: 1
                }
            } else if (columnIndex === this.tableColumns2.length - 1) {
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        },
        getNextDate (date, day) {
            if (date instanceof Array || date === null || date === '') {

            } else {
                var dd = new Date(date)
                dd.setDate(dd.getDate() + day)
                var y = dd.getFullYear()
                var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
                var d = dd.getDate()
                return d
            }
        },
        clearLoading () {
            this.loading = false
            this.$nextTick(() => {
                this.loading = true
            })
        },
        clearFilter () {
            this.filterObj.time = null
            this.changeThTitle(this.filterObj.time)
            this.leveldata = []
            this.tableData1 = []
        },
        toExcel () { // 导出excel
            let params = {
                time: this.filterObj.time,
                sectionid: this.filterObj.sectionid
            }
            if (params.sectionid === 0 || params.sectionid === undefined) {
                this.$Message.error(this.$t(1037))
                return false
            }
            if (params.time === undefined || params.time === null || params.time === '') {
                this.$Message.error(this.$t(930100))
                return false
            }
            axios.request({
                url: '/tpm/Plan/ExportCalendarItem',
                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))
                }
            })
        },
        showHistory () {
            this.search3(this.page3, this.pagesize3)
            this.isShowHistory = true
        },
        hideHistory () {
            this.isShowHistory = false
        },
        changePage3 (value) { // 换页事件
            this.page3 = value
            this.tableData3 = this.search3(this.page3, this.pagesize3)
        },
        handlePageSize3 (value) { // 切换分页页数，触发事件
            this.pagesize3 = value
            this.tableData3 = this.search3(this.page3, this.pagesize3)
        },
        search3 (page, pagesize) {
            let data = {
                time: this.filterObj.time,
                sectionid: this.filterObj.sectionid,
                page: page,
                pagesize: pagesize
            }
            // if (params.sectionid === 0||params.sectionid === undefined) {
            //   this.$Message.error('请选择产线层级')
            //   return false
            // }
            // if (params.time === undefined || params.time === null || params.time === '') {
            //   this.$Message.error('请选择月份')
            //   return false
            // }

            axios.request({
                url: '/tpm/Plan/GetCalendarChanged',
                data,
                method: 'post'
            }).then(res => {
                this.total3 = res.data.total3
                this.mockTableData3(res.data.data)
            })
        },
        mockTableData3 (tablelist) { // 转换数据，并赋值给列表数据容器tableData1
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        location: item.machine, // 设备位置
                        item: item.item, // 保养维护项目
                        startTime: this.changeDate(item.original * 1000), // 原执行日期
                        changeToTime: this.changeDate(item.now * 1000), // 调整日期
                        changer: item.user, // 修改人
                        changeTime: this.changeDate(item.edit_time * 1000) // 修改日期
                    })
                }
            })
            this.tableData3 = data
        },
        changeDate (dateA) {
            var dateee = new Date(dateA).toJSON()
            var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toLocaleDateString().replace(/T/g, ' ').replace(
                /\.[\d]{3}Z/,
                '').replace(/\//g, '-')
            return date
        }

    } // end method

}
</script>
<style>
  .planCalendar .table1 .ivu-table-cell span {
    white-space: pre-wrap !important;
    margin: 10px 0;
    display: block;
  }

  .planCalendar .table1 .ivu-table-cell {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    vertical-align: middle;
  }

  .planCalendar .table1 .ivu-table-cell .status {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .planCalendar .location {
    padding: 10px 0 10px 10px;
    font-size: 16px;
    font-weight: bold;
  }

  .table2 {
    overflow: visible !important;
  }

  .table2 .ivu-table-cell {
    /* width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; */
  }

  .table2 .ivu-picker-panel-body {
    color: black;
  }
</style>
