const grid = {
  left: 100,
  right: 100,
  top: 30,
  bottom: 50
};

const color = ['#4FD6A9', '#409EFF', '#ECF5FF', '#FFC069'];
const titleList = [
  { name: '全勤人数', color: '#fff' },
  { name: '半勤人数', color: '#fff' },
  { name: '缺勤人数', color: '#000' },
  { name: '请假人数', color: '#000' }
];

// export const echartsConfig = (ref: any, list?: any) => {
//   const commandstatsIntance = echarts.init(ref, 'macarons');
// };

export const option = (list?: any) => {
  const attendanceArray = list.map((item) => item.attendance);
  const halfAttendanceArray = list.map((item) => item.halfAttendance);
  const absenteeismArray = list.map((item) => item.absenteeism);
  const leaveArray = list.map((item) => item.leave);

  const rawData = [attendanceArray, halfAttendanceArray, absenteeismArray, leaveArray];
  const series: any = titleList.map((item, sid) => {
    return {
      name: item.name,
      type: 'bar',
      stack: 'total',
      barWidth: '25',
      label: {
        show: true,
        color: item.color,
        fontSize: 10,
        formatter: function (params) {
          return params.value > 0 ? params.value : '';
        }
      },
      data: rawData[sid]
    };
  });
  const data = list.map((item) => item.clockDate);
  const option = {
    legend: {
      selectedMode: false,
      right: 0
    },
    grid,
    yAxis: {
      type: 'value',
      show: false
    },
    xAxis: {
      type: 'category',
      data
    },
    series,
    color
  };
  return option;
};