<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" style="line-height: 20px;">&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" style="line-height: 20px;">统计年份</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_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="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="SearchCheckSummaryTab"
                                :template-name='excelTitle'></export-excel>
              </div>
            </div>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th colspan="7" class="tableinfo">{{thisf_orgname}}{{thisYear}}年度{{thissafecheck_type}}完成情况统计表{{sumuserinfo===''?'':'(截止到去年末总用户:'+sumuserinfo+'户)'}}</th>
            </tr>
            <tr>
              <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>{{item.checkcount}}</td>
              <td>{{item.checkcompletion}}</td>
              <td v-if="index===0" rowspan="12">{{item.sumcheckcount}}</td>
              <td v-if="index===0" rowspan="12">{{item.sumcheckcompletion}}</td>
              <td v-if="index===0" rowspan="12">{{item.novisit}}</td>
              <td v-if="index===0" rowspan="12">{{item.novisitcompletion}}</td>
            </tr>
            </tbody>
          </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$))`,
      f_filialeid_id:`('${this.$login.f.orgid}')`, //分公司id
      yearDate: (new Date()).getFullYear().toString(), //统计年份
      f_safecheck_types: [{label:'年度普检',value:'年度普检'},{label:'专项计划',value:'专项计划'}],//安检类型
      f_safecheck_type: '年度普检',//安检类型
      f_check_types: [{label:'所有用户类型',value:''},{label:'民用',value:'民用'},{label:'非民用',value:'非民用'}],
      f_check_type: '民用',
      resData: [],
      thisYear: 'XXX',//当前展示数据的年份
      f_orgname: '', //选择的分公司名称
      thisf_orgname: 'XXX公司',//当前展示数据的分公司名称
      thissafecheck_type: 'XXX',//当前展示数据的计划类型
      sumuserinfo: '', //截止到去年为止总用户数
      excelHeaders:{
        'mon': '月份',
        'checkcount': '完成数',
        'checkcompletion': '完成率',
        'sumcheckcount': '累计完成数',
        'sumcheckcompletion': '累计完成率',
        'novisit': '到访不遇数',
        'novisitcompletion': '到访不遇率'
      },
      searchData: {
        f_filialeid_id: this.f_filialeid_id,
        f_safecheck_type: this.f_safecheck_type,
        yearDate: this.yearDate,
        f_check_type: this.f_check_type
      }
    }
  },
  components:{
    Datepicker
  },
  methods : {
    getRes(obj) {
      console.log(obj)
      debugger
      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() {
      if (this.f_safecheck_type === '年度普检' && this.f_check_type !== '民用') {
        this.$showMessage("年度普检只能选择民用用户类型，已为您自动切换为民用类型")
        this.f_check_type = '民用'
      }
      let newdate = {
        f_filialeid_id: this.f_filialeid_id,
        f_safecheck_type: this.f_safecheck_type,
        yearDate: this.yearDate,
        f_check_type: this.f_check_type
      }
      this.searchData = newdate;//导出
      let res = await this.$resetpost("/api/af-safecheck/sql/SearchCheckSummaryTab?pageNo=1&pageSize=999999",
        {"data": newdate},
        {resolveMsg : '查询汇总成功！', rejectMsg : '查询汇总失败！'},50000)
       if (res.data) {
         this.thisYear = this.yearDate
         this.thisf_orgname = this.f_orgname
         this.thissafecheck_type = this.f_safecheck_type
         this.resData = res.data
         this.sumuserinfo = res.data[0].sumuserinfo
       }
    }
  },
  computed: {
    excelTitle() {
      return `${this.thisf_orgname + this.thisYear + '年度' + this.thissafecheck_type}完成情况统计表`
    }
  },
  ready() {
    this.searchData = {
      f_filialeid_id: this.f_filialeid_id,
      f_safecheck_type: this.f_safecheck_type,
      yearDate: this.yearDate,
      f_check_type: this.f_check_type
    }
  },
  watch: {
    'f_filialeid_id': function (val) {
      this.searchData.f_filialeid_id = val
    },
    'f_safecheck_type': function (val) {
      this.searchData.f_safecheck_type = val
      if (this.f_safecheck_type === '年度普检' && this.f_check_type !== '民用') {
        this.$showMessage("年度普检只能选择民用用户类型，已为您自动切换为民用类型")
        this.f_check_type = '民用'
      }
    },
    'yearDate': function (val) {
      this.searchData.yearDate = val
    },
    'f_check_type' : function (val) {
      if (this.f_safecheck_type === '年度普检' && this.f_check_type !== '民用') {
        this.$showMessage("年度普检只能选择民用用户类型，已为您自动切换为民用类型")
        this.f_check_type = '民用'
      }
    }
  }
}
</script>

<style scoped>
.tableinfo {
  text-align: center;
  background-color: #00A3F0;
  color: #0c2e4d;
}
</style>
