import _ from 'lodash';
/**
 * 触发事件
 *
 * @format
 * @param componentId 组件id
 * @param eventType 事件类型
 * @param detail 自定义事件参数
 */

export function DispatchEvent(
  componentId: string | undefined,
  eventType: string,
  detail: any,
) {
  if (!componentId || !eventType) {
    throw new Error('非法参数');
  }
  const event = new CustomEvent(`edata-${componentId}-${eventType}`, {
    detail,
  });
  document.dispatchEvent(event);
}
/**
 * 触发事件
 *
 * @format
 * @param i 列表index
 * @param item 列表详情
 * @param datas 组件props
 * @param flagRef 组件是否为第一次渲染
 */

export function getRowStyle(
  i: number,
  item: any,
  datas: any,
  flagRef: boolean,
) {
  const { header, light, size, border, global, row, data } = datas;
  const rowStyle = { ...row?.textStyle, ...row };
  const rowCount = global.rowCount;

  if (rowStyle) {
    const { even, odd } = rowStyle;
    const { lightType, lightRowNumber, lightRowSerial, textStyle } = light;
    if (header.show) {
      rowStyle.height =
        ((size.height * (100 - header.proportion)) / 100 -
          ((rowStyle && rowStyle.marginBottom) || 0) * rowCount) /
        rowCount;
    } else {
      rowStyle.height =
        (size.height - ((rowStyle && rowStyle.marginBottom) || 0) * rowCount) /
        rowCount;
    }

    // if (lightType && lightType === 'line' && light.show) {
    //   // 指定行高亮
    //   if (
    //     (lightRowNumber &&
    //       lightRowNumber.indexOf(',') !== -1 &&
    //       lightRowNumber.split(',').includes((i + 1).toString())) ||
    //     lightRowNumber == i + 1
    //   ) {
    //     if (border.show) {
    //       if (border.colorLinear) {
    //         return _.merge({}, getRowBg(light, textStyle, rowStyle), {
    //           borderBottom: `${border.width}px ${border.type} ${
    //             border.colorLinear ? 'transparent' : border.bgColor
    //           }`,
    //           borderImage: getLinearColor(
    //             border.colorLinear,
    //             border.bgColor1,
    //             border.bgColor2,
    //             border.colorLinearType,
    //             border.width,
    //           ),
    //         });
    //       }
    //       return _.merge({}, getRowBg(light, textStyle, rowStyle), {
    //         borderBottom: `${border.width}px ${border.type} ${
    //           border.colorLinear ? 'transparent' : border.bgColor
    //         }`,
    //       });
    //     }
    //     return getRowBg(light, textStyle, rowStyle);
    //   }
    // }
    if (lightType && lightType === 'line' && light.show) {
      // 指定行高亮
      if (
        (lightRowNumber &&
          lightRowNumber.indexOf(',') !== -1 &&
          lightRowNumber.split(',').includes(i.toString())) ||
        lightRowNumber == i
      ) {
        // debugger;
        if (border.show) {
          if (border.colorLinear) {
            return _.merge({}, getRowBg(light, textStyle, rowStyle), {
              borderBottom: `${border.width}px ${border.type} ${
                border.colorLinear ? 'transparent' : border.bgColor
              }`,
              borderImage: getLinearColor(
                border.colorLinear,
                border.bgColor1,
                border.bgColor2,
                border.colorLinearType,
                border.width,
              ),
            });
          }
          return _.merge({}, getRowBg(light, textStyle, rowStyle), {
            borderBottom: `${border.width}px ${border.type} ${
              border.colorLinear ? 'transparent' : border.bgColor
            }`,
          });
        }
        return getRowBg(light, textStyle, rowStyle);
      }
    }

    if (lightType && lightType === 'one' && light.show) {
      // 指定序号高亮
      if (
        (lightRowSerial &&
          lightRowSerial.indexOf(',') !== -1 &&
          lightRowSerial
            .split(',')
            .includes(((Number(item.id) + 1) % data.length).toString())) ||
        lightRowSerial == (Number(item.id) + 1) % data.length
      ) {
        if (border.show) {
          if (border.colorLinear) {
            return _.merge({}, getRowBg(light, textStyle, rowStyle), {
              borderBottom: `${border.width}px ${border.type} ${
                border.colorLinear ? 'transparent' : border.bgColor
              }`,
              borderImage: getLinearColor(
                border.colorLinear,
                border.bgColor1,
                border.bgColor2,
                border.colorLinearType,
                border.width,
              ),
            });
          }
          return _.merge({}, getRowBg(light, textStyle, rowStyle), {
            borderBottom: `${border.width}px ${border.type} ${
              border.colorLinear ? 'transparent' : border.bgColor
            }`,
          });
        }
        return getRowBg(light, textStyle, rowStyle);
      }
    }
    if (lightType && lightType === 'all' && light.show) {
      // 自动依次高亮

      if (
        (flagRef && i === 0 && global.animationType === 'one') ||
        (!flagRef && i === 1 && global.animationType === 'one')
      ) {
        // debugger;
        if (border.show) {
          if (border.colorLinear) {
            return _.merge({}, getRowBg(light, textStyle, rowStyle), {
              borderBottom: `${border.width}px ${border.type} ${
                border.colorLinear ? 'transparent' : border.bgColor
              }`,
              borderImage: getLinearColor(
                border.colorLinear,
                border.bgColor1,
                border.bgColor2,
                border.colorLinearType,
                border.width,
              ),
            });
          }
          return _.merge({}, getRowBg(light, textStyle, rowStyle), {
            borderBottom: `${border.width}px ${border.type} ${
              border.colorLinear ? 'transparent' : border.bgColor
            }`,
          });
        }
        return getRowBg(light, textStyle, rowStyle);
      }
    }
    // 奇数偶数行设置
    if (item.id % 2 === 0) {
      if (border.show) {
        // 是否显示border
        if (border.colorLinear) {
          // 渐变
          return _.merge({}, rowStyle, {
            background: even.colorLinear
              ? getLinearColor(
                  even.colorLinear,
                  even.bgColor1,
                  even.bgColor2,
                  even.colorLinearType,
                )
              : even.bgColor,
            borderBottom: `${border.width}px ${border.type} ${
              border.colorLinear ? 'transparent' : border.bgColor
            }`,
            borderImage: getLinearColor(
              border.colorLinear,
              border.bgColor1,
              border.bgColor2,
              border.colorLinearType,
              border.width,
            ),
          });
        }
        return _.merge({}, rowStyle, {
          background: even.colorLinear
            ? getLinearColor(
                even.colorLinear,
                even.bgColor1,
                even.bgColor2,
                even.colorLinearType,
              )
            : even.bgColor,
          borderBottom: `${border.width}px ${border.type} ${
            border.colorLinear ? 'transparent' : border.bgColor
          }`,
        });
      }
      return _.merge({}, rowStyle, {
        background: even.colorLinear
          ? getLinearColor(
              even.colorLinear,
              even.bgColor1,
              even.bgColor2,
              even.colorLinearType,
            )
          : even.bgColor,
      });
    } else {
      if (border.show) {
        if (border.colorLinear) {
          return _.merge({}, rowStyle, {
            background: odd.colorLinear
              ? getLinearColor(
                  odd.colorLinear,
                  odd.bgColor1,
                  odd.bgColor2,
                  odd.colorLinearType,
                )
              : odd.bgColor,
            borderBottom: `${border.width}px ${border.type} ${
              border.colorLinear ? 'transparent' : border.bgColor
            }`,
            borderImage: getLinearColor(
              border.colorLinear,
              border.bgColor1,
              border.bgColor2,
              border.colorLinearType,
              border.width,
            ),
          });
        }
        return _.merge({}, rowStyle, {
          background: odd.colorLinear
            ? getLinearColor(
                odd.colorLinear,
                odd.bgColor1,
                odd.bgColor2,
                odd.colorLinearType,
              )
            : odd.bgColor,
          borderBottom: `${border.width}px ${border.type} ${
            border.colorLinear ? 'transparent' : border.bgColor
          }`,
        });
      }
      return _.merge({}, rowStyle, {
        background: odd.colorLinear
          ? getLinearColor(
              odd.colorLinear,
              odd.bgColor1,
              odd.bgColor2,
              odd.colorLinearType,
            )
          : odd.bgColor,
      });
    }
  }
}

