<template>
  <div class="home-contain" v-loading="loading">
    

    <div style="position: relative; padding: 16px 0; background-color: #fff;">
      <div style="position: absolute; top: 20px; right: 20px; z-index: 99;">
        <div style="display: flex; align-items: center;">
          <year-month-select v-model="currYear" :showMonth="false" style="margin: 0;" />
          <el-button type="primary" size="mini" icon="el-icon-search" style="margin-left: 12px;" @click="handleSearchBtn">查询</el-button>
        </div>
      </div>

      <el-row gutter="20">
        <el-col :span="9">
          <basic-card title="研发项目情况">
            <avue-data-display :option="projectTotalOpt"></avue-data-display>
            <div style="position: relative;">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="projectStatusOpt"
              />
            </div>
          </basic-card>
        </el-col>
        <el-col :span="9">
          <basic-card title="研发费用情况">
            <avue-data-display :option="RD_costOpt"></avue-data-display>
            <div style="position: relative;">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="yffyPieOptions"
              />
            </div>
          </basic-card>
        </el-col>
      </el-row>

      <el-divider></el-divider>

      <el-row gutter="20">
        <el-col :span="9">
          <basic-card title="研发人员情况">
            <avue-data-display :option="RD_person_zb_opt"></avue-data-display>
            <div style="position: relative;">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="RD_personOpt"
              />
            </div>
          </basic-card>
        </el-col>
        <el-col :span="9">
          <basic-card title="知识产权情况">
            <avue-data-display :option="zscqTotalOpt"></avue-data-display>
            <div style="position: relative;">
              <basic-chart
                style="width: 100%; height: 300px"
                :options="zscqOpt"
              />
            </div>
          </basic-card>
        </el-col>
      </el-row>

      <el-divider></el-divider>

      <basic-card title="本年度月研发归集趋势图">
        <el-row style="margin-top: 45px">
          <el-col :span="24">
            <basic-chart
              style="width: 100%; height: 300px"
              :options="monthAggregationBarOpt"
            />
          </el-col>
        </el-row>
      </basic-card>

      <el-divider></el-divider>

      <basic-card title="项目预算与归集趋势图">
        <el-row :gutter="24">
          <el-col :span="12">
            <basic-chart
              style="width: 100%; height: 300px"
              :options="currYearBudgetOpt"
            />
          </el-col>
          <el-col :span="12">
            <basic-chart
              style="width: 100%; height: 300px"
              :options="fullCycleBudgetOpt"
            />
          </el-col>
        </el-row>
      </basic-card>
    </div>

  </div>
</template>
<script>
import basicCard from "@/components/basic-card";
import basicChart from "@/components/basic-chart";
import numStatistics from "./components/num-statistics.vue";
import YearMonthSelect from "@/components/year-month-select";
import { getProjectListByYear } from "@/api/projectManage/projectList";
import { getList as getCostSummaryList } from "@/api/yfCostManage/yfCostStatistics/yfCostSummaryList";
import { getList as getZlList } from "@/api/achievement/patentAchievement";
import { getList as getCyPersonList } from "@/api/techPerson/cyPersonRoster";
import Decimal from "decimal.js";

