<template>
  <div class="examination fixedScheduleManagement">
    <div slot="title" class="titleBox">
        <div class="common-head-search">
            <el-form
                :inline="true"
                @submit.native.prevent
                ref="form"
                :model="form"
                class="demo-form-inline sui-search-form"
            >
                <span style="margin-left: 10px; font-size: 18px">温湿度记录</span>
                <span style="margin-left: 10px; font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择化验室</span>
                    <el-form-item>
                        <el-select
                            v-model="form.pointNo"
                            clearable
                            filterable
                            collapse-tags
                            @change="temperatureData"
                            size="small"
                            style="width: 150px"
                            placeholder="请选择查询内容"
                        >
                            <el-option
                            v-for="item in pointType"
                            :key="item.pointName"
                            :label="item.pointName"
                            :value="item.pointNo"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="登记日期">
                        <el-date-picker
                            v-model="form.times"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            size="small"
                            style="width: 350px"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            icon="el-icon-search"
                            type="goon"
                            size="mini"
                            @click="temperatureData"
                            >查询</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            type="info"
                            plain
                            size="mini"
                            @click="resetData"
                            >重置</el-button
                        >
                    </el-form-item>
            </el-form>
        </div>
      </div>
      <div style="padding: 10px 0">
          <el-row>
            <el-col :span="24">
              <el-table v-loading="temperatureLoading3" ref="dataTable" border :height="heightTop" highlight-current-row :data="dialog3.form.tableData"
                        :header-cell-style="tableHeaderCellStyle" @row-click="temperatureRow" :icore-filter-flag="icoreFilterFlag">
                <el-table-column type="index" label="NO" align="center"></el-table-column>
                <el-table-column min-width="120px" :show-overflow-tooltip="true" sortable prop="pointName" label="分析室" align="center"></el-table-column>
                <el-table-column min-width="120px" :show-overflow-tooltip="true" sortable prop="envDate" label="记录日期" align="center"></el-table-column>
                <el-table-column min-width="120px" :show-overflow-tooltip="true" sortable prop="tempNow" label="温度 ℃" align="center"></el-table-column>
                <el-table-column min-width="120px" :show-overflow-tooltip="true" sortable prop="moisNow" label="湿度 %" align="center"></el-table-column>
                <el-table-column min-width="120px" :show-overflow-tooltip="true" sortable prop="weather" label="天气情况" align="center"></el-table-column>
                <el-table-column min-width="120px" :show-overflow-tooltip="true" sortable prop="createMan" label="创建人" align="center"></el-table-column>
                <el-table-column min-width="120px" :show-overflow-tooltip="true" sortable prop="createTime" label="创建时间" align="center"></el-table-column>
              </el-table>
              <div style="margin-top: 20px; margin-left: 10px">
                <el-pagination style="float:right" @size-change="temperatureSizeTest" @current-change="temperaturePageChangeTest"
                               :current-page="temperaturelog.pageNum" :page-sizes="[10, 20, 50, 100, 200]" :page-size="temperaturelog.pageSize" layout="total, sizes, prev, pager, next"
                               :total="temperaturelog.totalPage" background>
                </el-pagination>
              </div>
            </el-col>
          </el-row>
      </div>
      <el-form
          ref="dialog_form"
          size="mini"
          label-width="100px"
        >
        <el-row>
          <el-col :span="8">
            <el-form-item prop="pointNo" label="化验室">
              <el-select
                  v-model="dialog3.form.data.pointNo"
                  clearable
                  filterable
                  collapse-tags
                  size="small"
                  style="width: 200px"
                  placeholder="请选择查询内容"
                >
                  <el-option
                    v-for="item in pointType"
                    :key="item.pointName"
                    :label="item.pointName"
                    :value="item.pointNo"
                  >
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="记录日期">
              <el-date-picker
                v-model="dialog3.form.data.envDate"
                type="date"
                placeholder="选择日期"
                size="small"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="text-align: center;">
            <el-button icon="el-icon-circle-plus-outline" type="goon" size="mini"  @click="addData">新增</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="pointNo" label="湿度（%）">
              <el-input
                  v-model="dialog3.form.data.tempNow"
                  clearable
                  style="width: 200px"
                  size="small"
                ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="温度（℃）">
              <el-input
                  v-model="dialog3.form.data.moisNow"
                  clearable
                  style="width: 200px"
                  size="small"
                ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="text-align: center;">
            <el-button icon="el-icon-edit" type="goon" size="mini"  @click="modifyData">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="天气描述">
                <el-input
                  v-model="dialog3.form.data.weather"
                  clearable
                  style="width: 100%"
                  size="small"
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="3" style="text-align: center;">
            <el-button icon="el-icon-remove-outline" type="danger" size="mini"  @click="deData">删除</el-button>
          </el-col>
        </el-row>
      </el-form>
  </div>
