<template>
    <div class="testdiv">
         <div class="divborder">
            <div>
                <div class="filter">
                    <label v-text="$t('1132')">产线层级</label>:
                    <Cascader :data="datalevel" :value="leveldata" :render-format="format"  trigger="click" @on-change="levelchange" change-on-select style="display:inline-block;width:200px;" ></Cascader>
                </div>
                <div class="filter">
                    <label v-text="$t('500088')">统计指标</label>:
                    <Select v-model="statistical_indicators" @on-change="indexchange" label-in-value  clearable style="width:200px;" >
                        <Option  :value="1" v-text="$t('900595')">故障时间</Option>
                        <Option  :value="2" v-text="$t('200086')">故障次数</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label v-text="$t('1129')">横坐标</label>:
                    <Select v-model="Abscissa" label-in-value @on-change="Abscissachange" clearable style="width:200px;" >
                        <Option  :value="1" v-text="$t('100074')">设备类型</Option>
                        <Option  :value="2" v-text="$t('1026')">工位</Option>
                        <Option v-show="workshow"  :value="3" v-text="$t('900053')">工单</Option>
                    </Select>
                </div>
                <!-- 次级搜索条件 隐藏 -->
                <div v-show="!morecondition">
                <div >
                     <div class="filter">
                        <label v-text="$t('200178')">是否停机</label>:
                        <Select v-model="Shutdown" label-in-value  clearable style="width:200px;" >
                            <Option  :value="1" v-text="$t('1000020')">是</Option>
                            <Option  :value="0" v-text="$t('1000021')">否</Option>
                        </Select>
                    </div>
                    <div class="filter">
                        <label v-text="$t('900908')">时间范围</label>:
                        <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" v-model="index_time"  style="width: 300px"></DatePicker>
                    </div>
                </div>
                </div>
                <!-- 次级搜索条件  结束 -->
                <div class="buttonall">
                    <Button type="primary" icon="ios-search" @click="search()" v-text="$t('1001')">查询</Button>
                    <Button type="primary" icon="md-download" @click="downpdf()">{{$t('900741')}}</Button>
                </div>
                <div class="conditionblock">
                    <div class="conditionborder" @click="changecondition">
                        <div class="box">
                        <div class="skew">
                        <div class="skew-main">
                            <div v-show="morecondition">
                                <span v-text="$t('950400')">更多条件<Icon type="ios-arrow-down" /></span>
                            </div>
                            <div v-show="!morecondition">
                                <span v-text="$t('950401')">收起条件<Icon type="ios-arrow-up" /></span>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>

       </div>
       <div class="divborder" style="">
            <div  id="demo">
                <div style="height:380px;padding:20px 100px;">
                    <div id="main" style="height:350px;"></div>
                </div>
                <div style="padding:0 80px;">
                    <div style="display:inline-block;margin-right:80px;">{{$t('1035')}}{{time}}</div>
                    <div style="display:inline-block">{{$t('1031')}}:{{linetext}}</div>
                    <Table
                    style="margin-top:10px"
                    highlight-row
                    :data="tableData1"
                    :columns="tableColumns1"
                    max-height="300px"
                    ></Table>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import moment from 'moment'
