<template>
  <div class="performanceStatics">
    <div class="head-title">
      服务人员绩效统计
    </div>
    <div class="content">
      <div style="margin-bottom:20px">
        <span>门店</span>
        <el-select style="margin:0 10px" class="w200" @change="msg.pageIndex=1,getList()" v-model="msg.StoreId"
          size="small" placeholder="请选择">
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in StoreList" :key="item.Id" :label="item.Name" :value="item.Id">
          </el-option>
        </el-select>
        <span>日期</span>
        <el-date-picker v-model="dateList" @change="msg.pageIndex=1,getList()" size="small" type="datetimerange"
          range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button @click="msg.pageIndex=1,getList()" size="small" type="primary">
          查询
        </el-button>
      </div>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="ID" label="服务人员编号" width="150">
        </el-table-column>
        <el-table-column label="头像" width="300px">
          <template slot-scope="scope">
            <img :src="scope.row.ServiceLogo" style="width:35px;height:35px;" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="名称"></el-table-column>
        <el-table-column prop="ServiceTargetDateNum" label="排班天数">
        </el-table-column>
        <el-table-column prop="OrderNum" label="订单数">
        </el-table-column>
        <el-table-column prop="Final_Price" label="业绩金额" width="250px">
        </el-table-column>
        <el-table-column prop="OrderGuestNum" label="服务人数">
        </el-table-column>
        <el-table-column prop="ScoreStr" label="平均评分">
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
        :current-page.sync="msg.pageIndex" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        tableData: [],
        total: 0,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          StoreId: 0, //门店Id
          WorkDate: '', //开始日期
          EndWorkDate: '' //结束日期
        },
        StoreList: [], //门店数据
        dateList: [], //日期
      }
    },
    created() {},
    mounted() {
      this.getList();
      this.getStoreList()
    },
    methods: {
      //获取门店下拉
      getStoreList() {
        this.apipost("/api/MContent/GetStoresList", {}, res => {
          if (res.data.resultCode == 1) {
            this.StoreList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //获取数据
      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.WorkDate = this.dateList[0];
          this.msg.EndWorkDate = this.dateList[1];
        } else {
          this.msg.WorkDate = '';
          this.msg.EndWorkDate = '';
        }
        this.loading = true;
        this.assetsApipost("/api/Reserve/GetAchievementsList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.tableData = res.data.data.pageData;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
    }
  };

</script>
<style>
  .performanceStatics .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

</style>
