<template>
  <div v-loading="loading">
    <el-container>
      <el-header>
        <el-row class="row-bg" :gutter="35">
          <el-col :span="4">
            <div class="grid-content bg-blue">设备总数</div>
            <div class="grid-content bg-blue big">4545台</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-green">正常</div>
            <div class="grid-content bg-green big">3621台</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-orange">报警</div>
            <div class="grid-content bg-orange big">273台</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-red">故障</div>
            <div class="grid-content bg-red big">432台</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-grey">通讯中断</div>
            <div class="grid-content bg-grey big">422台</div>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="list">
        <div class="list-first">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content1">设备列表</div>
            </el-col>

            <el-col :span="6" :offset="12">
              <div class="grid-content1">
                <el-input
                  placeholder="请输入内容/编号"
                  suffix-icon="el-icon-search"
                  v-model="search"
                ></el-input>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content2">
                设备状态：
                <el-select
                  size="mini"
                  v-model="value1"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in states"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content2">
                设备型号：
                <el-select
                  size="mini"
                  v-model="value2"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in models"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content2">
                设备选择：
                <el-select
                  size="mini"
                  v-model="value3"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in equipments"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content2">
                <el-button type="primary" class="bu" size="mini"
                  >搜索</el-button
                >
                <el-button size="mini">重置</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-table
              ref="multipleTable"
              :data="
                tableData.filter(
                  data =>
                    !search ||
                    data.state.toLowerCase().includes(search.toLowerCase()) ||
                    data.number.toLowerCase().includes(search.toLowerCase())
                )
              "
              tooltip-effect="dark"
              style="width: 100% "
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                align="center"
                type="selection"
                width="50"
              ></el-table-column>
              <el-table-column align="center" label="设备状态" width="200">
                <template slot-scope="scope">
                  <div v-if="scope.row.state === '正常'">
                    <el-tag :type="'success'">{{ scope.row.state }}</el-tag>
                  </div>
                  <div v-else-if="scope.row.state == '报警'">
                    <el-tag :type="'warning'">{{ scope.row.state }}</el-tag>
                  </div>
                  <div v-else-if="scope.row.state == '故障'">
                    <el-tag :type="'danger'">{{ scope.row.state }}</el-tag>
                  </div>
                  <div v-else>
                    <el-tag :type="'info'">{{ scope.row.state }}</el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="设备编号" width="200">
                <template slot-scope="scope">{{ scope.row.number }}</template>
              </el-table-column>
              <el-table-column align="center" label="设备型号" width="200">
                <template slot-scope="scope">{{ scope.row.model }}</template>
              </el-table-column>
              <el-table-column align="center" label="设备位置" width="200">
                <template slot-scope="scope">{{ scope.row.location }}</template>
              </el-table-column>
              <el-table-column align="center" label="检测区域" width="200">
                <template slot-scope="scope">{{ scope.row.area }}</template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button @click="detail(scope.row)" type="text" size="small"
                    >参数详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts">
import { ref, onMounted } from "@vue/composition-api";
import { router } from "../../main";
export default {
  setup() {
    const tableData = [
      {
        state: "正常",
        number: "DLQ4323",
        model: "LTY-1",
        location: "杭州市西湖区",
        area: "杭州市西湖区古荡湾",
        collector: "LKT001"
      },
      {
        state: "正常",
        number: "DL3423",
        model: "LTY-1",
        location: "杭州市西湖区",
        area: "杭州市西湖区古荡湾",
        collector: "LKT001"
      },
      {
        state: "故障",
        number: "DLQ453",
        model: "LTY-1",
        location: "杭州市西湖区",
        area: "杭州市西湖区古荡湾",
        collector: "LKT001"
      },
      {
        state: "正常",
        number: "DL23",
        model: "LTY-1",
        location: "杭州市西湖区",
        area: "杭州市西湖区古荡湾",
        collector: "LKT001"
      },
      {
        state: "通讯中断",
        number: "DLQ423",
        model: "LTY-1",
        location: "杭州市西湖区",
        area: "杭州市西湖区古荡湾",
        collector: "LKT001"
      },
      {
        state: "正常",
        number: "DLQ423",
        model: "LTY-1",
        location: "杭州市西湖区",
        area: "杭州市西湖区古荡湾",
        collector: "LKT001"
      },
      {
        state: "正常",
        number: "DLQ423",
        model: "LTY-1",
        location: "杭州市西湖区",
        area: "杭州市西湖区古荡湾",
        collector: "LKT001"
      },
      {
        state: "报警",
        number: "DLQ423",
        model: "LTY-1",
        location: "杭州市西湖区",
        area: "杭州市西湖区古荡湾",
        collector: "LKT001"
      }
    ];
    const equipments = [
      {
        value: "选项1",
        label: "断路器1"
      },
      {
        value: "选项2",
        label: "断路器2"
      },
      {
        value: "选项3",
        label: "断路器3"
      },
      {
        value: "选项4",
        label: "断路器4"
      }
    ];
    const models = [
      {
        value: "选项1",
        label: "型号1"
      },
      {
        value: "选项2",
        label: "型号2"
      },
      {
        value: "选项3",
        label: "型号3"
      },
      {
        value: "选项4",
        label: "型号4"
      }
    ];
    const states = [
      {
        value: "选项1",
        label: "正常"
      },
      {
        value: "选项2",
        label: "报警"
      },
      {
        value: "选项3",
        label: "故障"
      },
      {
        value: "选项4",
        label: "通讯中断"
      }
    ];

    function detail(row:any) {
     
      router.push({ name: "detail" ,
       params: { 
               obj: row
            }

      });
    }
    const loading = ref<boolean>(false);
    const value1 = ref<any>([]);
    const value2 = ref<any>([]);
    const value3 = ref<any>([]);
    const multipleSelection = ref<any>([]);
    return {
      loading,
      search: "",
      msg: 'test message',
      tableData,
      detail,
      states,
      value1,
      models,
      value2,
      equipments,
      value3,
      multipleSelection
    };
  }
};
</script>
<style lang="scss">
.bu {
  margin-right: 10px;
  margin-left: 50px;
}
.grid-content {
  text-align: center;
  line-height: 30px;
}
.grid-content1 {
  font-weight: bolder;
  font-size: medium;
  line-height: center;
}
.bg-blue {
  color: blue;
}
.el-row {
  margin-bottom: 10px;
}
.bg-green {
  color: green;
}
.bg-orange {
  color: orange;
}
.bg-red {
  color: red;
}
.bg-grey {
  color: grey;
}
.big {
  font-size: large;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.list {
  background: white;
  margin-top: 3%;
}
</style>
