import { WeaLocaleProvider } from "ecCom";
import { format_with_regex } from "../../../util";

const { getLabel } = WeaLocaleProvider;
export const condition = [
  {
    items: [
      {
        colSpan: 2,
        checkbox: false,
        checkboxValue: false,
        conditionType: "SELECT",
        domkey: ["taxAgent"],
        fieldcol: 18,
        label: getLabel(111, "个税扣缴义务人"),
        labelcol: 6,
        options: [],
        multiple: true,
        viewAttr: 2
      },
      {
        browserConditionParam: {
          completeParams: {},
          conditionDataParams: {},
          dataParams: {},
          destDataParams: {},
          hasAddBtn: false,
          hasAdvanceSerach: true,
          idSeparator: ",",
          isAutoComplete: 1,
          isDetail: 0,
          isMultCheckbox: false,
          isSingle: false,
          linkUrl: "",
          pageSize: 10,
          quickSearchName: "",
          replaceDatas: [],
          title: getLabel(111, "分部"),
          type: "164",
          viewAttr: 2
        },
        colSpan: 2,
        conditionType: "BROWSER",
        domkey: ["subCompany"],
        fieldcol: 18,
        isQuickSearch: false,
        label: getLabel(111, "分部"),
        labelcol: 6,
        viewAttr: 2
      },
      {
        browserConditionParam: {
          completeParams: {},
          conditionDataParams: {},
          dataParams: {},
          destDataParams: {},
          hasAddBtn: false,
          hasAdvanceSerach: true,
          idSeparator: ",",
          isAutoComplete: 1,
          isDetail: 0,
          isMultCheckbox: false,
          isSingle: false,
          linkUrl: "",
          pageSize: 10,
          quickSearchName: "",
          replaceDatas: [],
          title: getLabel(111, "部门"),
          type: "57",
          viewAttr: 2
        },
        colSpan: 2,
        conditionType: "BROWSER",
        domkey: ["department"],
        fieldcol: 18,
        isQuickSearch: false,
        label: getLabel(111, "部门"),
        labelcol: 6,
        viewAttr: 2
      },
      // {
      //   browserConditionParam: {
      //     completeParams: {},
      //     conditionDataParams: {},
      //     dataParams: {},
      //     destDataParams: {},
      //     hasAddBtn: false,
      //     hasAdvanceSerach: true,
      //     idSeparator: ",",
      //     isAutoComplete: 1,
      //     isDetail: 0,
      //     isMultCheckbox: false,
      //     isSingle: false,
      //     linkUrl: "",
      //     pageSize: 10,
      //     quickSearchName: "",
      //     replaceDatas: [],
      //     title: getLabel(111, "岗位"),
      //     type: "278",
      //     viewAttr: 2
      //   },
      //   colSpan: 2,
      //   conditionType: "BROWSER",
      //   domkey: ["position"],
      //   fieldcol: 18,
      //   isQuickSearch: false,
      //   label: getLabel(111, "岗位"),
      //   labelcol: 6,
      //   viewAttr: 2
      // },
      {
        browserConditionParam: {
          completeParams: {},
          conditionDataParams: {},
          dataParams: {},
          destDataParams: {},
          hasAddBtn: false,
          hasAdvanceSerach: true,
          idSeparator: ",",
          isAutoComplete: 1,
          isDetail: 0,
          isMultCheckbox: false,
          isSingle: false,
          linkUrl: "",
          pageSize: 10,
          quickSearchName: "",
          replaceDatas: [],
          title: getLabel(111, "人员"),
          type: "17",
          viewAttr: 2
        },
        colSpan: 2,
        conditionType: "BROWSER",
        domkey: ["employee"],
        fieldcol: 18,
        isQuickSearch: false,
        label: getLabel(111, "人员"),
        labelcol: 6,
        viewAttr: 2
      },
      {
        colSpan: 2,
        conditionType: "RANGEPICKER",
        domkey: ["hiredate1", "hiredate2"],
        fieldcol: 18,
        label: getLabel(111, "入职日期"),
        labelcol: 6,
        viewAttr: 2
      }
    ],
    title: "",
    defaultshow: true
  }
];

