<template>
  <div class="max-big-box">
    <!--操作按钮-->
    <div class="top-box">
      <div class="input-box">
        <div class="dropdown-box">
          <input class="search-input" type="text" v-model="inputData" placeholder="请输入物资名称">
        </div>
        <div class="button-box cursor_pointer" @click="getListData">
          <img src="~@/assets/images/icon_27.png">
          <p class="cursor_pointer">查询</p>
        </div>
      </div>
    </div>
    <div class="big-max-box">
      <div class="left-max-box">
        <!--树结构-->
        <el-tree class="max-tree-box TabStrip" :indent="0"
                 ref="dataConfigTree"
                 default-expand-all
                 :expand-on-click-node="false"
                 node-key="id" :highlight-current="false"
                 :data="leftTopData" icon-class="none">
          <div class="tree-box" slot-scope="{ node, data }" @click="clickTree(data,node)">
            <!--<img :class="{'levelImg':node.level==1}" v-if="node.expanded&&node.childNodes[0]"-->
                 <!--src="~@/assets/images/icon_42.png">-->
            <!--<img :class="{'levelImg':node.level==1}" v-if="!node.expanded&&node.childNodes[0]"-->
                 <!--src="~@/assets/images/icon_43.png">-->
            <p class="label-p"
               :class="{'level1':node.level==1,'level2':node.level==2,'level3':node.level==3,'levelColorA':node.checked||node.indeterminate,'levelColorB':!node.checked&&!node.indeterminate}"
            >{{ node.label }}</p>
          </div>
        </el-tree>
      </div>
      <div class="right-max-box" v-show="pageType">
        <div class="eCharts-box">
          <p class="eCharts-p">{{eChartsTitle}}</p>
          <div class="eCharts-min-box" id="eCharts"></div>
        </div>
      </div>
    </div>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { deptTreeselect,materialAnalysis } from '@/api/userApi'
  export default {
    name: "statistics",//统计信息
    components:{
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    props:["itemsData"],
    data () {
      return {
        //展示样式开关
        pageType:false,
        //搜索数据
        inputData:"",
        //所选物品名称
        eChartsTitle:"",
        //树数据
        leftTopData: [],
        // 图表数据
        eChartsData:{
          color:['#91cb76', '#fac859', '#ee6666', '#546fc6'],
          list:[]
        },
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
      }
    },

    created(){

    },
    mounted() {
      this.deptTreeselect();
    },
    methods: {
      //eCharts图表
      eChartsOne(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts'));
        let option = {
          color: self.eChartsData.color,
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
          },
          legend: {
            type: "scroll",
            orient: 'vertical',
            right: '10%',
            top: '10%',
            align: 'left',
            textStyle: {
              color: '#fff'
            },
            selectedMode:false,
            height: 150
          },
          series: [{
            name: '物品名称',
            type: 'pie',
            radius: ['10%', "60%"],
            label: {
              normal: {
                show: true,
                position: 'inner',
                formatter:'{d}%'
              }
            },
            data: self.eChartsData.list
          }]
        };
        myChart.setOption(option);
      },
      //数据列表
      async getListData (){
        let self = this;
        if(!self.inputData){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请输入物资名称",
          };
          this.windowType = !this.windowType;
          return
        }
        let obj={
          materialName:self.inputData,
          organizationId:"",
        };
        let list = self.$refs.dataConfigTree.getCheckedNodes();
        if(list[0]){
          obj.organizationId = list[0].id;
        }
        const { data } = await materialAnalysis(obj);
        if(data.code==200){
          if(!data.data.materialName){
            this.pageType = false;
            this.windowData = {
              type:"3",
              title:"提示",
              text:"未找到相关信息",
            };
            this.windowType = !this.windowType;
            return
          }
          this.pageType = true;
          this.eChartsTitle = data.data.materialName;
          let list = [];
          list.push({
            name:"堪用品",
            value:data.data.articlesProduct,
          });
          list.push({
            name:"新品",
            value:data.data.newProduct,
          });
          list.push({
            name:"待报废",
            value:data.data.oldProduct,
          });
          list.push({
            name:"待修品",
            value:data.data.repairedProduct,
          });
          this.eChartsData.list = list;
          this.eChartsOne();
          this.$forceUpdate();
        }
      },
      //获取组织架构树状数据
      async deptTreeselect () {
        const { data } = await deptTreeselect();
        if(data.code==200){
          this.leftTopData = data.data;
        }
      },
      //数结构点击事件
      clickTree(data,node){
        if(node.checked){
          this.$refs.dataConfigTree.setCheckedKeys([]);
        }else{
          this.$refs.dataConfigTree.setCheckedKeys([node.data.id]);
        }
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        console.log(data)
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
  .top-box
    height:30px;
    display flex
    margin:30px 0
    .input-box
      width:1490px;
      display flex
      margin-left:105px;
      .search-input
        height:28px;
        width:290px;
        border:1px solid $theme;
        padding-left:10px;
      .dropdown-box
        display flex
        color:$color_ff;
        z-index:10;
        .dropdown-left-title
          line-height:30px;
          font-size:$font_14;
        .dropdown-right-box
          font-size:$font_12;
          .dropdown-text
            width:160px;
            height:30px;
            line-height:30px;
            background:url("~@/assets/images/button_15.png");
            background-size:100% 100%;
          .dropdown-for-max
            background:$backColor1;
            border-bottom-right-radius 4px
            border-bottom-left-radius 4px
            p
              width:160px;
              height:30px;
              line-height:30px;
            .color-A
              /*
              background:$backColor2 !important;
              color:$color_ff !important;
              */
              color:$theme !important;
              border-bottom-right-radius 4px
              border-bottom-left-radius 4px
      .button-box
        margin-left:32px;
        display flex
        height:30px;
        width:80px;
        background:url("~@/assets/images/button_03.png");
        background-size:100% 100%;
        img
          display block
          height:20px;
          width:20px;
          margin:5px 6px 0 13px;
        p
          line-height:30px;
          font-size:$font_12;
          color:$color_ff;
  .big-max-box
    margin:0 105px;
    height:100%;
    width:100%;
    display flex
    .left-max-box
      width:219px;
      .max-tree-box
        z-index:1;
        overflow-x:hidden;
        overflow-y:scroll;
        white-space: nowrap;
        .tree-box
          display flex
          img
            display block
            width:20px;
            height:20px;
          p
            margin-left:8px;
    .right-max-box
      width:1490px;
      .eCharts-box
        margin-left:204px;
        width:699px;
        height:448px;
        background:url("~@/assets/images/min_back_01.png");
        background-size:100% 100%;
        overflow hidden
        .eCharts-p
          line-height:27px;
          text-align left
          color:$color_ff;
          font-size:$font_16;
          margin:16px 0 0 50px;
        .eCharts-min-box
          width:699px;
          height:396px;
  //树状图
  .el-tree
    background rgba(0,0,0,0) !important
  /*多层级样式*/
  .levelImg{
    margin-top: 7px;
  }
  .level1{
    font-size:$font_17;
    color:$theme !important;
    height:34px;
    line-height 34px
  }
  .level2{
    font-size:$font_14;
    height:22px;
    line-height 22px
  }
  .level3{
    font-size:$font_12;
    height:20px;
    line-height 20px
  }
  .levelColorA{
    color:$color_ff;
  }
  .levelColorB{
    color:$color_91;
  }
  /*层级指引线*/
  .tree-container /deep/ .el-tree > .el-tree-node :after {
    border-top: none;
  }
  .el-tree /deep/ .el-tree-node .el-tree-node {
    position: relative;
    padding-left: 16px !important;
  }
  .el-tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }

  .tree-container { //树的parent，样式自定
  }
  .el-tree /deep/ .el-tree-node__content .el-tree-node__expand-icon{
    padding:1px !important
  }
  //修改悬浮样式
  .el-tree /deep/ .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(0,0,0,0) !important;
  }
  .el-tree /deep/ .el-tree-node__content:hover {    background-color: rgba(0,0,0,0);
  }
  .el-tree /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: rgba(0,0,0,0);
  }
</style>
