<template>
  <div class="div_page_bg">
    <div class="div_type_layout" style="margin-top: 30px">
      <div class="div_type" @click="onClickBJ">
        <img src="../../assets/images/icon_provider_info_bj.png" width="60px"/>
        <span class="span_value">保洁</span>
      </div>
      <div class="div_type" @click="onClickDTBY">
        <img src="../../assets/images/icon_provider_info_dtby.png" width="60px"/>
        <span class="span_value">电梯保养</span>
      </div>
    </div>
    <div class="div_type_layout">
      <div class="div_type" @click="onClickLH">
        <img src="../../assets/images/icon_provider_info_lh.png" width="60px"/>
        <span class="span_value">绿化</span>
      </div>
      <div class="div_type" @click="onClickQT">
        <img src="../../assets/images/icon_provider_info_qt.png" width="60px"/>
        <span class="span_value">其他</span>
      </div>
    </div>


  </div>
</template>

<script>
  import {getTree} from "../../service/getData";

  export default {
    name: "providerType",
    data(){
      return{
        companyId:localStorage.getItem("companyId"),
        loading: false,
        types:[],
        bj:'',
        dtby:'',
        lh:''
      }
    },
    created(){
      this.getTypes()
    },
    methods:{
      getTypes(){
        let that = this;
        let params = {
          companyId:this.companyId
        }
        that.loading = true;
        getTree(params).then(res => {
          that.loading = false;
          that.types = []
          if (res.status === 200) {
            if (res.data !== null && res.data.length !== 0){
              for (let i = 0; i < res.data.length; i++) {
                for (let j = 0; j < res.data[i].children.length; j++) {
                  for (let k = 0; k < res.data[i].children[j].children.length; k++) {
                    let typeName = res.data[i].children[j].children[k].typeName;
                    switch (typeName) {
                      case "保洁":
                        that.bj = res.data[i].children[j].children[k];
                        break
                      case "电梯保养":
                        that.dtby = res.data[i].children[j].children[k];
                        break
                      case "绿化养护":
                        that.lh = res.data[i].children[j].children[k];
                        break

                    }
                    that.types.push(res.data[i].children[j].children[k]);
                  }
                }
              }
            }
            localStorage.setItem("types",JSON.stringify(that.types));

          } else {
            that.showTips(res.message);
          }

        }).catch(error => {
          that.loading = false;
        })

      },
      onClickBJ(){
        this.$router.push({
          path:'providerInfo',
          query:{
            typeId:this.bj.typeId
          }
        })
      },
      onClickDTBY(){
        this.$router.push({
          path:'providerInfo',
          query:{
            typeId:this.dtby.typeId
          }
        })
      },
      onClickLH(){
        this.$router.push({
          path:'providerInfo',
          query:{
            typeId:this.lh.typeId
          }
        })
      },
      onClickQT(){

      },

    }
  }
</script>

<style scoped>
  .div_page_bg{
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 0 16px 0 0;
    background-color: #ffffff;
  }
  .div_type_layout{
    display: flex;
    flex-direction: row;
  }
  .div_type{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(50vw - 24px);
    height: calc((50vw - 24px) * 1.3);
    background-color: #F4F7F9;
    border-radius: 20px;
    margin: 16px 0 0 16px;
  }
  .span_value{
    color: #333333;
    font-size: 14px;
  }
</style>