const colorList = [
  "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81",
  "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81",
  "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81"
];
export const mapBarOptions = (params) => ({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    backgroundColor: "#FFF",
    borderColor: "#FFF",
    borderWidth: "1",
    borderRadius: "5",
    textStyle: {
      color: "#333"
    },
    formatter: function (params) {
      let str = params[0].axisValue + "<br>";
      for (let item of params) {
        str += `<div>${item.marker}${item.seriesName}<span style='display:inline-block;width: 10px'></span><span style='font-weight: bold'>${format_with_regex(item.value)}</span></div>`;
      }
      return str;
    }
  },
  legend: {
    type: "scroll",
    icon: "rect",
    top: "0%",
    right: "center",
    itemGap: 10,
    textStyle: {
      fontSize: 12,//字体大小
      color: "#B8B8B8"//字体颜色
    }
  },
  grid: {
    top: "10%",
    right: "0%",
    left: "5%",
    bottom: "0%",
    containLabel: true
  },
  xAxis: params.xAxis.map((item, index) => {
    const data = Array(params.xAxis.length).fill("");
    data[index] = item;
    return {
      type: "category",
      position: "bottom",
      data: data,
      axisTick: {
        alignWithLabel: true,
        show: false
      },
      axisLabel: {
        interval: 0,
        margin: 10,
        textStyle: {
          fontSize: 11
        }
      }
    };
  }),
  yAxis: {
    name: params.name,
    type: "value",
    axisLabel: {
      padding: [3, 0, 0, 0],
      formatter: "{value}",
      color: "#666",
      textStyle: {
        fontSize: 11
      }
    },
    nameTextStyle: {
      color: "#787E95",
      fontSize: 12
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "transparent"
      }
    },
    axisTick: {
      show: false // 不显示坐标轴刻度线
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: "rgba(66, 192, 255, 0.1)"
      }
    }
  },
  series: params.data.map(item => {
    return [...dealBar(_.map(item.data, (it) => parseFloat(it.replace(/,/g, ""))), item.name)];
  }).reduce((acc, cur) => acc.concat(cur), [])
});
export const mapLineOptions = (params) => ({
  tooltip: {
    // 坐标轴指示器，坐标轴触发有效
    trigger: "axis",
    axisPointer: {
      // 默认为直线，可选为：'line' | 'shadow'
      type: "line"
    }
  },
  legend: {
    type: "scroll",
    icon: "circle",
    top: "0%",
    right: "center",
    itemGap: 20,
    textStyle: {
      fontSize: 12,//字体大小
      color: "#787E95"//字体颜色
    }
  },
  grid: {
    top: "10%",
    left: "3%",
    right: "2%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: params.xAxis,
      axisTick: {
        alignWithLabel: true,
        show: false
      },
      // 修改坐标值样式
      axisLabel: {
        color: "#B8B8B8",
        fontSize: 12,
        show: true
      },
      axisLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      // 修改坐标值样式
      axisLabel: {
        color: "#787E95",
        fontSize: 14
      },
      nameTextStyle: {
        color: "#787E95",
        fontSize: 16
      },
      // 修改坐标轴线样式
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      axisTick: {
        show: false // 不显示坐标轴刻度线
      },
      splitLine: {
        lineStyle: {
          color: "rgba(93,126,158,1)"
        }
      }
    }
  ],
  series: _.map(params.data, (item, index) => {
    return {
      name: item.name,
      data: _.map(item.data, (it) => it.replace(/,/g, "")),
      type: "line",
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
          },
          lineStyle: {
            color: colorList[index] || colorList[Math.floor((Math.random() * colorList.length))]
          }
        }
      }
    };
  })
});
export const mapPieOptions = (params) => ({
  tooltip: {
    show: true,
    formatter: function (params) {
      let str = params.seriesName + "<br>";
      str += params.marker + params.name + ":" + format_with_regex(params.value) + "(" + params.percent + "%" + ")" + "<br>";
      return str;
    }
  },
  legend: {
    type: "scroll",
    icon: "rect",
    top: "0%",
    left: "2%",
    orient: "vertical",
    itemGap: 10,
    textStyle: {
      fontSize: 12,//字体大小
      color: "#787E95"//字体颜色
    }
  },
  series: _.map(params.data, item => {
    return {
      name: item.name,
      data: _.map(item.data, (it) => ({ ...it, value: it.value.replace(/,/g, "") })),
      type: "pie",
      radius: "60%",
      avoidLabelOverlap: true,
      animation: false,
      labelLine: {
        show: true,
        normal: {
          length: 5,
          align: "center"
        }
      },
      itemStyle: {
        normal: {
          color: function (colors) {
            return colorList[colors.dataIndex] || colorList[Math.floor((Math.random() * colorList.length))];
          }
        }
      }
    };
  })
});

const dealBar = (arr, name) => {
  const bar = [];
  arr.forEach((item, index) => {
    const data = [];
    for (let i = 0; i < index; i++) {
      data.push("");
    }
    if (item) {
      data.push(item);
      bar.push({
        name,
        type: "bar",
        xAxisIndex: index,
        barWidth: 32,
        data,
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
            }
          }
        },
        label: {
          show: true,
          position: "insideBottom",
          distance: 15,
          align: "left",
          verticalAlign: "middle",
          rotate: "90",
          formatter: function (params) {
            if (parseInt(params.value) === 0) {
              return ``;
            } else {
              return [
                `{a|${format_with_regex(params.value)}} {b|${params.seriesName}}`
              ];
            }
          },
          rich: {
            a: {
              fontWeight: "bold",
              fontSize: 14,
              color: "#333",
              marginRight: 10
            },
            b: {
              fontSize: 12,
              color: "#333"
            }
          }
        }
      });
    }
  });
  return bar;
};
