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

export default {

  // 组件名称
  name: CustomTime,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${CustomTime}" class="${CustomTime}"></div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${CustomTime} {
          padding: 10px;
          display: flex!important;
          width: auto!important;
          align-items: center;
        }
      </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/02836766-e9b8-47d6-95cb-9bc73b2eac0f?# 《自定义时区时间》',
      author: '宗介',
      email: 'zongjie.wxt@xuelangyun.com',
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出字符串'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: CustomTime,
      droppable: false,
      resizable: false,
      dmode: 'absolute',
      highlightable: false,
      disableChildEdit: true,
      traits: [
        {
          name: 'dateType',
          label: '时间类型',
          changeProp: 1,
          type: 'select',
          options: [
            { id: 'localtime', name: '本地时间' },
            { id: 'customZone', name: '自定义时区' },
            { id: 'customLongitude', name: '自定义经度'}
          ]
        },
        {
          name: 'zoneValue',
          label: '自定义时区(正负12区间)',
          changeProp: 1,
          type: 'number',
          min: -12,
          max: 12,
        },
        {
          name: 'longitudeValue',
          label: '自定义经度(正负180区间)',
          changeProp: 1,
          type: 'number',
          min: -180,
          max: 180,
        },
        {
          name: 'dateFormat',
          label: '日期格式',
          changeProp: 1,
          type: 'select',
          options: [
            { id: 'YYYY-MM-DD', name: 'YYYY-MM-DD' },
            { id: 'YYYY/MM/DD', name: 'YYYY/MM/DD' }
          ]
        },
        {
          name: 'timeFormat',
          label: '时间格式',
          changeProp: 1,
          type: 'select',
          options: ['HH:mm:ss', 'HH:mm']
        },
        {
          name: 'showWeek',
          label: '显示星期',
          changeProp: 1,
          type: 'checkbox',
        },
        {
          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: 'fontFamily',
          label: '特殊字体',
          changeProp: 1,
          type: 'select',
          options: ['inherit', 'DS-Digital', '庞门正道'],
        },
        {
          name: 'space',
          label: '日期日期星期间隔',
          changeProp: 1,
          type: 'number',
          min: 5
        } 
      ],
      'dateFormat': 'YYYY/MM/DD',
      'timeFormat': 'HH:mm:ss',
      "fontSize": 14,
      "fontWeight": 'normal',
      "color": '#333',
      "space": 5,
      "showWeek": true,
      "fontFamily": "inherit",
      "dateType": "localtime",
      "zoneValue": 0,
      "longitudeValue": 0
    }
  },

  onModelScript() {
    const dateFormat = ('{[ dateFormat ]}').toString();
    const timeFormat = ('{[ timeFormat ]}').toString();
    const fontSize = Boolean('{[ fontSize ]}') ? Number('{[ fontSize ]}') : 14;
    const fontWeight = ('{[ fontWeight ]}').toString();
    const color = ('{[ color ]}').toString();
    const space = Boolean('{[ space ]}') ? Number('{[ space ]}') : 5;
    const fontFamily = ('{[ fontFamily ]}').toString();
    const showWeek = Boolean('{[ showWeek ]}')
    const dateType = ('{[ dateType ]}').toString();
    const zoneValue = Boolean('{[ zoneValue ]}') ? Number('{[ zoneValue ]}') : 0;
    const longitudeValue = Boolean('{[ longitudeValue ]}') ? Number('{[ longitudeValue ]}') : 0;

    const self = this;
    const _id = self.getAttribute('id');
    const weekMap = {
      "0": '周日',
      "1": '周一',
      "2": '周二',
      "3": '周三',
      "4": '周四',
      "5": '周五',
      "6": '周六',
    }
    
    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": `${fontSize}px`,
      "font-weight": fontWeight,
      "color": color,
      "margin-left": `${space}px`,
      "font-family": fontFamily
    }
    $timeEl.css(cssOption);

    const $weekEl = $(self).find('.week').eq(0);
    let weekCssOption = {
      "font-size": `${fontSize}px`,
      "font-weight": fontWeight,
      "color": color,
      "margin-left": `${space}px`,
      "font-family": fontFamily,
      "display": 'none',
      "white-space":'nowrap'
    }
    if(showWeek) {
      weekCssOption.display = 'block';
    }
    $weekEl.css(weekCssOption);

    if (window.CustomTimetimer === undefined) { window.CustomTimetimer = {};}
    if (window.CustomTimetimer[_id] !== undefined) {
      clearInterval(window.CustomTimetimer[_id]);
    }

    
    window.CustomTimetimer[_id] = setInterval(function() {
      var currentMoment
      if ( dateType === "localtime" ) {
        currentMoment = moment();
      } else if ( dateType === "customZone" ) {
        currentMoment = moment().utc().utcOffset(zoneValue);
      } else {
        currentMoment = moment().utc().utcOffset(longitudeValue/15);
      }
      var dateF = currentMoment.format(dateFormat)
      var timeF = currentMoment.format(timeFormat)
      var weekValue = currentMoment.format('d')
      const weekF = weekMap[weekValue];
      $dateEl.text(dateF);
      $timeEl.text(timeF);
      $weekEl.text(weekF);
      // 组件删除时清理一下定时器, onViewRemoved方法取不到window.CustomTimetimer
      const childNodes = self.childNodes;
      if(childNodes && childNodes.length === 0) {
        clearInterval(window.CustomTimetimer[_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>
        <div class="week" draggable="false" >星期</div>
      `)
    }
    const evn = `
      change:dateFormat
      change:timeFormat
      change:fontSize
      change:fontWeight
      change:color
      change:space
      change:fontFamily
      change:showWeek
      change:dateType
      change:zoneValue
      change:longitudeValue
    `
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
