<template>
  <div class="health-tab-4">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="station"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in stations"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">机组</div>
          <div class="search-input">
            <el-select
              v-model="windturbine"
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in windturbines"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="starts"
              type="date"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">结束日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="endts"
              type="date"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="''" />
            </div>
          </div>
        </div>
      </div>
      <div class="query-actions" style="margin-right: 500px">
        <button class="btn green" @click="onClickSearch">搜索</button>
      </div>
    </div>
    <div class="table-box">
      <table class="com-table">
        <thead>
          <tr>
            <th v-for="(col, index) of tableData.column" :key="index">
              {{ col }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) of tableData.data" :key="index">
            <td>{{ row.wfname }}</td>
            <td>{{ row.wtid }}</td>
            <td>{{new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
            <td>{{row.departuretime ? new Date().formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
            <td>{{ row.reason }}</td>
            <td>{{ row.repairedcomment }}</td>
            <td>
              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
              <button class="btn success" @click="onClickHistory(row)">历史查询</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
        <dayinfo />
      </el-dialog>   
    </div> 
  </div>
</template>

<script>
import Dayinfo from "./dayinfo.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";

export default {
  components: { Dayinfo, SvgIcon },
  data() {
    return {
      stations: [], // 场站
      windturbines: [], // 风机
      station: "",
      windturbine: "",
      starts: "",
      endts: new Date(),
      tableData: {
        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "消缺工艺",  "操作"],
        data: [],
      },
      dialogVisible: false
    };
  },
  created() {
    this.starts = new Date(new Date().setMonth(new Date().getMonth()-1)).formatDate("yyyy-MM-dd");
    this.requestStations();
  },
  methods: {
    // 搜索按钮
    onClickSearch() {
      this.requestUnfinishedList();
    },
    // 消缺跟踪
    onClickTrack(row){
      this.dialogVisible = true
    },
    // 历史查询
    onClickHistory(row){

    },
    // 获取场站
    requestStations() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success(res) {
          if (res.code == 200) {
            that.stations = res.data;
            that.station = that.stations[3].id;
          }
        },
      });
    },
    // 获取风机
    requestWindturbines(wpid) {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windturbineAjax",
        data: { wpId: wpid },
        success(res) {
          if (res.code == 200) that.windturbines = res.data;
        },
      });
    },
    // 获取未完成消缺单列表
    requestUnfinishedList() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "recommen/finishedList",
        data: {
          wpId: that.station,
          wtId: that.windturbine,
          beginDate: new Date(that.starts).formatDate("yyyy-MM-dd"),
          endDate: new Date(that.endts).formatDate("yyyy-MM-dd"),
        },
        success(res) {
          if (res.code == 200) {
            that.tableData.data = res.data;
          }
        },
      });
    },
  },
  watch: {
    station(val) {
      this.windturbine = "";
      this.requestWindturbines(val);
    },
  },
};
</script>

<style lang="less" scope>
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;
.health-tab-4 {
  .table-box {
    border: 0.093vh solid @darkgray;
    position: relative;
    overflow: auto;
    flex-grow: 1;
    top: 1vh;
  }
  .com-table {
    width: 100%;
    border-collapse: collapse;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 175px);
  
    thead {
      tr {
        position: relative;
        display: table;
        table-layout: fixed;
        width: 100%;

        th {
          background-color: fade(@darkBack, 20%);
          padding: 1.481vh 0;
          color: @titleGray;
          font-weight: 400;
          font-size: @fontsize-s;
          position: sticky;
          // top: 0;

          &.light {
            color: @green;
          }
        }
      }
    }

    tbody {
      display: block;
      max-height: 100%; 
      overflow-y: scroll;

      tr {
        display: table;
        table-layout: fixed;
        width: 100%;

        &:nth-child(2n) {
          background-color: fade(@rowGray, 20%);
        }

        td {
          padding: 0.556vh 0;
          color: @rowGray;
          text-align: center;
          font-size: @fontsize-s;
          overflow: hidden; //隐藏文字
          text-overflow: ellipsis; //显示 ...
          white-space: nowrap; //不换行

          &.light {
            color: @green !important;
          }

          &.num {
            font-family: "Bicubik";
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>
