<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <panel-group
        :project="project"
        @handleSetLineChartData="handleSetLineChartData"
      />

      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <el-col :span="16">
          <line-chart :chart-data="lineChartData" />
        </el-col>
        <el-col :span="8">
          <div class="chart-wrapper">
            <pie-chart />
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">查询条件</p>
            <div class="content">
              <p style="margin: 7px 0px;">
                <el-select v-model="form.year" filterable @change="onChange" size="mini" placeholder="请选择年份">
                  <el-option v-for="(item, index) in yearList" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </p>
              <p style="margin: 7px 0px;">
                <el-select v-model="form.type" clearable filterable @change="onChange" size="mini" placeholder="请选择项目类型">
                  <el-option v-for="(item, index) in typeList" :key="index" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </p>
              <p style="margin: 7px 0px;" v-if="role.name === '超级管理员'">
                <el-radio-group v-model="active" @change="onRadioChange" size="mini">
                  <el-radio-button label="用户"></el-radio-button>
                  <el-radio-button label="部门"></el-radio-button>
                </el-radio-group>
              </p>
              <p style="margin: 7px 0px;" v-if="role.name === '超级管理员'" v-show="show == 0">
                <el-select v-model="form.user" clearable filterable @change="onChange" size="mini" placeholder="请选择用户">
                  <el-option v-for="(item, index) in users" :key="index" :label="item.account" :value="item.uuid">
                  </el-option>
                </el-select>
              </p>
              <p style="margin: 7px 0px;" v-if="role.name === '超级管理员'" v-show="show == 1">
                <el-select v-model="form.depot" clearable filterable @change="onChange" size="mini" placeholder="请选择部门">
                  <el-option v-for="(item, index) in depots" :key="index" :label="item.name" :value="item.uuid">
                  </el-option>
                </el-select>
              </p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">项目统计</p>
            <div class="content">
              <p>历史项目总数：{{ project.project_total }}</p>
              <p>年度项目总数：{{ project.project_currentyear }}</p>
              <p>年度结案项目总数：{{ project.project_finished }}</p>
              <p>年度逾期项目总数：{{ project.project_outdate }}</p>
              <p>年度列入坏帐并终止项目数：{{ project.project_stop }}</p>
              <p>年度项目总的毛利率：{{ (project.year_profit / project.year_cost).toFixed(2) }}</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">项目统计</p>
            <div class="content">
              <p>上一年未完成项目总数：{{ project.project_unfinished_lastyear }}</p>
              <p>未结案流转下年度项目总数：{{ project.project_unfinished_nextyear }}</p>
              <p>已结案但逾期结案项目总数：{{ project.project_unfinished_outdate }}</p>
              <p>年度逾期项目总数：{{ project.project_unfinished_outdate }}</p>
              <p>年度项目中标总数：{{ project.bidding }}</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">项目统计</p>
            <div class="content">
              <p>年度项目逾期率：{{ calculate(project.project_outdate, project.project_year) }}%</p>
              <p>年度项目结案逾期率：{{ calculate(project.project_unfinished_outdate, project.project_year) }}%</p>
              <p>年度项目满意率：{{ calculate(project.satisfaction, project.project_year) }}%</p>
              <p>年度调派技术现场总天数：{{ project.days_for_dispatch_on_site }} 天</p>
              <p>年度监督流失率：{{ calculate(project.supervise_loss, project.project_supervise) }}%</p>
              <p>年度再认证流失率：{{ calculate(project.authenticate_loss, project.project_authenticate) }}%</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">项目统计</p>
            <div class="content">
              <p>年度应收款：{{ project.plan_amount }} 元</p>
              <p>年度实收款：{{ project.real_amount }} 元</p>
              <p>年度应收款回款率：{{ calculate(project.real_amount, project.plan_amount) }}%</p>
              <p>年度坏账总金额：{{ project.bad_debts_amount }} 元</p>
              <p>年度销售合同额：{{ project.year_contract_amount }} 元</p>
              <p>年度销售认可合同额：{{ project.year_agree_amount }} 元</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">季度合同金额</p>
            <div class="content">
              <p>一季度：{{ project.quarter_contract_amount.q1 }}</p>
              <p>二季度：{{ project.quarter_contract_amount.q2 }}</p>
              <p>三季度：{{ project.quarter_contract_amount.q3 }}</p>
              <p>四季度：{{ project.quarter_contract_amount.q4 }}</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">季度认可合同金额</p>
            <div class="content">
              <p>一季度：{{ project.quarter_agree_amount.q1 }}</p>
              <p>二季度：{{ project.quarter_agree_amount.q2 }}</p>
              <p>三季度：{{ project.quarter_agree_amount.q3 }}</p>
              <p>四季度：{{ project.quarter_agree_amount.q4 }}</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">季度利润</p>
            <div class="content">
              <p>一季度：{{ project.quater_profit.q1 }}</p>
              <p>二季度：{{ project.quater_profit.q2 }}</p>
              <p>三季度：{{ project.quater_profit.q3 }}</p>
              <p>四季度：{{ project.quater_profit.q4 }}</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">季度项目数统计</p>
            <div class="content">
              <p>一季度：{{ project.quarter_project_count.q1 }}</p>
              <p>二季度：{{ project.quarter_project_count.q2 }}</p>
              <p>三季度：{{ project.quarter_project_count.q3 }}</p>
              <p>四季度：{{ project.quarter_project_count.q4 }}</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">季度项目回款率</p>
            <div class="content">
              <table>
                <tr>
                  <th>季度</th>
                  <th>应收款</th>
                  <th>实收款</th>
                  <th>回款率</th>
                </tr>
                <tr>
                  <td>一季度</td>
                  <td>{{ project.quarter_project_collection_rate.q1[0] }}</td>
                  <td>{{ project.quarter_project_collection_rate.q1[1] }}</td>
                  <td>
                    {{ calculate(project.quarter_project_collection_rate.q1[1], project.quarter_project_collection_rate.q1[0]) }}%
                  </td>
                </tr>
                <tr>
                  <td>二季度</td>
                  <td>{{ project.quarter_project_collection_rate.q2[0] }}</td>
                  <td>{{ project.quarter_project_collection_rate.q2[1] }}</td>
                  <td>
                    {{ calculate(project.quarter_project_collection_rate.q2[1], project.quarter_project_collection_rate.q2[0]) }}%
                  </td>
                </tr>
                <tr>
                  <td>三季度</td>
                  <td>{{ project.quarter_project_collection_rate.q3[0] }}</td>
                  <td>{{ project.quarter_project_collection_rate.q3[1] }}</td>
                  <td>
                    {{ calculate(project.quarter_project_collection_rate.q3[1], project.quarter_project_collection_rate.q3[0]) }}%
                  </td>
                </tr>
                <tr>
                  <td>四季度</td>
                  <td>{{ project.quarter_project_collection_rate.q4[0] }}</td>
                  <td>{{ project.quarter_project_collection_rate.q4[1] }}</td>
                  <td>
                    {{ calculate(project.quarter_project_collection_rate.q4[1], project.quarter_project_collection_rate.q4[0]) }}%
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="grid-content">
            <p class="title">季度项目结案率</p>
            <div class="content">
              <table>
                <tr>
                  <th>季度</th>
                  <th>应结案</th>
                  <th>实结案</th>
                  <th>结案率</th>
                </tr>
                <tr>
                  <td>一季度</td>
                  <td>{{ project.quarter_project_finished_rate.q1[0] }}</td>
                  <td>{{ project.quarter_project_finished_rate.q1[1] }}</td>
                  <td>
                    {{ calculate(project.quarter_project_finished_rate.q1[1], project.quarter_project_finished_rate.q1[0]) }}%
                  </td>
                </tr>
                <tr>
                  <td>二季度</td>
                  <td>{{ project.quarter_project_finished_rate.q2[0] }}</td>
                  <td>{{ project.quarter_project_finished_rate.q2[1] }}</td>
                  <td>
                    {{ calculate(project.quarter_project_finished_rate.q2[1], project.quarter_project_finished_rate.q2[0]) }}%
                  </td>
                </tr>
                <tr>
                  <td>三季度</td>
                  <td>{{ project.quarter_project_finished_rate.q3[0] }}</td>
                  <td>{{ project.quarter_project_finished_rate.q3[1] }}</td>
                  <td>
                    {{ calculate(project.quarter_project_finished_rate.q3[1], project.quarter_project_finished_rate.q3[0]) }}%
                  </td>
                </tr>
                <tr>
                  <td>四季度</td>
                  <td>{{ project.quarter_project_finished_rate.q4[0] }}</td>
                  <td>{{ project.quarter_project_finished_rate.q4[1] }}</td>
                  <td>
                    {{ calculate(project.quarter_project_finished_rate.q4[1], project.quarter_project_finished_rate.q4[0]) }}%
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import { mapTrim } from '@/utils/index'
import { getWorkbenckData, getDepotList, getUserList, getDictsList } from "@/api/index";

