import Vue from 'vue'
import utils from '@/hotent-ui-util.js'
import FormMath from '@/utils/math.js'
import dialog from '@/api/dialogApi.js'
// import CustomQuery from "@/components/eipControl/bus/CustomQuery.js";
import _ from 'lodash'
import req from '@/request'
import app from '@/main.js'

// 表单tr中根据隐藏字段动态合并单元格的指令
Vue.directive('pinyin', {
  // 指令的定义
  componentUpdated: function(el, binding, vnode) {
    let context = vnode.context
    // 防抖
    let debounceGetPinyin = _.debounce((newVal) => {
      // disabled 或者 readonly 时 不需要请求
      if (el.__vue__.disabled || el.__vue__.readonly) return
      req.request({
        url: `${window.context.uc}/base/tools/v1/getPinyin`,
        method: 'GET',
        params: {chinese: newVal, type: `${binding.modifiers.full ? 1 : 0}`}
      }).then(res => {
        if (res.data.state) {
          let modelExp = vnode.data.model.expression.replace(/\[\w+.?\$\w+\]/g, '[' + binding.arg + ']')
          utils.setValueByPath(context, modelExp, res.data.value)
          app.$nextTick(() => {
            app.$validator.validate()
          })
        }
      }).finally(() => {
      })
    }, 300)

    if (binding.value && binding.value != binding.oldValue) {
      debounceGetPinyin(binding.value)
    }

    // context.$watch(watchExp(), function (newVal, oldVal) {
    // 	if (newVal && newVal != oldVal) {
    // 		debounceGetPinyin(newVal);
    // 	}
    // }, {
    // 	deep: true,
    // 	immediate: false
    // });
  }
})

Vue.directive('permit', {
  componentUpdated: function(el, binding) {
    if (el.tagName !== 'TR') {
      throw 'v-permit指令只能用在tr元素上.'
    }
    if (!binding.value || binding.value.constructor !== Number) {
      throw 'v-permit指令的值只能是大于0的数字.'
    }
    el.removeAttribute('hidden')

    // tr中没有子元素时，删除tr自身
    if (el.cells.length == 0) {
      el.setAttribute('hidden', 'hidden')
    } else if (el.cells.length < binding.value) {
      let colspan = binding.value - el.cells.length + 1
      // 设置colspan实现单元格合并
      el.cells[el.cells.length - 1].setAttribute('colspan', colspan)
    } else if (el.cells.length === binding.value) {
      for (var i = 0, c; c = el.cells[i++];) {
        c.removeAttribute('colspan')
      }
    }
  }
})

// 表单指令，会在表单的vue实例上添加一个map，用以存放数学运算的表达式
Vue.directive('form', {
  bind: function(el, binding, vnode) {
    const inst = vnode.context
    if (inst && !inst.hasOwnProperty('watchMap')) {
      inst['watchMap'] = new Map()
    }
  }
})


// 判断输入框是否作为计算字段，是则添加监听
Vue.directive('express', {
  componentUpdated: function(el, binding, vnode) {
    const inst = vnode.context
    if (!inst.$vnode.data.model) {
      return
    }
    const elAttr = inst.$vnode.componentOptions.propsData.modelExpression
    if (elAttr && !inst._expressInit) {
      inst._expressInit = true
      // 子表每一行数据作用域所在的dom元素
      let {subScopeEl} = utils.getSubScopeElAndIndex(el)
      let subname = null
      let aliasElAttr = null
      // 子表数据，需要找到配置了data-subname的元素
      if (subScopeEl) {
        subname = subScopeEl.dataset['subname']
        if (!subname) {
          throw ('无法获取到当前子表前缀')
        }
        const elAttrAry = elAttr.split('.'), elAttrArySize = elAttrAry.length
        if (elAttrArySize < 1) {
          throw `子表中的数据绑定表达式${elAttr}错误`
        }
        aliasElAttr = `${subname}.${elAttrAry[elAttrArySize - 1]}`
      }
      const p = utils.getOnlineFormInstance(inst)
      if (p.watchMap && (p.watchMap.has(elAttr) || p.watchMap.has(aliasElAttr))) {
        if (!inst._watchers.some((m) => {
          return m.expression === 'inputVal'
        })) {
          inst.$watch('inputVal', function(newVal, oldVal, farewell) {
            if (newVal !== oldVal) {
              const expList = p.watchMap.get(elAttr) || p.watchMap.get(aliasElAttr)
              expList.forEach(item => {
                let result = 0
                const t = item.target
                // 当在子表单行中时，而且不是对子表进行列运算时，判定为子表当前行内运算
                if (subScopeEl && !/.*?\[\{.*?\}\].*?/.test(item.exp)) {
                  // 组件销毁时，不再计算子表单行的公式
                  if (farewell) {
                    return
                  }
                  const index = subScopeEl.dataset['index']
                  if (index === undefined) {
                    throw ('获取不到当前子表行的索引，无法完成计算.')
                  }
                  result = FormMath.calcSubExpValue(item.exp, p, subname, index)
                  p.$emit(t, {result, index})
                } else {
                  result = FormMath.calcExpValue(item.exp, p)
                  p.$emit(t, {result})
                }
              })
            }
          }, {immediate: true})
        }
      }
    }
  }
})

