<template>
  <div class="testdiv">
    <div class="divborder" style="margin:0px;">
      <div>
        <div class="filter">
          <label >{{$t(100089)}}:</label>
          <Select v-model="productcode" label-in-value @on-change="inititems" clearable style="width:160px;" >
              <Option v-for="item in products" :value="item.code" :key="item.code">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label >{{$t(1025)}}:</label>
          <Select v-model="line" label-in-value @on-change="linechange" clearable style="width:160px;" >
              <Option v-for="item in lines" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label >{{$t(900881)}}:</label>
          <Select v-model="station" label-in-value @on-change="inititems"  clearable style="width:160px;" >
              <Option v-for="item in stations" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>

        <!-- 次级搜索条件--隐藏 -->
      <div v-show="!morecondition">
        <div>
            <div class="filter">
            <label >{{$t(901048)}}:</label>
            <Select v-model="item" label-in-value  clearable style="width:160px;" >
                <Option v-for="item in items" :value="item.item" :key="item.item">{{ item.item }}</Option>
            </Select>
          </div>
          <div class="filter">
              <label>{{$t('100043')}}<i style="color:red;margin-left: 5px!important;margin-top: -5px!important" >*</i>:</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>
      </div>
      <div class="buttonall">
        <Button type="primary" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
      </div>

      <div class="conditionblock">
      <div class="conditionborder" @click="morecondition = !morecondition">
          <div class="box">
          <div class="skew">
            <div class="skew-main">
                <div v-show="morecondition">
                  <span><span v-text="$t('950400')">更多条件</span><Icon type="ios-arrow-down" /></span>
                </div>
                <div v-show="!morecondition">
                  <span><span v-text="$t('950401')">收起条件</span><Icon type="ios-arrow-up" /></span>
                </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    </div>
    <div v-html="message"></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')
            },
            morecondition: false, // 条件
            page: 1,
            pagesize: 10,
            total: 0,
            lines: [],
            stations: [],
            products: [],
            line: 0,
            station: 0,
            productcode: '',
            dtStart: '',
            dtEnd: '',
            daterange: '',
            item: '',
            items: [],
            message: ''
        }
    },
    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.search()
        this.initlines()
        this.initproducts()
    },
    methods: {
        inititems () {
            let data = {
                productcode: this.productcode,
                line: this.line,
                station: this.station
            }
            axios.request({
                url: '/qms/InspectStandard/GetItems?productcode=' + data.productcode + '&line=' + data.line + '&station=' + data.station,
                method: 'get'
            }).then(res => {
                this.items = 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
        },
        stationchange () {
            this.tableData = []
            var params = {
                id: this.editobj.id,
                productcode: this.editobj.productcode,
                line: this.editobj.line,
                station: this.editobj.station
            }
            axios
                .request({
                    url: '/qms/DataCollection/GetDetails',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.total = res.data.total
                    this.mockTableData(res.data.data)
                })
        },
        search () {
            var params = {
                productcode: this.productcode,
                line: this.line,
                station: this.station,
                starttime: this.dtStart,
                endtime: this.dtEnd,
                item: this.item
            }
            axios
                .request({
                    url: '/qms/DataCollection/DataAnalysisChart',
                    params,
                    method: 'get'
                })
                .then(res => {
                    var randomnumber = Math.floor(Math.random() * 100000)
                    var spcUrl = axios.publicPath + res.data.data + '?randomnumber=' + randomnumber
                    this.message = '<iframe src="' + spcUrl + '" name="aframe" width="100%" height="600px"></iframe>'
                })
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
        },
        initlines () {
            axios.request({
                url: '/config/ProjectLevelSection/GetSectionSelect?reverselevel=2',
                method: 'get'
            }).then(res => {
                this.lines = res.data.data
            })
        },
        initproducts () {
            axios.request({
                url: '/config/projectproduct/GetProducts',
                method: 'get'
            }).then(res => {
                this.products = res.data.data
            })
        },
        linechange () {
            axios.request({
                url: '/config/ProjectLevelSection/GetSectionSelect?reverselevel=1&parentid=' + this.line,
                method: 'get'
            }).then(res => {
                this.stations = res.data.data
            })
        }
    }
}

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