<template>
  <div>
    <center1>
      <div class="data">
        <div class="top_tab">
          <bigScreenTabs
            slot="datePicker"
            v-model="index"
            :titleArr="['全年', '本月']"
          ></bigScreenTabs>
        </div>
        <div class="data-item">
          <div>
            <img src="./icon1.png" alt="" /><span style="font-weight: bold"
              >收入</span
            >
          </div>
          <div class="box">
            <i>{{ handleMillion(resData.realIncome) }}/</i
            ><i class="num">{{ handleMillion(resData.targetIncome) }}</i
            ><span class="num2">亿元</span>
          </div>
          <!-- <div style="width: 100%">
            <progressBar
              :percentage="(resData.realIncome / resData.targetIncome) * 100"
            />
          </div> -->
        </div>
        <div class="data-item">
          <div>
            <img src="./icon2.png" alt="" /><span style="font-weight: bold"
              >利润</span
            >
          </div>
          <div class="box">
            <i>{{ handleMillion(resData.realProfit) }}/</i
            ><i class="num">{{ handleMillion(resData.targetProfit) }}</i
            ><span class="num2">亿元</span>
          </div>
          <!-- <div style="width: 100%">
            <progressBar
              :percentage="(resData.realProfit / resData.targetProfit) * 100"
            />
          </div> -->
        </div>
        <div class="data-item">
          <div>
            <img src="./icon3.png" alt="" /><span style="font-weight: bold"
              >EVA</span
            >
          </div>
          <div class="box">
            <i>{{ handleMillion(resData.realEva) }}/</i
            ><i class="num">{{ handleMillion(resData.targetEva) }}</i
            ><span class="num2">亿元</span>
          </div>
          <!-- <div style="width: 100%">
            <progressBar
              :percentage="(resData.realEva / resData.targetEva) * 100"
            />
          </div> -->
        </div>
        <div class="data-item" style="width: 37%">
          <div>
            <img src="./icon4.png" alt="" /><span style="font-weight: bold"
              >两金<span style="font-size: 14px"
                >（ 产成品 / 应收账款 ）</span
              ></span
            >
          </div>
          <div style="display: flex">
            <div>
              <div class="box" style="margin-bottom: 0; position: relative">
                <i>{{ handleMillion(resData.realCollection) }}/</i
                ><i class="num">{{ handleMillion(resData.targetCollection) }}</i
                ><span class="num2">亿元</span>
                <!-- <div
                  style="
                    font-size: 12px;
                    color: #fff;
                    position: absolute;
                    bottom: -20px;
                  "
                >
                  产成品
                </div> -->
              </div>

              <!-- <div style="display: flex">
                <progressBar
                  :percentage="
                    (resData.realCollection / resData.targetCollection) * 100
                  "
                />
              </div> -->
            </div>
            <div style="margin-left: 10px">
              <div class="box" style="margin-bottom: 0; position: relative">
                <i>{{ handleMillion(resData.realFinishProduct) }}/</i
                ><i class="num">{{
                  handleMillion(resData.targetFinishProduct)
                }}</i
                ><span class="num2">亿元</span>
                <!-- <div
                  style="
                    font-size: 12px;
                    color: #fff;
                    position: absolute;
                    bottom: -20px;
                  "
                >
                  应收账款
                </div> -->
              </div>
              <!-- <div style="display: flex">
                <progressBar
                  :percentage="
                    (resData.realFinishProduct / resData.targetFinishProduct) *
                    100
                  "
                />
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="center_box">
        <rocketTit>经营指标完成率</rocketTit>
        <el-date-picker
          v-model="month"
          value-format="yyyy-MM"
          v-if="index2 == 0"
          type="month"
          size="mini"
          placeholder="选择月"
        >
        </el-date-picker>
        <bigScreenTabs
          slot="datePicker"
          v-model="index2"
          :titleArr="['全年', '本月']"
        ></bigScreenTabs>
        <div
          style="height: 182px; width: 100%"
          ref="chart"
          v-if="index2 == 0"
        ></div>
        <div style="height: 182px; width: 100%" ref="chart4" v-else></div>
      </div>
      <div class="center_box">
        <rocketTit>成本分析</rocketTit>
        <el-row style="height: 182px; width: 100%" :gutter="12">
          <el-col style="height: 100%" :span="18">
            <div style="height: 100%" ref="chart2"></div>
          </el-col>
          <el-col :span="6" style="height: 100%">
            <div style="height: 100%" ref="chart3"></div>
          </el-col>
        </el-row>
      </div>
    </center1>
  </div>
