<template>
  <div class="flex-row">
    <div class="basic-main">

      <div  class="form-horizontal select-overspread container-fluid auto" >
        <div class="row">

          <div class="col-sm-3">
            <label class="font_normal_body">&nbsp;公&nbsp;&nbsp;&nbsp;&nbsp;司&nbsp;</label>
            <right-tree :userid.sync='userid' style="width: 60%;"
                        :source.sync='source' @re-res="getRes" ></right-tree>
          </div>
          <div class="col-sm-3">
            <label class="font_normal_body">统计年份</label>
            <datepicker  placeholder="结束日期" style="width:60%"
                         v-model="yearDate"
                         :value.sync="yearDate"
                         :format="'yyyy'"
                         :show-reset-button="true"
                         :select-year="true">
            </datepicker>
          </div>
<!--          <div class="col-sm-3">
            <label class="font_normal_body">安检类型</label>
            <v-select id="f_approved"
                      class="select_list select"
                      placeholder='安检类型' style="width: 60%"
                      v-model='f_safecheck_type'
                      :value.sync="f_safecheck_type"
                      :options='f_safecheck_types'
                      :value-single="true"
                      close-on-select clear-button></v-select>
          </div>-->
          <div class="col-sm-3" style="float: right;">
            <div class="span" style="text-align: center;">
              <button class="button_search" @click="search()">查询</button>
              <export-excel   :data="searchData"
                              :field="excelHeaders"
                              sqlurl="api/af-safecheck/logic/exportfile" sql-name="SearchCheckComprehensiveSummaryTabPJ"
                              :template-name='excelTitle'></export-excel>
            </div>
          </div>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-bordered diytable">
          <thead>
          <tr >
            <th colspan="8" class="tableinfo">{{thisf_orgname}}{{thisYear}}年度普检计划安检情况统计表</th>
          </tr>
          <tr>
            <th>月份</th>
            <th>全年应检数</th>
            <th>派工户数</th>
            <th>正常入户户数</th>
            <th>到访不遇户数</th>
            <th>拒检户数</th>
            <th>派工率</th>
            <th>入户率</th>
          </tr>
          </thead>

          <tbody>
            <tr v-for="(index,item) in resData">
              <td>{{thisYear +'-'+item.mon}}</td>
              <td v-if="index===0" rowspan="12">{{item.sumuserinfo}}</td>
              <td>{{item.dispatchcount}}</td>
              <td>{{item.checkcount}}</td>
              <td>{{item.novisitcount}}</td>
              <td>{{item.rejectscount}}</td>
              <td>{{item.dispatchcompletion}}</td>
              <td>{{item.checkcompletion}}</td>
            </tr>

           <tr>
              <td>合计</td>
              <td>{{numberOfInspectionsInTheWholeYear}}</td>
              <td>{{totalNumberOfWorkersDispatched(false)}}</td>
              <td>{{numberOfHouseholds(false)}}</td>
              <td>{{unexpectedNumberOfHouseholdsVisited}}</td>
              <td>{{numberOfRejectedHouseholds}}</td>
              <td>{{totalNumberOfWorkersDispatched(true)}}</td>
              <td>{{numberOfHouseholds(true)}}</td>
            </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {PagedList} from "vue-client";
import Datepicker from 'vue-client/src/vue-strap/src/Datepicker'
import * as Util from '../Util'
import Vue from "vue";


