<template>
  <section class="statistics tabs-init el-tabs__content_f3f6f9">
    <div style="margin-top: 16px;height: 270px;">
      <div class="left">
        <div class="item-left mar-b16">
          <div class="item-left-title">公文总数</div>
          <div class="item-left-num" style="color:#4B87FE;">{{totalOfficialDocumentStatistics}}</div>
        </div>
        <div class="item-left">
          <div class="item-left-title">本月新增</div>
          <div class="item-left-num" style="color:#2EA222;">{{newMonthonStatistics}}</div>
        </div>
      </div>
      <div class="right">
        <div class="chart-content" style="padding-right:0;">
          <div class="chart-line">
            <div class="chart-title">近12个月公文登记情况</div>
            <div v-if="lineChartData.length"
              class="chart-info"
              style="
                width: 100%;
                height: 206px;
                padding: 16px 16px 20px 0;
                box-sizing: border-box;
              "
              id="chartLine"
            ></div>
            <ai-empty v-else style="height: 148px;"></ai-empty>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-content">
      <div class="chart-line" style="margin-right: 16px;">
        <div class="chart-title">阅示类型统计</div>
        <div style="overflow:hidden;">
          <div
            class="chart-info"
            style="
              width: 288px;
              height: 288px;
              padding: 16px 0 0 16px;
              box-sizing: border-box;
              float:left;
            "
            id="readType"
            ></div>
          <div class="list-type mar-t102">
            <div class="item" v-for="(item, index) in readTypeList" :key="index">
              <div class="type-title">
                <span class="item-color-bg" :style="{'backgroundColor': item.bgColor}"></span>{{item.title}}
              </div>
              <div class="num">{{item.num}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart-line">
        <div class="chart-title">公文类型统计</div>
        <div style="overflow:hidden;">
          <div
            class="chart-info"
            style="
              width: 288px;
              height: 288px;
              padding: 16px 0 0 16px;
              box-sizing: border-box;
              float:left;
            "
            id="docType"
          ></div>
          <div class="list-type mar-t60">
            <div class="item" v-for="(item, index) in docTypeList" :key="index">
              <div class="type-title">
                <span class="item-color-bg" :style="{'backgroundColor': item.bgColor}"></span>{{item.title}}
              </div>
              <div class="num">{{item.num}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapState } from "vuex";
import charts from "echarts";

export default {
  name: "statistics",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      readTypeList: [
        {
          title: '传阅',
          num: '0',
          bgColor: '#4B87FE'
        },
        {
          title: '批示',
          num: '0',
          bgColor: '#FFAA44'
        }
      ],
      docTypeList: [
        {
          title: '决议',
          num: '0',
          bgColor: '#FF4466'
        },
        {
          title: '决定',
          num: '0',
          bgColor: '#FFAA44'
        },
        {
          title: '通知',
          num: '0',
          bgColor: '#4B87FE'
        },
        {
          title: '通告',
          num: '0',
          bgColor: '#45A3FF'
        },
        {
          title: '函',
          num: '0',
          bgColor: '#2EA222'
        },
        {
          title: '其它',
          num: '0',
          bgColor: '#B244FF'
        },
      ],
      lineChartTitle: [],
      lineChartData: [],
      totalOfficialDocumentStatistics: 0,
      newMonthonStatistics: 0,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.instance.post(`/app/appofficialsenddeliverinfo/getStatistics`).then((res) => {
        if (res.code == 0) {
          this.newMonthonStatistics = res.data.newMonthonStatistics || 0
          this.totalOfficialDocumentStatistics = res.data.totalOfficialSendStatistics || 0
          if(res.data.officialRegistrationStatistics && res.data.officialRegistrationStatistics.length) {
            res.data.officialRegistrationStatistics.map(item => {
              this.lineChartTitle.push(item.name)
              this.lineChartData.push(item.v1)
            })
            this.$nextTick(() => {
              this.setLineChart()
            })
            
          }
          if(res.data.readTheTypeStatistics && res.data.readTheTypeStatistics.length) {
            res.data.readTheTypeStatistics.map(item => {
              if(item.name == 0){
                this.readTypeList[1].num = item.v1 || 0
              }
              if(item.name == 1){
                this.readTypeList[0].num = item.v1 || 0
              }
            })
            this.setReadChart()
          }
          if(res.data.officialSendTypeStatistics && res.data.officialSendTypeStatistics.length) {
            res.data.officialSendTypeStatistics.map(item => {
              if(item.name == 0){
                this.docTypeList[0].num = item.v1
              }
              if(item.name == 1){
                this.docTypeList[1].num = item.v1
              }
              if(item.name == 3){
                this.docTypeList[2].num = item.v1
              }
              if(item.name == 2){
                this.docTypeList[3].num = item.v1
              }
              if(item.name == 4){
                this.docTypeList[4].num = item.v1
              }
              if(item.name == 5){
                this.docTypeList[5].num = item.v1
              }
            })
            this.setDocChart()
          }

        }
      });
    },
    setLineChart() {
      var chartLine = charts.init(document.getElementById("chartLine"));
      var option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "10%",
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.lineChartTitle,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "",
            type: "line",
            itemStyle: {
              normal: {
                color: "#26f",
              },
            },
            data: this.lineChartData,
          },
        ],
      };
      chartLine.setOption(option);
    },
    setReadChart() {
      var chart = charts.init(document.getElementById("readType"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter: '{d}%',
              fontSize: '14',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.readTypeList[0].num,
                name: '传阅',
                itemStyle: {
                  normal: {
                    color: '#4B87FE'
                  }
                },
              },
              {
                value: this.readTypeList[1].num,
                name: '批示',
                itemStyle: {
                  normal: {
                    color: '#FFAA44'
                  }
                },
              }
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    setDocChart() {
      var chart = charts.init(document.getElementById("docType"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter: '{d}%',
              fontSize: '14',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.docTypeList[0].num,
                name: '决议',
                itemStyle: {
                  normal: {
                    color: '#FF4466'
                  }
                },
              },
              {
                value: this.docTypeList[1].num,
                name: '决定',
                itemStyle: {
                  normal: {
                    color: '#FFAA44'
                  }
                },
              },
              {
                value: this.docTypeList[2].num,
                name: '通知',
                itemStyle: {
                  normal: {
                    color: '#4B87FE'
                  }
                },
              },
              {
                value: this.docTypeList[3].num,
                name: '通告',
                itemStyle: {
                  normal: {
                    color: '#45A3FF'
                  }
                },
              },
              {
                value: this.docTypeList[4].num,
                name: '函',
                itemStyle: {
                  normal: {
                    color: '#2EA222'
                  }
                },
              },
              {
                value: this.docTypeList[5].num,
                name: '其它',
                itemStyle: {
                  normal: {
                    color: '#B244FF'
                  }
                },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.statistics {
  height: 100%;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: #f3f6f9;
  // overflow: hidden;
  .left{
    width: 29%;
    float: left;
    margin-left: 16px;
    .item-left{
      padding: 0 20px;
      width: 100%;
      height: 120px;
      background: #FFFFFF;
      box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.02);
      border-radius: 4px;
      box-sizing: border-box;
      .item-left-title{
        color: #333;
        font-size: 16px;
        padding: 20px 0 16px 0;
      }
      .item-left-num{
        font-size: 32px;
        text-align: right;
      }
    }
  }
  .right{
    width: calc(70% - 20px);
    float: left;
  }
  .mar-t102{
    margin-top: 102px;
  }
  .mar-t60{
    margin-top: 60px;
  }
  .list-type{
    width:calc(100% - 360px);
    float:right;
    margin-left: 20px;
    font-size: 14px;
    padding-right: 40px;
    .item{
      display: flex;
      justify-content: space-between;
      line-height: 20px;
      margin-bottom: 8px;
    }
    .type-title{
      color: #666;
      .item-color-bg{
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #4B87FE;
        border-radius: 1px;
        margin-right: 6px;
      }
    }
    .num{
      color: #333;
      text-align: right;
    }
  }
  .chart-content {
    width: 100%;
    // height: 336px;
    border-radius: 4px;
    padding: 0 16px 16px 16px;
    box-sizing: border-box;
    display: flex;
    .chart-line {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.02);
    }
    .chart-title {
      line-height: 48px;
      border-bottom: 1px solid #e6e8ee;
      padding-left: 16px;
      color: #333;
      font-size: 16px;
    }
    div {
      flex: 1;
    }
  }
  .tab-row {
    padding: 16px 16px 16px 16px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .tab-col {
      height: 64px;
      flex: 1;
      background-color: #fff;
      margin-right: 20px;
      border-radius: 4px;
      border: 1px solid rgba(216, 224, 232, 1);
      overflow: hidden;

      .tab-title {
        display: inline-block;
        font-size: 14px;
        color: #333;
        height: 14px;
        line-height: 14px;
        vertical-align: super;
      }

      .tab-num {
        height: 24px;
        font-size: 20px;
        font-weight: bold;
        color: #333;
        line-height: 24px;
        font-family: DINAlternate-Bold, serif;
        float: right;
        line-height: 64px;
        padding-right: 16px;
      }
    }

    .tab-col:nth-last-child(1) {
      margin-right: 0;
    }
  }
  .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 20px 8px 0 16px;
  }

  .card-panel {
    flex: 1;
    background: #fff;
    border: 1px solid #d8e0e8;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 12px 16px 0 16px;

    b {
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
    }

    #ASBarChart {
      height: 286px;

      & + .no-data {
        margin: 83px auto;
      }
    }

    #PartyAgePieChart,
    #PartyEduPieChart {
      height: 264px;

      & + .no-data {
        margin: 72px auto;
      }
    }
  }

  .party_title {
    height: 48px;
    line-height: 48px;
    background: #fff;
    text-indent: 16px;
    font-weight: bold;
  }

  .party_content {
    flex: 1;
    display: flex;
    padding: 16px;

    .party_left {
      width: 280px;
      background: #eaedf1;
      border: 1px solid #d8dce3;
      position: relative;
      border-radius: 4px;
      display: flex;
      flex-direction: column;

      .p {
        height: 28px;
        line-height: 28px;
        background: #d9e0e9;
        font-size: 12px;
        color: #333;
        text-indent: 16px;
      }

      .left_tree {
        padding: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;

        .left_cont {
          width: 95%;
          position: absolute;
          top: 38px;
          margin-top: 8px;
          height: calc(100% - 80px);
          overflow-y: auto;

          .el-tree {
            background: #eaedf1;
          }

          .right_btn {
            width: 96px;
            background: #fff;
            border-radius: 2px;
            font-size: 12px;
            padding: 4px 0;
            position: fixed;
            z-index: 999;

            li {
              height: 28px;
              line-height: 28px;
              cursor: pointer;
              text-indent: 12px;
            }

            li:hover {
              background-color: #eff6ff;
              color: #5088ff;
            }
          }
        }
      }

      .btn_img {
        position: absolute;
        bottom: 0;
        background: #f5f6f7;
        height: 32px;
        line-height: 32px;
        width: 100%;
        display: flex;
        text-align: center;
        border-top: 1px solid #d8dce3;
        border-radius: 0 0 4px 4px;

        span {
          flex: 1;
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }

    .party_right {
      flex: 1;
      overflow: auto;
      margin-left: 11px;

      .total-panel {
        margin-bottom: 21px;

        li {
          flex: 1;
          margin-right: 32px;
          display: flex;
          background: #fff;
          border: 1px solid #d8e0e8;
          border-radius: 4px;
          color: #333;
          padding: 20px;
          font-weight: bold;
          height: 97px;
          box-sizing: border-box;

          .icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
          }

          &:last-child {
            margin-right: 0;
          }

          p {
            font-size: 14px;
            color: rgba(51, 51, 51, 1);
            line-height: 24px;
          }

          b {
            font-size: 20px;
            color: rgba(51, 51, 51, 1);
            line-height: 40px;
          }
        }
      }
    }
  }
  .operation {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    line-height: 64px;
    display: flex;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background-color: #f3f6f9;
    box-shadow: inset 0px 1px 0px 0px #eeeeee;

    button {
      width: 92px;
      height: 32px;
      padding: 0 !important;
    }

    .delete-btn {
      background-color: #fff;
    }
  }
  .mask {
    .content {
      padding-bottom: 100px;
    }
    .el-table {
      border: 1px solid #d8e0e8;
      border-bottom: 0;
    }
    p {
      line-height: 28px;
      text-align: right;
      cursor: pointer;
      color: #5088ff;
      width: 88px;
      float: right;
      padding-bottom: 8px;
    }
  }
  .vc-input-120 {
    width: 120px !important;
    float: right;
    padding-right: 16px;

    .el-input__inner {
      width: 120px !important;
    }
  }
}
</style>
