/*
 * @description: bigScreen公共方法
 * @Date: 2023-03-24 17:10:43
 * @Author: xing.heng
 */
// import _ from 'lodash'
import { mapMutations, mapState } from 'vuex'
import { EventBus } from 'data-room-ui/js/utils/eventBus'
import { getChatInfo, getUpdateChartInfo } from '../api/bigScreenApi'
import axiosFormatting from '../../js/utils/httpParamsFormatting'
import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
import cloneDeep from 'lodash/cloneDeep'
import mqtt from 'mqtt'


export default {
  data() {
    return {
      filterList: [],
      treeParentId: 0,
      dataLoading: false
    }
  },
  watch: {
    'config.expression': { // 表达式发生变化
      handler(val) {
        this.getDataByExpression(this.config)
      }
    },
    // 标题发生变化时需要及时更新表达式中的数据集库的字段名
    'config.title': {
      handler(val, oldVal) {
        this.updateDataset({ code: this.config.code, title: val, data: [], oldTitle: oldVal, isChangeTitle: true })
        this.updateComputedDatas({ code: this.config.code, title: val, data: [], oldTitle: oldVal, isChangeTitle: true })
      }
    },
    currentDataset: { // 关联的数据发生变化
      handler(val, old) {
        if (val && Object.keys(val).length && JSON.stringify(val) !== JSON.stringify(old)) {
          this.getDataByExpression(this.config)
        }
      },
      deep: true,
      immediate: true
    },
    currentComputedDatas: { // 关联的数据发生变化
      handler(val, old) {
        if (val && Object.keys(val).length && JSON.stringify(val) !== JSON.stringify(old)) {
          this.getDataByExpression(this.config)
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    ...mapState({
      pageCode: state => state.bigScreen.pageInfo.code,
      customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
      activeCode: state => state.bigScreen.activeCode
      // dataset: state => state.bigScreen.dataset
    }),
    // 所有组件的数据集合
    dataset() {
      return this.$store.state.bigScreen.dataset
    },
    // 所有组件的数据集合
    computedDatas() {
      return this.$store.state.bigScreen.computedDatas
    },
    // 跟当前组件计算表达式关联的组件的数据集合
    currentDataset() {
      const newDataset = {}
      this.config.expressionCodes?.forEach(item => {
        const code = item.split('_')[1]
        for (const key in this.dataset) {
          const objCode = key.split('_')[1]
          if (objCode === code) {
            newDataset[code] = this.dataset[key]
          }
        }
      })
      return newDataset
    },
    // 跟当前组件计算表达式关联的组件的数据集合
    currentComputedDatas() {
      const newDataset = {}
      this.config.expressionCodes?.forEach(item => {
        const code = item.split('_')[1]
        for (const key in this.computedDatas) {
          const objCode = key.split('_')[1]
          if (objCode === code) {
            newDataset[code] = this.computedDatas[key]
          }
        }
      })
      return newDataset
    },
    isPreview() {
      return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
    }
  },

  mounted() {
    if (!['tables', 'flyMap', 'map'].includes(this.config.type)) {
      this.chartInit()
    }
    this.watchCacheData()
  },
  methods: {
    ...mapMutations({
      changeChartConfig: 'bigScreen/changeChartConfig',
      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig',
      updateDataset: 'bigScreen/updateDataset',
      updateComputedDatas: 'bigScreen/updateComputedDatas'
    }),
    /**
     * 初始化组件
     */
    chartInit() {
      let config = this.config
      console.log('this.config: ', this.config);
      // key和code相等，说明是一进来刷新，调用list接口
      if (this.isPreview) {
        // 改变样式
        config = this.changeStyle(config) ? this.changeStyle(config) : config
        // 改变数据
        config = this.changeDataByCode(config)
      } else {
        // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
        // eslint-disable-next-line no-unused-vars
        config = this.changeData(config)
      }
    },
    /**
     * 初始化组件时获取后端返回的数据, 返回数据和当前组件的配置_list
     * @param settingConfig 设置时的配置。不传则为当前组件的配置
     * @returns {Promise<unknown>}
     */
    changeDataByCode(config) {
      let currentPage = 1
      let size = 10
      if (config?.option?.pagination) {
        currentPage = config.option.pagination.currentPage
        size = config.option.pagination.pageSize
      }
      return new Promise((resolve, reject) => {
        config.loading = true
        getChatInfo({
          // innerChartCode: this.pageCode ? config.code : undefined,
          chartCode: config.code,
          current: currentPage,
          pageCode: this.pageCode,
          size: size,
          type: config.type
        }).then(async (res) => {
          config.loading = false
          let _res = cloneDeep(res)
           //--------------------MQTT数据集执行前置条件------------------------------------------------------------
           if (res.data && res.data.datasetType && res.data.datasetType === 'mqtt') {
            res.executionByFrontend = true
          }
          //--------------------MQTT数据集执行前置条件------------------------------------------------------------
          // 如果是http数据集的前端代理，则需要调封装的axios请求
          if (res.executionByFrontend) {
            if (res.data.datasetType === 'mqtt') {
				//2025-2-1屏蔽掉mqtt功能
              // //   _res = this.httpDataFormatting(res, [{"data":new Date().toLocaleString()}])
              // let clientId = "SW-VIEWS" + new Date().getTime();
              // let client = mqtt.connect('ws://broker.emqx.io:8083/mqtt', {
              //   clientId: clientId,
              //   username: 'admin',
              //   password: '123456'
              // })
              // let produceTopic = "STime";
              // client.on('connect', () => {
              //   console.log('mqtt 已经连接成功');

              //   client.subscribe(produceTopic, (data) => {
              //     console.log("mqtt " + produceTopic + " 订阅成功");
              //   })

              // });
              // client.on('message', (topic, data) => {
              //   console.log("mqtt 收到" + topic + "的消息");
              //   // console.log(data.toString());
              //   if (topic === produceTopic) {
              //     // 处理指定主题下的消息
              //     let JsonData = JSON.parse(data.toString());
              //     // console.log(JsonData);
              //     _res = this.httpDataFormatting(res, [{ "data": JsonData.time }])
              //     console.log('mqtt_res: ', _res);
              //     config = this.dataFormatting(config, _res)
              //   }
              // })
              // client.on('reconnect', () => {
              //   console.log("mqtt reconnect");
              // })
              // client.on('offline', () => {
              //   console.log("mqtt offline");
              // })
              // client.on('error', (error) => {
              //   console.log("mqtt error");
              //   console.log(error);
              // })
         
            }
            if (res.data.datasetType === 'http') {
              _res = await axiosFormatting(res.data)
              _res = this.httpDataFormatting(res, _res)
            }

            if (res.data.datasetType === 'js') {
              try {
                const scriptAfterReplacement = res.data.script.replace(/\${(.*?)}/g, (match, p) => {
                  const value = this.config.dataSource?.params[p]
                  if (value === null || value === undefined || value === '') {
                    return "''"
                  } else if (!isNaN(value)) {
                    return value || p
                  } else {
                    return `'${value}' || '${p}'`
                  }
                })
                // eslint-disable-next-line no-new-func
                const scriptMethod = new Function(scriptAfterReplacement)
                _res.data = scriptMethod()
              } catch (error) {
                console.info('JS数据集脚本执行失败', error)
              }
            }
          }
          // 将后端返回的数据保存
          if (_res.success) {
            this.updateDataset({ code: config.code, title: config.title, data: _res?.data })
          }
          config = this.dataFormatting(config, _res)
          this.changeChartConfig(config)
        }).catch((err) => {
          console.info(err)
        }).finally(() => {
          resolve(config)
        })
      })
    },
    /**
     * @description: 更新chart
     * @param {Object} config
     * @param {Array} filterList
     */
    changeData(config, filterList) {
      const list = config?.paramsList?.map((item) => {
        if (item.value === '${level}') {
          return { ...item, value: config.customize.level }
        } else if (item.value === '${name}') {
          return { ...item, value: config.customize.scope }
        } else {
          return item
        }
      })
      const params = {
        chart: {
          ...config,
          paramsList: list ? [...list] : [],
          option: undefined
        },
        current: 1,
        pageCode: this.pageCode,
        type: config.type,
        filterList: filterList || this.filterList
      }
      return new Promise((resolve, reject) => {
        config.loading = true
        getUpdateChartInfo(params).then(async (res) => {
          console.log('getUpdateChartInfo-res: ', res);

          config.loading = false
          let _res = cloneDeep(res)
          //--------------------MQTT数据集执行前置条件------------------------------------------------------------
          if (res.data && res.data.datasetType && res.data.datasetType === 'mqtt') {
            res.executionByFrontend = true
          }
          //--------------------MQTT数据集执行前置条件------------------------------------------------------------
          // 如果是http数据集的前端代理，则需要调封装的axios请求
          if (res.executionByFrontend) {
            if (res.data.datasetType === 'mqtt') {
				//2025-2-1 停掉mqtt功能
              //   // _res = this.httpDataFormatting(res, [{"data":new Date().toLocaleString()}])
              // let clientId = "SW-VIEWS" + new Date().getTime();
              // this.client = mqtt.connect('ws://broker.emqx.io:8083/mqtt', {
              //   clientId: clientId,
              //   username: 'admin',
              //   password: '123456'
              // })
              // let produceTopic = "STime";
              // this.client.on('connect', () => {
              //   console.log('mqtt 已经连接成功');

              //   this.client.subscribe(produceTopic, (data) => {
              //     console.log("mqtt " + produceTopic + " 订阅成功");
              //   })

              // });
              // this.client.on('message', (topic, data) => {
              //   console.log("mqtt 收到" + topic + "的消息");
              //   // console.log(data.toString());
              //   if (topic === produceTopic) {
              //     // 处理指定主题下的消息
              //     let JsonData = JSON.parse(data.toString());
              //     // console.log(JsonData);
              //     _res = this.httpDataFormatting(res, [{ "data": JsonData.time }])
              //     console.log('mqtt_res: ', _res);
              //     config = this.dataFormatting(config, _res)
              //   }
              // })
              // this.client.on('reconnect', () => {
              //   console.log("mqtt reconnect");
              // })
              // this.client.on('offline', () => {
              //   console.log("mqtt offline");
              // })
              // this.client.on('error', (error) => {
              //   console.log("mqtt error");
              //   console.log(error);
              // })

              // console.log('this.httpDataFormatting(res, _res): ', _res);
            }


            if (res.data.datasetType === 'http') {
              _res = await axiosFormatting(res.data)
              console.log('await axiosFormatting_res: ', _res);
              _res = this.httpDataFormatting(res, _res)
             
            }
            if (res.data.datasetType === 'js') {
              try {
                params.filterList.forEach(item => {
                  this.config.dataSource.params[item.column] = item.value
                })
                const scriptAfterReplacement = res.data.script.replace(/\${(.*?)}/g, (match, p) => {
                  const value = this.config.dataSource?.params[p]
                  if (value === null || value === undefined || value === '') {
                    return "''"
                  } else if (!isNaN(value)) {
                    return value || p
                  } else {
                    return `'${value}' || '${p}'`
                  }
                })
                // eslint-disable-next-line no-new-func
                const scriptMethod = new Function(scriptAfterReplacement)
                _res.data = scriptMethod()
              } catch (error) {
                console.info('JS数据集脚本执行失败', error)
              }
            }
          }
          // 将后端返回的数据保存
          if (_res.success) {
            console.log('_res.success: ', _res.success);

            this.updateDataset({ code: config.code, title: config.title, data: _res?.data })
          }
          config = this.dataFormatting(config, _res)
          if (this.chart) {
            // 单指标组件和多指标组件的changeData传参不同
            if (['Liquid', 'Gauge', 'RingProgress', 'Progress'].includes(config.chartType)) {
              this.chart.changeData(config.option.percent)
            } else {
              this.chart.changeData(config.option.data)
            }
          } if (this.config.type === 'candlestick' && this.charts) {
            this.updateChartData(config, _res)
          } else if (this.charts) {
            // 地图组件的被联动更新
            this.changeMapData(config.option.data)
          }
        }).catch(err => {
          console.info(err)
        }).finally(() => {
          if (config) {
            config.loading = false
          }
          console.log('last-config: ', config);

          resolve(config)
        })
      })
    },
    // 更新图表数据
    updateChartData() {

    },
    // http前台代理需要对返回的数据进行重新组装
    httpDataFormatting(chartRes, httpRes) {
      let result = {}
      result = {
        columnData: chartRes.columnData,
        data: httpRes,
        success: chartRes.success

      }
      return result
    },
    dataFormatting(config, data) {
      // 覆盖
    },
    newChart(option) {
      // 覆盖
    },
    // 通过表达式计算获取组件的值
    getDataByExpression(config) {
      // 覆盖
    },
    changeStyle(config) {
      config = { ...this.config, ...config }
      // 样式改变时更新主题配置
      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
      this.changeChartConfig(config)
      if (config.code === this.activeCode) {
        this.changeActiveItemConfig(config)
      }
    },
    // 缓存组件数据监听
    watchCacheData() {
      EventBus.$on('cacheDataInit', (data, dataSetId) => {
        // 如果是缓存数据集
        // 且当前组件的businessKey和缓存的dataSetId相等时，更新组件
        if (
          this.config.dataSource.dataSetType === '2' &&
          this.config.dataSource.businessKey === dataSetId
        ) {
          const config = this.dataFormatting(this.config, data)
          config.key = new Date().getTime()
          this.changeChartConfig(config)
          this.newChart(config.option)
        }
      })
    }
  },
  beforeDestroy() {
	  //2025-2-1屏蔽掉mqtt功能
    // this.client.on('close', () => {
    //   console.log("mqtt close");
    // })
    // this.client.end()
  },
}