<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">任务发布</p>
        </template>
      </van-nav-bar>
      <div class="main_box">
        <SearchTree
          ref="tree"
          node-key="id"
          :data="treeList"
          :show-checkbox="true"
          :default-expand-all="true"
        ></SearchTree>
        <div style="padding: 16px 0;" v-if="allowCUD">
          <van-row>
            <van-col span="12" align="center">
              <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton" @click="goBack">取<i style="margin-right: 1em;"></i>消</van-button>
            </van-col>
            <van-col span="12" align="center">
              <van-button type="info" native-type="submit" class="submitButton" @click="goAdd">发<i style="margin-right: 1em;"></i>布</van-button>
            </van-col>
          </van-row>
          <div class="clear"></div>
        </div>
      </div>
    </div>
</template>

<script>
import { getTree , distribute } from "@/api/onlineHome/homestead/task";
import {Notify} from "vant";
export default {
  name: "taskRelease",
  data() {
    return {
      treeList: [],
      queryParams:{
        list:'',
        id:''
      }
    };
  },
  created() {
    this.getTree()
    this.queryParams.id = this.$route.query.id;
  },
  computed: {
    allowCUD: function () {
      return this.$store.getters.businessLevel == '2'
    },
  },
  methods: {
    getTree(){
      getTree().then(response => {
        console.log(response)
        for(var i = 0 ; i < response.data.length ; i++){
          this.treeList.push({
            id:response.data[i].id,
            name:response.data[i].label,
            children:[]
          });

          for (var j = 0 ; j < response.data[i].children.length ; j++){
            this.treeList[i].children.push({
              id:response.data[i].children[j].id,
              name:response.data[i].children[j].label,
              children:[]
            })
            for(var z = 0 ; z < response.data[i].children[j].children.length ; z++){
              console.log(response.data[i].children[j].children[z].id)
              this.treeList[i].children[j].children.push({
                id:response.data[i].children[j].children[z].id,
                name:response.data[i].children[j].children[z].label
              })
            }
          }
        }
      });
    },
    goAdd(){
      this.queryParams.list = this.$refs.tree.getCheckedKeys().join(',');
      if(!this.queryParams.list)
      {
        Notify({ type: 'danger', message: '请选择发布目标' });
        return;
      }
      distribute(this.queryParams).then(response => {
        console.log(response);
        this.$toast.success('保存成功');
        setTimeout(function(){
          history.go(-1)
        },2000)
      });
    },
    goBack(){
      window.history.go(-1)
    }
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
</style>
