<template>
  <div class="choose">
    <h2 class="choose-title">请选择事务</h2>
    <div class="choose-list">
      <van-radio-group v-model="radio">
        <div class="choose-item" v-for="item in affairTypes" :key="item.value">
          <van-radio :name="item.id">{{ item.affair_name }}</van-radio>
        </div>
      </van-radio-group>
    </div>
    <div class="fixed-box">
      <div class="fixed-inner">
        <div class="fixed-button" @click="toListPage">下一步</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: ''
    }
  },
  computed: {
    affairTypes() {
      return this.$store.state.affairTypes
    },
    currentItem() {
      return this.affairTypes.find(item => item.id === this.radio)
    }
  },
  methods: {
    toListPage() {
      if (!this.radio) {
        this.$toast('请选择事务')
        return
      }
      this.$router.push({
        name: 'list',
        query: Object.assign(this.$route.query, {
          channel: this.currentItem.form_name,
          channel_id: this.radio
        })
      })
    },
    getList() {
      if (this.affairTypes.length) {
        const [first] = this.affairTypes
        this.radio = first.id
      } else {
        this.$store.dispatch('getAffairTypes')
      }
    }
  },
  beforeMount() {
    this.getList()
  }
}
</script>

<style lang="scss">
.choose {
  padding: 30px;
}
.choose-title {
  font-size: 19px;
  font-weight: normal;
}
.choose-list {
  margin-top: 46px;
}
.choose-item {
  margin-bottom: 50px;
}
</style>
