<template>
<div class="main-container">
  <div class="movepoint">
    <div class="con">
      <div class="box1">
        <div class="point fl" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
      </div>
      <div class="box2">
        <span class="span1">目标站点：</span>
        <span class="span2">{{selectObj.code_name}}</span>
        <button class="btn btn1" @click="toSure">确定</button>
        <button class="btn btn2" @click="toClear">清除</button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {queryPoint, confirmPoint} from '@/config/getData.js'
export default {
  name: 'MovePoint',
  data () {
    return {
      selectObj: {},
      // dataList: []
      dataList: [
        {
          id: '1',
          code_name: 'A-ZD101'
        },
        {
          id: '2',
          code_name: 'A-ZD102'
        },
        {
          id: '3',
          code_name: 'A-ZD103'
        },
        {
          id: '4',
          code_name: 'A-ZD101'
        },
        {
          id: '5',
          code_name: 'A-ZD101'
        },
        {
          id: '6',
          code_name: 'A-ZD101'
        },
        {
          id: '7',
          code_name: 'A-ZD101'
        },
        {
          id: '8',
          code_name: 'A-ZD101'
        },
        {
          id: '9',
          code_name: 'A-ZD101'
        },
        {
          id: '10',
          code_name: 'A-ZD101'
        },
        {
          id: '11',
          code_name: 'A-ZD101'
        }
      ]
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      let res = await queryPoint()
      if (res.code === '1') {
        this.dataList = res.result
      } else {
        this.toast(res.desc)
      }
    },
    async confirmPoint () {
      let res = await confirmPoint(this.selectObj.point_code)
      if (res.code === '1') {
        this.toast(res.desc)
        this.selectObj = {}
      } else {
        this.toast(res.desc)
      }
    },
    toRadio (e) {
      this.selectObj = e
    },
    toSure () {
      console.log(this.selectObj.point_code, 666)
      if (this.selectObj.point_code) {
        this.confirmPoint()
      }
    },
    toClear () {
      this.selectObj = {}
    }
  }
}
</script>
<style lang="stylus" scoped>
.con
  float left
  margin-left .95rem
  margin-top .39rem
.box1
  width 10rem
  // height 6.1rem
  .point
    width 1.8rem
    line-height .9rem
    color #FA6400
    font-size .24rem
    text-align center
    border .1rem solid #DFE1E6
    border-radius .2rem
    background #ffffff
    margin-right .2rem
    margin-bottom .35rem
.box2
  position fixed
  bottom .5rem
  width 9.8rem
  height 1.5rem
  border .16rem solid #DFE1E6
  border-radius .2rem
  background #ffffff
  .span1
    position absolute
    left .3rem
    top .34rem
    display inline-block
    line-height .5rem
    font-size .24rem
    border-right 3px solid #FA6400
    width 1.6rem
    color #464646
  .span2
    position absolute
    left 2.5rem
    top .38rem
    display inline-block
    font-size .3rem
    color #fa6400
  .btn
    width 1.4rem
    line-height .88rem
    font-size .24rem
    border-radius .28rem
    color #ffffff
  .btn1
    position absolute
    left 6rem
    top .15rem
    background #FD6A35
  .btn2
    position absolute
    left 7.6rem
    top .15rem
    background #989EBB
</style>
