<template>
  <div class="app-container alarmingManage" v-if="this.pageShow">
    <!-- 筛选start -->
    <div class="filter-container mb-20">
      <div class="left">
        <div>
          <div class="filter-item">
            站点:
            <el-select
              v-model="region"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option label="已执行" value="1"></el-option>
              <el-option label="未执行" value="2"></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            时间：
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: auto"
            ></el-date-picker>
          </div>
          <el-button class="search-button">重置</el-button>
          <el-button type="primary" class="search-button">搜索</el-button>
        </div>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
      class="alarmingTable"
    >
      <el-table-column prop="siteName" label="站点名称" width="">
        <template #default="scope">
          <div @click="handleClick(scope.row)">{{ scope.row.siteName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="totalNum" label="总数">
        <template #default="scope">
          <span
            class="gradualBg total"
            :class="{ transparent: scope.row.totalNum == 0 }"
            :style="{
              width: (scope.row.totalNum / this.totalNumMax(scope.row.totalNum)) * 100 + '%',
            }"
            @click="goAlarmTotal"
          >
            {{ scope.row.totalNum }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="oneAlarming" label="一级告警" width="">
        <template #default="scope">
          <span
            class="gradualBg"
            :class="{ transparent: scope.row.oneAlarming == 0 }"
            :style="{
              width: (scope.row.oneAlarming / this.oneAlarmingMax) * 100 + '%',
            }"
            @click="goAlarmTotal"
          >
            {{ scope.row.oneAlarming }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="twoAlarming" label="二级告警" width="">
        <template #default="scope">
          <span
            class="gradualBg"
            :class="{ transparent: scope.row.twoAlarming == 0 }"
            :style="{
              width: (scope.row.twoAlarming / this.twoAlarmingMax) * 100 + '%',
            }"
            @click="goAlarmTotal"
          >
            {{ scope.row.twoAlarming }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="other" label="其他" width=""></el-table-column> -->
      <el-table-column prop="other" label="其他" width="">
        <template #default="scope">
          <span
            class="gradualBg"
            :class="{ transparent: scope.row.other == 0 }"
            :style="{
              width: (scope.row.other / this.otherMax) * 100 + '%',
            }"
            @click="goAlarmTotal"
          >
            {{ scope.row.other }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>

    <!-- 分页end -->

    <!-- {{ totalNumMax }}
      {{ oneAlarmingMax }} -->
  </div>
  <alarm-total v-else :pageShow="pageShow" @func="getMsgFormSon"></alarm-total>
</template>

<script>
import alarmTotal from './alarmTotal'
export default {
  components: { alarmTotal },
  name: 'VariableList',

  data() {
    return {
      pageShow: true,
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      select: 1,
      currentPage4: 4,

      showDialog: false,
      tabPosition: 'one',

      input: '',
      region: '',
      tableData: [
        {
          other: '10',
          siteName: '测试站点1',
          totalNum: '626',
          oneAlarming: '10',
          twoAlarming: '10',
        },
        {
          other: '10',
          siteName: '测试站点1',
          totalNum: '66',
          oneAlarming: '10',
          twoAlarming: '10',
        },
        {
          other: '0',
          siteName: '测试站点1',
          totalNum: '6',
          oneAlarming: '3',
          twoAlarming: '10',
        },
        {
          other: '0',
          siteName: '测试站点1',
          totalNum: '3',
          oneAlarming: '3',
          twoAlarming: '3',
        },
        {
          other: '0',
          siteName: '测试站点1',
          totalNum: '1',
          oneAlarming: '2',
          twoAlarming: '0',
        },
      ],
    }
  },
  computed: {
    // sellVendorOption() {
    //   return (item) => {
    //     return item.venderCode + ':' + item.venderName
    //   }
    // },

    totalNumMax() {
      
       return Math.max.apply(
          Math,
          this.tableData.map(function (o) {
            return o.totalNum
          })
        )
    },
    oneAlarmingMax() {
      return Math.max.apply(
        Math,
        this.tableData.map(function (o) {
          return o.oneAlarming
        })
      )
    },
    twoAlarmingMax() {
      return Math.max.apply(
        Math,
        this.tableData.map(function (o) {
          return o.twoAlarming
        })
      )
    },
    otherMax() {
      return Math.max.apply(
        Math,
        this.tableData.map(function (o) {
          return o.other
        })
      )
    },
  },
  methods: {
    getMsgFormSon() {
      this.pageShow = !this.pageShow
    },

    goAlarmTotal() {
      this.pageShow = !this.pageShow
    },
    //查看
    handleClick(row) {
      alert('查看对应站点（页面跳转）')
      console.log(row)
    },
    //自定义列样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex)
      if (columnIndex === 0) {
        return `color:#0284E8;cursor:pointer`
      }
      if (columnIndex === 1) {
        return `text-align:left;cursor:pointer;`
      } else {
        return ''
      }
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 表头样式设置
    goVariableList() {
      // 跳转至订单列表页面传参
      this.$router.push({
        path: '../siteManage/variableList/index.vue',
      })
      // this.$router.push({ name:'variableList'})
    },
    headClass() {
      return 'background:#FAFAFA;'
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
