<template>
  <div>
    <!-- 发生可能性 -->
    <div class="content-wrap">
      <van-checkbox-group v-model="happenSelect">
        <van-cell-group>
          <van-cell title="发生可能性" is-link arrow-direction="down" />
          <van-cell
            v-for="(item, index) in happenList"
            clickable
            :key="item"
            :title="item"
            @click="happenToggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="happen" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>

    <!-- 后果严重性 -->
    <div class="content-wrap">
      <van-checkbox-group v-model="resultSelect">
        <van-cell-group>
          <van-cell title="后果严重性" is-link arrow-direction="down" />
          <van-cell
            v-for="(item, index) in resultList"
            clickable
            :key="item"
            :title="item"
            @click="resultToggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="result" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      happenList: [
        "企业半年内发生2起一般安全生产事故的",
        "企业1年内发生3起一般安全生产事故的",
        "企业1年内发生1起较大及其以上生产安全事故的",
        "超限高层建筑",
        "采用新技术、新工艺、新设备、新材料、尚无国家、行业及地方技术标准",
        "工程项目施工工期压缩超过30%或者工期压缩未采用技术措施的"
      ],
      happenSelect: [],

      resultList: [
        "企业半年内发生2起一般安全生产事故的",
        "企业1年内发生3起一般安全生产事故的",
        "企业1年内发生1起较大及其以上生产安全事故的",
        "超限高层建筑",
        "采用新技术、新工艺、新设备、新材料、尚无国家、行业及地方技术标准",
        "工程项目施工工期压缩超过30%或者工期压缩未采用技术措施的"
      ],
      resultSelect: []
    };
  },
  mounted() {},
  methods: {
    happenToggle(index, val) {
      this.$refs.happen[index].toggle();
    },
    resultToggle(index, val) {
      this.$refs.result[index].toggle();
    },
    compute() {
      if (this.happenSelect.length == 0) {
        this.$toast.fail("必须选择发生可能性");
        return;
      } else if (this.resultSelect.length == 0) {
        this.$toast.fail("必须选择后果严重性");
        return;
      }
      let topNum = 5;
      let bottomNum = 5;
      return {a:topNum, b:bottomNum}
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.content-wrap {
  margin-bottom: 0.266667rem;
}
</style>