export default {
  name: "home",
  components: {
    basicCard,
    basicChart,
    numStatistics,
    YearMonthSelect
  },
  data() {
    let monthArr = [];
    for(let i=0; i<12; i++) {
      monthArr.push((i+1)+"月");
    }
    return {
      loading: false,
      currYear: "",
      projectTotal: 0,
      costAmount: 0,
      yfPersonZb: 0, // 研发人员占比
      zscqTotal: 0,
      
      // 项目情况
      projectStatusOpt: {},
      // 研发费用情况
      yffyPieOptions: {},
      // 研发人员情况
      RD_personOpt: {},
      // 知识产权情况
      zscqOpt: {},
      // 本年度月研发归集趋势图
      monthAggregationBarOpt: {},
      // 本年度项目预算与归集表
      currYearBudgetOpt: {
        title: {
          text: "本年度",
          left: "13%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          left: "center",
          bottom: 0,
        },
        grid: {
          top: "16%",
          left: "8%",
          right: "2%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["项目一", "项目二", "项目三", "项目四", "项目五", "项目六"],
        },
        series: [
          {
            name: "预算",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 630230],
          },
          {
            name: "归集",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807],
          },
        ],
      },
      // 全周期项目预算与归集表
      fullCycleBudgetOpt: {
        title: {
          text: "全周期",
          left: "13%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          left: "center",
          bottom: 0,
        },
        grid: {
          top: "16%",
          left: "8%",
          right: "2%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["项目一", "项目二", "项目三", "项目四", "项目五", "项目六"],
        },
        series: [
          {
            name: "预算",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 630230],
          },
          {
            name: "归集",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807],
          },
        ],
      }
    };
  },
  computed: {
    projectTotalOpt() {
      return {
        span: 24,
        data: [
          {
            icon: 'el-icon-view',
            color: 'rgb(56, 161, 242)',
            count: this.projectTotal,
            decimals: 0,
            title: "项目总数",
          },
        ],
      }
    },
    RD_costOpt() {
      return {
        span: 24,
        data: [
          {
            icon: 'el-icon-view',
            color: 'rgb(56, 161, 242)',
            count: this.costAmount,
            decimals: 2,
            title: "研发费用(元)",
          },
        ],
      }
    },
    RD_person_zb_opt() {
      return {
        span: 24,
        data: [
          {
            icon: 'el-icon-view',
            color: 'rgb(56, 161, 242)',
            count: this.yfPersonZb,
            decimals: 2,
            title: "研发人员占比(%)",
          },
        ],
      }
    },
    zscqTotalOpt() {
      return {
        span: 24,
        data: [
          {
            icon: 'el-icon-view',
            color: 'rgb(56, 161, 242)',
            count: this.zscqTotal,
            decimals: 0,
            title: "知识产权总数",
          },
        ],
      }
    }
  },
  watch: {
    currYear() {
      this.getProjectListByYearFunc();
      this.getCostSummaryListFunc();
      this.getZlListFunc();
      this.getCyPersonListFunc();
    }
  },
  methods: {
    handleSearchBtn() {
      this.getProjectListByYearFunc();
      this.getCostSummaryListFunc();
      this.getZlListFunc();
      this.getCyPersonListFunc();
    },
    getProjectListByYearFunc() {
      getProjectListByYear({ year: this.currYear }).then(({ data }) => {
        let _projectList = data.data;
        this.projectTotal = _projectList.length;

        this.projectStatusOpt = this.getPieOptions("研发项目情况", [
          { value: _projectList.filter(item => item.status == 1).length, name: "开展中" },
          { value: _projectList.filter(item => item.status == 2).length, name: "已结题" },
          { value: _projectList.filter(item => item.status == 3).length, name: "项目暂停" },
          { value: _projectList.filter(item => item.status == 4).length, name: "项目终止" },
        ]);
      });
    },
    // 获取费用统计数据
    getCostSummaryListFunc() {
      this.loading = true;
      getCostSummaryList({ yearAndMonth: `${this.currYear}12` }).then(({ data }) => {
        this.loading = false;
        let costList = data.data;

        let ryrgfyTotal = new Decimal(0); // 人员人工费用
        let zjtrfyTotal = new Decimal(0); // 直接投入费用
        let zjfyycqdtfyTotal = new Decimal(0); // 折旧费用和长期待摊费用
        let sjfyTotal = new Decimal(0); // 设计费用
        let wxzctxfyTotal = new Decimal(0); // 无形资产摊销费用
        let zbtsfyysyfyTotal = new Decimal(0); // 装备调试费用与试验费用
        let qtfyTotal = new Decimal(0); // 其他费用
        let wwfyTotal = new Decimal(0); // 委外费用

        let monthArr = [];
        let monthSalesArr = [];

        costList.forEach(item => {
          ryrgfyTotal = ryrgfyTotal.add(new Decimal(item.ryrgfy));
          zjtrfyTotal = zjtrfyTotal.add(new Decimal(item.zjtrfy));
          zjfyycqdtfyTotal = zjfyycqdtfyTotal.add(new Decimal(item.zjfyycqdtfy));
          sjfyTotal = sjfyTotal.add(new Decimal(item.sjfy));
          wxzctxfyTotal = wxzctxfyTotal.add(new Decimal(item.wxzctxfy));
          zbtsfyysyfyTotal = zbtsfyysyfyTotal.add(new Decimal(item.zbtsfyysyfy));
          qtfyTotal = qtfyTotal.add(new Decimal(item.qtfy));
          wwfyTotal = wwfyTotal.add(new Decimal(item.wwfy));

          monthArr.push(item.yearAndMonth);
          monthSalesArr.push(Number(new Decimal(item.total).div(new Decimal(0.8))));
        });
        // 研发费用总额
        let costAmount = ryrgfyTotal
        .add(zjtrfyTotal)
        .add(zjfyycqdtfyTotal)
        .add(sjfyTotal)
        .add(wxzctxfyTotal)
        .add(zbtsfyysyfyTotal)
        .add(qtfyTotal)
        .add(wwfyTotal)

        this.costAmount = costAmount.toFixed(2);
        this.yffyPieOptions = this.getPieOptions("研发费用情况", [
          { value: Number(ryrgfyTotal), name: "人员人工费用" },
          { value: Number(zjtrfyTotal), name: "直接投入费用" },
          { value: Number(zjfyycqdtfyTotal), name: "折旧费用与长期待摊费用" },
          { value: Number(wxzctxfyTotal), name: "无形资产摊销费用" },
          { value: Number(sjfyTotal), name: "设计费用" },
          { value: Number(zbtsfyysyfyTotal), name: "装备调试费用与试验费用" },
          { value: Number(wwfyTotal), name: "委托外部研究开发费用" },
          { value: Number(qtfyTotal), name: "其他费用" },
        ]);


        // 本年度月研发归集趋势图
        this.monthAggregationBarOpt = {
          grid: {
            top: "3%",
            left: "3%",
            right: "3%",
            bottom: "10%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          xAxis: {
            type: 'category',
            data: monthArr
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: value => {
                return value+" 元";
              }
            }
          },
          series: [
            {
              data: monthSalesArr,
              type: 'bar',
              barWidth: "25%",
              label: {
                show: true,
                position: "top"
              }
            }
          ]
        }
      }).catch(err => {
        this.loading = false;
      })
    },
    // 获取专利数据 
    getZlListFunc() {
      getZlList(1, 99999).then(({ data }) => {
        let _zscqList = data.data.records;
        this.zscqTotal = _zscqList.length;

        // 授权数
        let sqListTotal = _zscqList.filter(item => item.flzt == '授权有效').length;

        this.zscqOpt = this.getPieOptions("", [
          { value: _zscqList.length - sqListTotal, name: "申请数" },
          { value: sqListTotal, name: "授权数" },
        ]);
      });
    },
    // 获取年度参研人员
    getCyPersonListFunc() {
      getCyPersonList(1, 99999, { yearAndMonth: this.currYear }).then(({ data }) => {
        let _personList = data.data.records;
        let yfPersonList = _personList.filter(item => item.personnelType == '研发人员');
        this.yfPersonZb = ((yfPersonList.length / _personList.length) * 100).toFixed(2);

        this.RD_personOpt = this.getPieOptions("", [
          { value: _personList.filter(item => item.situation == '全职').length, name: "全职" },
          { value: _personList.filter(item => item.situation == '非全职').length, name: "非全职" },
        ]);
      });
    },
    getPieOptions(title, seriesData) {
      let options = {
        title: {
          text: title,
          left: "center",
          show: false
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: 0,
          textStyle: {
            rich: {
              a: {
                verticalAlign: "right",
                align: "left",
                width: 160,
                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>
