<template>
  <div>
    <LHeader :text="text"></LHeader>
    <!-- 内容列表 -->
    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in messageList"
          clickable
          :key="item.index"
          :title="item.riskSource"
          @click="toggle(index)"
        >
          <template #right-icon>
            <van-checkbox :name="item.riskSource" ref="checkboxes" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>

    <div class="footer-con">
      <div style="color: #1989fa;">已选择： {{result.length}} 项</div>
      <div>
        <van-button type="info" @click="confirm">确定</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { postHdRiskSource } from "@/service/danger";
export default {
  components: {
    LHeader
  },
  data() {
    return {
      text: "选择风险源",
      source: "",
      messageList: [],
      result: []
    };
  },
  created() {
    this.source = this.$route.params.source
    if(this.source){
      this.getList()
    }
  },
  methods: {
    // 请求数据
    getList(){
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      let formdata = new FormData();
      formdata.append("factor", this.source);
      postHdRiskSource("/riskSource/list", formdata).then(res => {
        this.$toast.clear();
        this.messageList = res.data;
      }).catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    confirm() {
      this.$bus.$emit("sourceAyy",this.result)
      this.$router.go(-1)
    },

    // 请求风险源对应的数据
  }
};
</script>
<style lang="less" scoped>
.footer-con {
  height: 1.333333rem;
  width: 100%;
  background-color: white;
  padding: 0 0.266667rem;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
