<template>
  <div>
    <Breadcrumb :list="breadcrumbList"/>
    <div class="screen">
      <el-form :model="queryParams" inline>

        <el-select  popper-class="selectPopClass" v-model="queryParams.org" size="small" placeholder="按组织">
          <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

        <el-select  popper-class="selectPopClass" v-model="queryParams.matterSource" size="small" placeholder="按事件类型">
          <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="queryParams.name" size="small" placeholder="按上报人姓名"></el-input>
        <el-input v-model="queryParams.tel" size="small" placeholder="按上报人电话"></el-input>
        <el-input v-model="queryParams.tel" size="small" placeholder="按事件描述关键词"></el-input>
        <el-button size="small" class="btn" type="primary">查询</el-button>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="list">
        <el-table-column
            label="序号"
            type="index"
            width="80"/>

        <el-table-column
            prop="name"
            label="上报人"/>

        <el-table-column
            prop="key"
            label="上报人电话"/>

        <el-table-column
            prop="key"
            label="所属组织">
        </el-table-column>

        <el-table-column
            prop="key"
            label="事件类型"/>

        <el-table-column
            prop="key"
            show-overflow-tooltip
            label="事件描述"/>

        <el-table-column
            prop="key"
            label="最新办理状态"/>

        <el-table-column
            prop="key"
            sortable
            label="最近办理时间"/>
        <el-table-column
            prop="key"
            sortable
            label="事件上报时间"/>
        <el-table-column
            sortable
            label="详情">
          <template>
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <Pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<script>
import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb'
import Pagination from '@/views/dataBoard/satisfactionEval/components/Pagination'
import Title from "@/views/dataBoard/satisfactionEval/components/Title"


export default {
  name: "dissatisfied",
  components: {Breadcrumb, Pagination,Title},
  data() {
    return {
      queryParams: {
        month: '',
        org: '',
        matterSource: '',
        matterType: '',
        name: '',
        tel: '',
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      breadcrumbList: [{
        path: '/dataBoard/satisfactionEval/index',
        name: '满意度评价'
      }, {
        path: '',
        name: '事件未解决人数'
      }],
      monthOptions: new Array(12).fill(0).map((_, index) => {
        return {label: (index - 0 + 1) + '月', value: (index - 0 + 1)}
      }),
      list: [{}, {}, {}]
    }
  },
  methods: {
    getList() {

    },
    handleView({name,id}) {
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/scss/dataBoard/table.scss";

.screen {
  margin: 25px 0 40px;

  .el-select, .el-input {
    width: 150px;
    margin-right: 4px;
    border: 1px solid #126AC5;
    border-radius: 2px;

    /deep/ .el-input__inner {
      background: none;
      border: none;
      color: #fff;
    }
  }

  .btn {
    margin-left: 46px;
    height: 32px;
  }
}
</style>