<template>
  <div class="basic-main" style="height: 100vh; overflow-y: scroll;">
    <div class="search-main-safe">
      <div class="col-sm-3 form-group ">
        <label class="font_normal_body" style="margin-right: 2px">公&emsp;&emsp;司</label>
        <right-tree @re-res="getRes" :initresid="filialeid">
        </right-tree>
      </div>
      <div class="col-sm-3 form-group">
        <label for="planyearDate" class="font_normal_body">年份</label>
        <datepicker id="planyearDate" placeholder="年份"
                    v-model="planYear"
                    :value.sync="planYear"
                    style="width: 60%;"
                    :select-year="true"
                    :disabled-days-of-week="[]"
                    :format="'yyyy'"
                    :show-reset-button="reset">
        </datepicker>
      </div>
      <div class="col-sm-3 form-group" style="margin-top: 8px">
        <button class="button_search button_spacing" @click="selfSearch()">查询</button>
      </div>
    </div>

    <div class="check-plan-count-chart-main-safe"></div>


  </div>
</template>

<script>
import {HttpResetClass} from "vue-client";

export default {
  title: '安检统计图表',
  data() {
    return {
      filialeid: "('" + this.$login.f.orgid + "')",
      source: 'tool.getFullTree(this.getRights().where(row.getType() == $organization$))',
      planYear: new Date().getFullYear(),
      checkData: []
    }
  },
  methods: {
    getRes(obj) {
      this.filialeid = this.$login.convertToIn(obj.resids);
    },
    selfSearch() {
      if (!this.planYear) {
        this.$showMessage("计划年份未选择，请选择后重试！")
        return
      }
      const valdata = {
        planyear: this.planYear,
        condition: `1=1 and  cpi.f_filialeid in ${this.filialeid}`
      }
      //CheckPlanCountChart
      let http = new HttpResetClass()
      http.load('POST', '/rs/sql/CheckPlanCountChart', {data: valdata}, {
        resolveMsg: null,
        rejectMsg: null
      }).then((res) => {
        this.checkData = res.data
        this.getPieSeeData()
      })
    },
    getPieSeeData() {
      document.getElementsByClassName("check-plan-count-chart-main-safe")[0].innerHTML = '';

      for (let i = 0; i < this.checkData.length; i++) {
        const rowData = this.checkData[i]
        let ids = 'checkPieContextId' + i + 'safecheck';
        let divs = `
           <div class="chart-item-safe col-sm-4 col-xl-6 col-xs-12" style="height: 300px;border: 1px #E6E6E6FF solid;border-radius: 5px;display: flex;">
           <!--echarts-->
            <div style="height: 300px;width: 65%;display: inline-block;">
                <div class="chart-item-fontmain-safe" style="height: auto;">
                <div style="width: 15px;height: 15px;border-radius: 100%;background-color: #0b87e2;display: inline-block;"></div>
                <div style="width:40%;height: 1px;border-bottom: #9de0f5 1px solid;display: inline-table;font-weight: bold;font-size: 15px;color: #0c0c0c;">
                  &emsp;&emsp; ${rowData.mon}月
                </div>
              </div>
              <div id="${ids}" style="height: 100%;"></div>
            </div>
            <!--列表-->
            <div style="height:300px;width: 34%;display: inline-block;">
                <ul style="padding:10px 10px;">
                    <li style="list-style: none;height: 40px;line-height: 40px;border-bottom: 1px dashed gray;text-indent: 15px;font-size: 14px;">
                      <span>安检完成率</span>
                      <span>${rowData.youjihuawanchenglv}%</span>
                    </li>
                    <li style="list-style: none;height: 40px;line-height: 40px;border-bottom: 1px dashed gray;text-indent: 15px;font-size: 14px;">
                      <span>计划用户数</span>
                      <span>${rowData.jihuayonghushu}</span>
                    </li>
                    <li style="list-style: none;height: 40px;line-height: 40px;border-bottom: 1px dashed gray;text-indent: 15px;font-size: 14px;">
                      <span>临时用户数</span>
                      <span>${rowData.wujihuayonghushu}</span>
                    </li>
                    <li style="list-style: none;height: 40px;line-height: 40px;border-bottom: 1px dashed gray;text-indent: 15px;font-size: 14px;">
                      <span>已检用户数</span>
                      <span>${rowData.yijianshu}</span>
                    </li>
                    <li style="list-style: none;height: 40px;line-height: 40px;border-bottom: 1px dashed gray;text-indent: 15px;font-size: 14px;">
                      <span>当月开户数</span>
                      <span>${rowData.usercount}</span>
                    </li>
                    <li style="list-style: none;height: 40px;line-height: 40px;border-bottom: 1px dashed gray;text-indent: 15px;font-size: 14px;">
                      <span>已排计划占比</span>
                      <span>${rowData.yipaijihuashu}%</span>
                    </li>
                </ul>
            </div>
           </div>
          `;
        document.getElementsByClassName("check-plan-count-chart-main-safe")[0].insertAdjacentHTML("beforeend", divs)
        const pieDom = document.getElementById(ids, null, {remderer: 'canvas', useDirtyRect: false})
        if (pieDom) {
          const pieChartInit = this.$echarts.init(pieDom)
          const option = {
            title: {
              show: true,
              text: rowData.mon + "月-安检数据统计",
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formater: "{a}<br />{b}: {c} ({d}%)"
            },
            legend: {
              orient: "vertical",
              x:"left",
              data:["安检总数","入户数","拒检数","到访不遇数"]
            },
            series: [
              {
                name: '安检占比',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '60%'],
                label: {
                  position: 'inner',
                  fontSize: 11,
                },
                labelLine: {
                  show: false
                },
                data: [
                  {
                    name: '安检总数',
                    value: rowData.anjianzongshu
                  },
                  {
                    name: '入户数',
                    value: rowData.ruhushu
                  },
                  {
                    name: '拒检数',
                    value: rowData.junjianshu
                  },
                  {
                    name: '到访不遇数',
                    value: rowData.daofangbuyushu
                  },
                ]
              },
            ]

          }
          pieChartInit.setOption(option)
        }
      }
    }
  },
  ready() {

  }
}
</script>

<style lang="less" scoped>
@search_height: 80px;
@chart_radius_wihe: 15px;

.search-main-safe {
  height: @search_height;
  padding-left: 25px;
}

.check-plan-count-chart-main-safe {
  height: calc(~'100% - @{search_height}');
}
</style>
<style lang="less">
.check-plan-count-chart-main-safe {
  div {
    height: auto;
  }
}
</style>