// 自定义对话框 v-auth-set-event
Vue.directive('auth-set-event', {
  bind: function(el, bindings, vnode) {
    const htAuthSetEvent = el.getAttribute('attr')
    if (!htAuthSetEvent) return
    var defaultPermissionList = []
    dialog.getPermissionList(result => {
      defaultPermissionList = result
    })
    /**
     * 设置设置权限。
     * ownerNameJson 格式。
     * [{type:"everyone",title:"所有人"},{type:"user",title:"用户",id:"1,2",name:"ray,tom"}]
     */
    const setAuth = function() {
      var conf = {
        right: ownerNameJson,
        permissionList: defaultPermissionList
      }
      //授权选择器
      vnode.child.AuthSettingShow(conf)
    }
    var ownerNameJson = []
    var initData = bindings.value
    if (initData) {
      ownerNameJson = JSON.parse(initData)

      // showLable(ownerNameJson);
    }
    //对话框初始化监听
    el.childNodes[2].onclick = function() {
      setAuth()
    }
  }
})

Vue.directive('parseTemplete', {
  bind: function(el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: ' + s(binding.name) + '<br>' +
      'value: ' + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: ' + s(binding.arg) + '<br>' +
      'modifiers: ' + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

Vue.directive('alsCharts', {
  inserted(el, binding, vnode) {
    const inst = binding.context

    function init(data) {
      if (!(data.value && data.value !== true && data.value.constructor == Array && data.value[0].legend)) {
        return
      }
      var options = data.value[0]
      var height = getDivHeight(el) - 35
      var wrap = $('<div></div>').css({
        width: '100%',
        height: height
      })
      $(el).css({
        display: 'block',
        width: '100%',
        height: height
      })
      // const echarts = require('echarts');
      // var myChart = echarts.init(el);
      // inst.$root.$on("resize", () => {
      //     myChart.resize();//监测图表自适应
      // });
      var option = {
        title: {
          text: options.name,
          subtext: options.subtext,
          top: 12
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          x: 'right',
          data: options.legend
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          y: 'center',
          right: 20,
          itemGap: 13,
          feature: {
            mark: {show: true},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true},
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {
              show: true,
              readOnly: true,
              optionToContent: function(opt) {
                //console.info(opt);
                var axisData = opt.xAxis[0].data
                var series = opt.series
                var tdHeaders = '<th></th>' //表头
                series.forEach(function(item) {
                  tdHeaders += '<th style="padding: 8px 10px;background-color:#F5F5F5;">' + item.name + '</th>' //组装表头
                })
                var table = '<div><table cellspacing="20" cellspacing="0"  style="text-align:center;border:1px solid black;border-collapse:collapse;" rules="all"><tbody><tr>' + tdHeaders + '</tr>'
                var tdBodys = '' //数据
                var colors = ['#FFFFFF', '#F5F5F5']
                for (let i = 0, l = axisData.length; i < l; i++) {
                  for (let j = 0; j < series.length; j++) {
                    tdBodys += '<td>' + series[j].data[i] + '</td>' //组装表数据
                  }
                  var curColor = colors[i % 2]
                  table += '<tr style="background-color:' + curColor + '"><td style="padding: 8px 10px;">' + axisData[i] + '</td>' + tdBodys + '</tr>'
                  tdBodys = ''
                }
                table += '</tbody></table></div>'
                return table
              }
            }
          }
        },
        calculable: true,
        grid: {
          y: 80,
          y2: 40,
          x2: 40
        },
        xAxis: [
          {
            type: 'category',
            data: options.xAxis
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true
          }
        ],
        //x轴数据区域缩放组件--暂时不添加
        /*dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 1,
                end: 35
            },
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 35
            },
        ],*/
        series: options.series
      }
      // myChart.setOption(option, true);
    }

    //获取当前栏目的高度
    function getDivHeight(el) {
      if (el) {
        var pHeight = $(el).parent().height()
        if (pHeight < 1) {
          return getDivHeight($(el).parent())
        }
      } else {
        return 340
      }
      return pHeight
    }

    init(binding)
  }
})

Vue.directive('opinion', {
  bind: function(el, binding, vnode) {
    if (binding.value) {
      while (binding.value.indexOf('\n') != -1) {
        binding.value = binding.value.replace('\n', '<br>')
      }
      el.innerHTML = binding.value
    }
  }
})

Vue.directive('iframetrigger', {
  bind: function(el, binding, vnode) {
    el.onload = function() {
      $('body').trigger('formLoaded')
    }

    $('body').bind('formLoaded', function(e) {
      var frm = $('#frmFrame')[0]
      window.addEventListener('message', function(e) {
        if (e.data && e.data.constructor === Object && e.data.type === 'height') {
          frm.style.visibility = 'hidden'
          // 提前还原高度
          frm.setAttribute('height', 'auto')
          setTimeout(function() {
            frm.setAttribute('height', e.data.height)
            frm.style.visibility = 'visible'
            $(frm).trigger('mouseover')
          }, 0)
        }
      })
    })
  }
})

Vue.directive('methodauth', {
  bind: function(el, binding, vnode) {
    let allMethod = window.sessionStorage.allMethod
    let methodAuth = window.sessionStorage.methodAuth
    let elAuth = binding.expression
    let allMethodArray = allMethod.split(',')
    let methodAuthArray = methodAuth.split(',')
    // 无权限则隐藏按钮
    if ($.inArray(elAuth, methodAuthArray) === -1 && $.inArray(elAuth, allMethodArray)) {
      $(el).css('display', 'none')
    }
  }
})

// 注册全局公式计算组件
Vue.directive('formula', {
  bind(el, binding, vnode) {
    let propsData = vnode.context.$options.propsData
    //初始化的时候，如果没有值，则用公式的计算结果来赋值给当前字段
    let oldVal = utils.getValueByPath(propsData, binding.value.bindPath)
    if (propsData && !oldVal) {
      utils.setValueByPath(
        propsData,
        binding.value.bindPath,
        binding.value.value
      )
      vnode.context.$forceUpdate()
    }

  },
  update(el, binding, vnode, oldVnode) {
    if (binding.oldValue.value instanceof Date) {
      if (binding.oldValue.value.getTime() !== binding.value.value.getTime()) {

        utils.setValueByPath(
          vnode.context.$options.propsData,
          binding.value.bindPath,
          binding.value.value
        )
        vnode.context.$forceUpdate()
      }
    } else {
      if (binding.oldValue.value != binding.value.value) {

        utils.setValueByPath(
          vnode.context.$options.propsData,
          binding.value.bindPath,
          binding.value.value
        )
        vnode.context.$forceUpdate()
      }
    }

  }
})

Vue.directive('mapping', {
  update(el, binding, vnode, oldVnode) {
    if (binding.oldValue !== binding.value) {
      Vue.set(el.__vue__, 'inputVal', binding.value)
    }
  }
})

// Vue.directive("dynamic-options", {
//     bind(el, binding, vnode) {
//         let exp = null;
//         if (binding.expression) {
//             exp = utils.parseToJson(binding.expression);
//         }
//         const inst = vnode.context;
//         if (inst) {
//             // 上一次动态选项查询条件
//             inst.preDynamicLoadParams = null;
//             inst.$on("dynamic-options:load", (alias, params) => {
//                 params = params || {};
//                 // 是否执行查询
//                 let doLoad = true;
//                 if (exp && exp.cache) {
//                     // 相比上一次，查询参数是否有变化
//                     const changed = !utils.objectEquals(inst.preDynamicLoadParams, params);
//                     if (changed) {
//                         doLoad = true;
//                         inst.preDynamicLoadParams = params;
//                     }
//                     else {
//                         doLoad = false;
//                     }
//                 }
//                 doLoad && CustomQuery.load(alias, params).then((data) => {
//                     inst.$emit("dynamic-options:update", alias, data);
//                 });
//             });
//         }
//     }
// });
//用于上级值变化后，下级内容需要清空
Vue.directive('watch-parent', {
  update(el, binding, vnode) {
    if (binding.value && binding.value.pid) {
      for (var key in binding.value.pid) {
        const inst = vnode.context
        const instParent = utils.getOnlineFormInstance(inst)
        instParent.$watch(() => {
          return utils.getValueByPath(instParent, binding.value.pid[key], binding.value.index)
        }, function(newVal, oldVal, farewell) {
          if (newVal !== oldVal) {
            inst.inputVal = ''
          }
        })
      }
    }
  }
})
// Vue.directive("related-query", {
//     bind(el, binding, vnode) {
//         const inst = vnode.context;
//         let exp = null;
//         if (binding.expression) {
//             exp = utils.parseToJson(binding.expression);
//         }
//         if (inst) {
//             // 上一次关联查询条件（一个组件可以绑定多个关联查询，）
//             inst.preRelatedQueryParams = {};
//             inst.$on("related-query:load", (alias, params, resultBind) => {
//                 params = params || {};
//                 // 是否执行查询
//                 let doLoad = true;
//                 if (exp && exp.cache) {
//                     // 相比上一次，查询参数是否有变化
//                     const changed = !utils.objectEquals(inst.preRelatedQueryParams[alias], params);
//                     if (changed) {
//                         doLoad = true;
//                         inst.preRelatedQueryParams[alias] = params;
//                     }
//                     else {
//                         doLoad = false;
//                     }
//                 }
//                 doLoad && CustomQuery.load(alias, params).then((data) => {
//                     if (data && data.constructor == Array && data.length > 0 && resultBind && resultBind.constructor == Object) {
//                         // 获取当前控件是否在子表某行中
//                         let { index } = utils.getSubScopeElAndIndex(el);

//                         const pInst = utils.getOnlineFormInstance(inst);
//                         // 关联查询值回绑时，默认获取返回的第一条记录
//                         const singleData = data[0];
//                         Object.keys(resultBind).forEach(k => {
//                             const path = resultBind[k];
//                             // 主表
//                             if (index == null) {
//                                 utils.setValueByPath(pInst, path, singleData[k]);
//                             }
//                             // 子表
//                             else {
//                                 utils.setValueByPath(pInst, path, singleData[k], index);
//                             }
//                         });
//                     }
//                 });
//             });
//         }
//     }
// });
//表格横向拖拽
Vue.directive('tableDrag', {
  inserted: function(el) {
    const currentElement = el.getElementsByClassName('el-table__body-wrapper')[0] || el
    const tagNames = ['span', 'input', 'textarea', 'aside']
    if (currentElement) {
      currentElement.onmousedown = function(event) {
        const currentTagNames = event.target.tagName.toLowerCase()
        if (tagNames.includes(currentTagNames)) return
        currentElement.style.cursor = 'grab'
        let gapX = event.clientX
        let startX = el.scrollLeft
        document.onmousemove = function(e) {
          let x = e.clientX - gapX
          currentElement.scrollLeft = startX - x
          return false
        }
        document.onmouseup = function(e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
})

//用于控制子表或孙表单行permission
Vue.directive('permission-line', {
  bind(el, binding, vnode) {
    if (binding.value) {
      const inst = vnode.context
      let idxObj = utils.getSubScopeElAndIndex(el)
      let paths = binding.value.split('_')
      let boType = paths[0]
      let idStr = binding.value + '_' + idxObj.index
      //孙表时，获取孙表所属子表序号
      if (boType == 'sun' && idxObj.subScopeEl) {
        const subIdxObj = utils.getSubScopeElAndIndex(idxObj.subScopeEl.parentElement)
        idStr = binding.value + '_' + subIdxObj.index + '_' + idxObj.index
      }
      if (inst.permission && inst.permission['subFields'] && inst.permission['subFields'][idStr]) {
        setTimeout(function() {
          if (el.__vue__) {
            el.__vue__.permission_sub = inst.permission['subFields'][idStr]
            el.__vue__.sub_work = true
          }
        }, 0)
      }
    }
  },
  update(el, binding, vnode) {
    if (binding.value) {
      const inst = vnode.context
      let idxObj = utils.getSubScopeElAndIndex(el)
      let paths = binding.value.split('_')
      let boType = paths[0]
      let idStr = binding.value + '_' + idxObj.index
      //孙表时，获取孙表所属子表序号
      if (boType === 'sun' && idxObj.subScopeEl) {
        const subIdxObj = utils.getSubScopeElAndIndex(idxObj.subScopeEl.parentElement)
        idStr = binding.value + '_' + subIdxObj.index + '_' + idxObj.index
      }
      if (inst.permission && inst.permission['subFields'] && inst.permission['subFields'][idStr]) {
        setTimeout(function() {
          if (el.__vue__) {
            el.__vue__.permission_sub = inst.permission['subFields'][idStr]
          }
        }, 0)
      }
    }
  }

})
//用于控制子表或孙表单行permission lable标签
Vue.directive('permission-line-lable', {
  bind(el, binding, vnode) {
    if (binding.value) {
      const inst = vnode.context
      let idxObj = utils.getSubScopeElAndIndex(el)
      let paths = binding.value.split('_')
      let boType = paths[0]
      let idStr = binding.value + '_' + idxObj.index
      //孙表时，获取孙表所属子表序号
      if (boType == 'sun' && idxObj.subScopeEl) {
        const subIdxObj = utils.getSubScopeElAndIndex(idxObj.subScopeEl.parentElement)
        idStr = binding.value + '_' + subIdxObj.index + '_' + idxObj.index
      }
      if (inst.permission && inst.permission['subFields'] && inst.permission['subFields'][idStr]) {
        setTimeout(function() {
          el.parentElement.hidden = inst.permission['subFields'][idStr] == 'n' ? true : false
        }, 0)
      }
    }
  },
  update(el, binding, vnode) {
    if (binding.value) {
      const inst = vnode.context
      let idxObj = utils.getSubScopeElAndIndex(el)
      let paths = binding.value.split('_')
      let boType = paths[0]
      let idStr = binding.value + '_' + idxObj.index
      //孙表时，获取孙表所属子表序号
      if (boType == 'sun' && idxObj.subScopeEl) {
        const subIdxObj = utils.getSubScopeElAndIndex(idxObj.subScopeEl.parentElement)
        idStr = binding.value + '_' + subIdxObj.index + '_' + idxObj.index
      }
      if (inst.permission && inst.permission['subFields'] && inst.permission['subFields'][idStr]) {
        setTimeout(function() {
          el.parentElement.hidden = inst.permission['subFields'][idStr] == 'n' ? true : false
        }, 0)
      }
    }
  }

})

// 用于点击指定区域外执行某功能
Vue.directive('click-outside', {
  bind(el, bindings, vnode) {
    el.handler = function(e) {
      if (!el.contains(e.target)) {
        let method = bindings.expression
        vnode.context[method]()
      }
    }
    document.addEventListener('click', el.handler)
  },
  unbind(el) { // 可用于解除事件绑定
    document.removeEventListener('click', el.handler)
  }
})
var directive = {}

export default directive