<template>
  <div class="main_content">
    <CardList class="box-card" v-for="(item, index) in cardList" :key="index" :cardList="item" />
    <div class="step_next step_btn" @click="handleNext">下一步</div>
  </div>
</template>
<script>
import CardList from '@/components/base/CardList.vue'
import stepONeStep from '@/utils/stepOne'
import { cacheReport } from '../../api'
export default {
  components: {
    CardList
  },
  props: {
    activeStep: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      cardList: []
    }
  },
  created() {
    this.cardList = stepONeStep
  },
  methods: {
    handleNext() {
      let flag = false
      this.cardList.forEach(item =>
        item.form.personAttribute.forEach(it => {
          console.log(it, '0000')
          if (it.equal === '' || it.personal === '' || it.range === '') {
            flag = true
            return false
          }
        })
      )
      if (flag) {
        this.$message.warning('请完善改步骤后才能进入下一步')
        return false
      } else {
        console.log(this.cardList, '0000')
        const reports = { type: 1, commit_report: this.cardList }
        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
          console.log(res, 'res111')
        })
        this.$emit('getCardList', this.cardList)
        this.$parent.$parent.handleNext()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main_content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  .box-card {
    min-width: 520px;
  }
  .step_btn {
    width: 119px;
    height: 32px;
    border-radius: 16px;
    font-size: 18px;
    line-height: 32px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    background: #49bba2;
    margin: 30px auto;
  }
}
</style>
