<template>
  <div class="testdiv">
    <div class="divborder" style="margin:0px;">
      <div>
        <div class="filter">
          <label >{{$t('1950574')}}:</label>
          <Cascader :data="datalevel" :value="leveldata" v-model="sectionid" @on-change="handlelevelchange" trigger="click" change-on-select style="display:inline-block;width:300px;"></Cascader>
        </div>
        <div class="filter">
          <label >{{$t('920165')}}:</label>
          <Select v-model="materialid" label-in-value clearable filterable style="width:200px;" >
              <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('1046')}}:</label>
          <DatePicker
            id="日期"
            type="datetimerange"
            v-model="daterange"
            confirm
            placeholder="请选择"
            style="width: 300px;"
            format="yyyy-MM-dd HH:mm:ss"
            @on-change="selectdate"
          ></DatePicker>
        </div>

      </div>
      <div class="buttonall">
        <Button type="primary" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
      </div>

    </div>
    <div class="divborder">
        <div id='chart1' style="height:400px;"></div>
    </div>
  </div>
</template>

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

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
        }
    },
    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()
    },
    methods: {
        handlelevelchange (value) {
            this.leveldata = value
            var sectionid = value[value.length - 1]
            this.initmaterials(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 (sectionid) {
            axios.request({
                url: '/qms/InspectStandardMaterial/GetMaterialsBySectionId?reverselevel=2&sectionid=' + sectionid,
                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 = {
                sectionid: this.sectionid[this.sectionid.length - 1],
                starttime: this.dtStart,
                endtime: this.dtEnd,
                materialid: this.materialid
            }
            axios.request({
                url: '/qms/Statistical/GetIncomingCheckType',
                data: params,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    var data = res.data.data
                    this.echarts1(data)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        echarts1 (data) {
            var myChart = echarts.init(document.getElementById('chart1'))
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: [this.$t(1950546), this.$t(930032), this.$t(1950548), this.$t(900942)]
                },
                series: [
                    {
                        name: this.$t(1950499),
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            { value: data.qalifiedNum, name: this.$t(1950546) },
                            { value: data.concessionReceptionNum, name: this.$t(930032) },
                            { value: data.rejectionNum, name: this.$t(1950548) },
                            { value: data.reworkNum, name: this.$t(900942) }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }

            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
        }
    }
}

</script>
<style lang="less" scoped>
label {
  width: 80px;
  display: inline-block;
  text-align: right;
}
.testdiv{
   width: 100%;
   height: 100%;
}

.showdetail{
  width: 720px;
  height: 180px;
  // background-color: #515a6e;
  margin-top: 10px;
  border:0.3px solid #ccc;
  div{
    float: left;
    width: 25%;
    height: 100%;
    border:0.3px solid #ccc;
    // background-color: blue;
    margin: -0.3px;
    img{
      width: 100%;
      height: 100%;
    };
    div{
      width: 100%;
      height: 30px;
      margin: 0!important;
      div{
        display: inline-block;
        width: 50%;
        height: 100%;
        border:0.3px solid #ccc;
        text-align: center;
        line-height: 30px;
        margin: -0.3px;
      };
      .specialdiv{
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
    }
  }
}
.filter{
  height: 40px;
  label{
    display: inline-block;
    width: 100px;
  }
}
.edit{
  .filter{
  height: 40px;
  label{
    display: inline-block;
    width: 80px;
  };
  .publicinput{
    width: 150px;
  };
}
}
.uploadexcel{
  display: inline-block;
  margin-right: 15px;
  // padding-top: 10px;
}
.file {
  width: 80px;
  height: 32px;
  position: relative;
   color: #fff;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px 15px 6px;
    font-size: 12px;
    border-radius: 4px;
    background-color: #2d8cf0;
    margin-right: 15px;
    // border-color: #2d8cf0;
    -webkit-appearance: button
    // border-color: #57a3f3;
}
.file input {
    position: absolute;
    // font-size: 100px;
    left: 0;
    top: 0;
    opacity: 0;
    width: 80px;
    height: 30px;
    // border: 1px solid #000;
    // z-index: 99999;
}
.editload,.addload{
  position:absolute;
  img{
    width: 150px;
    height: 300px;
    margin: 10px 0px;
  };
  input{
    position: absolute;
    // font-size: 100px;
    left: 80px;
    top: 10px;
    opacity: 0;
    width: 128px;
    height: 300px;
  }
}
.DeviceQRblock{
  width: 150px;
  height: 200px;
  float: left;
   margin-right: 10px;
  .DeviceQRblockqr{
   width: 150px;
   height: 150px;
  };
  div{
    text-align: center;
  }
}
</style>
