/**
 * @author  daya
 * @createDate  2021/11/15 16:50
 * 饼状图图放入宽度设置(pieSeries)
 **/
import {defaultColor, defaultFontSize, labelStyle} from '../../../../charts'
export const fontStyle = {
  color: defaultColor,
  fontSize: defaultFontSize
}
// 样式1 的多条线样式
export const seriesStyle1 = {
  name: '',
  type: 'pie',
  radius: '50%',
  data: []
}
// 样式2 的多条线样式
export const seriesStyle2 = {
  ...seriesStyle1,
  radius: ['40%', '70%'],
  avoidLabelOverlap: false,
  itemStyle: {
    borderRadius: 10,
    borderColor: '#fff',
    borderWidth: 2
  },
  label: {
    show: false,
    position: 'center'
  },
  emphasis: {
    label: {
      show: true,
      fontSize: defaultFontSize,
      fontWeight: 'bold'
    }
  },
  labelLine: {
    show: false
  },
  data: []
}
// 样式3 的多条线样式
export const seriesStyle3 = {
  ...seriesStyle1,
  radius: ['40%', '70%'],
  avoidLabelOverlap: false,
  label: {
    show: false,
    position: 'center'
  },
  emphasis: {
    label: {
      show: true,
      fontSize: defaultFontSize,
      fontWeight: 'bold'
    }
  },
  labelLine: {
    show: false
  },
  data: []
}
// 样式4 的多条线样式
export const seriesStyle4 = {
  ...seriesStyle1,
  radius: '55%',
  center: ['50%', '50%'],
  data: [].sort(function (a, b) {
    return a.value - b.value
  }),
  roseType: 'radius',
  label: {
    color: defaultColor
  },
  labelLine: {
    smooth: 0.2,
    length: 10,
    length2: 20
  },
  // itemStyle: {
  //   color: '#c23531',
  //   shadowBlur: 200
  // },
  animationType: 'scale',
  animationEasing: 'elasticOut',
  animationDelay: function (idx) {
    return Math.random() * 200
  }
}
// 样式5 的多条线样式
const piePatternSrc = require('../../../images/wenli/wenli-1.png')
const piePatternImg = new Image()
piePatternImg.src = piePatternSrc
export const seriesStyle5 = {
  name: 'pie',
  type: 'pie',
  selectedMode: 'single',
  selectedOffset: 30,
  clockwise: true,
  label: {
    ...fontStyle
  },
  labelLine: {
    lineStyle: {
      color: defaultColor
    }
  },
  data: [],
  itemStyle: {
    opacity: 0.7,
    color: {
      image: piePatternImg.src,
      repeat: 'repeat'
    },
    borderWidth: 3,
    borderColor: defaultColor
  }
}
// 样式6 的多条线样式
export const seriesStyle6 = [
  {
    name: '',
    type: 'pie',
    radius: [20, 140],
    center: ['25%', '50%'],
    roseType: 'radius',
    itemStyle: {
      borderRadius: 5
    },
    label: {
      show: false
    },
    emphasis: {
      label: {
        show: true
      }
    },
    data: []
  },
  {
    name: '',
    type: 'pie',
    radius: [20, 140],
    center: ['75%', '50%'],
    roseType: 'area',
    itemStyle: {
      borderRadius: 5
    },
    data: []
  }
]
// 样式7 的多条线样式
export const seriesStyle7 = {
  ...seriesStyle1,
  radius: [50, 150],
  center: ['50%', '50%'],
  roseType: 'area',
  itemStyle: {
    borderRadius: 8,
    opacity: 1
  },
  data: []
}
// 样式8 的多条线样式
var datas = [
  // //////////////////////////////////////
  [
    { name: '圣彼得堡来客', value: 5.6 }
  ],
  // ////////////////////////////////////////
  [
    { name: '银河帝国5：迈向基地', value: 3.8 }
  ],
  // //////////////////////////////////////
  [{ name: '克莱因壶', value: 3.5 }]
]
export const seriesStyle8 = datas.map(function (data, idx) {
  var top = idx * 33.3
  return {
    type: 'pie',
    radius: [20, 60],
    top: top + '%',
    height: '33.33%',
    left: 'center',
    width: '100%',
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 1
    },
    label: {
      alignTo: 'edge',
      formatter: '{name|{b}}\n{time|{c} 小时}',
      minMargin: 5,
      edgeDistance: 10,
      lineHeight: 15,
      rich: {
        time: {
          fontSize: 10,
          color: '#999'
        }
      }
    },
    labelLine: {
      length: 15,
      length2: 0,
      maxSurfaceAngle: 80
    },
    data: data
  }
})

