<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label >{{$t('1950574')}}：</label>
          <Cascader :data="datalevel" :value="leveldata" v-model="sectionid" trigger="click" @on-change="handlelevelchange" change-on-select class="searchSelect"></Cascader>
        </div>
        <div class="filter">
          <label >{{$t('100307')}}：</label>
          <Select v-model="productid" label-in-value clearable filterable @on-change="initmaterials" class="searchSelect" >
              <Option v-for="item in products" :value="item.id" :key="item.id">{{ item.name+"【"+ item.code +"】" }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label >{{$t('920165')}}：</label>
          <Select v-model="materialid" label-in-value clearable filterable class="searchSelect" >
              <Option v-for="item in materials" :value="item.id" :key="item.id">{{ item.name+"【"+ item.pn +"】" + "【" + item.spec + "】" }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label >{{$t('1950501')}}：</label>
          <Select v-model="checktype" label-in-value clearable class="searchSelect" >
              <Option v-for="item in checktypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              <!--<Option :value="5" :key="5">{{$t(930033)}}</Option>
              <Option :value="2" :key="2">{{$t(930034)}}</Option>
              <Option :value="3" :key="3">{{$t(930035)}}</Option>
              <Option :value="6" :key="6">{{$t(930036)}}</Option>
              <Option :value="1" :key="1">{{$t(950367)}}</Option>
              <Option :value="4" :key="4">{{$t(930037)}}</Option>
              <Option :value="7" :key="7">{{$t(600233)}}</Option>-->
          </Select>
        </div>

        <!-- 次级搜索条件--隐藏 -->
      <div v-show="!morecondition">
        <div>
          <div class="filter">
            <label>{{$t('1046')}}：</label>
            <DatePicker
              id="日期"
              type="datetimerange"
              v-model="daterange"
              confirm
              placeholder=""
              class="searchInput MaxWidth"
              format="yyyy-MM-dd HH:mm:ss"
              @on-change="selectdate"
            ></DatePicker>
        </div>
        <div class="filter">
          <label >TOP：</label>
          <Select v-model="top" label-in-value clearable  class="searchSelect" >
              <Option :value="5" :key="5">5</Option>
              <Option :value="10" :key="10">10</Option>
              <Option :value="15" :key="15">15</Option>
              <Option :value="20" :key="20">20</Option>
              <Option :value="25" :key="25">25</Option>
              <Option :value="30" :key="30">30</Option>
          </Select>
        </div>
        <div class="filter">
          <label >{{$t('1129')}}：</label>
          <Select v-model="x_id" label-in-value clearable  class="searchSelect" >
              <Option :value="0" :key="0">{{$t('1950574')}}</Option>
              <!-- <Option :value="1" :key="1">{{$t('100307')}}{{$t('500006')}}</Option> -->
          </Select>
        </div>
      </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 newEchartStyle">
        <div id='chart1' class="echartsId"></div>
        <div id='chart2' class="echartsId"></div>
    </div>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
import echarts from 'echarts'
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')
            },
            morecondition: false, // 条件
            products: [],
            dtStart: '',
            dtEnd: '',
            daterange: '',
            host: axios.publicPath,
            materials: [],
            leveldata: [],
            datalevel: [],
            sectionid: [],
            materialid: 0,
            productid: 0,
            top: 0,
            x_id: 0,
            checktype: 0,
            checktypeList: [],
        }
    },
    created () {
        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)
        this.initlevel()
        this.initproducts()
        this.initchecktypeList()
    },
    methods: {
        initchecktypeList () {
            axios.request({
                url: '/qms/TypeCount/GetTypeCounts?page=1&pagesize=10000',
                method: 'get'
            }).then(res => {
                res.data.data.forEach(ele => {
                    this.checktypeList.push({id:ele.type_code, name:ele.type_name})
                });
            })      
        },
        handlelevelchange (value) {
            this.leveldata = value
            var sectionid = value[value.length - 1]
            this.initproducts(sectionid)
        },
        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
            })
        },
        initmaterials () {
            axios.request({
                url: '/config/Material/GetSonMaterialsByProduct?productid=' + this.productid,
                method: 'get'
            }).then(res => {
                this.materials = res.data.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
        },
        search () {
            var params = {
                productid: this.productid,
                sectionid: this.sectionid[this.sectionid.length - 1],
                starttime: this.dtStart,
                endtime: this.dtEnd,
                materialid: this.materialid,
                top: this.top,
                x_id: this.x_id,
                checktype: this.checktype
            }
            axios.request({
                url: '/qms/Statistical/GetQualifiedRate',
                data: params,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    var data = res.data.data
                    var x1 = data.x1
                    var y1 = data.y1
                    this.echarts1(x1, y1)
                    this.echarts2(data.x2, data.y2, data.y3)
                }
            })
        },
        echarts1 (x, y) {
            var myChart = echarts.init(document.getElementById('chart1'))
            var option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: '{c}%'
                },
                xAxis: [
                    {
                        name: this.x_id === 0 ? this.$t(100395) : this.$t(930038),
                        type: 'category',
                        data: x,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 40
                        }
                    }
                ],
                yAxis: [
                    {
                        name: this.$t(930039),
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} %',
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: this.$t(930039),
                        type: 'bar',
                        barMaxWidth: 70,
                        barWidth: '60%',
                        data: y,
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: '{c} %',
                                    position: 'top',
                                    show: true
                                }
                            }
                        }
                    }
                ]
            }

            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        echarts2 (x, y1, y2) {
            var myChart = echarts.init(document.getElementById('chart2'))
            var option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{c} %'
                },
                legend: {
                    data: [this.$t(900994), { name: this.$t(930040) + '%', icon: 'circle' }],
                    icon: 'roundRect',
                    right: '20%',
                    bottom: '95%'
                },
                xAxis: [
                    {
                        name: this.x_id === 0 ? '      ' + this.$t(100395) : this.$t(930038),
                        nameLocation: 'end',
                        splitLine: {
                            show: false
                        },
                        data: x,
                        axisLabel: {
                            interval: 0,
                            rotate: 40
                        }
                    }
                ],
                yAxis: [
                    {
                        name: this.$t(900994),
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        name: this.$t(930040),
                        type: 'value',
                        max: 100,
                        axisLabel: {
                            formatter: '{value} %',
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: this.$t(900994),
                        type: 'bar',
                        barMaxWidth: 70,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        barCategoryGap: '10%',
                        silent: true,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                // formatter:'{c}
                                textStyle: {
                                    color: 'black',
                                    fontSize: 12
                                }
                            }
                        },
                        data: y1
                    },
                    {
                        name: this.$t(930040) + '%',
                        type: 'line',
                        xAxisIndex: 0,
                        yAxisIndex: 1,
                        smooth: true,
                        clipOverflow: false,
                        symbolSize: 9,
                        itemStyle: {
                            normal: {
                                // color:,
                                // borderColor:,
                                label: {
                                    formatter: '{c} %',
                                    position: '' | '',
                                    show: true
                                },
                                borderWidth: 3
                            }
                        },
                        lineStyle: {
                            normal: {
                                // color:,
                                width: 4
                            }
                        },
                        data: y2
                    }
                ]
            }

            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        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]
            }
        },
        initproducts (sectionid) {
            this.products = [{ id: 0, name: '' }]
            axios.request({
                url: '/qms/InspectStandard/GetProductsBySectionId?reverselevel=2&sectionid=' + sectionid,
                method: 'get'
            }).then(res => {
                this.products = res.data.data
            })
            this.productid = ''
        }
    }
}

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

</style>
