<template>
  <!-- 温湿度记录 -->
  <div class="card_graphy">
    <div class="phy_left">
      <div class="card_phy_ther">
        <div class="head_phy">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="onAllSelectChange"> 全选</el-checkbox>
          <div class="fx_btn" @click="invertSelection">反选</div>
        </div>
        <div class="item_phy" v-for="(item,index) in list" :key="index">
          <el-checkbox v-model="item.checked" @change="selectChangeItem"></el-checkbox>
          <div class="phy_main">
            <div class="phy_title">{{item.T_name}}</div>
            <div class="phy_content">{{item.T_sn}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="phy_right">
      <tables :tableList="tableList" :tableData="tableData"></tables>
      <pagination :total="Total" :currentPage="Pagination.page" @changeSize="changeSizePhy"
        @changeCurrent="changeCurrentPhy"></pagination>
    </div>
  </div>
</template>

<script>
  import {
    getSensor,
    getSensorData
  } from '@/api/freezer'
  import tables from '@/components/tables'
  import pagination from '@/components/pagination'
  import {
    employee,
  } from "./humiture.js";
  export default {
    name: 'thermography',
    components: {
      tables,
      pagination,
    },
    props: {
      waybillNo: {
        type: String,
        default: () => '',
      },
      timeData: {
        type: Array,
        default: () => [],
      }
    },
    data() {
      return {
        isIndeterminate: null,
        checkAll: false,
        checkList: [], // 勾选的数据

        list: [],
        humitureList: [],

        tableData: [],
        tableList: employee(),
        Pagination: {
          page: 1,
          pageSize: 10,
        },
        Total: 0,
        checkList: [],
        taskId: null,
        tIds: [],
        startTime: '',
        endTime: '',
      }
    },
    watch: {
      timeData: {
        handler: function(newUser, oldUser) {
          if (newUser) {
            this.startTime = newUser[0]
            this.endTime = newUser[1]
          } else {
            this.startTime = ''
            this.endTime = ''
          }
        },
        immediate: true,
        deep: true // 设置 deep 选项为 true，实现深度监听
      }
    },
    methods: {
      // 获取探头
      getProbe() {
        this.checkAll = false
        this.list = []
        this.tableData = []
        getSensor({
          sn: this.waybillNo,
        }).then(res => {
          if (res.code == 200) {
            if (res.data.list) {
              this.list = res.data.list
              this.list.forEach(item => {
                item.checked = true
              })
              this.selectChangeItem()
              this.getTemperature()
            }
          }
        })
      },
      // 获取温湿度
      getTemperature() {
        let arr = []
        this.checkList.forEach(item => {
          arr.push(item.T_id)
        })
        let params = {
          t_sn: this.waybillNo,
          t_ids: arr.join(),
          startTime: this.startTime,
          endTime: this.endTime,
          ...this.Pagination,
        }
        getSensorData(params).then(res => {
          if (res.code == 200) {
            if (res.data.list) {
              this.tableData = res.data.list
            } else {
              this.tableData = []
            }
            this.Total = res.data.count
          }
        })
      },
      // 全选
      onAllSelectChange() {
        this.list.forEach(item => {
          // 全选了
          if (this.checkAll) {
            item.checked = true
            this.isIndeterminate = false
            this.checkList = this.list
            // 取消全选
          } else {
            item.checked = false
            this.isIndeterminate = null
            this.checkList = []
          }
        })
      },
      // 单选
      selectChangeItem() {
        const check = this.list.every(item => item.checked)
        // 单选有一个未勾选
        if (!check) {
          this.isIndeterminate = true
        } else {
          // 单选都勾选了
          this.isIndeterminate = null
          this.checkAll = true
        }
        // 单选都未勾选
        const flag = this.list.map(item => item.checked).some(item => item)
        if (!flag) {
          this.checkAll = false
          this.isIndeterminate = null
        }
        // 勾选的数据
        this.checkList = this.list.filter(item => item.checked)
      },
      // 反选
      invertSelection() {
        this.list.forEach(item => {
          item.checked = !item.checked
        })
        this.selectChangeItem()
      },
      changeSizePhy(val) {
        this.Pagination.pageSize = val
        this.getTemperature()
      },
      changeCurrentPhy(val) {
        this.Pagination.page = val
        this.getTemperature()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .card_graphy {
    display: flex;
    border: 1px solid #E4E7ED;
  }

  .card_phy_ther {
    display: flex;
    flex-direction: column;
  }

  .head_phy {
    display: flex;
    margin: 10px;
  }

  .fx_btn {
    cursor: pointer;
    color: red;
    margin-left: 10px;
  }

  .item_phy {
    margin: 10px;
    display: flex;
    align-items: center;
  }

  .phy_main {
    margin-left: 10px;
  }

  .phy_title {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .phy_content {
    font-size: 13px;
  }

  .phy_left {
    width: 220px;
    flex: none;
    height: 100%;
    margin-bottom: 15px;
  }

  .phy_right {
    flex: 1;
    border-left: 1px solid #E4E7ED;
  }
</style>
