<template>
  <!-- 接待人统计页面 -->
  <div class="app-container" style="max-width: 600px; margin: auto;">
    <el-form  ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px" style="text-align: center;">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="验证码" prop="code">
        <el-input v-model="queryParams.code" placeholder="请输入验证码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getCount">查询</el-button>
      </el-form-item>
    </el-form>

    <el-card class="box-card" v-if="show">
      <div slot="header" class="clearfix" style="text-align: center;">
        <span>接待统计</span>
      </div>
      <div>
        <div><span>今日接到人数：{{countInfo.todayTotal == undefined ? 0 : countInfo.todayTotal}}</span></div>
        <div><span>今日成交人数：{{countInfo.todaySuccess == undefined ? 0 : countInfo.todaySuccess}}</span></div>
        <div><span>今日未成交人数：{{countInfo.todayUnSuccess == undefined ? 0 : countInfo.todayUnSuccess}}</span>
          <router-link :to="'/coach/count/detail?coachId=' + coachId +'&type=1'" style="color: blue;"> 详情</router-link>
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <div><span>本月接到人数：{{countInfo.monthTotal}}</span></div>
        <div><span>本月成交人数：{{countInfo.monthSuccess}}</span></div>
        <div><span>本月未成交人数：{{countInfo.monthUnSuccess}}</span> 
          <router-link :to="'/coach/count/detail?coachId=' + coachId+'&type=2'" style="color: blue;"> 详情</router-link>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCount} from '@/api/zs/feedbackDetail';

export default {
  name: 'Count',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        phone: null,
        code: null
      },
      countInfo: {
        todayTotal: 0,
        todaySuccess: 0,
        todayUnSuccess:0,
        monthTotal: 0,
        monthSuccess: 0,
        monthUnSuccess:0
      },
      coachId: undefined,
      show:false
    };
  },

  methods: {
    /** 查询统计结果 */
    getCount() {
      this.resetCount();
      this.loading = true;
      getCount(this.queryParams).then(resp => {
        if(resp.code == 200 && resp.data ){
          this.countInfo = resp.data;
          this.coachId = resp.data.coachId;
          this.show = true;
        }
      })
    },
    resetCount(){
      this.countInfo= {
        todayTotal: 0,
        todaySuccess: 0,
        todayUnSuccess:0,
        monthTotal: 0,
        monthSuccess: 0,
        monthUnSuccess:0
      }
    }
  }
};
</script>
