<template>
  <div class="pushBar">
    <TnTitle title="真理是什么"/>
    <push-bar 
      v-for="(val, key) in list" v-bind:key="key" 
      :data="val" :type="val.type"
      v-on:handClick="handClick"
      :check="val.check"
    >
    </push-bar>
    <!-- {{check}}  
    <div @click="changeCheck">
      改变改变
    </div> -->
  </div>    
</template>

<script lang="ts">
import Vue from 'vue'
import { PushBar } from '../../tunas'
import { mapState } from 'vuex'
import { TnTitle } from '../../tunas'

export default Vue.extend({
  components: {
    TnTitle,
    PushBar
  },
  computed: {
    ...mapState({
      getList ({check}): object {
        return [...this.list, {
          check: check,
          text: '这里包含了开关2',
          titleColor: '#0082ff',
          type: 'switch',
          clickBack: (val) => {
            this.$store.commit('updateState', [['check', !this.check]])
          }
        }]
      },
      check ({check}): object {
        return check
      },
    })
  },
  data() {
    return {
      list: [{
        title: '标题文案',
        text: '最普通的列表',
        desc: '98%',
        type: ''
      }, {
        text: '这里有一个小箭头',
        desc: '97%',
        type: 'arrow'
      }, {
        check: false,
        text: '这里包含了开关',
        desc: '96%',
        // activeColor: 'red',
        type: 'switch',
        clickBack: (val) => {
          val.check = !val.check
        }
      }, {
        check: true,
        text: '这里包含了radio',
        type: 'radio',
        // activeColor: 'blue',
        hint: '提示说明文案',
        clickBack: (val) => {
          val.check = !val.check
        }
      }]
    }
  },
  created() {
    
  },
  methods: {
    changeCheck() {
      this.$store.commit('updateState', [['check', !this.check]])
    },
    // 点击
    handClick(val) {
      console.log(val, '点击返回数据')
    }
  }
})
</script>

<style lang="stylus" scoped>
.pushBar {
  font-size: 20px;
}
</style>
