<template>
<div class="testdiv">
    <div class="divborder newSearchDiv" style="margin-top:0px;">
      <!-- <div class="core"> -->
            <span class="filter">1.{{$t('1950559')}}</span><br>
            <div class="filter">
                <label >{{$t('1950491')}}：</label>
                <Cascader class="searchInput" :data="datalevel" :value="leveldata" v-model="sectionid" trigger="click" change-on-select @on-change="handlelevelchange"></Cascader>
            </div>
            <div class="filter">
                <label >{{$t('100307')}}：</label>
                <Select class="searchSelect" v-model="productid" label-in-value clearable>
                    <Option v-for="item in products" :value="item.id" :key="item.id">{{ item.name + "【" + item.code +"】" }}</Option>
                </Select>
            </div>
            <div class="filter">
            <label>{{$t('1046')}}：</label>
                <DatePicker
                id="日期"
                type="datetimerange"
                v-model="daterange"
                confirm
                placeholder="请选择"
                format="yyyy-MM-dd HH:mm:ss"
                class="searchInput MaxWidth"
                @on-change="selectdate"
                ></DatePicker>
            </div>
            <div class="searchBtn">
                <Button  class="twoWord" type="primary" icon="md-checkmark" @click="search">{{$t('600568')}}</Button>
            </div>
        <!-- </div> -->
    </div>
    <div class="divborder newTableDiv">
        <!-- <div class="chartdiv"> -->
            <div class="title">2.{{$t('1950560')}}</div>
            <template>
                <Table :columns="tableColumns" :data="tableData">
                    <template slot-scope="{ row, index }" slot="xuhao">
                        <span>{{ row.xuhao }}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="item">
                        <span>{{ row.item }}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="standard">
                        <span>{{ row.standard }}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="min_value">
                        <span>{{ row.min_value }}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="max_value">
                        <span>{{ row.max_value }}</span>
                    </template>
                </Table>
            </template>
        <!-- </div> -->
    </div>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
