<template>
  <div class="testdiv">
    <div class="divborder" style="margin:0px;">
        <div class="filter">
         <label >{{$t('200207')}}</label>
        <Select v-model="section" label-in-value @on-change="sectionchange" clearable style="width:160px;" >
              <Option v-for="item in sectionlist" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </div>
         <div class="filter">
         <label >{{$t('200179')}}:</label>
         <Select v-model="group" label-in-value clearable style="width:160px;" >
              <Option v-for="item in grouplist" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
         <div class="filter">
         <label >{{$t('200208')}}</label>
         <Select v-model="user" label-in-value clearable style="width:160px;" >
              <Option v-for="item in userlist" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
         <div class="filter">
         <label >{{$t('900908')}}:</label>
         <DatePicker type="daterange" :value="dateTime" placeholder="Select date" style="width: 200px;"  @on-change="selectdate"></DatePicker>
        </div>
          <Button type="primary" style="margin:0 10px" icon="ios-search" @click="search(0)">{{$t('1001')}}</Button>
          <Button type="primary" style="margin:0 10px" icon="ios-search" @click="view()">{{$t('900312')}}</Button>
          <Button type="primary" style="margin:0 10px" icon="ios-cloud-download" @click="search(1)">{{$t('1007')}}</Button>
    </div>
    <div class="divborder">
      <Table
        style="margin-top:10px"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        @on-selection-change="handleSelectRow"
        :columns="tableColumns1"></Table>
    </div>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <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 v-model="vmodal" :styles="{top: '40px',width:'1000px'}" >
        <div class="modal_body" style="width:1000px!important;padding:0 20px;">
            <div class="filter">
                    <label>{{$t('900176')}}：</label>
                    <label style="width:300px;text-align: left">{{workcode}}</label>
                </div>
                <div class="filter">
                    <label>{{$t('100002')}}：</label>
                    <label style="width:300px;text-align: left">{{username}}</label>
                </div>
                <div class="filter">
                    <label>{{$t('100045')}}：</label>
                    <label style="width:300px;text-align: left">{{workshift}}</label>
                </div>
                <div class="filter">
                    <label>{{$t('1046')}}：</label>
                    <label style="width:300px;text-align: left">{{time}}</label>
                </div>
                  <div class="filter">
                    <label>{{$t('950309')}}</label>
                    <div class="divborder">
                    <Table style="margin-top:10px;"
                        highlight-row
                        :data="tableData2"
                        :columns="tableColumns2"></Table>
                        </div>
                </div>
                <div class="filter">
                    <label>{{$t('950310')}}</label>
                    <div class="divborder">
                    <Table style="margin-top:10px;"
                        highlight-row
                        :data="tableData3"
                        :columns="tableColumns3"></Table>
                    </div>
                </div>
                <div class="filter">
                    <label>{{$t('950315')}}</label>
                     <div class="divborder">
                    <Table style="margin-top:10px;"
                        highlight-row
                        :data="tableData4"
                        :columns="tableColumns4"></Table>
                        </div>
                </div>
        </div>
       <div slot="footer">
            <Button type="text" size="large" @click="closeview()">{{$t('1033')}}</Button>
        </div>
      </Modal>
  </div>
