<template>
<div class="testdiv">
    <div class="divborder demo-spin-container" style="margin-top:0px;">
        <div class="core">
            <label class="filter">{{$t('1950554')}}</label><br>
            <template>
                <Table :columns="tableColumns" @on-current-change="handleRowChange" highlight-row :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>
        <div style="width:0.2%;height:100%;float:left"></div>
        <div class="chartdiv">
            <div class="buttonall" style="text-align: center">
                <RadioGroup v-model="buttonSize" type="button">
                    <Radio @click.native="setType('I-MR')" label="label1">I-MR</Radio>
                    <Radio @click.native="setType('XBar-R')" label="label2">XBar-R</Radio>
                    <Radio @click.native="setType('P')" label="label3">P</Radio>
                    <Radio @click.native="setType('U')" label="label4">U</Radio>
                    <Radio @click.native="setType('TimeSeries')" label="label5">{{$t('1950556')}}</Radio>
                    <Radio @click.native="setType('LiuHeYi')" label="label6">{{$t('1950557')}}</Radio>
                    <Radio @click.native="setType('SPC')" label="label7">{{$t('1950558')}}</Radio>
                </RadioGroup>
            </div>
            <div>
              <div v-show="this.type === 'I-MR' || this.type === 'XBar-R' || this.type === 'LiuHeYi' || this.type === 'SPC'">
                <label>{{$t('1950566')}}：</label><inputNumber class="publicinput" v-model="setChunkSize" style="width:100px" />{{$t('1950562')}}
                  <label v-show="this.type === 'LiuHeYi'">&emsp;{{$t('1950567')}}：</label><inputNumber v-show="this.type === 'LiuHeYi'" class="publicinput" v-model="setGroupSize" style="width:100px" />
                  <label v-show="this.type === 'LiuHeYi'">&emsp;{{$t('1950568')}}：</label><inputNumber v-show="this.type === 'LiuHeYi'" class="publicinput" v-model="setGroupNum" style="width:100px" />
              </div>
              <div v-show="this.type === 'P' || this.type === 'U'">
                {{$t('1950569')}}：<p>&emsp;1.{{$t('1950570')}}</p><p>&emsp;2.{{$t('1950571')}}</p><p>&emsp;3.{{$t('1950572')}}</p>
              </div>
              <Button type="primary" @click="search">{{$t('1950555')}}</Button>
            </div>
            <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: [
                {
                    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: '',
            item: '',
            type: '',
            message: '',
            buttonSize: 'large',
            message1: '',
            obj: {},
            spinShow: false,
            setChunkSize: 8,
            setGroupNum: 10,
            setGroupSize: 5
        }
    },
    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: {
        setType (type) {
            this.type = type
        },
        search () {
            if (this.type === '' || this.type === null || this.type === undefined) {
                this.$Message.error(this.$t('1950552'))
                return
            }
            if (this.obj === undefined || this.obj === null || this.obj === {}) {
                this.$Message.error(this.$t('1950553'))
                return
            }
            if (this.obj.itemid === undefined || this.obj.itemid === null || this.obj.itemid === 0) {
                this.$Message.error(this.$t('1950553'))
                return
            }
            if (this.type === 'I-MR' || this.type === 'XBar-R' || this.type === 'LiuHeYi' || this.type === 'SPC') {
                if (this.setChunkSize > 9 || this.setChunkSize < 2) {
                    this.$Message.error(this.$t('1950562'))
                    return
                }
            }
            if (this.type === 'LiuHeYi') {
                if (this.setGroupSize <= 0) {
                    this.$Message.error(this.$t('1950563'))
                    return
                }
                if (this.setGroupNum <= 0) {
                    this.$Message.error(this.$t('1950564'))
                    return
                }
            }
            this.message = ''
            var type = []
            switch (this.type) {
            case 'I-MR':
                type = [1, 2]
                break
            case 'XBar-R':
                type = [3, 4]
                break
            case 'P':
                type = [5]
                break
            case 'U':
                type = [6]
                break
            case 'TimeSeries':
                type = [7]
                break
            case 'LiuHeYi':
                type = [3, 4, 8, 9, 10, 11]
                break
            case 'SPC':
                type = [12]
                break
            }
            this.spinShow = true
            var trueType = JSON.parse(JSON.stringify(type))
            this.SetChartDiv(type, trueType)
        },
        GetChart (type) {
            if (type.length > 0) {
                var i = 0
                type.forEach(ele => {
                    axios.request({
                        url: '/qms/BI/UnivariateAnalysis',
                        data: {
                            productid: this.productid,
                            sectionid: this.sectionid,
                            starttime: this.dtStart,
                            endtime: this.dtEnd,
                            item: [this.obj.itemid],
                            setChunkSize: this.setChunkSize,
                            setGroupNum: this.setGroupNum,
                            setGroupSize: this.setGroupSize,
                            type: ele
                        },
                        method: 'post'
                    }).then(res => {
                        var randomnumber = Math.floor(Math.random() * 100000)
                        var spcUrl = axios.publicPath + res.data.data + '?randomnumber=' + randomnumber// axios.publicPath
                        var html = document.getElementById('chart' + res.data.type)
                        html.src = spcUrl
                        i++
                        if (i >= type.length) {
                            this.spinShow = false
                        }
                    }).catch(() => {
                        this.spinShow = false
                    })
                })
            } else {
                this.spinShow = false
            }
        },
        SetChartDiv (type, trueType) {
            type.forEach(ele => {
                if (this.type === 'LiuHeYi') {
                    this.message = this.message + '<iframe src="" name="aframe" width="50%" height="300px" id="chart' + ele + '"></iframe>'
                } else {
                    this.message = this.message + '<iframe src="" name="aframe" width="100%" height="400px" id="chart' + ele + '"></iframe>'
                }
            })
            this.GetChart(trueType)
        },
        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 = []
                    let info = res.data.data;
                    if(res.data.ret === 1&&info!=null&&info!=undefined&&info.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.obj = currentRow
        }
    }
}

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

.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>