</template>
<script>
import { getCookie, formatDate } from "@/utils/util.js";
import { cookieUserId, cookieUserName } from "@/config/config.js";
let userName = getCookie(cookieUserName);
let userId = getCookie(cookieUserId);

export default {
  data() {
    return {
        temperatureLoading3: false,
        form:{
            times:[],
            pointNo:'',
        },
        pointType: [],
        temperaturelog:{
        pageSize: 50,
        pageNum: 1,
        totalPage: 0
      },
      icoreFilterFlag: true,
      dialog3: {
        show: false,
        form: {
          data: {
            pointNo: '',
            pointName: '',
            envDate: '',
            tempNow: '',
            moisNow: '',
            tempUnit: '',
            moisUnit: '',
            weather: ''
          },
          tableData:[]
        }
      },
    }
  },
  created() {
      this.heightTop = window.innerHeight - 300
      this.form.times = [this.getYNM(new Date()), this.getYNM(new Date())]
  },
  mounted() {
    // 实验室
    this.axios.post("pass/baseManagement/v1/limsbasepoints/queryLimsBasePointPage",{pageIndex: 1,pageSize: 9999,object:{validFlag: 1}}, { individualType: 'json' }).then(res => {
      this.pointType = res.data.list;
    })
  },
  methods:{
      addData() {
      this.dialog3.form.data.pointName = this.getCode(
            this.dialog3.form.data.pointNo,
            this.pointType,
            "pointNo",
            "pointName"
          );
      if(this.dialog3.form.data.pointNo == ''){
        this.$message.warning("请先选择化验室！")
        return
      }
      this.dialog3.form.data.envId = '';
      this.dialog3.form.data.id = '';
      this.axios.post('pass/testManagement/v1/limsdataenvironments/insertUpdate', this.dialog3.form.data, { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.temperatureData();
          this.closeData();
          this.$message.success("添加成功！");
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    temperatureRow(row) {
      this.temperatureRowData = row;
      this.dialog3.form.data = row;
    },
    modifyData() {
      this.axios.post('pass/testManagement/v1/limsdataenvironments/insertUpdate', this.dialog3.form.data, { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.closeData()
          this.$message.success("修改成功！")
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    deData() {
      this.axios.delete('pass/testManagement/v1/limsdataenvironments/' +this.temperatureRowData.envId).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.temperatureData();
          this.closeData()
          this.$message.success("删除成功！")
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    closeData() {
      this.dialog3.form.data = {
            pointNo: '',
            pointName: '',
            envDate: '',
            tempNow: '',
            moisNow: '',
            tempUnit: '',
            moisUnit: '',
            weather: ''
      }
    },
    temperatureSubmit() {
      this.temperatureShow = true;
    },
    closeTemperature() {
      this.closeData();
      this.temperatureShow = false;
    },
    temperatureSizeTest(size) {
      this.temperaturelog.pageSize = size;
      this.temperatureData();
    },
    temperaturePageChangeTest(index) {
      this.temperaturelog.pageNum = index;
      this.temperatureData();
    },
    resetData() {
        this.form.times = [this.getYNM(new Date()), this.getYNM(new Date())];
        this.form.pointNo = '';
    },
    temperatureData() {
      let obj ={
        pageIndex: this.temperaturelog.pageNum,
        pageSize: this.temperaturelog.pageSize,
        startTime: this.form.times[0] + ' 00:00:00',
        endTime:this.form.times[1] + ' 23:59:59',
        mode: this.form.pointNo
      }
      this.temperatureLoading3 = true;
      this.axios.post('pass/testManagement/v1/limsdataenvironments/queryPageList', obj, { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.temperaturelog.totalPage = res.data.total
          this.dialog3.form.tableData = res.data.list
        } else {
          this.$message.error(res.message)
        }
        this.temperatureLoading3 = false;
      }).catch(err => {
        this.temperatureLoading3 = false;
        this.$message.error(err.message)
      })
    },
    getCode(code, arr, codeKey, nameKey) {
      if (!code) {
        return "";
      }
      let targetRow = arr.find((item) => {
        return item[codeKey] === code;
      });
      return targetRow ? targetRow[nameKey] : "";
    },
    getYNM (date) {
      let year = date.getFullYear().toString();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      return `${year}-${month}-${day}`;
    },
    tableHeaderCellStyle () {
      return 'background-color: rgb(249,249,249) !important;color: rgb(73, 72, 72);border-bottom: 1px solid #DCDFE7;border-top:3px solid #3ac1ea;'
    },
  }
};
</script>
<style scoped></style>
