<template>
  <div class="hum-page-container">
    <div class="hum-page-title">站点列表</div>
    <div class="hum-page-main">
      <div class="hum-page-search">
        <el-form :model="queryParams" size="large" ref="queryForm" label-position="top">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="站码">
                <el-input
                  v-model="queryParams.id"
                  placeholder="请输入站码"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="站点名称">
                <el-input
                  v-model="queryParams.siteName"
                  placeholder="请输入站点名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="站点类型">
                <el-select v-model="queryParams.siteType" placeholder="站点类型" clearable>
                  <el-option
                    v-for="option in siteTypeOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备ID">
                <el-input
                  v-model="queryParams.deviceId"
                  placeholder="请输入设备ID"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设站日期">
                <el-date-picker
                  v-model="dateRange"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="hum-page-search-action">
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="hum-page-action">
        <el-button type="primary" @click="$router.push('/site/site/add')">新增站点</el-button>
      </div>
      <el-table v-loading="loading" :data="list" border>
        <el-table-column label="站码" prop="id" />
        <el-table-column label="站点名称" prop="siteName" />
        <el-table-column label="站点类型" prop="siteType">
          <template slot-scope="scope">
            <span>{{ {1: '流量站'}[scope.row.siteType] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备ID" prop="deviceId" />
        <el-table-column label="设站日期" prop="siteTime">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.siteTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行政区域" prop="adminRegion" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-setting" @click="handleConfig(scope.row)">参数设置</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.size"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listSite, deleteSite } from "@/api/site/site";

export default {
  data() {
    return {
      queryParams: {
        page: 1,
        size: 10,
        id: '',
        siteName: '',
        siteType: '',
        deviceId: '',
      },
      dateRange: [],
      siteTypeOptions: [
        { value: 1, label: '流量站' }
      ],
      loading: true,
      total: 0,
      list: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        page: 1,
        size: 10,
        id: '',
        siteName: '',
        siteType: '',
        deviceId: '',
      };
      this.getList();
    },
    getList() {
      this.loading = true;
      listSite(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.list = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    handleUpdate(site) {
      this.$router.push(`/site/site/edit/${site.siteId}`);
    },
    handleConfig(site) {
      this.$router.push(`/site/site/config/${site.siteId}`);
    },
    handleDelete(plain) {
      this.$modal.confirm('是否确认删除站点名称为"' + plain.siteName + '"的数据项？').then(function() {
        return deleteSite(plain.siteId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
  }
}
</script>

<style scoped>

</style>