/**
 * 触发事件
 *
 * @format
 * @param data 数据源
 * @param textStyle 覆盖样式
 * @param baseStyle 基础样式
 */

export function getRowBg(data: any, textStyle: any, baseStyle: any) {
  const { bgColor, bgColor1, bgColor2, colorLinearType, colorLinear } = data;
  if (colorLinear) {
    // 颜色渐变
    if (colorLinearType === 'toRight') {
      // 从左到右
      return _.merge(
        {},
        baseStyle,
        { background: `linear-gradient(to right,${bgColor1},${bgColor2})` },
        textStyle,
      );
    }
    if (colorLinearType === 'toLeft') {
      // 从右到左
      return _.merge(
        {},
        baseStyle,
        { background: `linear-gradient(to left,${bgColor1},${bgColor2})` },
        textStyle,
      );
    }
    if (colorLinearType === 'toSide') {
      // 从左中间到两边
      return _.merge(
        {},
        baseStyle,
        {
          background: `linear-gradient(to right,${bgColor1} 0%,${bgColor2} 50%,${bgColor1} 100%)`,
        },
        textStyle,
      );
    }
  }
  return _.merge({}, baseStyle, { background: bgColor }, textStyle);
}

/**
 * 触发事件
 *
 * @format
 * @param data 数据源
 * @param textStyle 覆盖样式
 * @param baseStyle 基础样式
 */

export function getLinearColor(
  colorLinear: boolean,
  bgColor1: string,
  bgColor2: string,
  colorLinearType: string,
  width?: string,
) {
  if (colorLinear) {
    // 颜色渐变
    if (colorLinearType === 'toRight') {
      // 从左到右
      if (width) {
        return `linear-gradient(to right,${bgColor1},${bgColor2})  1 ${width}`;
      }
      return `linear-gradient(to right,${bgColor1},${bgColor2})`;
    }
    if (colorLinearType === 'toLeft') {
      // 从右到左
      if (width) {
        return `linear-gradient(to left,${bgColor1},${bgColor2}) 1 ${width}`;
      }
      return `linear-gradient(to left,${bgColor1},${bgColor2})`;
    }
    if (colorLinearType === 'toSide') {
      // 从左中间到两边
      if (width) {
        return `linear-gradient(${bgColor1} ,${bgColor2} ,${bgColor1}  1 )`;
      }
      return `linear-gradient(to right,${bgColor1} 0%,${bgColor2} 50%,${bgColor1} 100%)`;
    }
  }
}