<template>
  <div class="div_page_bg">
    <div class="div_check_all">
      <van-checkbox v-model="checkedAll" shape="square" @click="onChangeAll">全选</van-checkbox>
    </div>
    <div class="div_content">
      <van-list>
        <!--          <break-rules-check-item v-for="(data,index) in dataList" :checked="checkedList.findIndex(data.index) != -1" :index="data.index" @onChangeItem="onChangeItem"></break-rules-check-item>-->
        <van-checkbox-group v-model="result" ref="checkboxGroup" @change="onCheckAllChange">
          <!--            <break-rules-check-item v-for="(data,index) in dataList" ></break-rules-check-item>-->
          <van-checkbox v-for="(data,index) in breakRulesList" :name="data.id" :key="index" shape="square" style="padding-left: 15px;background-color: white;margin-bottom: 10px">
            <break-rules-item :clickable="false" :data="data"></break-rules-item>
          </van-checkbox>
        </van-checkbox-group>
      </van-list>
    </div>
<!--    <van-button type="primary" size="small" style="position: absolute;top: 0" @click="submit">提交</van-button>-->
  </div>
</template>

<script>
  import BreakRulesCheckItem from "../../../components/crm/breakRulesCheckItem";
  import BreakRulesItem from "../../../components/crm/breakRulesItem";
  import util from "../../../util/util";
  import store from '@/store'
  import {selectDecorationBreakRule} from "../../../service/getData";
  export default {
    name: "breakRulesListCheck",
    components: {BreakRulesItem, BreakRulesCheckItem},
    data(){
      return{
        decorationId:'',
        activeName:'',
        dataList:[],
        checkedList:[],
        result:[],
        checkedAll:false,
        loading:false,
        searchForm:{
          userId:localStorage.getItem("memberId"),
        },
        breakRulesList:[],
      }
    },
    beforeRouteEnter(to, from, next){
      // alert('bbb');
      store.commit('ADD_INCLUDE_COMPONENT','breakRulesListCheck')
      next()
    },
    beforeRouteLeave(to, from, next){
      try {
        EbeiPlugins.cleanNavigationRightButton();
        EbeiPlugins.setBackButtonAction('');
      } catch (e) {

      }
      if(to.path !='/decorateOperate' ){
        from.meta.savedPosition = 0;
        store.commit('REMOVE_INCLUDE_COMPONENT','breakRulesListCheck')
      }
      next()
    },
    activated() {

    },
    created() {
      let that = this;
      this.decorationId = this.$route.query.decorationId;
      this.$toast.loading({
        message: '加载中...',
        duration:0,
        forbidClick: true
      });
      this.selectDecorationBreakRuleJS();
      try {
        EbeiPlugins.setBackButtonAction('goBack()');
        window['goBack'] = () => {
          if (that.breakRulesList.length == 0){
            localStorage.setItem("shouldRefresh",'true');
          }
          that.$router.go(-1)
        }
        EbeiPlugins.setNavigationRightButtons([{'name': '提交', 'script': 'submit()'}]);
        window['submit'] = () => {
          that.submit();
        };
      }
      catch (e) {

      }
    },
    methods:{
      selectDecorationBreakRuleJS(){
        let that = this;
        let path = [this.decorationId];
        selectDecorationBreakRule(path,this.searchForm).then(res => {
          that.$toast.clear();
          that.refreshing = false;
          that.loading = false;
          if (res.status == 200){
            that.breakRulesList = res.data
            // if (that.decorateLists.length == res.data.total) {
            //   that.finished = true;
            // } else {
            //   that.finished = false;
            // }

          } else {
            // that.finished = true;
          }
        }).catch(error => {

        })
      },

      onChangeAll(){

        if (!this.checkedAll){
          this.$refs.checkboxGroup.toggleAll(true);
        } else {
          this.$refs.checkboxGroup.toggleAll(false);
        }
      },
      onCheckAllChange(value){
        if (value.length == this.breakRulesList.length){
          this.checkedAll = true;
        } else {
          this.checkedAll = false;
        }
      },
      submit(){
        console.log(this.result)
        if (this.result.length == 0) {
          this.$toast({
            message: '请选择违规项',
            position: 'bottom'
          })
          return;
        }
        let breakRuleId = '';
        for (let i = 0; i < this.result.length; i++) {
          breakRuleId = this.result[i] + ',';
        }
        breakRuleId = breakRuleId.substr(0,breakRuleId.length-1);
        this.$router.push({
          path:'decorateOperate',
          query:{
            type:5,
            decorationId:this.decorationId,
            breakRuleId:breakRuleId,

          }
        })
      }
      // onChangeAll(value){
      //   this.checkedList = []
      //   if (value){
      //     for (let i = 0; i < this.dataList.length; i++) {
      //       this.checkedList.push(this.dataList[i].index);
      //     }
      //   }
      // },
      // onChangeItem(index,value){
      //   if (value){
      //     if (this.checkedList.findIndex(index)==-1){
      //       this.checkedList.push(index);
      //     }
      //   } else {
      //     let checkedIndex = this.checkedList.findIndex(index);
      //     if (checkedIndex==-1){
      //       this.checkedList.splice(checkedIndex,1);
      //     }
      //   }
      // }

    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100vh;
    background-color: rgba(252,252,252,1);
  }
  .div_check_all{
    display: flex;
    height: 44px;
    padding-left: 15px;
  }

  .div_content{
    height: calc(100vh - 44px);
    overflow-y: auto;
    /*background-color: white;*/
    /*border-radius: 7px;*/
  }
  .div_content_title{
    display: flex;
    flex-direction: row;
    margin: 20px 20px 20px 20px;
    background-color: white;
  }

</style>
