<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <!-- 挂篮监测-监测数据 -->
      <el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.devName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="时间段">
          <el-date-picker
            v-model="time"
            type="daterange"
            value-format="yyyy-MM-dd"
            :range-separator="$t('message.lifter.to')"
            :start-placeholder="$t('message.lifter.startDate')"
            :end-placeholder="$t('message.lifter.deadline')"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getList">{{ $t('message.energyManage.waybill.query') }}</el-button>
          <el-button type="warning" plain @click="refresh">{{ $t('message.deviceManage.refresh') }}</el-button>
          <el-button type="primary" size="medium">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="List">
        <el-table-column prop="devName" align="center" label="设备名称"></el-table-column>
        <el-table-column prop="createDate" align="center" label="时间" width="200"></el-table-column>
        <el-table-column prop="hangingBasketSomeone" align="center" label="挂篮有人">
          <template slot-scope="scope">
            {{ scope.row.hangingBasketSomeone === 1 ? '有人' : scope.row.hangingBasketSomeone === 2 ? '无人' : '未知' }}
          </template>
        </el-table-column>
        <el-table-column prop="windSpeed" align="center" label="风速(m/s)"></el-table-column>
        <el-table-column prop="inclination" align="center" label="倾角(°)"></el-table-column>
        <el-table-column prop="bottomFilmHeightLeft" align="center" label="底膜高度左(mm)"></el-table-column>
        <el-table-column prop="bottomFilmHeightRight" align="center" label="底膜高度右(mm)"></el-table-column>
        <el-table-column prop="bottomFilmHeightDifference" align="center" label="底膜高度差(mm)"></el-table-column>
        <el-table-column prop="leftRearBeamAnchor" align="center" label="左后梁锚杆(kN)"></el-table-column>
        <el-table-column prop="rearBeamFixedAnchor1" align="center" label="后梁固定锚杆1#"></el-table-column>
        <el-table-column prop="rearBeamFixedAnchor2" align="center" label="后梁固定锚杆2#"></el-table-column>
        <el-table-column prop="rearBeamFixedAnchor3" align="center" label="后梁固定锚杆3#"></el-table-column>
        <el-table-column prop="rearBeamFixedAnchor4" align="center" label="后梁固定锚杆4#"></el-table-column>
        <el-table-column prop="rearBeamFixedAnchor5" align="center" label="后梁固定锚杆5#"></el-table-column>
        <el-table-column prop="rearBeamFixedAnchor6" align="center" label="后梁固定锚杆6#"></el-table-column>
        <el-table-column prop="rearBeamFixedAnchor7" align="center" label="后梁固定锚杆7#"></el-table-column>
        <el-table-column prop="rearBeamFixedAnchor8" align="center" label="后梁固定锚杆8#"></el-table-column>

        <!-- <el-table-column prop="image" align="center" label="设备图片">
            <template slot-scope="scope">
              <div class="devImage">
                <el-image v-if="JSON.parse(scope.row.image)[0]"
                  :preview-src-list="JSON.parse(scope.row.image) ? [JSON.parse(scope.row.image)[0].url] : []"
                  :src="JSON.parse(scope.row.image)[0] ? JSON.parse(scope.row.image)[0].url : []" alt=""></el-image>
              </div>
            </template>
          </el-table-column> -->
        <!-- <el-table-column label="操作" align="center" width="400px">
            <template slot-scope="scope">
              <div class="tableBtns">
                <div @click="edit(scope.row)" class="operationText">
                  <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                  <span style="white-space: nowrap;">编辑</span>
                </div>
                <div @click="deleteDev(scope.row)" class="operationText">
                  <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
                  <span style="white-space: nowrap;">删除</span>
                </div>
                <div @click="setYu(scope.row)" class="operationText">
                  <img src="@/assets/images/yu.png" width="15px" height="15px" />
                  <span style="white-space: nowrap;">预警值设置</span>
                </div>
                <div @click="setBao(scope.row)" class="operationText">
                  <img src="@/assets/images/bao.png" width="15px" height="15px" />
                  <span style="white-space: nowrap;">报警值设置</span>
                </div>
              </div>
            </template>
          </el-table-column> -->
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="pagInfo.pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pagInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(pagInfo.total)"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { hangBasketDetectData } from '@/assets/js/api/hangBasketMonitor.js'

export default {
  mounted() {},
  created() {
    this.getList()
    // this.getDutyPerson();
  },
  data() {
    return {
      time: ['', ''],
      isDetail: false, //是否详情
      dutyList: [], // 负责人
      fileUplodList: [],
      title: '',
      dialogBaoSetShow: false,
      dialogSetShow: false,
      dialogShow: false,
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      List: [],
      setEditForm: {
        phValueLowWarn: 0,
        phValueHighWarn: 100,
        conductivityLowWarn: 0,
        conductivityHighWarn: 100,
        waterTemperatureLowWarn: 0,
        waterTemperatureHighWarn: 100,
        dissolvedOxygenLowWarn: 0,
        dissolvedOxygenHighWarn: 100,
        turbidityValueLowWarn: 0,
        turbidityValueHighWarn: 100,
        flowVelocityLowWarn: 0,
        flowVelocityHighWarn: 100,
        waterLevelLowWarn: 0,
        waterLevelHighWarn: 100
      },
      setBaoEditForm: {
        phValueLowAlarm: 0,
        phValueHighAlarm: 100,
        conductivityLowAlarm: 0,
        conductivityHighAlarm: 100,
        waterTemperatureLowAlarm: 0,
        waterTemperatureHighAlarm: 100,
        dissolvedOxygenLowAlarm: 0,
        dissolvedOxygenHighAlarm: 100,
        turbidityValueLowAlarm: 0,
        turbidityValueHighAlarm: 100,
        flowVelocityLowAlarm: 0,
        flowVelocityHighAlarm: 100,
        waterLevelLowAlarm: 0,
        waterLevelHighAlarm: 100
      },
      addEditForm: {
        createTime: '',
        devSn: '',
        installLocation: '',
        devName: '',
        personInChargeName: '',
        personInCharge: '',
        phoneNumber: '',
        personInCharge: '',
        image: '',
        remark: '',
        projectSn: '',
        updateTime: ''
      },
      addEditRules: {
        devName: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ],
        devSn: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ],
        phoneNumber: [
          {
            message: '请输入正确的手机号码',
            trigger: 'blur',
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/
          }
        ]
      },
      searchForm: {
        devName: ''
      }
    }
  },
  methods: {
    //查询列表
    getList() {
      hangBasketDetectData({
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        projectSn: this.$store.state.projectSn,
        devName: this.searchForm.devName,
        createDate_begin: this.time.length > 0 ? this.time[0] : '',
        createDate_end: this.time.length > 0 ? this.time[1] : ''
      }).then(result => {
        if (result.success) {
          this.List = result.result.records
          this.pagInfo.total = result.result.total
        }
      })
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getList()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getList()
    },
    refresh() {
      this.searchForm = {}
      this.pagInfo.pageNo = 1 //页数
      this.pagInfo.pageSize = 10 //条数
      this.time = ['', '']
      this.getList()
    }
  }
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}

.devImage {
  /deep/ .el-image {
    width: 80px;
    height: 50px;
  }
}

.dialogFormBox {
  .form-flex {
    .flex();
    justify-content: space-between;
    .center-line {
      height: 36px;
      line-height: 36px;
      margin: 0 10px;
    }
  }
  /deep/.el-form-item__content {
    line-height: 0px;
  }
}
</style>
