<template>
  <div class="app-container">
    <!-- 筛选start -->
    <div class="filter-container mb-20">
      <div class="left">
       <div class="filter-item">
            时间：
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:auto"
            >
            </el-date-picker>
          </div>
          <div class="filter-item">
            站点:
            <el-select
              v-model="region"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option label="站点一" value="1"></el-option>
              <el-option label="站点二" value="2"></el-option>
            </el-select>
          </div>

        <el-button type="primary" icon="el-icon-search" class="search-button"
          >搜索</el-button
        >
      </div>

      <div class="right">
        <el-button type="primary">导出</el-button>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
    >
      <el-table-column fixed prop="workerNum" label="员工账号" width="">
      </el-table-column>
      <el-table-column prop="workerName" label="员工名称" width="">
      </el-table-column>
      <el-table-column prop="orderQuality" label="接单量" width="">
      </el-table-column>
      <el-table-column prop="completedQuantity" label="完单量" width="">
      </el-table-column>
      <el-table-column prop="incomplete" label="未完成" width="">
      </el-table-column>

      <el-table-column prop="orderQuality" label="响应时间/小时" width="">
      </el-table-column>

      <el-table-column prop="handlingTime" label="处理时间/小时" width="">
      </el-table-column>

      <el-table-column prop="evaluation" label="客户评价" width="">
      </el-table-column>

    
    
    </el-table>
    <!-- 表格end -->
  </div>
</template>

<script>
// import DialogComponent from "./dialogComponent";
// import { mapGetters } from "vuex";

export default {
  // name: "Dashboard",
  // computed: {
  //   ...mapGetters(["name"]),
  // },

  // components: { DialogComponent },

  data() {
    return {
      showDialog: false,
       value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      region: "",
      tableData: [
        {
          workerNum: "8081",
          workerName: "张三",
          orderQuality: "0",
          completedQuantity:'0',
          incomplete:'0',
          responseTime:'0',
          handlingTime:'0',
          evaluation: "",
        },
       {
          workerNum: "8081",
          workerName: "张三",
          orderQuality: "0",
          completedQuantity:'0',
          incomplete:'0',
          responseTime:'0',
          handlingTime:'0',
          evaluation: "",
        },
        {
          workerNum: "8081",
          workerName: "张三",
          orderQuality: "0",
          completedQuantity:'0',
          incomplete:'0',
          responseTime:'0',
          handlingTime:'0',
          evaluation: "",
        },
        {
          workerNum: "8081",
          workerName: "张三",
          orderQuality: "0",
          completedQuantity:'0',
          incomplete:'0',
          responseTime:'0',
          handlingTime:'0',
          evaluation: "",
        },
      ],
    };
  },
  methods: {
    // 表头样式设置
    headClass() {
      return "background:#FAFAFA;";
    },

    //自定义列样式
    // cellStyle({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 3) {
    //     return `color:#0284E8;`;
    //   } else {
    //     return "";
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
</style>
