import _ from 'lodash-es';
import { Config } from './types';

export const ModuleSizeMap = {
  'width:450px;height:280px;': '标准尺寸(450*280)',
  'width:450px;height:570px;': '纵向拉伸(450*570)',
  'width:450px;height:860px;': '纵向填充(450*860)',
  'width:1000px;height:280px;': '横向拉伸(1000*280)',
  'width:1920px;height:280px;': '横向填充(1920*280)',
};
export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
  value: k,
  label: v,
}));

export const ModuleVersionOptions = _.map(['原版', '新版'], (k) => ({
  value: k,
  label: k,
}));

export const ModulePositionMap = {
  'display:none;': '不展示',
  'top:60px;left:0;': '左上',
  'top:350px;left:0;': '左中',
  'top:640px;left:0;': '左下',
  'top:60px;right:0;': '右上',
  'top:350px;right:0;': '右中',
  'top:640px;right:0;': '右下',
  'top:640px;left:460px;': '中下',
};
export const ModulePositionOptions = _.map(ModulePositionMap, (v, k) => ({
  value: k,
  label: v,
}));

export const ModulePresetOptions = _.map(
  [
    '告示版（1*1）',
    '折线图（1*1）',
    '面积图（1*1）',
    '饼状图（1*1）',
    '柱状图（2*1）',
    '画廊（1*1）',
    '列表（1*1）',
    '表格（1*1）',
    '爆炸三角形（1*1）',
  ],
  (k) => ({
    value: k,
    label: k,
  })
);
export const ModulePresetMap: Record<
  string,
  {
    moduleData: Config['moduleData'];
    showStyle: Partial<Config['showStyle']>;
  }