</template>
<script>
import moment from 'moment'
import axios from '@/libs/api.request'
export default {
    name: 'producetime', // 组件不刷新
    data () {
        return {
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            detailobj: {},
            treeContents: [],
            sectionlist: [],
            section: 0,
            group: 0,
            grouplist: [],
            user: 0,
            userlist: [],
            dateTime: '',
            total: 0,
            page: 1,
            pagesize: 10,
            vmodal: false,
            workcode: '',
            username: '',
            workshift: '',
            time: '',
            tableColumns1: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + 1
                        )
                    },
                    width: '60px'
                },
                {
                    title: this.$t('950110'),
                    key: 'workcode'
                },
                {
                    title: this.$t('100002'),
                    key: 'username'
                },
                {
                    title: this.$t('950289'),
                    key: 'groupname'
                },
                {
                    title: this.$t('100000'),
                    key: 'departname'
                },
                {
                    title: this.$t('101092'),
                    key: 'stationname'
                },
                {
                    title: this.$t('950303') + '(h)',
                    key: 'worktime'
                },
                {
                    title: this.$t('950305') + '(h)',
                    key: 'losstime'
                },
                {
                    title: this.$t('950306') + '(h)',
                    key: 'producttime'
                },
                {
                    title: this.$t('950307') + '(h)',
                    key: 'efficiencytime'
                },
                {
                    title: this.$t('950308') + '(%)',
                    key: 'workefficiency'
                }
            ],
            tableColumns2: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + 1
                        )
                    },
                    width: '60px'
                },
                {
                    title: this.$t('200003'),
                    key: 'location'
                },
                {
                    title: this.$t('950302'),
                    key: 'startworktime'
                },
                {
                    title: this.$t('100039'),
                    key: 'endworktime'
                },
                {
                    title: this.$t('950303') + '(h)',
                    key: 'worktime'
                }
            ],
            tableColumns3: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + 1
                        )
                    },
                    width: '60px'
                },
                {
                    title: this.$t('200003'),
                    key: 'location'
                },
                {
                    title: this.$t('950311'),
                    key: 'faultname'
                },
                {
                    title: this.$t('950312'),
                    key: 'faultdetail'
                },
                {
                    title: this.$t('950313'),
                    key: 'starttime'
                },
                {
                    title: this.$t('950314'),
                    key: 'endtime'
                },
                {
                    title: this.$t('950305') + '(h)',
                    key: 'losstime'
                }
            ],
            tableColumns4: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + 1
                        )
                    },
                    width: '60px'
                },
                {
                    title: this.$t('200003'),
                    key: 'location'
                },
                {
                    title: this.$t('900337'),
                    key: 'ordernumber'
                },
                {
                    title: this.$t('100088'),
                    key: 'productname'
                },
                {
                    title: this.$t('900967'),
                    key: 'routename'
                },
                {
                    title: this.$t('600588'),
                    key: 'oknumber'
                },
                {
                    title: this.$t('600589'),
                    key: 'noknumber'
                },
                {
                    title: this.$t('950307') + '(h)',
                    key: 'effiencytime'
                },
                {
                    title: this.$t('500121'),
                    key: 'reporttime'
                }
            ]
        }
    },
    created () {
        this.getsections()
        this.inittime()
        this.search(0)
    },
    methods: {
        inittime () {
            // 时间赋值
            var date = new Date()
            this.dateTime = [moment(date.getTime() - 3600 * 1000 * 24 * 15).format('YYYY-MM-DD'), moment(date.getTime()).format('YYYY-MM-DD')]
        },
        selectdate (e) {
            this.dateTime = [e[0], e[1]]
        },
        getsections () {
            axios.request({
                url: '/config/ProjectUser/getUserDepartment',
                method: 'get'
            }).then(res => {
                this.sectionlist = res.data.data
            })
        },
        getgroups () {
            axios.request({
                url: '/config/WorkingGroup/GetAllWorkGroup?departid=' + this.section,
                method: 'get'
            }).then(res => {
                this.grouplist = res.data.data
            })
        },
        getusers () {
            axios.request({
                url: '/config/ProjectUser/getUserListsBySectionId?sectionid=' + this.section,
                method: 'get'
            }).then(res => {
                this.userlist = res.data.data
            })
        },
        sectionchange () {
            this.getgroups()
            this.getusers()
        },
        search (toexcel) {
            var data = {
                userid: this.user,
                departid: this.section,
                groupid: this.group,
                starttime: moment(this.dateTime[0]).format('YYYY-MM-DD'),
                endtime: moment(this.dateTime[1]).format('YYYY-MM-DD'),
                page: this.page,
                pagesize: this.pagesize,
                toexcel: toexcel
            }
            axios
                .request({
                    url: '/cnc/WorkingSign/UserWorkTimeCount',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (toexcel === 1) {
                        if (res.data.ret === 1) {
                            window.location.href = axios.publicPath + '' + res.data.data
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    } else {
                        this.tableData1 = []
                        if (res.data.data != null && res.data.data.length > 1) {
                            this.total = res.data.total
                            this.mockTableData1(res.data.data)
                        }
                    }
                })
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        location: item.location,
                        workcode: item.workcode,
                        username: item.username,
                        departname: item.departname,
                        groupname: item.groupname,
                        stationname: item.stationname,
                        worktime: item.worktime,
                        losstime: item.losstime,
                        producttime: item.producttime,
                        efficiencytime: item.efficiencytime,
                        workefficiency: item.workefficiency,
                        userid: item.userid
                    })
                }
            })
            this.tableData1 = data
        },
        handleSelectRow: function (data) {
            var ids = []
            for (var i in data) {
                ids.push(data[i].id)
            }
            this.selectids = ids
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        view () {
            if (this.detailobj.userid === undefined) {
                this.$Message.error(this.$t('1017'))
                return false
            } else {
                this.vmodal = true
                var params = {
                    userid: this.detailobj.userid,
                    starttime: moment(this.dateTime[0]).format('YYYY-MM-DD'),
                    endtime: moment(this.dateTime[1]).format('YYYY-MM-DD')
                }
                axios.request({
                    url: '/cnc/WorkingSign/GetUserWorkTimeDetail',
                    params,
                    method: 'get'
                })
                    .then(res => {
                        if (res.ret === 0) {
                            return
                        }
                        var data = res.data.data
                        this.workcode = data.workcode
                        this.username = data.username
                        this.workshift = data.shiftname
                        this.time = data.timerange
                        this.tableData2 = []
                        this.tableData3 = []
                        this.tableData4 = []
                        if (data != null) {
                            this.mockTableData2(data.SignRecords)
                            this.mockTableData3(data.FaultRecords)
                            this.mockTableData4(data.ReportRecords)
                        }
                    })
            }
        },
        closeview () {
            this.vmodal = false
        },
        mockTableData2 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        location: item.location,
                        startworktime: item.startworktime,
                        endworktime: item.endworktime,
                        worktime: Math.round(item.worktime * 100) / 100
                    })
                }
            })
            this.tableData2 = data
        },
        mockTableData3 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        location: item.location,
                        faultname: item.faultname,
                        faultdetail: item.faultdetail,
                        starttime: item.starttime,
                        endtime: item.endtime,
                        losstime: Math.round(item.losstime * 100) / 100
                    })
                }
            })
            this.tableData3 = data
        },
        mockTableData4 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        location: item.location,
                        ordernumber: item.ordernumber,
                        productname: item.productname,
                        routename: item.routename,
                        oknumber: item.oknumber,
                        noknumber: item.noknumber,
                        effiencytime: Math.round(item.effiencytime * 100) / 100,
                        reporttime: item.reporttime
                    })
                }
            })
            this.tableData4 = data
        }
    }
}
</script>
<style lang="less">
</style>
