import { Weather, CATEGORIES } from '../../configuration/constants'
import image_baoXue from '../../assets/weather/baoxue.png'
import image_daYu from '../../assets/weather/dayu.png'
import image_duoYun from '../../assets/weather/duoyun.png'
import image_leiZhenYu from '../../assets/weather/leizhenyu.png'
import image_qing from '../../assets/weather/qing.png'
import image_xiaoXue from '../../assets/weather/xiaoxue.png'
import image_xiaoYu from '../../assets/weather/xiaoyu.png'
import image_yin from '../../assets/weather/yin.png'
import image_zhenYu from '../../assets/weather/zhenyu.png'
import image_zhongXue from '../../assets/weather/zhongxue.png'
import image_bingBao from '../../assets/weather/bingbao.png'
import image_mai from '../../assets/weather/mai.png'
import image_shaChenBao from '../../assets/weather/shachenbao.png'
import image_wu from '../../assets/weather/wu.png'

export default {

  // 组件名称
  name: Weather,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${Weather}" class="${Weather}"></div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${Weather} {
          padding: 10px;
          display: flex!important;
          width: auto!important;
          align-items: center;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `天气`,
      attributes: {class:'fa fa-cloud'},
    };
  },

  spOptions() {
    return {
      label: '天气',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/be39a009-d402-4680-b9fa-fa9ee915d00b',
      author: '宗介',
      email: 'zongjie.wxt@xuelangyun.com',
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出字符串'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: Weather,
      droppable: false,
      resizable: false,
      dmode: 'absolute',
      highlightable: false,
      disableChildEdit: true,
      traits: [
        {
          name: 'imageWidth',
          label: '天气图片宽度',
          changeProp: 1,
          type: 'number'
        },
        {
          name: 'imageHeight',
          label: '天气图片高度',
          changeProp: 1,
          type: 'number'
        },
        {
          name: 'fontSize',
          label: '天气字体大小',
          changeProp: 1,
          type: 'number',
          min: 8
        },
        {
          name: 'color',
          label: '天气字体颜色',
          changeProp: 1,
          type: 'color'
        },
        {
          name: 'fontSizeTemp',
          label: '温度字体大小',
          changeProp: 1,
          type: 'number',
          min: 8
        },
        {
          name: 'colorTemp',
          label: '温度字体颜色',
          changeProp: 1,
          type: 'color'
        },
        {
          name: 'fontSizeTempUnit',
          label: '温度单位字体大小',
          changeProp: 1,
          type: 'number',
          min: 8
        },
        {
          name: 'colorTempUnit',
          label: '温度单位字体颜色',
          changeProp: 1,
          type: 'color'
        },
        {
          name: 'space',
          label: '温度间隔',
          changeProp: 1,
          type: 'number',
          min: 1
        },
        {
          name: 'defaultWeather',
          label: '默认展示天气',
          changeProp: 1,
          type: 'select',
          options: [
            { id: '暴雪', name: '暴雪' },
            { id: '大雨', name: '大雨' },
            { id: '多云', name: '多云' },
            { id: '雷阵雨', name: '雷阵雨' },
            { id: '晴', name: '晴' },
            { id: '小雪', name: '小雪' },
            { id: '小雨', name: '小雨' },
            { id: '阴', name: '阴' },
            { id: '阵雨', name: '阵雨' },
            { id: '中雪', name: '中雪' },
            { id: '霾', name: '霾' },
            { id: '冰雹', name: '冰雹' },
            { id: '沙尘暴', name: '沙尘暴' },
            { id: '雾', name: '雾' },
          ]
        },
        {
          name: 'defaultTemp',
          label: '默认展示温度',
          changeProp: 1,
          type: 'number'
        },
        {
          name: 'csv',
          label: '示例数据',
          changeProp: 1,
          type: 'csvDownload',
          preFileName: '天气',
          datas: [["多云", 22]]
        }
      ],
      'imageWidth': 80,
      'imageHeight': 80,
      "fontSize": 28,
      "color": '#333',
      "fontSizeTemp": 32,
      "colorTemp": '#333',
      "fontSizeTempUnit": 28,
      "colorTempUnit": '#333',
      "space": 20,
      "defaultWeather": "多云",
      "defaultTemp": 22
    }
  },

  onModelScript() {
    const imageWidth = Boolean('{[ imageWidth ]}') ? Number('{[ imageWidth ]}'): 80;
    const imageHeight = Boolean('{[ imageHeight ]}') ? Number('{[ imageHeight ]}'): 80;
    const fontSize = Boolean('{[ fontSize ]}') ? Number('{[ fontSize ]}') : 28;
    const color = '{[ color ]}';
    const fontSizeTemp = Boolean('{[ fontSizeTemp ]}') ? Number('{[ fontSizeTemp ]}') : 32;
    const colorTemp = '{[ colorTemp ]}';
    const fontSizeTempUnit = Boolean('{[ fontSizeTempUnit ]}') ? Number('{[ fontSizeTempUnit ]}') : 28;
    const colorTempUnit = '{[ colorTempUnit ]}';
    const space = Boolean('{[ space ]}') ? Number('{[ space ]}'): 20;

    const defaultWeather = ('{[ defaultWeather ]}').toString();
    const defaultTemp = Boolean('{[ defaultTemp ]}') ? Number('{[ defaultTemp ]}'): 22;
    
    
    // 图片资源
    const baoXueSrc = ('{[ baoXueSrc ]}').toString();
    const daYuSrc = ('{[ daYuSrc ]}').toString();
    const duoYunSrc = ('{[ duoYunSrc ]}').toString();
    const leiZhenYuSrc = ('{[ leiZhenYuSrc ]}').toString();
    const qingSrc = ('{[ qingSrc ]}').toString();
    const xiaoXueSrc = ('{[ xiaoXueSrc ]}').toString();
    const xiaoYuSrc = ('{[ xiaoYuSrc ]}').toString();
    const yinSrc = ('{[ yinSrc ]}').toString();
    const zhenYuSrc = ('{[ zhenYuSrc ]}').toString();
    const zhongXueSrc = ('{[ zhongXueSrc ]}').toString();
    const bingBaoSrc = ('{[ bingBaoSrc ]}').toString();
    const maiSrc = ('{[ maiSrc ]}').toString();
    const shaChenBaoSrc = ('{[ shaChenBaoSrc ]}').toString();
    const wuSrc = ('{[ wuSrc ]}').toString();

    const weatherMapping = {
      "暴雪": baoXueSrc,
      "大雨": daYuSrc,
      "多云": duoYunSrc,
      "雷阵雨": leiZhenYuSrc,
      "晴": qingSrc,
      "小雪": xiaoXueSrc,
      "小雨": xiaoYuSrc,
      "阴": yinSrc,
      "阵雨": zhenYuSrc,
      "中雪": zhongXueSrc,
      "冰雹": bingBaoSrc,
      "霾": maiSrc,
      "沙尘暴": shaChenBaoSrc,
      "雾": wuSrc,
      "雷雨": leiZhenYuSrc
    }

    const self = this;
    
    var initWeatherShow = function (source) {
      const valWeather = source[0][0];
      const valTemperature = source[0][1];
      const weatherImageSrc = weatherMapping[valWeather];
      
      const imageEl = $(self).find('.weather-image')[0];
      const labelEl = $(self).find('.weather-label')[0];
      $(imageEl).empty();
      $(labelEl).empty();
      // 天气图片
      const imageDom = document.createElement("img");
      imageDom.src = weatherImageSrc;
      imageDom.style.width = `${imageWidth}px`;
      imageDom.style.height = `${imageHeight}px`;
      imageEl.appendChild(imageDom);
      
      // 天气Label
      const weatherDom = document.createElement("span");
      weatherDom.innerHTML = `${valWeather} / `;
      weatherDom.style.fontSize = `${fontSize}px`;
      weatherDom.style.color = color;
      weatherDom.style.marginRight = `${space}px`;
      labelEl.appendChild(weatherDom);
      // 温度Label
      const tempDom = document.createElement("span");
      tempDom.innerHTML = valTemperature;
      tempDom.style.fontSize = `${fontSizeTemp}px`;
      tempDom.style.color = colorTemp;
      labelEl.appendChild(tempDom);
      // 温度单位Label
      const tempUnitDom = document.createElement("span");
      tempUnitDom.innerHTML = "℃";
      tempUnitDom.style.fontSize = `${fontSizeTempUnit}px`;
      tempUnitDom.style.color = colorTempUnit;
      labelEl.appendChild(tempUnitDom);
    };

    const defaultSource = [[defaultWeather,defaultTemp]];
    initWeatherShow(defaultSource);

    // 有 dashboardHost 说明是运行模式
    if (window.spSocket) {
      var eventName = `call-` + self.getAttribute('id');

      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let _in1Str = _data.data.in1;
          if (_in1Str) {
            const source = JSON.parse(_in1Str);
            initWeatherShow(source);
          }
        }
      });
    }
  },

  onViewInit({editor, model}) {
    this.model.set('baoXueSrc', image_baoXue);
    this.model.set('daYuSrc', image_daYu);
    this.model.set('duoYunSrc', image_duoYun);
    this.model.set('leiZhenYuSrc', image_leiZhenYu);
    this.model.set('qingSrc', image_qing);
    this.model.set('xiaoXueSrc', image_xiaoXue);
    this.model.set('xiaoYuSrc', image_xiaoYu);
    this.model.set('yinSrc', image_yin);
    this.model.set('zhenYuSrc', image_zhenYu);
    this.model.set('zhongXueSrc', image_zhongXue);
    this.model.set('bingBaoSrc', image_bingBao);
    this.model.set('maiSrc', image_mai);
    this.model.set('shaChenBaoSrc', image_shaChenBao);
    this.model.set('wuSrc', image_wu);

    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <div class="weather-image" draggable="false"></div>
        <div class="weather-label" draggable="false"></div>
      `)
    }
    const evn = `
      change:imageWidth
      change:imageHeight
      change:fontSize
      change:color
      change:fontSizeTemp
      change:colorTemp
      change:fontSizeTempUnit
      change:colorTempUnit
      change:space
      change:defaultWeather
      change:defaultTemp
    `
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
