<template>
  <el-dialog :title="textMap" :visible.sync="dialogFormVisible" append-to-body>
    <el-form ref="dataForm" :inline="true" :model="listQuery" label-well-code="right" label-width="120px">
      <el-row>
        <el-form-item prop="dateRange">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-row>
    </el-form>
    <!--查询结果Table显示-->
    <div style="margin-top: 20px">
      <el-row class="table-title">
        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
        <!--<el-col :span="12" :offset="6" class="edit_btns">-->
        <!--<el-button v-if="hasPerm('/liquiddata/export')" class=
        "edit_btn" size="small" @click="batchExport">导出记录</el-button>-->
        <!--</el-col>-->
      </el-row>
      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
        <!--<el-table-column align="center" type="selection" width="55"/>-->
        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{ scope.row[column.value] }}</span>
            <span v-else>{{ scope.row[column.name] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="!isDetailMode" slot="footer" class="dialog-footer">
      <!--<el-button type="primary" @click="saveData">保存</el-button>-->
      <el-button @click="cancel">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { addDevice, updateDevice, getDeviceType, getDeviceModel, getDetail, getWellDetail, getNetType } from '@/api/device'
import { getDayTime } from '@/utils/dateutils'
import { getStatistics } from '@/api/assessRules'
export default {
  name: 'DeptStatistics',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      isEdit: false,
      listLoading: false,
      listQuery: {
        beginDate: '',
        endDate: '',
        deptid: '',
        subdeptid: ''
      }, // 表单
      columns: [
        // {
        //   text: '总话务量',
        //   value: '1',
        //   align: 'center'
        // }
        // {
        //   text: '平均呼入时长',
        //   value: '2',
        //   align: 'center'
        // },
        // {
        //   text: '平均呼出',
        //   value: '3',
        //   align: 'center'
        // },
        // {
        //   text: '总回访量',
        //   value: '4',
        //   align: 'center'
        // },
        // {
        //   text: '回访满意度',
        //   value: '5',
        //   align: 'center'
        // },
        // {
        //   text: '呼损率(%)',
        //   value: '6',
        //   align: 'center'
        // },
        // {
        //   text: '接通率(%)',
        //   value: '7',
        //   align: 'center'
        // },
        // {
        //   text: '质检平均分',
        //   value: '8',
        //   align: 'center'
        // }
      ], // 显示列
      list: [
        // { '1': '222', '2': '2', '3': '3', '4': '213', '5': '9.2', '6': '49.28', '7': '92.15', '8': '9.87' }
      ],
      textMap: '', // 表头显示标题
      isEditMode: false, // 编辑模式
      isDetailMode: false, // 详情模式
      dateRange: []
    }
  },
  watch: {
    dateRange(val) {
      if (val && val.length > 0) {
        this.listQuery.beginDate = val[0]
        this.listQuery.endDate = val[1]
      } else {
        this.listQuery.beginDate = ''
        this.listQuery.endDate = ''
      }
    }
  },
  mounted() {
    // this.fetchData()
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogFormVisible, row) {
      this.textMap = row.deptName + ' - ' + row.subDeptName + ' - ' + row.indexMenu + ' - 统计数据'
      this.dialogFormVisible = dialogFormVisible
      this.listQuery.beginDate = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
      this.listQuery.endDate = new Date()
      this.dateRange = [this.listQuery.beginDate, this.listQuery.endDate]
      const projectId = row.id
      this.fetchData(projectId)
    },
    fetchData(projectId) {
      debugger
      getStatistics(projectId).then(response => {
        var cols = response.data.nameList
        if (cols) {
          for (var i = 0; i < cols.length; i++) {
            cols[i].align = 'center'
          }
        }
        this.columns = cols
        this.list = response.data.valueList
      })
    },
    cancel: function() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
</style>