<template>
<div class="testdiv">
    <div class="divborder demo-spin-container" style="margin:0px 0px 10px 0px;">
        <div class="core">
            <label class="filter">{{$t('1950554')}}</label><br>
            <template>
                <Table :columns="tableColumns" @on-current-change="handleRowChange" highlight-row @on-selection-change="handleSelectRow" :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>
                </Table>
            </template>
            <div class="buttonall" style="text-align: center">
                <Button type="primary" @click="search">{{$t('1950555')}}</Button>
            </div>
        </div>
        <div style="width:0.2%;height:100%;float:left"></div>
        <div class="chartdiv">
            <div v-html="message"></div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </div>
    </div>
  </div>
</template>

<script>
import axios from '@/libs/api.request'

export default {
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            tableData: [],
            tableColumns: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    title: this.$t('1008'),
                    key: 'xuhao',
                    width: 70,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + 1
                        )
                    }
                },
                {
                    title: this.$t('901048'),
                    key: 'item'
                }
            ],
            productid: 0,
            sectionid: 0,
            dtStart: '',
            dtEnd: '',
            message: '',
            buttonSize: 'large',
            selectitems: [],
            spinShow: false
        }
    },
    created () {
        this.dtStart = this.getCookie('ProcessStatisticalAnalysis_StartTime')
        this.dtEnd = this.getCookie('ProcessStatisticalAnalysis_EndTime')
        this.productid = this.getCookie('ProcessStatisticalAnalysis_ProductId')
        this.sectionid = this.getCookie('ProcessStatisticalAnalysis_SectionId')
        this.inititem()
    },
    methods: {
        search () {
            if (this.selectitems === undefined || this.selectitems === null || this.selectitems === [] || this.selectitems.length === 0) {
                this.$Message.error(this.$t('1950553'))
                return
            }
            let params = {
                productid: this.productid,
                sectionid: this.sectionid,
                station: this.station,
                starttime: this.dtStart,
                endtime: this.dtEnd,
                item: this.selectitems,
                type: 13
            }
            this.spinShow = true
            axios.request({
                url: '/qms/BI/UnivariateAnalysis',
                data: params,
                method: 'post'
            })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.spinShow = false
                        var randomnumber = Math.floor(Math.random() * 100000)
                        var spcUrl = axios.publicPath + res.data.data + '?randomnumber=' + randomnumber
                        this.message = '<iframe src="' + spcUrl + '" name="aframe" width="100%" height="600px"></iframe>'
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        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 ''
        },
        inititem () {
            axios.request({
                url: '/qms/ManualCollection/GetDetails?productid=' + this.productid + '&sectionid=' + this.sectionid,
                method: 'get'
            })
                .then(res => {
                    this.tableData = []
                    if (res.data.ret === 1 && res.data.data != null && res.data.data.length > 0) {
                        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
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.item = currentRow.item
        },
        handleSelectRow: function (data) {
            this.selectitems = []
            for (var i in data) {
                if (this.selectitems.indexOf(data[i].itemid) < 0) {
                    this.selectitems.push(data[i].itemid)
                }
            }
        }
    }
}

</script>
<style lang="less" scoped>
.demo-spin-container{
  display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #eee;
}
@edit-zone-height:32px;
.testdiv{
  width:100%;
  height:100%;
}
.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>