> = {
  '告示版（1*1）': {
    moduleData: {
      header: {
        show: true,
        showSelector: true,
        showSlot: true,
        selector: {
          prop: 'strinstallpos',
        },
        slot: {
          prop: 'strinstallpos',
        },
      },
      background: {
        show: false,
        type: 'image',
        link: '',
      },
      layout: ['board'],
      board: [
        {
          type: 'A',
          layout: 'val-top',
          readFrom: 'readData',
          items: [
            {
              prop: 'Fan1StartStatus_str',
              label: '一号机状态',
            },
            {
              prop: 'Fan2StartStatus_str',
              label: '二号机状态',
            },
          ],
        },
      ],
      list: [],
      chart: [],
      table: [],
      gallery: [],
      preset: [],
      complex_list: [],
    },
    showStyle: {
      size: 'width:450px;height:280px;',
    },
  },
  '折线图（1*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: true,
        showSlot: true,
        selector: {
          prop: 'strinstallpos',
        },
        slot: {
          prop: 'strinstallpos',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['chart'],
      board: [],
      list: [],
      chart: [
        {
          type: 'line',
          readFrom: 'majorpath.paths',
          xAxis: [{ prop: 'name' }],
          yAxis: [
            { label: 'Drag', align: 'left' },
            { label: 'M3', align: 'right' },
          ],
          series: [
            { label: 'Drag', prop: 'drag' },
            { label: 'M3', prop: 'm3' },
            // { label: '回2', prop: 'hui2' },
          ],
        },
      ],
      gallery: [],
      table: [],
      preset: [],
      complex_list: [],
    },
    showStyle: {
      size: 'width:450px;height:280px;',
    },
  },
  '面积图（1*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: true,
        showSlot: true,
        selector: {
          prop: 'strinstallpos',
        },
        slot: {
          prop: 'strinstallpos',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['chart'],
      board: [],
      list: [],
      chart: [
        {
          type: 'line_area',
          readFrom: 'majorpath.paths',
          xAxis: [{ prop: 'name' }],
          yAxis: [
            { label: 'Drag', align: 'left' },
            { label: 'M3', align: 'right' },
          ],
          series: [
            { label: 'Drag', prop: 'drag' },
            { label: 'M3', prop: 'm3' },
            // { label: '回2', prop: 'hui2' },
          ],
        },
      ],
      gallery: [],
      table: [],
      preset: [],
      complex_list: [],
    },
    showStyle: { size: 'width:450px;height:280px;' },
  },
  '饼状图（1*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: true,
        showSlot: true,
        selector: {
          prop: 'strinstallpos',
        },
        slot: {
          prop: 'strinstallpos',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['chart'],
      board: [],
      list: [],
      chart: [
        {
          type: 'pie',
          readFrom: 'history',
          xAxis: [],
          yAxis: [],
          series: [
            { label: 'Drag', prop: 'drag' },
            { label: 'M3', prop: 'm3' },
            // { label: '回2', prop: 'hui2' },
          ],
        },
      ],
      gallery: [],
      table: [],
      preset: [],
      complex_list: [],
    },
    showStyle: { size: 'width:450px;height:280px;' },
  },
  '柱状图（2*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: false,
        showSlot: false,
        selector: {
          prop: 'strinstallpos',
        },
        slot: {
          prop: 'strinstallpos',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['chart'],
      board: [],
      list: [],
      table: [],
      preset: [],
      gallery: [],
      complex_list: [],
      chart: [
        {
          type: 'bar',
          readFrom: 'sysdata.history',
          xAxis: [{ prop: 'time' }],
          yAxis: [{ label: '回1', align: 'left' }],
          series: [{ label: '回1', prop: 'hui1' }],
        },
      ],
    },
    showStyle: { size: 'width:450px;height:280px;' },
  },
  '画廊（1*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: false,
        showSlot: false,
        selector: {
          prop: 'devicePos',
        },
        slot: {
          prop: 'devicePos',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['gallery'],
      board: [],
      gallery: [
        {
          type: 'A',
          readFrom: 'device',
          items: [
            {
              prop: 'gate',
              label: '风门',
              // label: '光纤预警',
              color: 'blue',
            },
            {
              prop: 'window',
              label: '风窗',
              // label: '喷雾开启数',
              color: 'blue',
            },
            {
              prop: 'windrect',
              label: '测风',
              // label: '联网数量',
              color: 'blue',
            },
            {
              prop: 'stationtype',
              label: '空位',
              // label: '断网数量',
              color: 'blue',
            },
          ],
        },
      ],
      list: [],
      table: [],
      chart: [],
      preset: [],
      complex_list: [],
    },
    showStyle: { size: 'width:450px;height:280px;' },
  },
  '列表（1*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: false,
        showSlot: true,
        selector: {
          prop: 'strinstallpos',
        },
        slot: {
          prop: 'netstatus.val',
          formatter: '网络异常：${} 台',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['list'],
      board: [],
      chart: [],
      table: [],
      preset: [],
      complex_list: [],
      gallery: [],
      list: [
        {
          type: 'timeline',
          readFrom: '',
          items: [
            {
              label: '正常',
              prop: 'blue.val',
              color: 'blue',
              info: '',
            },
            {
              label: '告警',
              prop: 'orange.val',
              color: 'orange',
              info: '',
            },
            {
              label: '报警',
              prop: 'yellow.val',
              color: 'yellow',
              info: '',
            },
            {
              label: '危险',
              prop: 'red.val',
              color: 'red',
              info: '',
            },
            {
              label: '错误',
              prop: 'alarm.val',
              color: 'green',
              info: '',
            },
          ],
        },
      ],
    },
    showStyle: { size: 'width:450px;height:280px;' },
  },
  '表格（1*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: true,
        showSlot: true,
        selector: {
          prop: 'devicePos',
        },
        slot: {
          prop: 'devicePos',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['table'],
      board: [],
      list: [],
      preset: [],
      gallery: [],
      complex_list: [],
      table: [
        {
          type: 'B',
          readFrom: 'history',
          columns: [
            {
              prop: 'cate',
              label: '类别',
            },
            {
              prop: 'temp',
              label: '温度',
            },
            {
              prop: 'wspd',
              label: '风速',
            },
            {
              prop: 'spst',
              label: '喷雾状态',
            },
          ],
        },
      ],
      chart: [],
    },
    showStyle: { size: 'width:450px;height:280px;' },
  },
  '爆炸三角形（1*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: true,
        showSlot: false,
        selector: {
          prop: 'strinstallpos',
        },
        slot: {
          prop: 'strinstallpos',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['blast_delta'],
      board: [],
      gallery: [],
      list: [],
      table: [],
      chart: [],
      complex_list: [],
      preset: [{}],
    },
    showStyle: { size: 'width:450px;height:280px;' },
  },
  '采空区火情综合预警（1*1）': {
    moduleData: {
      header: {
        show: false,
        showSelector: false,
        showSlot: true,
        selector: {
          prop: 'strinstallpos',
        },
        slot: {
          prop: 'netstatus.val',
          formatter: '网络异常：${} 台',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['complex_list', 'list'],
      // layout: ['list'],
      board: [],
      chart: [],
      gallery: [],
      table: [],
      list: [
        {
          type: 'B',
          readFrom: '',
          items: [
            {
              label: '堵塞状态',
              prop: 'fsectarea',
              color: 'yellow',
              info: '',
            },
            {
              label: '甲烷浓度',
              prop: 'stationname',
              color: 'yellow',
              info: '',
            },
          ],
        },
      ],
      complex_list: [
        {
          type: 'A',
          readFrom: '',
          items: [
            {
              label: '火情状态',
              prop: 'fsectarea',
              color: 'yellow',
              info: '',
            },
            {
              label: '回采位置',
              prop: 'stationname',
              color: 'white',
              info: '',
            },
            {
              label: '硐室火情',
              prop: 'stationtype',
              color: 'blue',
              info: '',
            },
            {
              label: '联动设备状态',
              prop: 'typeName',
              color: 'blue',
              info: '',
            },
          ],
          galleryItems: [
            {
              prop: 'total',
              label: '',
              formatter: '低风险',
              color: 'white',
            },
            {
              prop: 'total',
              label: '',
              formatter: 'CO',
              color: 'white',
            },
          ],
        },
      ],
      preset: [],
    },
    showStyle: {
      size: 'width:450px;height:280px;',
    },
  },
  '重点区域实时火情（1*2）': {
    moduleData: {
      header: {
        show: false,
        showSelector: true,
        showSlot: true,
        selector: {
          prop: 'devicePos',
        },
        slot: {
          prop: 'devicePos',
        },
      },
      background: {
        show: false,
        type: 'video',
        link: '',
      },
      layout: ['complex_list', 'blast_delta', 'list'],
      board: [],
      gallery: [],
      list: [
        {
          type: 'E',
          readFrom: '',
          items: [
            {
              label: '火情状态',
              prop: 'fsectarea',
              color: 'yellow',
              info: '',
            },
            {
              label: '回采位置',
              prop: 'stationname',
              color: 'white',
              info: '',
            },
            {
              label: '硐室火情',
              prop: 'stationtype',
              color: 'blue',
              info: '',
            },
            {
              label: '联动设备状态',
              prop: 'typeName',
              color: 'blue',
              info: '',
            },
            {
              label: '火情状态',
              prop: 'fsectarea',
              color: 'yellow',
              info: '',
            },
            {
              label: '回采位置',
              prop: 'stationname',
              color: 'white',
              info: '',
            },
            {
              label: '硐室火情',
              prop: 'stationtype',
              color: 'blue',
              info: '',
            },
            {
              label: '联动设备状态',
              prop: 'typeName',
              color: 'blue',
              info: '',
            },
            // {
            //   label: '火情状态',
            //   prop: 'fsectarea',
            //   color: 'yellow',
            //   info: '',
            // },
            // {
            //   label: '回采位置',
            //   prop: 'stationname',
            //   color: 'white',
            //   info: '',
            // },
            // {
            //   label: '硐室火情',
            //   prop: 'stationtype',
            //   color: 'blue',
            //   info: '',
            // },
            // {
            //   label: '联动设备状态',
            //   prop: 'typeName',
            //   color: 'blue',
            //   info: '',
            // },
          ],
        },
      ],
      table: [],
      chart: [],
      preset: [{}],
      complex_list: [
        {
          type: 'B',
          readFrom: '',
          items: [
            {
              label: '火情状态',
              prop: 'fsectarea',
              color: 'yellow',
              info: '',
            },
            {
              label: '回采位置',
              prop: 'stationname',
              color: 'white',
              info: '',
            },
            {
              label: '硐室火情',
              prop: 'stationtype',
              color: 'blue',
              info: '',
            },
            {
              label: '联动设备状态',
              prop: 'typeName',
              color: 'blue',
              info: '',
            },
          ],
          galleryItems: [
            {
              prop: 'total',
              label: '风险等级',
              formatter: '低风险',
              color: 'white',
            },
          ],
        },
      ],
    },
    showStyle: {
      size: 'width:450px;height:570px;',
    },
  },
};

// export const ModuleChartTypeMap = {
//   pie: '饼状图',
//   bar: '柱状图',
//   line: '折线图',
// };
// export const ModuleChartTypeOptions = _.map(ModuleChartTypeMap, (v, k) => ({
//   value: k,
//   label: v,
// }));