import {mapGetters} from "vuex"

export default {
  data() {
    return {
      options: {},
      optionsSetUp: {},
      optionsPosition: {},
      optionsData: {},
      id: (new Date()).getTime(),
      customState: {},
      // value 历史变更内容，页面加载发送多次重复提交信息
      valueChangeArr:[]
    }
  },
  props: {
    config: Object,
    value: Object,
    ispreview: Boolean
  },
  watch: {
    /**
     * 监听组件参数
     */
    value: {
      handler(val) {
        let that = this;
        if(that.valueChangeArr.indexOf(val) != -1){
          return;
        }
        that.options = val;
        that.optionsSetUp = val.setup;
        that.optionsPosition = val.position;
        that.valueChangeArr.push(val);
        that.reloadPage();
      },
      deep: true
    },

    /**
     * 监听组件状态数据
     */
    getLastUpdateEvent: {
      handler(val) {
        if(!val){
          return;
        }
        let that = this;
        let key = val.split('###')[0];
        let obj = that.getCustomState[key];
        let eventIds = that.subEvent();
        if(eventIds && typeof [] === 'object' && eventIds.length > 0){
          if(eventIds.indexOf(key) != -1){
            that.getCustomEventData(key,obj);
          }
        }
      },
      deep: true
    }
  },
  mounted() {
    let that = this;
    that.options = that.value;
    that.optionsSetUp = that.value.setup;
    that.optionsPosition = that.value.position;
    // 挂在完 执行页面初始化函数
    that.pageInit();
  },
  computed: {
    ...mapGetters(['getCustomState','getLastUpdateEventId']),

    /**
     * 最后更新的事件id
     * @returns {number}
     */
    getLastUpdateEvent(){
      return this.getLastUpdateEventId
    },
    // 计算样式
    getStyle() {
      let that = this;
      // 位置信息
      const position = this.optionsPosition;
      let css = {};
      let baseCss = {}
      if (position && Object.keys(position).length > 0) {
        baseCss = {
          position: this.ispreview ? "absolute" : "static",
          width: position.width + "px",
          height: position.height + "px",
          left: position.left + "px",
          top: position.top + "px"
        };
      }

      // 属性信息
      const setup = that.optionsSetUp;
      const config = that.config;

      const items = [];
      if (config && config.setup) {
        let setupArr = config.setup;
        setupArr.forEach(function (v) {
          if (Array.isArray(v)) {
            v.forEach(function (v1) {
              if (v1.list) {
                v1.list.forEach(function (v2) {
                  items.push(v2);
                })
              }
            })
          } else {
            items.push(v);
          }
        });
      }

      for (const key in setup) {
        let arr = items.filter(function (v) {
          if (v.name == key) {
            return v
          }
        })
        if (arr && arr.length == 1) {
          let val = setup[key];
          // css模板
          let cssTemplate = arr[0].cssTemplate;
          // css 分组
          let cssGroup = arr[0].cssGroup;
          if (cssTemplate) {
            let split = cssTemplate.replace("%s", val).split(":");
            if (cssGroup) {
              if (!css[cssGroup]) {
                css[cssGroup] = baseCss;
              }
              css[cssGroup][split[0]] = split[1];
            } else {
              if (Object.keys(css).length == 0) {
                css = baseCss;
              }
              css[split[0]] = split[1];
            }
          }
        }
      }
      return css;
    }
  },
  methods: {
    /**
     * 页面初始化
     */
    pageInit() {
      console.log("页面初始化，如需自定义，需要定义函数：pageInit()")
    },

    /**
     * 页面重新加载
     */
    reloadPage() {
      console.log("页面重新加载函数，如需自定义，需要定义函数：reloadPage()")
    },

    /**
     * 订阅事件
     */
    subEvent(){
      console.log("页面订阅事件id集合，如需自定义，需要定义函数：subEvent()")
      return [];
    },

    /**
     * 获取订阅事件的数据
     * @param eventId 事件Id
     * @param data 数据
     */
    getCustomEventData(eventId, data) {
      console.log("组件状态订阅事件数据,如需自定义，需要定义函数：getCustomEventData(事件Id，事件数据)")
      console.log(`事件ID:${eventId},事件数据：`,JSON.stringify(data));
    },

    /**
     * 推送事件数据
     */
    pushEventData(evebtId, obj) {
      let data = {
        eventId: evebtId,
        data: obj
      }
      this.$store.dispatch('customEventAction', data);
    },

    /**
     * 字符串转换函数
     */
    toFunc(funStr){
      return new Function(`return ${funStr}`)();
    },

    /**
     * 执行js字符串函数，返回Boolean值，错误返回false
     * @param funStr js函数字符串
     * @returns {*}
     */
    runJSFunc(funStr, params) {
      try {
        var dom = this.toFunc(funStr);
        return dom && dom(params);
      } catch (e) {
        console.error(e)
      }
      return undefined;
    },

    /**
     * 获取配置项的默认值
     */
    getOptionDefaultValue(name) {
      let that = this;
      if (!name) {
        return undefined;
      }

      let arr = that.config.setup.filter(function (v) {
        if (v.name == name) {
          return v
        }
      })
      if (arr && arr.length == 1) {
        return arr[0].value;
      }

      return undefined;
    },

    /**
     * 获取x天后的日期
     * @param day
     * @returns {string} yyyy-MM-mm
     */
    getOffsetDate(day) {
      var doHandMonth = (month) => {
        var m = month
        if (month.toString().length == 1) {
          m = "0" + month
        }
        return m
      }
      var today = new Date()
      var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday)
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = doHandMonth(tMonth + 1)
      tDate = doHandMonth(tDate)
      return tYear + "-" + tMonth + "-" + tDate
    },

    /**
     * 获取URL所有的参数
     */
    getUrlParam() {
      let url = window.location.href;
      let arrObj = url.split("?");
      let params = Object.create(null)
      if (arrObj.length > 1) {
        arrObj = arrObj[1].split("&");
        arrObj.forEach(item => {
          item = item.split("=");
          params[item[0]] = item[1]
        })
      }
      return params;
    },
    /**
     * 请求接口数据
     * @param params 扩展参数
     * @param dynamicDataKey 动态数据源，一般是：dynamicData
     * @param staticDataType 静态数据源类型，一般是：staticData
     * @returns {Promise<unknown>}
     */
    handlerData(params,dynamicDataKey,staticDataType) {
      let that = this;
      const optionsData = this.value.data;
      if(!staticDataType){
        staticDataType = 'staticData';
      }
      if(!dynamicDataKey){
        dynamicDataKey = 'dynamicData';
      }

      // 返回Promise对象
      return new Promise(async (resolve) => {
        if (optionsData.dataType == staticDataType) {
          // 返回静态数据
          let staticData = {
            code: 0,
            success: true,
            data: optionsData[staticDataType]
          }
          resolve(staticData);
        } else {
          // 获取动态数据 start
          if (optionsData[dynamicDataKey]) {
            let contextData = optionsData[dynamicDataKey].contextData;
            // 合并url参数
            let paramsObj = that.getUrlParam();
            if (paramsObj) {
              for (let key of Object.keys(paramsObj)) {
                let paramVal = paramsObj[key];
                contextData[key] = paramVal;
              }
            }
            // 合并自定义的参数
            if (params) {
              for (let key of Object.keys(params)) {
                let paramVal = params[key];
                if(typeof paramVal == 'object'){
                  paramVal = JSON.stringify(paramVal);
                }
                contextData[key] = paramVal;
              }
            }
            // 请求接口
            that.queryEchartsData(
              optionsData[dynamicDataKey],
              optionsData.refreshTime,
              that.optionsSetup,
              optionsData.isRefresh
            ).then(res => {
              let data = res[0];
              if (data && (data.code == 200 || data.code == 0)) {
                resolve(data);
              } else if (data && data.code == 401) {
                let msg = 'token过期，请重新登录！';
                let data401 = {
                  code: 401,
                  success: false,
                  msg:msg
                }
                resolve(data401);
                console.log(msg, data);
              }
            });
          }
          // 获取动态数据 end
        }
      }).catch(e => {
        console.error("数据请求异常：", e);
      })
    },
  }
}