</template>

<script>
import center1 from "./components/center1/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from "./../components/progress/index.vue";
import colorList from "@/utils/colorPalette";
import {
  blueColorList,
  greenColorList,
  yelloColorList,
} from "@/utils/gradualColor";

import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
  mixins: [resize],
  name: "left1",
  components: {
    center1,
    rocketTit,
    progressBar,
    bigScreenTabs,
  },
  data() {
    return {
      index: 0,
      index2: 0,
      month: "",
      chart: null,
      chart2: null,
      chart3: null,
      chart4: null,
      resData: {
        realCollection: 0,
        realEva: 0,
        realFinishProduct: 0,
        realIncome: 0,
        realProfit: 0,
        targetCollection: 0,
        targetEva: 0,
        targetFinishProduct: 0,
        targetIncome: 0,
        targetProfit: 0,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.initChart2();
      this.getData(1);
    });
  },
  beforeDestroy() {},
  watch: {
    month(newVal) {
      this.initChart(newVal);
    },
    index(newVal, oldVal) {
      if (newVal == 0) {
        this.getData(1);
      } else {
        this.getData(2);
      }
    },
    index2(newVal, oldVal) {
      if (newVal == 0) {
        this.chart4.dispose();
        this.chart4 = null;
        this.$nextTick(() => {
          this.initChart();
        });
      } else {
        this.chart.dispose();
        this.chart = null;
        this.$nextTick(() => {
          this.initChart4();
        });
      }
    },
  },
  methods: {
    getData(type) {
      this.request({
        url: "/hx/operating/getFactoryOperateIndexPic",
        method: "get",
        params: { type: type },
      }).then((res) => {
        if (200 == res.code && res.data) {
          this.resData = res.data;
        }
      });
    },
    initChart(month) {
      let params = { type: 2 };
      if (month) {
        params["month"] = month;
      }
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      this.request({
        url: "/hx/operating/getDeptOperateIndexPic",
        method: "get",
        params: params,
      }).then((res) => {
        if (200 == res.code) {
          let { list } = res.data;
          this.chart = echarts.init(this.$refs.chart, "macarons");
          this.chart.setOption({
            tooltip: {
              // trigger: 'axis',
              // formatter: '{a1}<br/>{b1}：{c1}',
            },
            legend: {
              data: ["数量", "完成率"],
              textStyle: {
                color: "#fff", //legend字体颜色
              },
              left: "left",
              left: "10%",
              // selectedMode: false,
            },
            grid: {
              containLabel: true,
              left: 20,
              right: 10,
              top: 30,
              bottom: 0,
            },
            xAxis: {
              data: list.map((e) => e.deptName),
              //   data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'],
              axisLine: {
                lineStyle: {
                  color: "rgb(255, 255, 255)",
                },
              },
            },
            // dataZoom: {
            // 	type: 'slider',
            // 	start: 0,
            // 	end: 50,
            // },
            color: ["#ccc", "red"],
            yAxis: [
              {
                name: "个",
                splitLine: {
                  show: true,
                  //  改变轴线颜色
                  lineStyle: {
                    // 使用深浅的间隔色
                    color: ["rgba(255, 255, 255,.5)"],
                  },
                },
                axisLabel: {
                  formatter: "{value}",
                },
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
              {
                type: "value",
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                  formatter: "{value} %",
                },
                splitLine: {
                  show: false, //不显示网格线
                },
                splitArea: {
                  show: false, //不显示网格区域
                },
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
            ],
            series: [
              // {
              // 	name: '目标',
              // 	type: 'bar',
              // 	z: '-1',
              // 	barGap: '-75%',
              // 	barWidth: 30,
              // 	itemStyle: {
              // 		color: 'rgba(85, 197, 162, .3)',
              // 	},
              // 	data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
              // },
              {
                name: "数量",
                type: "bar",
                barWidth: 30,
                position: [0, 0],
                data: list.map((e) => e.realIncome),
                // data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
                itemStyle: {
                  color: {
                    type: "linear", // 线性渐变
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#B5D3FE",
                      },
                      {
                        offset: 1,
                        color: "#7EA7FC",
                      },
                    ],
                  },
                },
              },
              {
                name: "完成率",
                type: "scatter",
                symbol: "rect",
                symbolSize: [30, 4],
                symbolOffset: [0, 0],
                position: [0, 0],
                yAxisIndex: 1,
                itemStyle: {
                  color: "#F6D97E",
                },
                data: list.map((e) => e.rate),
                // data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
              },
            ],
          });
        }
      });
    },

    // 折线图
    initChart2() {
      this.request({
        url: "/hx/operating/getCostAnalysisPic",
        method: "get",
      }).then((res) => {
        if (200 == res.code) {
          let { list, rate } = res.data;
          this.chart2 = echarts.init(this.$refs.chart2, "macarons");
          this.setOptions2(list);
          this.initChart3(rate);
        }
      });
    },
    setOptions2(list) {
      this.chart2.setOption({
        legend: {
          left: "right",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          top: "3%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: list.map((e) => e.month),
            // axisPointer: {
            // 	type: 'shadow',
            // },
            axisLine: {
              lineStyle: {
                color: "rgb(255, 255, 255)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: "{value} %",
            },
            splitLine: {
              // show: false, //不显示网格线
              lineStyle: {
                color: "#2b3b6c",
              },
            },
            // splitArea: {
            // 	show: false, //不显示网格区域
            // },
            axisLine: {
              lineStyle: {
                color: "rgb(255, 255, 255)",
              },
            },
          },
        ],
        grid: {
          containLabel: true,
          width: "99%",
          left: 0,
          top: 30,
          bottom: 0,
        },
        series: [
          {
            name: "预算执行率",
            type: "line",
            yAxisIndex: 0,
            smooth: false,
            //
            data: list.map((e) => e.rate),
            // data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
            itemStyle: {
              color: "#1098FF",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(16, 152, 255, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(51, 65, 106, 0.18)",
                },
              ]),
            },
            symbol: "none",
          },
        ],
      });
    },
    initChart3(rate) {
      if (!rate) {
        return;
      }
      this.chart3 = echarts.init(this.$refs.chart3, "macarons");
      this.setOptions3(rate);
    },
    setOptions3(rate) {
      this.chart3.setOption({
        tooltip: {
          trigger: "item",
        },
        // color: colorList,
        // legend: {
        // 	top: '5%',
        // 	right: '5%',
        // 	orient: 'vertical',
        // 	y: 'center',
        // 	// left: 'right',
        // 	textStyle: {
        // 		color: '#fff', //legend字体颜色
        // 	},
        // },
        series: [
          {
            name: "占比",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["65%", "85%"],
            clockWise: false, // 逆时针
            hoverAnimation: false, // hover 效果
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: rate.total, name: "总2" },
              { value: rate.toolingTotal, name: "工装成本占比" },
            ],
            color: ["#73cdcf", "#2f6a74"],
          },
          {
            name: "占比",
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "50%"],
            clockWise: false, // 逆时针
            hoverAnimation: false, // hover 效果
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: rate.total, name: "总1" },
              { value: rate.materialTotal, name: "原材料成本占比" },
            ],
            color: ["#f6d97e", "#7f7462"],
          },
        ],
      });
    },

    initChart4() {
      this.request({
        url: "/hx/operating/getDeptOperateIndexPic",
        method: "get",
        params: { type: 1 },
      }).then((res) => {
        if (200 == res.code) {
          let { list } = res.data;
          this.chart4 = echarts.init(this.$refs.chart4);
          this.chart4.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              orient: "vertical",
              x: "right",
              // y: 'center',
              top: "20%",
              textStyle: {
                color: "#fff", //legend字体颜色
              },
            },
            grid: {
              left: 20,
              right: "25%",
              top: 30,
              bottom: 50,
              containLabel: true,
            },
            dataZoom: {
              type: "slider",
              // start: 0,
              // end: 50,
              textStyle: {
                color: "#fff",
              },
            },
            xAxis: [
              {
                type: "category",
                data: list.map((e) => e.month),
                // data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
            ],
            yAxis: [
              {
                splitLine: {
                  show: true,
                  //  改变轴线颜色
                  lineStyle: {
                    // 使用深浅的间隔色
                    color: ["rgba(255, 255, 255,.5)"],
                  },
                },
                axisLabel: {
                  formatter: "{value}",
                },
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
              {
                type: "value",
                axisLabel: {
                  formatter: "{value} %",
                },
                splitLine: {
                  show: false, //不显示网格线
                },
                splitArea: {
                  show: false, //不显示网格区域
                },
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
            ],
            series: [
              {
                name: "EVA",
                type: "bar",
                stack: "Ad",
                emphasis: {
                  focus: "series",
                },
                itemStyle: {
                  color: "#F6D97E",
                },
                barWidth: 30,
                data: list.map((e) => e.realEva),
                // data: [150, 232, 201, 154, 190, 330, 410],
              },
              {
                name: "两金",
                type: "bar",
                stack: "Ad",
                emphasis: {
                  focus: "series",
                },
                itemStyle: {
                  color: "#F89343",
                },
                barWidth: 30,
                data: list.map((e) => e.realCollection),
                // data: [150, 232, 201, 154, 190, 330, 410],
              },
              {
                name: "利润",
                type: "bar",
                stack: "Ad",
                emphasis: {
                  focus: "series",
                },
                itemStyle: {
                  color: "#83DDC5",
                },
                barWidth: 30,
                data: list.map((e) => e.realProfit),
                // data: [150, 232, 201, 154, 190, 330, 410],
              },
              {
                name: "收入",
                type: "bar",
                stack: "Ad",
                emphasis: {
                  focus: "series",
                },
                itemStyle: {
                  color: "#ADCDFD",
                },
                barWidth: 30,
                data: list.map((e) => e.realIncome),
                // data: [150, 232, 201, 154, 190, 330, 410],
              },
              {
                name: "收入完成率",
                type: "line",
                smooth: false,
                data: list.map((e) => e.incomeRate),
                // data: [500, 550, 700, 520, 650, 520, 550],
                itemStyle: {
                  color: "#8BB1ED",
                },
                symbol: "none",
              },
              {
                name: "利润完成率",
                type: "line",
                smooth: false,
                itemStyle: {
                  color: "#53C19D",
                },
                data: list.map((e) => e.profitRate),
                // data: [600, 500, 700, 620, 750, 800, 600],
                symbol: "none",
              },
              {
                name: "两金完成率",
                type: "line",
                yAxisIndex: 1,
                smooth: false,
                data: list.map((e) => e.collectionRate),
                // data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
                itemStyle: {
                  color: "#F64F58",
                },
                symbol: "none",
              },
              {
                name: "EVA完成率",
                type: "line",
                yAxisIndex: 1,
                smooth: false,
                data: list.map((e) => e.evaRate),
                itemStyle: {
                  color: "#F6D97E",
                },
                symbol: "none",
              },
            ],
          });
        }
      });

      //   this.setOptions4()
    },
    // setOptions4 () {
    //   },
  },
};
</script>