export default {
  title:'年度普检计划安检率综合报表（公司）',
  data() {
    return {
      userid: this.$login.f.id,
      // source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
      source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
      f_filialeid_id:`('${this.$login.f.orgid}')`, //分公司id
      yearDate: (new Date()).getFullYear().toString(), //统计年份
      f_safecheck_types: [{label:'年度普检',value:'年度普检'},{label:'专项计划',value:'专项计划'}],//安检类型
      f_safecheck_type: '年度普检',//安检类型
      resData: [],
      thisYear: 'XXX',//当前展示数据的年份
      f_orgname: '', //选择的分公司名称
      thisf_orgname: 'XXX公司',//当前展示数据的分公司名称
      excelHeaders:{
        'mon': '月份',
        'sumuserinfo': '全年应检数',
        'dispatchcount': '派工户数',
        'checkcount': '正常入户户数',
        'novisitcount': '到访不遇户数',
        'rejectscount': '拒检户数',
        'dispatchcompletion': '派工率',
        'checkcompletion': '入户率'
      },
      searchData: {
        f_filialeid_id: this.f_filialeid_id,
        yearDate: this.yearDate
      }
    }
  },
  components:{
    Datepicker
  },
  methods : {
    getRes(obj) {
      console.log(obj)
      this.f_filialeid_id = this.$login.convertToIn(obj.resids);
      this.f_orgname = obj.res[0]
      // this.model.f_filialeid_id = this.$login.convertToIn(obj.resids);
    },
    // 执行查询
    async search() {
      let newdate = {
        f_filialeid_id: this.f_filialeid_id,
        yearDate: this.yearDate
      }
      this.searchData = newdate;//导出
      let res = await this.$resetpost("/api/af-safecheck/sql/SearchCheckComprehensiveSummaryTabPJ?pageNo=1&pageSize=999999",
        {"data": newdate},
        {resolveMsg : '查询汇总成功！', rejectMsg : '查询汇总失败！'},50000)
      if (res.data) {
        this.thisYear = this.yearDate
        this.thisf_orgname = this.f_orgname
        this.resData = res.data

      }
    },
    // 派工数和派工率
    totalNumberOfWorkersDispatched(isRate) {
      let sumdata = 0;
      for (let item of this.resData) {
        sumdata += item.dispatchcount
      }
      if (isRate) {
        let checkCpmple = ( sumdata / this.resData[0].sumuserinfo) * 100
        return (checkCpmple!=undefined?checkCpmple:0).toFixed(3) + '%'
      }else {
        return sumdata
      }
    },
    // 入户户数和入户率
    numberOfHouseholds(isRate) {
      let sumdata = 0;
      for (let item of this.resData) {
        sumdata += item.checkcount
      }
      if (isRate) {
        let checkCpmple = ( sumdata / this.resData[0].sumuserinfo) * 100
        return (checkCpmple!=undefined?checkCpmple:0).toFixed(3) + '%'
      }else {
        return sumdata
      }
    }



  },
  computed: {
    excelTitle() {
      return `${this.thisf_orgname + this.thisYear}年度普检计划安检情况统计表`
    },
    // 全年应检数
    numberOfInspectionsInTheWholeYear() {
      if (this.resData) {
        return  this.resData[0].sumuserinfo
      }else {
        return 0
      }
    },
    // 到访不遇
    unexpectedNumberOfHouseholdsVisited() {
      let sumdata = 0
      for (let item of this.resData) {
        sumdata += item.novisitcount
      }
      return sumdata
    },
    // 拒检户数
    numberOfRejectedHouseholds() {
      let sumdata = 0
      for (let item of this.resData) {
        sumdata += item.rejectscount
      }
      return sumdata
    }
  },
  ready() {
    this.searchData = {
      f_filialeid_id: this.f_filialeid_id,
      f_safecheck_type: this.f_safecheck_type,
      yearDate: this.yearDate
    }
  },
  watch: {
    'f_filialeid_id': function (val) {
      this.searchData.f_filialeid_id = val
    },
    'f_safecheck_type': function (val) {
      this.searchData.f_safecheck_type = val
    },
    'yearDate': function (val) {
      this.searchData.yearDate = val
    }
  }
}
</script>

<style lang="less" scoped>
.tableinfo {
  text-align: center;
  background-color: #00A3F0;
  color: #0c2e4d;
}
.diytable {
  tr {
    text-align: center;
    td {
      text-align: center;
    }
  }
}
</style>