import moment from 'moment'
export default {
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            sectionid: [],
            products: [],
            productid: 0,
            tableData: [],
            tableColumns: [
                {
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + 1
                        )
                    },
                    width: 70
                },
                {
                    title: this.$t('950169'),
                    key: 'item'
                },
                {
                    title: this.$t('950245'),
                    key: 'standard'
                },
                {
                    title: this.$t('200060'),
                    key: 'min_value'
                },
                {
                    title: this.$t('200059'),
                    key: 'max_value'
                }
            ],
            leveldata: [],
            datalevel: [],
            daterange: ''
        }
    },
    created () {
        var stime = this.getCookie('ProcessStatisticalAnalysis_StartTime')
        var etime = this.getCookie('ProcessStatisticalAnalysis_EndTime')
        if (stime !== null && stime !== undefined && stime !== '' && etime !== null && etime !== undefined && etime !== '') {
            this.daterange = [stime, etime]
        } else {
            var nowtime = Date.parse(new Date()) / 1000
            var oldtime = nowtime - 86400 * 7
            this.daterange = [this.datetrans(oldtime) + '00:00:00', this.datetrans(nowtime) + '23:59:59']
        }
        this.selectdate(this.daterange)
        var productID = this.getCookie('ProcessStatisticalAnalysis_ProductId')
        if (productID.length > 0) {
            this.productid = parseInt(productID)
        }
        this.initsectionid1()
        this.initlevel()
    },
    methods: {
        handlelevelchange (value) {
            this.leveldata = value
            var sectionid = value[value.length - 1]
            this.initproducts(sectionid)
        },
        initsectionid1 () {
            var sectionid = this.getCookie('ProcessStatisticalAnalysis_SectionId')
            if (sectionid !== null && sectionid !== undefined && sectionid !== '') {
                axios.request({
                    url: '/qms/SendTestCollection/GetParentSection?sectionid=' + sectionid,
                    method: 'get'
                })
                    .then(res => {
                        this.sectionid = res.data.data
                        this.initproducts1(sectionid)
                    })
            }
        },
        initsectionid () {
            var sectionid = this.getCookie('ProcessStatisticalAnalysis_SectionId')
            if (sectionid !== null && sectionid !== undefined && sectionid !== '') {
                axios.request({
                    url: '/qms/SendTestCollection/GetParentSection?sectionid=' + sectionid,
                    method: 'get'
                })
                    .then(res => {
                        this.sectionid = res.data.data
                        this.searchfirst()
                    })
            }
        },
        initlevel () {
            axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            }).then(res => {
                const arr = []
                this.datalevel = res.data.data
                arr.push(res.data.data[0].value)
                this.leveldata = arr
            })
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
            let last_str = this.dtEnd.split(' ')[1]
            if (last_str === '00:00:00') {
                this.dtEnd = moment(this.dtEnd).format('YYYY-MM-DD') + ' 23:59:59'
                this.daterange = [this.dtStart, this.dtEnd]
            }
        },
        setCookie (cname, cvalue, exdays) {
            var d = new Date()
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000))
            var expires = 'expires=' + d.toUTCString()
            document.cookie = cname + '=' + cvalue + '; ' + expires
        },
        getCookie (cname) {
            var name = cname + '='
            var ca = document.cookie.split(';')
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i]
                while (c.charAt(0) == ' ') c = c.substring(1)
                if (c.indexOf(name) != -1) {
                    return c.substring(name.length, c.length)
                }
            }
            return ''
        },
        searchfirst () {
            var sectionid = this.sectionid[this.sectionid.length - 1]
            axios.request({
                url: '/qms/ManualCollection/GetDetails?productid=' + this.productid + '&sectionid=' + sectionid,
                method: 'get'
            })
                .then(res => {
                    this.mockTableData(res.data.data)
                })
        },
        search () {
            var sectionid = this.sectionid[this.sectionid.length - 1]
            this.setCookie('ProcessStatisticalAnalysis_ProductId', this.productid)
            this.setCookie('ProcessStatisticalAnalysis_SectionId', sectionid)
            this.setCookie('ProcessStatisticalAnalysis_StartTime', this.dtStart)
            this.setCookie('ProcessStatisticalAnalysis_EndTime', this.dtEnd)
            axios.request({
                url: '/qms/ManualCollection/GetDetails?productid=' + this.productid + '&sectionid=' + sectionid,
                method: 'get'
            })
                .then(res => {
                    this.mockTableData(res.data.data)
                })
        },
        mockTableData (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        itemid: item.itemid,
                        checktype: item.checktype,
                        item: item.item,
                        standard: item.standard,
                        min_value: item.checktype === 2 ? (item.min_value === -999999999 ? '' : item.min_value) : '',
                        max_value: item.checktype === 2 ? (item.max_value === 999999999 ? '' : item.max_value) : '',
                        result: item.result,
                        value: item.value
                    })
                }
            })
            this.tableData = data
        },
        datetrans (date) {
            if (date === '' || date === undefined || date === 0 || date === null) {
                return ''
            }
            date = new Date(date * 1000)
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
            return Y + M + D
        },
        initproducts1 (sectionid) {
            this.products = [{ id: 0, name: '', code: '' }]
            axios.request({
                url: '/qms/InspectStandard/GetProductsBySectionId?sectionid=' + sectionid,
                method: 'get'
            }).then(res => {
                this.products = res.data.data
                this.searchfirst()
            })
        },
        initproducts (sectionid) {
            this.products = [{ id: 0, name: '', code: '' }]
            axios.request({
                url: '/qms/InspectStandard/GetProductsBySectionId?sectionid=' + sectionid,
                method: 'get'
            }).then(res => {
                this.products = res.data.data
            })
            this.productid = ''
        }
    }
}

</script>
<style lang="less" scoped>
@edit-zone-height:32px;
.title{
  margin:15px 5px;
}
.core{
    width: 29.8%;
    height: 100%;
    border:1px solid #979797;
    border-radius: 5px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    float:left;
    background: #ffffff;
}
.chartdiv{
    width: 70%;
    height: 100%;
    border:1px solid #979797;
    border-radius: 5px;
    // padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    float:right;
    background: #ffffff;
}
</style>
