import { CurrentTime, CATEGORIES } from '../../configuration/constants'

export default {

  // 组件名称
  name: CurrentTime,

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

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path class="gjs-block-svg-path" d="M512 128c212.064 0 384 171.936 384 384s-171.936 384-384 384S128 724.064 128 512 299.936 128 512 128z m0 64C335.264 192 192 335.264 192 512s143.264 320 320 320 320-143.264 320-320S688.736 192 512 192z m32 96v191.968L736 480v64h-256V288h64z"></path></svg>
      <div class="gjs-block-label">当前时间</div>
      `,
    };
  },

  spOptions() {
    return {
      label: '当前时间',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/65c24d47-af42-42c4-8c4f-685c03711760?# 《当前时间》',
      author: '宗介',
      email: 'zongjie.wxt@xuelangyun.com',
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出字符串'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: CurrentTime,
      droppable: false,
      resizable: false,
      dmode: 'absolute',
      highlightable: false,
      disableChildEdit: true,
      traits: [{
        name: 'origin',
        label: '朝向',
        type: 'select',
        changeProp: 1,
        options: [{id: 'horizontal', name: '水平'}, {id: 'vertical', name: '垂直'}]
      }, {
        name: 'dateFormat',
        label: '日期格式',
        changeProp: 1,
        type: 'select',
        options: [
          { id: 'YYYY-MM-DD', name: 'YYYY-MM-DD' },
          { id: 'YYYY-MM-DD ddd', name: 'YYYY-MM-DD 星期' },
          { id: 'YYYY/MM/DD', name: 'YYYY/MM/DD' },
          { id: 'YYYY/MM/DD ddd', name: 'YYYY/MM/DD 星期' },        
        ]
      }, {
        name: 'fontSize',
        label: '日期字体大小',
        changeProp: 1,
        type: 'number',
        min: 8
      }, {
        name: 'fontWeight',
        label: '日期字体粗细',
        changeProp: 1,
        type: 'select',
        options: [{ id: 'light', name: '细' }, { id: 'normal', name: '常规' }, { id: 'bold', name: '粗' }]
      }, {
        name: 'color',
        label: '日期字体颜色',
        changeProp: 1,
        type: 'color'
      },{
        name: 'timeFormat',
        label: '时间格式',
        changeProp: 1,
        type: 'select',
        options: ['HH:mm:ss', 'HH:mm']
      }, {
        name: 'fontSizeTime',
        label: '时间字体大小',
        changeProp: 1,
        type: 'number',
        min: 8
      }, {
        name: 'fontWeightTime',
        label: '时间字体粗细',
        changeProp: 1,
        type: 'select',
        options: [{ id: 'light', name: '细' }, { id: 'normal', name: '常规' }, { id: 'bold', name: '粗' }]
      }, {
        name: 'colorTime',
        label: '时间字体颜色',
        changeProp: 1,
        type: 'color'
      } , {
        name: 'space',
        label: '日期时间距离像素(水平方向)',
        changeProp: 1,
        type: 'number',
        min: 5
      }, {
        name: 'fontFamily',
        label: '特殊字体',
        changeProp: 1,
        type: 'select',
        options: ['inherit', 'DS-Digital', '庞门正道'],
      } ],
      'origin': 'horizontal',
      'dateFormat': 'YYYY/MM/DD',
      'timeFormat': 'HH:mm:ss',
      "fontSize": 14,
      "fontWeight": 'normal',
      "color": '#333',
      "fontSizeTime": 14,
      "fontWeightTime": 'normal',
      "colorTime": '#333',
      "space": 5,
      "fontFamily": "inherit",
    }
  },

  onModelScript() {
    const origin = ('{[ origin ]}').toString();
    const dateFormat = ('{[ dateFormat ]}').toString();
    const timeFormat = ('{[ timeFormat ]}').toString();
    const fontSize = Boolean('{[ fontSize ]}') ? Number('{[ fontSize ]}') : 14;
    const fontWeight = ('{[ fontWeight ]}').toString();
    const color = ('{[ color ]}').toString();
    const fontSizeTime = Boolean('{[ fontSizeTime ]}') ? Number('{[ fontSizeTime ]}') : 14;
    const fontWeightTime = ('{[ fontWeightTime ]}').toString();
    const colorTime = ('{[ colorTime ]}').toString();
    const space = Boolean('{[ space ]}') ? Number('{[ space ]}') : 5;
    const fontFamily = ('{[ fontFamily ]}').toString();

    const self = this;
    const _id = self.getAttribute('id');
    
    origin == 'horizontal' ? $(self).removeClass('vertical').addClass('horizontal') : $(self).removeClass('horizontal').addClass('vertical');

    const $dateEl = $(self).find('.date').eq(0);
    $dateEl.css({
      "font-size": `${fontSize}px`,
      "font-weight": fontWeight,
      "color": color,
      "font-family": fontFamily
    });
    
    const $timeEl = $(self).find('.time').eq(0);
    let cssOption = {
      "font-size": `${fontSizeTime}px`,
      "font-weight": fontWeightTime,
      "color": colorTime,
      "margin-left": '0',
      "font-family": fontFamily
    }
    if(origin === 'horizontal') {
      cssOption["margin-left"] = `${space}px`
    }
    $timeEl.css(cssOption);

    if (window.currentTimetimer === undefined) { window.currentTimetimer = {};}
    if (window.currentTimetimer[_id] !== undefined) {
      clearInterval(window.currentTimetimer[_id]);
    }
    window.currentTimetimer[_id] = setInterval(function() {
      var dateF = moment().format(dateFormat)
      var timeF = moment().format(timeFormat)
      $dateEl.text(dateF);
      $timeEl.text(timeF);
      // 组件删除时清理一下定时器, onViewRemoved方法取不到window.currentTimetimer
      const childNodes = self.childNodes;
      if(childNodes && childNodes.length === 0) {
        clearInterval(window.currentTimetimer[_id]);
      }
    }, 1000);
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <div class="date" draggable="false" >当前日期</div>
        <div class="time" draggable="false" >当前时间</div>
      `)
    }
    const evn = `
      change:origin
      change:dateFormat
      change:timeFormat
      change:fontSize
      change:fontWeight
      change:color
      change:fontSizeTime
      change:fontWeightTime
      change:colorTime
      change:space
      change:fontFamily
    `
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
