<template>
  <div>
  <div class="fullHeight" v-if="!infoDetailShow">
    <div class="searchBtn">
      <div
        class="search-btn-item"
        :class="checkIndex == index ? 'item-active' : ''"
        v-for="(item, index) in searchBtnList"
        :key="index"
        @click="searchSelect(item, index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        ref="searchForm"
        :model="searchForm"
        size="medium"
        style="width: 100%;display: flex;align-items: center;"
      >
        <!-- 人员名称 -->
        <el-form-item label="" prop="deviceName">
          <el-input
            placeholder="请输入"
            suffix-icon="el-icon-search"
            v-model="searchForm.personName"
          >
          </el-input>
        </el-form-item>
        <!-- 设备序号 -->
        <el-form-item label="应用标签" prop="deviceNumber">
          <el-select
            v-model="searchForm.departmentId"
            placeholder="请选择"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in deviceList"
              :key="index"
              :label="item.deviceNumber"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 时间 -->
        <el-form-item label="接收时间" style="margin-right: auto;">
          <el-date-picker
            size="medium"
            v-model="daterange"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            :start-placeholder="'开始日期'"
            :end-placeholder="'结束日期'"
            @change="changeDate"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 条件查询按钮 -->
        <el-form-item style="margin-right: 0px;">
          <el-button type="primary" plain @click="searchList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="info-operate">
      <span>消息列表</span>
      <el-button type="danger" plain size="medium">删除</el-button>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" v-loading="loading" :data="tableData">
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column label="标题内容" align="center" prop="deviceName">
          <el-button type="text" @click="infoDetailOpen">标题内容</el-button>
        </el-table-column>
        <el-table-column
          label="类别"
          align="center"
          prop="deviceNumber"
          width="180"
        />
        <el-table-column
          label="应用"
          align="center"
          prop="currentLocation"
          width="180"
        />
        <el-table-column label="标签" align="center" prop="speed" />
        <el-table-column label="操作时间" align="center" prop="workStatus" />
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="pageInfo.pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(pageInfo.total)"
        background
      ></el-pagination>
    </div>
  </div>
  <div class="info-content" v-else>
    <div class="back-operate" @click="infoDetailShow = false;">
      <i class="el-icon-arrow-left"></i>
      <span>返回</span>
    </div>
    <div class="info-content-detail">
      <div class="detail-title">人员未在场预警</div>
      <div class="detail-sub-title">
        <span>应用：劳务管理系统</span>
        <span>标签：预警信息</span>
        <span>接收时间：2024/03/03 23:50:00</span>
      </div>
      <div class="detail-content">人员未在场预警</div>
      <div class="detail-content">人员未在场预警</div>
      <div class="detail-content">人员未在场预警</div>
      <div class="detail-content">人员未在场预警</div>
      <div class="detail-content">人员未在场预警</div>
    </div>
  </div>
  </div>
