<template>
  <div class="app-container main-bg">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入节点名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container" STYLE="border: #1c84c6;background: #3A71A8">
            <el-tree
              node-key="code"
              :default-expanded-keys="['220000000000','220100000000','220200000000']"
              :filter-node-method="filterNode"
              accordion
              ref="tree"
              highlight-current
              lazy
              :load="loadNode"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
            </el-tree>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">

        <el-main style="height: 910px;border: 20px; border-color:  #1c84c6;">
          <div>对象表展示（单选）</div>
          <el-input placeholder="地市编码" v-model="dsbm" clearable :value="dsbm" style="width:200px"/>
          <el-input placeholder="地市名称" clearable :value="dsmc" style="width:200px"/>
          <el-button @click="handleds">地市</el-button>
          <BizTableEmbed style="width:200px" @changeData="changeDataA" :value="va1" visibleidx="2" dictType="qx" outType="0" para1="2920ad3b0e974419bb04056a99539a01" seltype="index"></BizTableEmbed>
          <div>对象表展示（多选）</div>
          <el-input placeholder="区县编码" clearable :value="qxbm" style="width:200px"/>
          <el-input placeholder="区县名称" clearable :value="qxmc" style="width:200px"/>
          <el-button @click="handleqx">区县</el-button>
          <BizTableEmbed style="width:200px" @changeData="changeDataB" :value="va2" visibleidx="2" dictType="qx" outType="0" para1="2920ad3b0e974419bb04056a99539a01" seltype="select"></BizTableEmbed>
          <div>
            <div class="tjtitle">统计示例：区划分布</div>
            <div id="exam" style="width: 600px; height:300px"></div>
          </div>
        </el-main>
      </el-col>
    </el-row>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
import {gettreedata, objtableList,getstatisticaldata} from "@/api/system/dict/type";
import * as echarts from "echarts";
require("echarts/theme/macarons"); //引入主题
export default {
  name: 'demo',
  data() {
    return {
      total: 0,
      qxpid:'',
      va1:'',
      va2:'',
      dsbm:'',
      dsmc:'',
      qxbm:'',
      qxmc:'',
      hdsId:'',
      parmar:'',
      myChart:null,
      deptName: undefined,
      defaultProps: {
        childre: 'children',
        label: 'label',
        isLeaf: 'leaf',
      },
    };
  },
  methods: {
     loadNode(node, resolve) {
      if (node.level === 0) {
        return this.getdata(node.level,'level0','db8ad5e5977540d29a4eb7b57c1e2f7b',resolve);
      }
      else
      if (node.level >= 1) {
        return this.getdata(node.level,node.data.nextlevel,node.data.id,resolve);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      alert(JSON.stringify(data));
    },
    changeDataA(ret){
      this.va1=ret.code;
      alert(ret.name);
    },
    changeDataB(ret){
      this.va2=ret[0].code;
      alert(ret[0].name);
    }
    ,
    handleds() {
      var para={};
      para.dictType="khxx";//字典类型 见数据库过程selecttable 参数 dicttype 定义
      para.outType="0";  //传出类型 见数据库过程selecttable 参数 0 选择 1 翻译
      para.seltype="index"; //选择方式 "index" 单选 选择方式 "select" 多选
      para.para1="adfd95a4b3634b58b0cf3b8c67b18a29" //para1-para5 查询参数，使用规则selecttable依据业务表查询条件而定。
      this.$selywdata(para, (para) => {
        this.$alert('选择值：'+para.name);
        this.dsbm=para.code;
        this.dsmc=para.name;
        this.qxpid=para.id;
      }, (para) => {
        this.$alert(para);
      })
    },
    async getdata(level,cs2,cs3,resolve)
    {

      var para={};
      para.dictType="menu";
      para.outType='0';
      para.para1=level;
      para.para2=cs2;
      para.para3=cs3;
      let data  =await gettreedata(para);
      var treedata=[];
      if (data.code == 200) {
        for (let i = 0; i <data.data[0].recordCount ; i++) {
          treedata[i]={};
          for (let j = 0; j <data.data[0].columnLabelList.length ; j++) {
            treedata[i][data.data[0].columnLabelList[j].toLowerCase()]=data.data[0].rowList[i][j];
          }
        };
        treedata.forEach((item) => {
          item.isleaf == '0' ? (item.leaf = false) : (item.leaf = true)
        })
        resolve(treedata);

      }
    },
    handleqx() {
      var para={};
      para.dictType="qx";
      para.outType="0";
      para.seltype="select";
      para.para1=this.qxpid;
      this.$selywdata(para, (para) => {
        this.qxbm=para[0].code;
        this.qxmc=para[0].name;
        this.$alert('选择值：'+para[0].name);
      }, (para) => {
        this.$alert(para);
      })
    },
    testCharts(data,cate) {
      this.myChart = echarts.init(document.getElementById("exam"));
      let category =cate;
      let barData = data;
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          width: "94%",
          height: "94%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#db1e0c",
            },
          },
        },
        yAxis: {
          type: "category",
          data: category,
          splitLine: {show: false},
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 15,
          },
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#03144c",
              fontSize: 16,
            },
          },
        },
        series: [
          {
            name: "数量",
            type: "bar",

            data: barData,
            barWidth: 26,
            barGap: 20,
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "right",
                offset: [5, -2],
                textStyle: {
                  color: "#fff",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 13,
              },
              normal: {
                barBorderRadius: 13,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {offset: 0, color: "#e639c9"},
                  {offset: 1, color: "#3842f8"},
                ]),
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    async updatetestCharts() {
      var para={};
      para.dictType="region";
      para.outType='0';
      let retdata = await getstatisticaldata(para);
      if (retdata.code == 200) {
        var data=  this.$DBRetToObj(retdata.data);
        var barData=[];
        for (let i = 0; i <data.length-1 ; i++) {
          barData[i]=data[i].data[0].jls;
        }
        this.testCharts(barData,data[data.length-1].data[0].f1.split(","));
      }
    },
  },
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
 created() {
   this.va1='fb6c4ed974924cbf8a11bd42dffc6611';
   this.va2='i1xbc0xoe2qm346udnqwk5mp4y6cuytj';
 },

  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.testCharts();
    this.updatetestCharts();
    window.onresize = () => {
      this.myChart.resize();
    }
  },
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-input-number {
  width: 100%;
}
.el-select{
  width: 100%;
}
.el-date-editor.el-input{
  width: 100%;
}


.el-tree {
  min-width: 100%;
  display: inline-block;
}
.tree {
  overflow:auto;
  height:100%;

}
.tjtitle {
  width: 50%;
  line-height: 80px;
  font-size: 18px;
}

</style>
