<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div class="filter">
                <label>{{$t('1132')}}：</label>
                <Cascader
                    :data="datalevel"
                    :value="leveldata"
                    trigger="hover"
                    style="display:inline-block;width:200px;"
                    @on-change="changeLevel"
                ></Cascader>
            </div>
            <div class="filter">
                <label>{{$t('600234')}}：</label>
                <Button type="primary" class="twoWord" @click="toolSelect()">点击选择</Button>
            </div>
            <div class="filter" v-show="text">
                <span>刀具：{{toolname}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>图纸号：{{drawingcode}}</span>
            </div>
            <div class="filter">
                <label>日期范围：</label>
                <DatePicker
                    class="searchInput MaxWidth"
                    type="datetimerange"
                    :value="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    @on-change="dateChange"
                ></DatePicker>
            </div>
            <div v-show="!morecondition">
                <!-- <div> -->
                    <div class="filter">
                        <label>X轴：</label>
                        <Select name="x" v-model="x" class="searchSelect">
                            <Option value="3">刀具图纸号</Option>
                            <Option value="1">供应商</Option>
                            <Option value="2">时间</Option>
                        </Select>
                    </div>
                    <div class="filter">
                        <label>Y轴：</label>
                        <Select name="y" v-model="y" class="searchSelect">
                            <Option value="1">寿命</Option>
                            <Option value="2">单价</Option>
                        </Select>
                    </div>
                <!-- </div> -->
            </div>

            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search()"
                >{{$t('1001')}}</Button>
            </div>
              <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
        </div>
        <div class="divborder newEchartStyl">
            <div id="main" style="height:350px;width:100%"></div>
        </div>
        <Modal class="newModalClass" title="选择刀具" v-model="toolmodal" :styles="{width:'850px'}">
            <div class="modal_body">
                <div class="filter">
                    <Input
                        class="searchInput"
                        style="margin-right:20px;width:200px"
                        type="text"
                        v-model="toolfilter"
                        placeholder="请输入刀具名称/图纸号"
                    />
                    <Button type="primary" icon="ios-search" @click="getTool()">{{$t('1001')}}</Button>
                </div>
                <Table
                    class="tableClass"
                    :data="toollist"
                    :columns="toolColumn"
                    @on-current-change="handleRowChange1"
                    highlight-row
                    @on-row-dblclick="handleSelectRow1"
                ></Table>
            </div>
        </Modal>
    </div>
</template>
<script>
import axios from '@/libs/api.request';
import echarts from 'echarts';
import moment from 'moment';

export default {
    name: 'route',
    data () {
        return {
            action:
                axios.publicPath +
                'tools/upload/submit?templateName=ToolsChange',
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            datalevel: [],
            leveldata: [],
            sectionid: 0,
            toolid: '',
            toollist: [],
            datetime: [],
            drawingcode: '',
            x: '',
            y: '',
            changeReason: '',
            reasonList: [
                {
                    value: 'SM',
                    name: '计数寿命到'
                },
                {
                    value: 'MS',
                    name: '磨损'
                },
                {
                    value: 'BR',
                    name: '崩刃'
                },
                {
                    value: 'DD',
                    name: '断刃'
                },
                {
                    value: 'HX',
                    name: '换型'
                },
                {
                    value: 'ZL',
                    name: '产品质量问题'
                },
                {
                    value: 'OTHER',
                    name: '其他'
                }
            ],
            changeUser: '',
            userList: [],
            brand: '',
            brandList: [],
            supplier: '',
            supplierlist: [],
            start: '',
            end: '',
            checknodeid: '0',
            tableData1: [],
            type: 0,
            machineList: [],
            spindleList: [],
            cutList: [],
            toolfilter: '',
            toolmodal: false,
            toolname: '0',
            text: false,
            toolColumn: [
                {
                    title: '刀具名称',
                    key: 'name'
                },
                {
                    title: '刀具图纸号',
                    key: 'drawingcode'
                },
                {
                    title: '刀具品牌',
                    key: 'brand'
                },
                {
                    title: '规格',
                    key: 'spec'
                },
                {
                    title: '材料',
                    key: 'material'
                },
                {
                    title: '硬度',
                    key: 'hardness'
                },
                {
                    title: '供应商',
                    key: 'supplier'
                }
            ],
            reasonImg: '',
            reasonIndex: 0,
            morecondition: false
        };
    },
    created () {
        this.initlevel();
        this.getTool();
        this.datetime = [moment(new Date().getTime() - 3600 * 1000 * 24 * 6).format('YYYY-MM-DD ') + '00:00:00',
            moment(new Date().getTime()).format('YYYY-MM-DD ') + '23:59:59']

    // 格式化表格样式
    // this.toolColumn = this.$time.initTableTitle(this.toolColumn);
    },

    methods: {
        search () {
            if (this.toolid == '' || this.toolname == '') {
                this.$Message.error('请选择刀具');
                return false
            }
            if (this.x == '' || this.y == '') {
                this.$Message.error('请选择坐标轴');
                return false
            }
            let start = '',
                end = '';
            if (this.datetime.length > 0) {
                start = this.datetime[0];
                end = this.datetime[1];
            } else {
                this.$Message.error('请选择时间范围');
                return false
            }

            var data = {
                endtime: end,
                sectionid: this.sectionid,
                starttime: start,
                toolid: this.toolid,
                tooltype: this.toolname,
                x: this.x,
                y: this.y
            };
            axios
                .request({
                    url: '/tools/ToolConfig/ToolLifeReport',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.toEchart(res.data.data.x, res.data.data.v);
                    }
                });
        },
        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;
                });
        },
        changeLevel (data) {
            this.sectionid = data[data.length - 1];
            this.getTool();
            // this.getMachine();
        },
        getTool () {
            let data = {
                sectionid: this.sectionid,
                toolfilter: this.toolfilter,
                // tooltype: 0
            };
            axios
                .request({
                    url: '/tools/ToolConfig/ToolList',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.toollist = res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        dateChange (val) {
            if (val) {
                this.datetime = [val[0], val[1].split(' ')[0] + ' 23:59:59'];
            }
        },
        toEchart (x, v) {
            let mycharts = echarts.init(document.getElementById('main'));
            var word1 = '',
                word2 = '';
            // if(data.ret==1){//data.ret==1
            // alert(this.$t(data.msg));
            if (this.y == 1) {
                word1 = this.$t('600289');
                word2 = this.$t('600054');
            } else {
                word1 = this.$t('600290');
                word2 = this.$t('300019');
            }
            let option = {};
            if (this.x == 2) {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        // trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: [word1]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: x,
                            axisLabel: {
                                interval: 0,
                                rotate: 35
                            },
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            name: word2,
                            type: 'value',
                            data: ''
                        },
                        {
                            name: '',
                            // type: "value",
                            axisLabel: {
                                interval: 'auto'
                                // formatter: '{value}%'
                            }
                        }
                    ],
                    series: [
                        {
                            name: word1,
                            type: 'bar',
                            barWidth: '60%',
                            barGap: '30%',
                            data: v
                        },
                        {
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        fontWeight: 'bold'
                                    },
                                    lineStyle: {
                                        width: 4
                                    }
                                }
                            },
                            // yAxisIndex: 1,
                            symbolSize: 8, // 折线点的大小
                            name: word2,
                            type: 'line',
                            barWidth: '30%',
                            data: v
                        }
                    ]
                    //  dataZoom:{
                    //    realtime:true, //拖动滚动条时是否动态的更新图表数据
                    //    height:25,//滚动条高度
                    //    start:0,//滚动条开始位置（共100等份）
                    //    end:60,//结束位置（共100等份）
                    //    left:"center",                           //组件离容器左侧的距离,'left', 'center', 'right','20%'
                    //    //top:"top",                                //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
                    //    right:"auto",                             //组件离容器右侧的距离,'20%'
                    //    bottom:"-2",
                    // }
                };
            } else {
                option = {
                    title: {
                        text: this.$t('1047'),
                        left: 'center'
                    },
                    legend: {
                        y: '10%',
                        data: [this.$t('1048')]
                    },
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '10%',
                        top: '20%',
                        right: '10%',
                        bottom: '15%'
                    },
                    xAxis: {
                        type: 'category',
                        data: x,
                        boundaryGap: true,
                        nameGap: 30,
                        splitArea: {
                            show: true
                        },
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: 'Value',
                        splitArea: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: this.$t('1048'),
                            type: 'boxplot',
                            data: v,
                            tooltip: { formatter: formatter }
                        }
                    ]
                };
                function formatter (param) {
                    return [
                        'Experiment ' + param.name + ': ',
                        'lower: ' + param.data[1],
                        'Q1: ' + param.data[2],
                        'median: ' + param.data[3],
                        'Q3: ' + param.data[4],
                        'upper: ' + param.data[5]
                    ].join('<br/>');
                }
            }
            mycharts.setOption(option);
            // }else{
            // $('.chartcontent').html('<div id="mycharts" style="height: 400px;"></div>');
            // alert(this.$t(data.msg));
            // }
        },
        toolSelect () {
            // this.toolColumn = this.$time.initTableTitle(this.toolColumn);
            this.toolmodal = true;
        },
        handleRowChange1 (currentRow, oldCurrentRow) {
            this.toolid = currentRow.id;
            this.drawingcode = currentRow.drawingcode;
            this.toolname = currentRow.name;
        },
        handleSelectRow1 (data, i) {
            this.toolid = data.id;
            this.drawingcode = data.drawingcode;
            this.toolname = data.name;
            this.toolmodal = false;
            this.text = true;
        }
    },
    changePage (value) {
        this.page = value;
        this.tableData1 = this.search();
    }
};
</script>
<style this.$t="less" scoped>
</style>
