<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" style="width: 20%">
            <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" style="width: 20%">
            <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" style="width: 20%">
            <label class="font_normal_body" style="line-height: 20px;">用户类型</label>
            <v-select id="f_check_type"
                      class="select_list select"
                      placeholder='用户类型' style="width: 60%"
                      v-model='f_check_type'
                      :value.sync="f_check_type"
                      :options='f_check_types'
                      :value-single="true"
                      close-on-select clear-button></v-select>
          </div>


          <div class="col-sm-3" style="width: 20%">
            <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="SearchCheckComprehensiveSummaryTabZXTS"
                              :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>
          </tr>
          </thead>

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

          <tr>
            <td>合计</td>
            <td>{{totalNumberOfWorkersDispatched}}</td>
            <td>{{numberOfHouseholds}}</td>
            <td>{{unexpectedNumberOfHouseholdsVisited}}</td>
            <td>{{numberOfRejectedHouseholds}}</td>
            <td>{{deliveryCompletionRate}}</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_check_types: [{label:'所有用户类型',value:''},{label:'民用',value:'民用'},{label:'非民用',value:'非民用'}],
      f_check_type: '民用',
      resData: [],
      thisYear: 'XXX',//当前展示数据的年份
      f_orgname: '', //选择的分公司名称
      thisf_orgname: 'XXX公司',//当前展示数据的分公司名称
      excelHeaders:{
        'mon': '月份',
        'dispatchcount': '派工户数',
        'checkcount': '正常入户户数',
        'novisitcount': '到访不遇户数',
        'rejectscount': '拒检户数',
        'checkcompletion': '派工完成率',
      },
      searchData: {
        f_filialeid_id: this.f_filialeid_id,
        yearDate: this.yearDate,
        f_check_type: this.f_check_type
      }
    }
  },
  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,
        f_check_type: this.f_check_type
      }
      this.searchData = newdate;//导出
      let res = await this.$resetpost("/api/af-safecheck/sql/SearchCheckComprehensiveSummaryTabZXTS?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

      }
    },




  },
  computed: {
    excelTitle() {
      return `${this.thisf_orgname + this.thisYear}年度专项计划安检情况统计表`
    },
    // 到访不遇
    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
    },
    // 派工数
    totalNumberOfWorkersDispatched() {
      let sumdata = 0;
      for (let item of this.resData) {
        sumdata += item.dispatchcount
      }
      return sumdata
    },
    // 入户户数和入户率
    numberOfHouseholds() {
      let sumdata = 0;
      for (let item of this.resData) {
        sumdata += item.checkcount
      }
      return sumdata
    },
    deliveryCompletionRate () {
      let sumdata = 0
      sumdata = this.numberOfHouseholds / this.totalNumberOfWorkersDispatched
      return ((sumdata?sumdata:0)*100).toFixed(3) + '%'
    }
  },
  ready() {
    this.searchData = {
      f_filialeid_id: this.f_filialeid_id,
      yearDate: this.yearDate,
      f_check_type: this.f_check_type
    }
  },
  watch: {
    'f_filialeid_id': function (val) {
      this.searchData.f_filialeid_id = 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>
