<template>
  <div class="home-contain">
    <el-row :gutter="20">
      <el-col :span="24">
        <basic-card title="研发项目情况">
          <template slot="actions">
            <el-select placeholder="请选择年份" v-model="currYear" style="width: 90px;">
              <el-option value="2025">2025</el-option>
              <el-option value="2024">2024</el-option>
              <el-option value="2023">2023</el-option>
              <el-option value="2022">2022</el-option>
              <el-option value="2021">2021</el-option>
            </el-select>
            <el-button type="primary" style="margin-left: 6px;">搜索</el-button>
          </template>

          <el-row style="margin-top: 45px">
            <el-col :span="8">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="topPie1Options"
              />
            </el-col>
            <el-col :span="8">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="topPie2Options"
              />
            </el-col>
          </el-row>
        </basic-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <basic-card title="研发投入情况">
          <p>
            年度研发投入金额为
            <span class="count">6200</span>
            万元，已归集研发费用金额为
            <span class="count">4000</span>
            万元
          </p>
          <p>
            研发项目进度为
            <span class="count">75%</span>
            ，(按费用归集金额计算)，低于月度预计进度。
          </p>

          <el-row style="margin-top: 45px">
            <el-col :span="8">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="ysBarOptions"
              />
            </el-col>
            <el-col :span="8">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="yffyPieOptions"
              />
            </el-col>
            <el-col :span="8">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="yfhmProjectOptions"
              />
            </el-col>
          </el-row>
        </basic-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <basic-card title="知识产权结构">
          <p>截止到2023年9月全集团申请</p>
          <p>
            获得知识产权成果为
            <span class="count">79</span>
            个，发明专利
            <span class="count">9</span>
            个，实用新型专利<span class="count">69</span>个
          </p>

          <el-row style="margin-top: 45px">
            <el-col :span="8">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="zscqOptions"
              />
            </el-col>
            <el-col :span="8">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="zlPieOptions"
              />
            </el-col>
            <el-col :span="8">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="xxZlPieOptions"
              />
            </el-col>
          </el-row>
        </basic-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import basicCard from "@/components/basic-card";
import basicChart from "@/components/basic-chart";

export default {
  name: "home",
  components: {
    basicCard,
    basicChart,
  },
  data() {
    return {
      currYear: "2025",
      topPie1Options: {},
      topPie2Options: {},
      ysBarOptions: {
        grid: {
          top: "13%",
          left: "12%",
          right: "8%",
          bottom: "8%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: 'category',
          data: ['预计研发投入金额', '实际已归集研发费用金额']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [6200, 5000],
            type: 'bar',
            barWidth: "25%"
          }
        ]
      },
      yffyPieOptions: {},
      yfhmProjectOptions: {},
      zscqOptions: {},
      zlPieOptions: {},
      xxZlPieOptions: {},
    };
  },
  mounted() {
    this.initTopPie1Options();
    this.initTopPie2Options();
    this.initYfffChartOptions();
    this.initYfhmProjectOptions();
    this.initZscqChartOptions();
    this.initZlChartOptions();
    this.initXxzlChartOptions();
  },
  methods: {
    initTopPie1Options() {
      this.topPie1Options = this.getPieOptions("", [
        { value: 10, name: "已竣工验收研发项目" },
        { value: 1, name: "中止研发项目" },
        { value: 3, name: "正在进行中的研发项目" },
      ]);
    },
    initTopPie2Options() {
      this.topPie2Options = this.getPieOptions("", [
        { value: 10, name: "自主研发项目" },
        { value: 1, name: "委外研发项目" },
        { value: 3, name: "集中研发项目" },
        { value: 3, name: "合作研发项目" },
      ]);
    },
    initYfhmProjectOptions() {
      this.yfhmProjectOptions = {
        title: {
          text: "2023年科研费用",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          left: "center",
          bottom: 0,
        },
        grid: {
          top: "13%",
          left: "8%",
          right: "2%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["项目1", "项目二", "项目三", "项目四", "项目五", "项目六"],
        },
        series: [
          {
            name: "已归集研发费用",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 630230],
          },
          {
            name: "全年研发投入金额",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807],
          },
        ],
      };
    },
    initYfffChartOptions() {
      this.yffyPieOptions = this.getPieOptions("2023年研发费用", [
        { value: 100, name: "人员人工费用" },
        { value: 200, name: "直接投入费用" },
        { value: 50, name: "折旧费用" },
        { value: 9, name: "无形资产推销" },
        { value: 10, name: "勘探开发技术的现场试验费" },
        { value: 5, name: "其他相关费用" },
        { value: 10, name: "委外研发费用" },
      ]);
    },
    initZscqChartOptions() {
      this.zscqOptions = this.getPieOptions("截止2025年3月知识产权数量", [
        { value: 69, name: "使用新型专利" },
        { value: 9, name: "发明专利" },
      ]);
    },
    initZlChartOptions() {
      this.zlPieOptions = this.getPieOptions("各子公司发明专利数量", [
        { value: 2, name: "银漫矿业" },
        { value: 4, name: "融冠矿业" },
        { value: 1, name: "荣邦矿业" },
        { value: 2, name: "乾金达矿业" },
      ]);
    },
    initXxzlChartOptions() {
      this.xxZlPieOptions = this.getPieOptions("各子公司实用新型专利数量", [
        { value: 5, name: "银漫矿业" },
        { value: 2, name: "融冠矿业" },
        { value: 3, name: "荣邦矿业" },
        { value: 1, name: "乾金达矿业" },
      ]);
    },
    getPieOptions(title, seriesData) {
      let options = {
        title: {
          text: title,
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: 0,
          textStyle: {
            rich: {
              a: {
                verticalAlign: "right",
                align: "left",
                width: 180,
                fontSize: 14,
              },
              num: {
                align: "right",
                fontSize: 14,
                color: "rgb(64, 158, 255)",
              },
            },
          },
          formatter: function (name) {
            let currItem = seriesData.find((item) => item.name === name);
            let str = "{a|" + name + "}{num|" + currItem.value + "个}";
            return str;
          },
        },
        series: [
          {
            name: title,
            type: "pie",
            radius: "50%",
            radius: ["45%", "70%"],
            center: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: seriesData,
          },
        ],
      };
      return options;
    },
  },
};
</script>

<style lang="scss" scoped>
.home-contain {
  min-height: calc(100vh - 50px);
  background-color: #eee;
  padding: 16px 18px;
  box-sizing: border-box;
}

.count {
  font-size: 20px;
  font-weight: 600;
  color: rgb(64, 158, 255);
  margin: 0 3px;
}
</style>
