<template>
  <div class="native">
    <div class="nav1">
      <div
        v-for="(item1,index1) in nativeData1"
        :key="index1"
        :class="{bgcolor:item1.state}"
        @click="changeData('native1',index1)"
      >{{item1.text}}</div>
    </div>
    <div class="nav2">
      <div
        v-for="(item2,index2) in nativeData2"
        :key="index2"
        :class="{bgcolor:item2.state}"
        @click="changeData('native2',index2)"
      >{{item2.text}}</div>
    </div>
    <div class="nav3">
      <div
        v-for="(item3,index3) in nativeData3"
        :key="index3"
        :class="{bgcolor:item3.state}"
        @click="changeData('native3',index3)"
      >{{item3.text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cs',
  data () {
    return {
      nativeData1: [
        { text: '导航1-1', state: true },
        { text: '导航1-2', state: false },
        { text: '导航1-3', state: false }
      ],
      nativeData2: [
        { text: '导航2-1', state: true },
        { text: '导航2-2', state: false },
        { text: '导航2-3', state: false }
      ],
      nativeData3: [
        { text: '导航3-1', state: true },
        { text: '导航3-2', state: false },
        { text: '导航3-3', state: false }
      ]
    }
  },
  computed: {
  },
  methods: {
    changeData (lab, states) {
      switch (lab) {
        case 'native1':
          this.nativeData1.forEach((item, index) => {
            index === states ? item.state = true : item.state = false
          })
          console.log(this.selectNow)
          break
        case 'native2':
          this.nativeData2.forEach((item, index) => {
            index === states ? item.state = true : item.state = false
          })
          break
        case 'native3':
          this.nativeData3.forEach((item, index) => {
            index === states ? item.state = true : item.state = false
          })
          break
      }
      this.axios.all([
        this.axios({ url: '', method: 'GET', params: {} }),
        this.axios({ url: '', method: 'POST', data: {} })
      ]).then(
        this.axios.spread((res1, res2) => {
          console.log(res1, res2)
        })
      )
    }
  }
}
</script>
<style scoped lang="scss">
.native {
  width: 100%;
  & > div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    & > div {
      width: 120px;
      height: 60px;
      border: 1px solid #bdbdbd;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    & > .bgcolor {
      background-color: #0dbc79;
    }
  }
}
</style>
