<template>
  <div class="reportList">
    <div class="usertop">
      <el-date-picker
        @change="get_List"
        v-model="value2"
        value-format="yyyy-MM"
        type="month"
        placeholder="选择日期">
      </el-date-picker>
      <span class="title">数据报表</span>
      <el-select v-model="standard" clearable placeholder="请选择" class="custom-select" @change="standChange">
        <el-option
          v-for="item in standards"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    
    <div class="usertable">
      <el-input
        class="numkeyboard"
        v-model="search_value"
        size="middle"
        @blur="get_List"
        placeholder="搜索名称"
      ></el-input>
      <el-table
        class="table"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :row-style="{ height: '64px' }"
        :header-row-style="{ height: '64px' }"
        ref="table"
        :data="tableData"
        height="385"
        @row-click="rowClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
        type="selection"
        class="checkbox-column"
        width="55">
      </el-table-column>
        <el-table-column prop="material_name" label="样品名称" width="180">
        </el-table-column>
        <el-table-column prop="flash_point_value" label="闪点温度"> </el-table-column>
        <el-table-column prop="determination_standard" label="标准" width="280"> </el-table-column>
        <el-table-column prop="create_time" label="时间" width="280"> </el-table-column>
      </el-table>
      <div class="footer">
        <div class="goBack" @click="handBack">返回</div>
                  <!-- v-model="params.page" -->
        <el-pagination
          class="pagination"
          background
          @current-change="pageChange"
          layout="total,prev, pager, next"
          :total="total">
        </el-pagination>
        <div class="add" @click="handExport">导出</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExperimentList,exportReportList } from "@/api/report";
import url from "socket.io-client/lib/url";

export default {
  name: "Login",
  data() {
    return {
      total:0,
      selectValue:'',
      value2: '',
      params:{
        page:1,
        page_size:10
      },
      standard:'',
      standards:[
        {
          value:'ASTM D6450(1ml)',
          label:'ASTM D6450(1ml)'
        },
        {
          value:'ASTM D7094(2ml)',
          label:'ASTM D7094(2ml)'
        },
        {
          value:'SH/T 0768(1ml)',
          label:'SH/T 0768(1ml)'
        },
      ],
      search_value: "",
      tableData: [
      ],
      multipleSelection: []
    };
  },
  created: function () {
    this.get_List();
  },
  methods: {
    rowClick(val){
      console.log(val,'行点击',val.experiment_id)
      this.$router.push({path:'/reportinfo',query:{experiment_id:val.experiment_id}})
    },
    standChange(val){
      this.standard=val;
      this.get_List();
    },
    pageChange(val){
      this.params.page=val;
      this.get_List();
    },
    get_List() {
      var that = this;
      const loading = this.$loading({
        lock: true,
        text: "获取数据报表...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // this.params.page=val;
      let data={
        search_value: this.search_value,
        choose_date:this.value2,
        determination_standard:this.standard,
        page:this.params.page,
        page_size:this.params.page_size
      }
      getExperimentList(data)
        .then((response) => {
          if (response.data.status == 1) {
            that.$message.error(data.message);
          } else {
            console.log(response.data,'返回数据2')
            that.tableData=response.data.data.data
            this.total=response.data.data.total_records
            // that.changedata(data.data);
          }
          loading.close();
        })
        .catch((error) => {
          loading.close();
          that.$message.error(error.message);
        });
    },
    handBack(){
      this.$router.push({path:'/home'})
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      this.multipleSelection=[];
      this.multipleSelection=val.map(item=>item.experiment_id)
      console.log(this.multipleSelection,'选中参数',val)
    },
    handExport(){
      // let data={
      //   experiment_id:this.multipleSelection
      // }
      var formData = new FormData()
      formData.append('experiment_id_list',JSON.stringify(this.multipleSelection))
      exportReportList(formData).then(response=>{
        if(response.data.status==0){
          this.$message.success('导出成功')
        }else{
          this.$message.error(response.data.message)
        }
      })
    }
  },
};
</script>
<style>
/* //复选框的大小 */
.checkbox-column .cell {
  width: 20px;
  height: 20px;
}
.reportList .el-checkbox__inner{
  width: 24px;
  height: 24px;
}
.reportList .el-checkbox__inner::after{
  height: 14px;
  left: 10px;
}
/* 表头修改 */
.usertop{
  /* margin-top:14px; */
}
.reportList .el-input__icon{
  font-size: 30px !important;
  line-height:82px;
}
.reportList  .el-input__inner{
  font-size: 24px;
  color: #3A3A3A;
  
}
.reportList .el-date-editor .el-input__inner,.el-select .el-input__inner{
  border:0; 
  background:none;
}
 .el-select-dropdown__item{
  height: 68px;
  font-size: 28px;
  color: #3A3A3A;
  line-height: 34px;
}
.el-month-table{
  font-size: 20px;
}
/* 搜索框样式修改 */
.reportList .el-input__inner {
  text-indent: 20px;
  height: 80px !important;
}
/* 表格样式修改 */
.reportList  .el-table__header .el-table__cell{
  font-weight: 400;
  background: #F3F3F3
}
.reportList .el-table .el-table__cell{
  font-size: 24px;
  color: #3A3A3A;
  text-align: center;
}

  .custom-select .el-input .el-input__inner,
.custom-select .el-input .el-input__inner:hover,
.custom-select .el-input .el-input__inner:focus {
  background-color: transparent !important;
}

/* .custom-select .el-input .el-select__caret {
  display: none;
} */
/* 分页 */
.reportList .el-pagination .el-pagination__total{
  font-size:24px;
  line-height:40px;
}
.reportList .el-pagination .btn-prev,.reportList .el-pagination .btn-next{
  width:40px;
  height:40px;
}
.reportList .el-pager li{
  width:40px;
  height:40px;
  margin:0 10px !important;
  line-height: 40px;
  font-size: 18px;
}
</style>
<style scoped lang="less"> 

.reportList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .numkeyboard {
    width: 944px;
    height: 80px;
    display: block;
    margin: 0 auto;

    .el-input__inner {
      height: 80px !important;
    }
  }
  .usertop {
    height: 95px;
    font-size: 40px;
    font-weight: bold;
    color: #3a3a3a;
    line-height: 91px;
    padding:0 40px;
    display: flex;
    justify-content: space-between;
  }
  .usertable {
    margin: 0 auto;
    .table{
      width:944px;
      margin: 20px auto 0;
      .img{
        width:58px;
        height:58px
      }
    }
    .footer{
      width: 1024px;
      padding:0 40px;
      height: 120px;
      background: #FFFFFF;
      box-shadow: 0px -3px 6px 1px rgba(0,0,0,0.16);
      border-radius: 0px 0px 0px 0px;
      display:flex;
      justify-content: space-between;
      padding-top:12px;
      .pagination{
        margin-top:30px;
      }
      .goBack{
        width: 208px;
        height: 84px;
        background: linear-gradient(180deg, #FFFFFF 0%, #ECECEC 100%);
        box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
        border-radius: 8px 8px 8px 8px;
        font-size: 36px;
        line-height:84px;
        color: #3A3A3A;
        text-align: center;
      }
      .add{
        width: 208px;
        height: 84px;
        background: linear-gradient(180deg, #59CC74 0%, #10922F 100%);
        box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.4);
        border-radius: 8px 8px 8px 8px;
        font-size: 36px;
        line-height:84px;
        color: #fff;
        text-align: center;
      }
    }
  }
}

</style>