import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";
import PieChart from "./components/PieChart";

const current = new Date();
const yearList = [];
for (let i = 2020; i <= current.getFullYear(); i++) {
  yearList.push(i);
}

export default {
  name: "Dashboard",
  components: {
    PanelGroup,
    LineChart,
    PieChart,
  },
  filter: {
    isZero(value) {
      return value ? value : 1
    }
  },
  computed: {
    ...mapState("user", [ "role", ]),
    calculate() {
      return (divisor, dividend) => {
        if (dividend == 0) return ((divisor / 1) * 100).toFixed(2)
        else return ((divisor / dividend) * 100).toFixed(2)
      };
    },
  },
  data() {
    return {
      yearList,
      active: "用户",
      show: 0,
      form: {
        year: current.getFullYear(),
        depot: null,
        type: null,
        user: null,
      },
      users: [],
      depots: [],
      typeList: [],
      project: {
        project_total: 0,
        project_year: 0,
        project_finished: 0,
        project_unfinished_nextyear: 0,
        project_unfinished_outdate: 0,
        project_unfinished_lastyear: 0,
        project_currentyear: 0,
        consult_projects: 0,
        review_evaluate_projects: 0,
        authenticate_projects: 0,
        pieList: [],
        year_contract_amount: 0,
        year_agree_amount: 0,
        year_profit: 0,
        year_cost: 0,
        quarter_project_count: {
          q1: 0,
          q2: 0,
          q3: 0,
          q4: 0,
        },
        quarter_project_collection_rate: {
          q1: [1, 0],
          q2: [1, 0],
          q3: [1, 0],
          q4: [1, 0],
        },
        quarter_project_finished_rate: {
          q1: [1, 0],
          q2: [1, 0],
          q3: [1, 0],
          q4: [1, 0],
        },
        quarter_contract_amount: {
          q1: 0,
          q2: 0,
          q3: 0,
          q4: 0,
        },
        quarter_agree_amount: {
          q1: 0,
          q2: 0,
          q3: 0,
          q4: 0,
        },
        quater_profit: {
          q1: 0,
          q2: 0,
          q3: 0,
          q4: 0,
        },
      },
      lineChartData: {
        expectedData: [
          100,
          120,
          161,
          134,
          105,
          160,
          165,
          134,
          105,
          160,
          165,
          140,
        ],
        actualData: [120, 82, 91, 154, 162, 140, 145, 154, 162, 140, 145, 130],
      },
    };
  },
  methods: {
    handleSetLineChartData(type) {
      console.log(type);
    },
    onChange() {
      this.fetchData();
    },
    onRadioChange(e) {
      if (e == "部门") this.show = 1
      else this.show = 0
    },
    getDepotList() {
      getDepotList({ "scope_type": "list" }).then(res => {
        this.depots = res.data
      }).catch(err => {
        console.log(err.message)
      })
    },
    getUserList() {
      getUserList({ "scope_type": "list" }).then(res => {
        this.users = res.data
      }).catch(err => {
        console.log(err.message)
      })
    },
    getDictList() {
      getDictsList({ "scope_type": "list", "category": ["project-type"] }).then(res => {
        this.typeList = res.data
      }).catch(err => {
        console.log(err.message)
      })
    },
    fetchData() {
      getWorkbenckData(mapTrim(this.form))
        .then((res) => {
          this.project = res.data;
          res.data.plan_moneys.shift();
          this.lineChartData.expectedData = res.data.plan_moneys;
          res.data.real_moneys.shift();
          this.lineChartData.actualData = res.data.real_moneys;
          this.project.pieList = [
            { value: this.project.consult_projects, name: "咨询类" },
            { value: this.project.authenticate_projects, name: "认证类" },
            { value: this.project.review_evaluate_projects, name: "评审评价类" },
          ];
          // Object.keys(this.project.quarter_project_collection_rate).forEach(
          //   (item) => {
          //     if (this.project.quarter_project_collection_rate[item][0] == 0)
          //       this.project.quarter_project_collection_rate[item][0] = 1;
          //   }
          // );
          // Object.keys(this.project.quarter_project_finished_rate).forEach(
          //   (item) => {
          //     if (this.project.quarter_project_finished_rate[item][0] == 0)
          //       this.project.quarter_project_finished_rate[item][0] = 1;
          //   }
          // );
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.fetchData();
    this.getDepotList();
    this.getUserList();
    this.getDictList();

    if (!this.role || this.role == "") {
      this.$store.dispatch("user/removeRole")
      this.$store.dispatch("user/removeToken")
      this.$router.push("/login")
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  .grid-content {
    font-size: 13px;
    background: #ffffff;
    min-height: 210px;
    & > p.title {
      color: #303133;
      margin-top: 15px;
      margin-bottom: 0px;
      background: #f2f6fc;
      border-bottom: 1px solid #ebeef5;
      padding: 10px;
    }
    & > div.content {
      padding: 10px;
      overflow: auto;
      & > p {
        margin: 10px 0px;
      }
      & > table {
        tr {
          td {
            min-width: 70px;
            height: 24px;
          }
        }
      }
    }
  }

  .chart-wrapper {
    height: 332px;
    background: #fff;
    padding: 16px 16px 0;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>