window.vueObj = new Vue({
  el: '#org_body',
  data: {
    options: [{
      value: 1,
      label: 1
    }, {
      value: 2,
      label: 2
    }, {
      value: 3,
      label: 3
    }, {
      value: 4,
      label: 4
    }, {
      value: 5,
      label: 5
    }],
    verticalShow: false, //文字纵向展示
    verticalShow_set: false,
    drawer: false,
    seachDate: '',
    verticalLayout: true, //布局
    verticalLayout_set: true, //显示设置中的布局
    cardSize: 'big', //卡片大小
    cardSize_set: 'big',
    showLevelCount: 3, //展示级数
    showLevelCount_set: 3,
    topOrgan: '',
    topOrganId: '',
    checkAll: false,
    checkedOrgan: [],
    organTypes: ['实体组织', '模块', '关键角色型岗位', '项目型组织', '全资公司组织', '合资公司', '委员会组织'],
    isIndeterminate: true,
    showThumbnail: false,
    scaleNum: 100,
    issetflag: true, //标识，若是显示设置中的文字纵向展示则不触发监听
    ochart: '',
  },
  watch: {
    verticalShow: function (val) {
      if (this.issetflag) {
        this.verticalShow_set = val
        this.initData(this.verticalLayout, this.cardSize, parseInt(this.showLevelCount), this.verticalShow)
      }
    },
  },
  methods: {
    openMoreInfo: function () {
      this.drawer = true
    },
    //获取当前日期
    getDate: function () {
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取当前年
      var month = myDate.getMonth() + 1; //获取当前月
      var date = myDate.getDate(); //获取当前日
      this.seachDate = year + '-' + month + '-' + date
    },
    //点击下拉按钮
    xialaClick: function () {
      $('#org_xiala_icon').toggleClass('org_xiala_icon')
      $('.org_chart_xiala').toggle()
    },
    //导出pdf和ppt的点击事件
    exportClick: function (item) {
      if (item == 'pdf') {
        this.covertSVG2Image('组织架构图', 'png', 'pdf')
      } else if (item == 'ppt') {
        this.ochart.downPPT()
      } else if (item == 'png') {
        this.covertSVG2Image('组织架构图', 'png', 'image')
      }
      $('.org_chart_xiala').hide()
    },
    //点击弹出F7弹框
    ejectClick: function () {
      window.KDmodel.invoke('f7click', '')
    },
    //改变布局
    changeLayout: function (val, flag) {
      if (flag == 0) {
        if (val == !this.verticalLayout) {
          if (val) {
            this.verticalLayout = true
            this.verticalLayout_set = true
          } else {
            this.verticalLayout = false
            this.verticalLayout_set = false
          }
          this.initData(this.verticalLayout, this.cardSize, parseInt(this.showLevelCount), this.verticalShow)
        }
      } else {
        if (val == !this.verticalLayout_set) {
          if (val) {
            this.verticalLayout_set = true
          } else {
            this.verticalLayout_set = false
          }
        }
      }

    },
    //改变卡片大小
    changeCardsize: function (size, flag) {
      if (flag == '0') {
        if (size != this.cardSize) {
          this.cardSize = size
          this.cardSize_set = size
          this.initData(this.verticalLayout, this.cardSize, parseInt(this.showLevelCount), this.verticalShow)
        }
      } else {
        if (size != this.cardSize_set) {
          this.cardSize_set = size
        }
      }
    },
    //展示层级下拉点击事件
    showLevelClick: function (flag) {
      if (flag == '0') {
        $('#org_show_level').toggleClass('org_xiala_icon')
        $('.showlevel_items').toggle()
      } else {
        $('#org_show_level_set').toggleClass('org_xiala_icon')
        $('.showlevel_items_set').toggle()
      }
    },
    //选中级数
    clickShowLevelCount: function (e, flag) {
      var value = $(e.target).text()
      if (flag == '0') {
        this.showLevelCount = value
        this.showLevelCount_set = value
        $('.showlevel_items').hide()
        this.initData(this.verticalLayout, this.cardSize, parseInt(this.showLevelCount), this.verticalShow)
      } else {
        this.showLevelCount_set = value
        $('.showlevel_items_set').hide()
      }

    },
    //组织类型多选框
    handleCheckAllChange(val) {
      this.checkedOrgan = val ? organTypes : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      var checkedCount = value.length;
      this.checkAll = checkedCount === this.organTypes.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.organTypes.length;
    },
    //更多设置中的确认点击事件
    confirmDrawer: function () {
      this.issetflag = false
      this.verticalLayout = this.verticalLayout_set
      this.cardSize = this.cardSize_set
      this.showLevelCount = this.showLevelCount_set
      this.verticalShow = this.verticalShow_set
      this.drawer = false
      this.initData(this.verticalLayout_set, this.cardSize_set, parseInt(this.showLevelCount_set), this.verticalShow_set)
      this.issetflag = true

      var params = {
        queryDate: this.seachDate,
        orgTop: this.topOrganId,
        orgType: '' //this.checkedOrgan
      }
      window.KDmodel.invoke('search', params)
    },

    //缩小按钮点击事件
    orgNarrowClick: function () {
      if (this.scaleNum > 50) {
        this.scaleNum -= 25
        this.ochart.zoom(this.scaleNum / 100)
      }
    },
    //放大按钮点击事件
    orgEnlargeClick: function () {
      if (this.scaleNum < 150) {
        this.scaleNum += 25
        this.ochart.zoom(this.scaleNum / 100)
      }
    },
    //缩略图显示点击事件
    showThumbnailClick: function () {
      this.showThumbnail = !this.showThumbnail
      $('.wrapper .thumBox').toggle()

    },
    covertSVG2Image: function (name, type, dowmloadType) {
      var width = $('.svg_wrapper').width()
      var height = $('.svg_wrapper').height()
      var serializer = new XMLSerializer()
      var svg = d3.select(".svg_wrapper>svg")
        .attr("width", width)
        .attr("height", height);
      var source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svg.node())
      var image = new Image()
      image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
      var canvas = document.createElement('canvas')
      canvas.width = width
      canvas.height = height
      var context = canvas.getContext('2d')
      context.fillStyle = '#fff'
      context.fillRect(0, 0, 1200, 570)
      //
      //var image2 = new Image(37, 40);

      //设置图片跨域访问
      //image2.setAttribute('crossOrigin', 'anonymous');
      //image2.crossOrigin= 'anonymous';
      image.onload = function () {
        //image2.onload = function(){
        context.drawImage(image, 0, 0);
        // image2.setAttribute('crossOrigin', 'anonymous');
        // context.drawImage(image2, 0, 0);
        if (dowmloadType == 'image') {
          var a = document.createElement('a')
          a.download = `${name}.${type}`
          a.href = canvas.toDataURL(`image/${type}`)
          a.click()
        } else {
          var imgData = canvas.toDataURL('image/png');

          //初始化pdf，设置相应格式
          var doc = new jsPDF("p", "mm", "a4");

          //这里设置的是a4纸张尺寸
          doc.addImage(imgData, 'JPEG', 0, 0, 120, 40);

          //输出保存命名为content的pdf
          doc.save(name + '.pdf');
        }

        // }
      };
      // image2.src = "https://www.mlcjq.com/eg.png";
    },
    //初始化事件
    initData: function (layout, cardsize, showlevel, textvertical) {
      var nodeBox = {},
        cardModel = {}
      if (cardsize == 'big') {
        nodeBox = {
            width: 150,
            height: 50,
            spaceX: 16,
            spaceY: 30
          },
          cardModel = {
            normal: [
              //添加文本
              {
                tag: "text",
                x: 5,
                y: 14,
                text: data => {
                  return data["name"]
                },
                fontSize: 14,
                lineNums: 2,
                fill: "#409EFF",
              },
              {
                tag: "text",
                x: 5,
                y: 45,
                text: data => {
                  return "下级：" + data["directOrgNum"]
                },
                fontSize: 10,
                fill: "#555"
              },
              {
                tag: "text",
                x: 80,
                y: 45,
                text: data => {
                  return "实体：" + data["directEntityNum"]
                },
                fill: "#555",
                fontSize: 10
              }
            ]
          }
      } else {
        nodeBox = {
            width: 120,
            height: 40,
            spaceX: 16,
            spaceY: 30
          },
          cardModel = {
            normal: [
              //添加文本
              {
                tag: "text",
                x: 0,
                y: 14,
                text: data => {
                  return data["name"]
                },
                fontSize: 14,
                lineNums: 2,
                fill: "#38f"
              }
            ]
          }
      }

      if (textvertical) {
        nodeBox = {
            width: 20,
            height: 120,
            spaceX: 16,
            spaceY: 30
          },
          cardModel = {
            normal: [{
              tag: "text",
              x: "50",
              y: 0,
              text: data => {
                return data["name"]
              },
              fontSize: 14,
              lineNums: 1,
              wMode: "tb",
              fill: "#38f",
              bind: "drag"
            }]
          }
      }
      this.ochart = kdorg.init({
        dom: document.getElementById("wrapper"),
        data: window.resultData.data, //window.resultData.data  模拟数据： ldata:多数据  sdata:短数据 rdata：随机数据
        config: {
          isVertical: layout,
          level: showlevel,
          nodeBox: nodeBox
        },
        cardModel: cardModel
      })
    }
  },
  mounted: function () {
    document.addEventListener('click', function (e) {
      var e = e || window.event;
      $('.showlevel_items').hide()
      var _con = $('.org_chart_xiala') //获取你的目标元素
      if (!_con.is(e.target) && _con.has(e.target).length === 0) {
        $('#org_xiala_icon').removeClass('org_xiala_icon')
        $('.org_chart_xiala').hide()
      }
    })
    this.getDate()
    this.initData(this.verticalLayout, this.cardSize, parseInt(this.showLevelCount), this.verticalShow)
  }
})