// 样式9 的多条线样式
export const seriesStyle9 = {
  name: '',
  type: 'pie',
  radius: '55%',
  center: ['50%', '50%'],
  data: [],
  emphasis: {
    itemStyle: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  }
}
// 样式10 的多条线样式
const weatherIcons = {
  Sunny: require('../../../images/weather/qing.png'),
  Cloudy: require('../../../images/weather/xue.png'),
  Showers: require('../../../images/weather/yu.png')
}
export const seriesStyle10 = {
  ...seriesStyle1,
  radius: '45%',
  center: ['50%', '50%'],
  selectedMode: 'single',
  data: [
    {
      value: 150,
      name: '',
      label: {
        formatter: [
          '{title|{b}}{abg|}',
          '  {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
          '{hr|}',
          '  {Sunny|}{value|202}{rate|55.3%}',
          '  {Cloudy|}{value|142}{rate|38.9%}',
          '  {Showers|}{value|21}{rate|5.8%}'
        ].join('\n'),
        backgroundColor: '#eee',
        borderColor: '#777',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          title: {
            color: '#eee',
            align: 'center'
          },
          abg: {
            backgroundColor: '#333',
            width: '100%',
            align: 'right',
            height: 25,
            borderRadius: [4, 4, 0, 0]
          },
          Sunny: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image: weatherIcons.Sunny
            }
          },
          Cloudy: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image: weatherIcons.Cloudy
            }
          },
          Showers: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image: weatherIcons.Showers
            }
          },
          weatherHead: {
            color: '#333',
            height: 24,
            align: 'left'
          },
          hr: {
            borderColor: '#777',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          value: {
            width: 20,
            padding: [0, 20, 0, 30],
            align: 'left'
          },
          valueHead: {
            color: '#333',
            width: 20,
            padding: [0, 20, 0, 30],
            align: 'center'
          },
          rate: {
            width: 40,
            align: 'right',
            padding: [0, 10, 0, 0]
          },
          rateHead: {
            color: '#333',
            width: 40,
            align: 'center',
            padding: [0, 10, 0, 0]
          }
        }
      }
    }
  ],
  emphasis: {
    itemStyle: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  }
}
// 样式11 的多条线样式
export const seriesStyle11 = [
  {
    name: '',
    type: 'pie',
    selectedMode: 'single',
    radius: [0, '30%'],
    label: {
      show: false
    },
    labelLine: {
      show: false
    },
    data: []
  },
  {
    name: '',
    type: 'pie',
    radius: ['45%', '60%'],
    labelLine: {
      length: 30
    },
    label: {
      ...labelStyle
    },
    // label: {
    //   formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
    //   backgroundColor: '#F6F8FC',
    //   borderColor: '#8C8D8E',
    //   borderWidth: 1,
    //   borderRadius: 4,
    //   rich: {
    //     a: {
    //       color: '#6E7079',
    //       lineHeight: 22,
    //       align: 'center'
    //     },
    //     hr: {
    //       borderColor: '#8C8D8E',
    //       width: '100%',
    //       borderWidth: 1,
    //       height: 0
    //     },
    //     b: {
    //       color: '#4C5058',
    //       fontSize: 14,
    //       fontWeight: 'bold',
    //       lineHeight: 33
    //     },
    //     per: {
    //       color: '#fff',
    //       backgroundColor: '#4C5058',
    //       padding: [3, 4],
    //       borderRadius: 4
    //     }
    //   }
    // },
    data: []
  }
]
// 样式12 的多条线样式
export const seriesStyle12 = [
  {
    ...seriesStyle1,
    radius: ['50%', '68%'],
    avoidLabelOverlap: false,
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: defaultFontSize,
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: []
  },
  {
    ...seriesStyle1,
    radius: ['33%', '48%'],
    avoidLabelOverlap: false,
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: defaultFontSize,
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: []
  }
]
export const seriesStyle31 = {
  name: '',
  type: 'pie',
  radius: ['75%', '88%'],
  center: ['20%', '50%'],
  data: [],
  itemStyle: {
    normal: {
      borderWidth: 4,
      borderColor: 'rgba(8, 19, 35, 1)'
    }
  },
  label: {
    normal: {
      show: true,
      position: 'center',
      color: '#EBE9E8',
      formatter: '{span|{c}}' + '\n' + '{pre|总数}',
      // formatter: '{span|{c}}' + '\n' + '{pre|总数}' + '\n' + '{div|{span|21321321}{span|21321321}}',
      rich: {
        span: {
          fontSize: 24,
          padding: [3.5, 0, 10, 0],
          color: '#EBE9E8'
        },
        pre: {
          fontSize: 18,
          color: '#ccc'
        },
        div: {
          padding: [-100, 0, 0, 400]
        }
      }
    }

  }

}
export const seriesStyle41 = {
  name: '',
  type: 'pie',
  radius: ['75%', '88%'],
  center: ['20%', '50%'],
  data: [],
  itemStyle: {
    normal: {
      borderWidth: 4,
      borderColor: 'rgba(8, 19, 35, 1)'
    }
  },
  label: {
    show: true,
    position: 'center',
    color: '#EBE9E8',
    formatter: '{span|{c}}' + '\n' + '{pre|总数}',
    rich: {
      span: {
        fontSize: 24,
        padding: [3.5, 0, 10, 0],
        color: '#EBE9E8'
      },
      pre: {
        fontSize: 18,
        color: '#ccc'
      }
    }
  }

}
export const seriesStyle42 = {
  name: '',
  type: 'pie',
  radius: ['75%', '88%'],
  center: ['20%', '50%'],
  data: [],
  itemStyle: {
    normal: {
      borderWidth: 4,
      borderColor: 'rgba(8, 19, 35, 1)'
    }
  },
  label: {
    show: true,
    position: 'center',
    color: '#EBE9E8',
    formatter: '{span|{c}}' + '\n' + '{pre|总数}',
    rich: {
      span: {
        fontSize: 24,
        padding: [3.5, 0, 10, 0],
        color: '#EBE9E8'
      },
      pre: {
        fontSize: 18,
        color: '#ccc'
      }
    }
  }

}
export const pieSeries = {
  seriesStyle1,
  seriesStyle2,
  seriesStyle3,
  seriesStyle4,
  seriesStyle5,
  seriesStyle6,
  seriesStyle7,
  seriesStyle8,
  seriesStyle9,
  seriesStyle10,
  seriesStyle11,
  seriesStyle12,
  seriesStyle31,
  seriesStyle41,
  seriesStyle42
}

export default pieSeries
