<template>
  <div class="page_container">
    <div class="t_box">
      <el-row type="flex" class="r_box">
        <el-col class="point_item" v-for="(e, i) in dataList" :key="'cdw' + i">
          <div class="zbox point_item_i" @click="toConfirm(e)"><p>{{ e.station_name }}</p></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { queryStation } from '../../config/mork.js'
export default {
  name: 'ModuleRelocation',
  data () {
    return {
      dataList: []
    }
  },
  mounted () {
    this._queryStation()
  },
  methods: {
    // 站点查询
    async _queryStation () {
      this.dataList = []
      try {
        let res = await queryStation()
        if (res && res.data) {
          this.dataList = [...res.data]
        }
      } catch (e) {
        this.$message.error(e)
      }
    },
    toConfirm (e) {
      this.$confirm('是否确定点位重定位?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(e)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.t_box
  height 100%
  background-color rgba(0, 19, 48, 70%)
  box-shadow inset 1px 1px 7px 2px #4d9bcd
  padding .1rem
  overflow hidden
.r_box
  height 100%
  overflow-y auto
  flex-wrap wrap
  align-content flex-start
.point_item
  width 20%
  height 0.6rem
  padding 0.1rem
  margin-bottom 0.02rem
  background center / 100% 100% url(../../images/new/bg2.png) no-repeat
  p
    font-size .2rem
    font-family 'SourceHanSansCN-Bold'
    line-height .2rem
    color #B4C1D8
    text-align center
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 定义显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
.point_item_i
  display flex
  align-items center
  justify-content center
</style>