<style lang="scss" scoped>
.center_box {
  position: relative;
  margin-top: 8px;
  width: 100%;
  height: 225px;
  padding: 10px 25px;
  background-image: url(./center.png);
  ::v-deep .el-date-editor {
    position: absolute;
    right: 190px;
    top: 12px;
    border-radius: 0;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    vertical-align: middle;
    color: #fff;
    background-color: transparent;
    .el-range-input,
    .el-range-separator {
      color: #fff;
    }
    .el-range-editor.is-active {
      border-color: #fff !important;
    }

    input {
      background-color: transparent;
    }
  }
  .BigScreenTabs {
    position: absolute;
    right: 16px;
    top: 12px;
  }
}
.tit {
  padding: 16px 24px;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.data {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  // margin: 0 30px;
  height: 120px;
  background: rgba(145, 213, 254, 0.1);
  color: #ffffff;
  font-size: 18px;
  .top_tab {
    position: absolute;
    top: 0;
    right: 0;
  }
  .data-item {
    // flex: 1;
    width: 19%;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // justify-content: space-between;
    align-items: flex-start;
    > div {
      margin: 5px 0;
      // text-align: center;
      img {
        // width: 10px;
        // height: 10px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    .box {
      font-size: 20px;
      font-family: Roboto-BlackItalic, Roboto;
      font-weight: 600;
      color: #55c5a2;
    }
    .num {
      font-size: 13px;
    }
    .num2 {
      font-size: 14px;
      margin-left: 5px;
      color: #fff;
    }
  }
}

.top_tab {
  ::v-deep .BigScreenTabs {
    .button {
      padding: 0;
      transform: unset;
      height: 24px;
      line-height: 24px;
      font-weight: 500;
      color: #ffffff;
      font-size: 12px;
      width: 40px;
      min-width: 40px;
      div {
        transform: unset;
      }
    }
  }
}
</style>