import echarts from 'echarts'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
    data () {
        return {
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            statistical_indicators: 1, // 统计指标
            Abscissa: 1, // 横坐标1
            Shutdown: '', // 是否停机
            index_time: '', // 时间范围
            workshow: true,
            morecondition: false, // 次级搜索条件 默认隐藏
            indexobj: {}, // 统计指标
            time: '', // 表格上方展示时间
            linetext: '',
            Abscissalabel: '',
            indexth: '', // 动态表头1
            indexth2: '', // 动态表头2
            // dom: null,
            tableData1: [],
            tableColumns1: [
            ]
        }
    },
    created () {
        this.initlevel()
        this.index_time = [moment(new Date().getTime() - 3600 * 1000 * 24 * 14).format('YYYY-MM-DD ') + '00:00:00', moment(new Date().getTime() - 3600 * 1000 * 24 * 1).format('YYYY-MM-DD ') + '23:59:59']
    },
    methods: {
    // 初始化产线层级
        initlevel () {
            this.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 = arr
                    this.search()
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        format (labels, selectedData) {
            const index = labels.length - 1
            this.linetext = labels[index]
            var label = labels.join(' / ')
            return label
        },
        levelchange (value) {
            this.leveldata = value
        },
        changecondition () {
            this.morecondition = !this.morecondition
        },
        indexchange (value) {
            this.indexth1 = value ? value.label : this.$t('800205') // 故障次数
            if (value.value === 2) {
                this.workshow = false
            } else {
                this.workshow = true
            }
        },
        Abscissachange (value) {
            this.indexth2 = value ? value.label : this.$t('100074') // 设备类型
        },
        // 渲染列表开始
        mockTableData1 (tablelist, danwei) {
            let data = []
            var i = 0
            for (i; i < tablelist.x.length; i++) {
                data.push({
                    linelevel: tablelist.x[i],
                    indexchange: tablelist.y1[i] + danwei
                })
            }
            this.tableData1 = data
        },
        search () {
            this.time = moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss ') + moment(this.index_time[1]).format('YYYY-MM-DD HH:mm:ss')
            var data = {
                starttime: moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss'),
                level_id: this.leveldata[this.leveldata.length - 1],
                endtime: moment(this.index_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                x_type: this.statistical_indicators,
                x_id: this.Abscissa,
                offlinestatus: this.Shutdown
            }
            this.axios.request({
                url: '/tpm/Statistics/RepairWorkOrderSum',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.tableColumns1 = [
                        {
                            type: 'index2',
                            title: this.$t('1008'), // 序号
                            key: 'xuhao',
                            render: (h, params) => {
                                return h('span', params.index + 1)
                            }
                        },
                        {
                            title: this.indexth2 ? this.indexth2 : this.$t('100074'), // 设备类型
                            key: 'linelevel'
                        },
                        {
                            title: this.indexth1 ? this.indexth1 : this.$t('900595'), // 故障时间
                            key: 'indexchange'
                        }
                    ]
                    var danwei = this.statistical_indicators === 1 ? this.$t('200028') : this.$t('200163')
                    var name = this.statistical_indicators === 1 ? this.$t('900595') : this.$t('800205')
                    this.chartSet('main', name, res.data.data.x, danwei, res.data.data.y1, res.data.data.y2)
                    this.mockTableData1(res.data.data, danwei)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        // ehcart图
        chartSet (ele, name, xName, danwei, barData, lineData) {
            for (var i = 0; i < lineData.length; i++) {
                lineData[i] = parseInt(lineData[i] * 100)
            }
            var myChart = echarts.init(document.getElementById(ele))
            var option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    top: '8%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xName,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: name// lang('800205'),
                    },
                    {
                        type: 'value',
                        name: this.$t('800206'),
                        min: 0,
                        max: 100,
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: name + '(' + danwei + ')', // lang('900595')+"("+lang('200028')+")",
                        type: 'bar',
                        barMaxWidth: 70,
                        data: barData
                    },
                    {
                        name: this.$t('800206'),
                        type: 'line',
                        yAxisIndex: 1,
                        data: lineData
                    }
                ]
            }

            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        downpdf () {
            var target = document.querySelector('#demo')
            html2canvas(target, { allowTaint: true, dpi: 172, background: '#fff' }).then(function (canvas) {
                var contentWidth = canvas.width
                var contentHeight = canvas.height

                // 一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89
                // 未生成pdf的html页面高度
                var leftHeight = contentHeight
                // pdf页面偏移
                var position = 0
                // html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                var imgWidth = 595.28
                var imgHeight = 592.28 / contentWidth * contentHeight

                var pageData = canvas.toDataURL('image/jpeg', 1.0)
                var pdf = new JsPDF('', 'pt', 'a4')

                // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                // 当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        // 避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage()
                        }
                    }
                }
                pdf.save('content.pdf')
            })
        }

    }
}
</script>
<style lang="less" scoped>

</style>