</template>
<script>
import { rtToolPage } from "@/assets/js/api/workTicketManage.js";
import {} from "@/assets/js/api/devicePosition/payData";
export default {
  mounted() {},
  created() {
    this.getList();
    //   this.getDutyPerson()
  },
  data() {
    return {
      infoDetailShow: false,
      checkIndex: 0,
      searchBtnList: [
        { name: "全部类别", value: "" },
        { name: "通知公告", value: "" },
        { name: "审批流程", value: "" },
        { name: "风险预警", value: "" },
        { name: "任务待办", value: "" },
        { name: "其他", value: "" },
      ],
      devSn: "",
      // 遮罩层
      loading: false,
      daterange: [],
      pageInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 1, //总条数
      },
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        projectSn: "", // 项目SN
        personName: "",
        deviceNumber: "",
        startTime: "",
        endTime: "",
      },
      personList: [
        { id: 1, personName: "张三" },
        { id: 2, personName: "李四" },
        { id: 3, personName: "王二" },
      ],
      deviceList: [
        { id: 1, deviceNumber: "EMP21313212135132" },
        { id: 2, deviceNumber: "EMP44613213543212" },
        { id: 3, deviceNumber: "EMP21321546312556" },
      ],
      tableData: [
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 0,
          deviceBattery: 50,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 0,
          deviceBattery: 95,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 1,
          deviceBattery: 18,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 1,
          deviceBattery: 45,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 0,
          deviceBattery: 81,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 1,
          deviceBattery: 11,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 0,
          deviceBattery: 67,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 1,
          deviceBattery: 90,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 0,
          deviceBattery: 16,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
        {
          deviceName: "挖掘机",
          deviceNumber: "EMP21313212135132",
          currentLocation: "123,4561,895,5648",
          speed: "15km/h",
          workStatus: 1,
          deviceBattery: 80,
          deviceVoltage: 3.7,
          uploadTime: "2024-03-13 00:00:00",
        },
      ],
    };
  },
  methods: {
    infoDetailOpen(){
      this.infoDetailShow = true;
    },
    searchSelect(obj, index) {
      this.checkIndex = index;
    },
    exportFn() {
      window.location.href =
        this.$http.defaults.baseURL +
        "xmgl/standardCurrentData/exportExcelStandardCurrentData?devSn=" +
        this.formInline.devSn +
        "&projectSn=" +
        this.projectSn +
        "&startTime=" +
        this.formInline.startTime +
        "&endTime=" +
        this.formInline.endTime;
    },
    //查询列表
    getList() {
      rtToolPage({
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize,
        projectSn: this.$store.state.projectSn,
        devSn: this.searchForm.devSn,
        toolName: this.searchForm.toolName,
        toolStatus: this.searchForm.toolStatus,
      }).then((result) => {
        if (result.success) {
          this.List = result.result.records;
          this.pageInfo.total = result.result.total;
        }
      });
    },
    SizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getList();
    },
    CurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.getList();
    },
    searchList() {
      this.pageInfo.pageNo = 1; //页数
      this.getList();
    },
    refresh() {
      this.searchForm = {};
      this.pageInfo.pageNo = 1; //页数
      this.pageInfo.pageSize = 10; //条数
      this.getList();
    },
    //选择条数
    handleSizeChange(val) {
      this.pageSize2 = val;
      this.getPageList();
    },
    //选择分页
    handleCurrentChange(val) {
      this.pageNo2 = val;
      this.getPageList();
    },
    changeDate() {
      if (this.daterange) {
        this.searchForm.startTime = this.daterange[0];
        this.searchForm.endTime = this.daterange[1];
      } else {
        this.searchForm.startTime = "";
        this.searchForm.endTime = "";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.tables {
  min-height: 0;
}
.searchBox {
  height: 50px;
  margin-bottom: 0px;
  margin-top: 10px;
}
.searchBtn {
  display: flex;
  align-items: center;
  margin-top: 15px;
  margin-left: 25px;
  .search-btn-item {
    width: 65px;
    padding: 5px 1px;
    text-align: center;
    border: 1px solid #638ef7;
    border-radius: 3px;
    font-size: 14px;
    color: #638ef7;
    cursor: pointer;
  }
  .item-active {
    background-color: #5181f6;
    color: white;
  }
  .search-btn-item:not(:last-child) {
    margin-right: 10px;
  }
}
.info-operate {
  display: flex;
  align-items: center;
  margin: 0px 25px 10px 25px;
  > span:nth-child(1) {
    margin-right: auto;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
}
.info-content{
  .back-operate{
    display: flex;
    align-items: center;
    color: #5282F6;
    height: 40px;
    border-bottom: 2px solid #C8C8C8;
    padding-bottom: 5px;
    cursor: pointer;
    .el-icon-arrow-left{
      color: #5282F6;
      margin-left: 15px;
    }
    >span{
      margin-left: 5px;
    }
  }
  .info-content-detail{
    margin-top: 80px;
    .detail-title{
      font-family: PingFang SC, PingFang SC;
      color: #000000;
      font-size: 18px;
      text-align: center;
    }
    .detail-sub-title{
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC, PingFang SC;
      color: #000000;
      font-size: 16px;
      margin-top: 30px;
      margin-bottom: 30px;
      span:not(:last-child){
        margin-right: 25px;
      }
    }
    .detail-content{
      font-family: PingFang SC, PingFang SC;
      color: #000000;
      font-size: 14px;
      margin-bottom: 15px;
      margin-left: 25px;
    }
  }
}
</style>
