<!--公厕新增，编辑，详情-->
<template>
  <el-dialog :visible.sync="dialogFormVisible" :fullscreen="false" :title="title" width="60%" append-to-body>
    <normal-table
      id="dataTable"
      :data="list"
      :head="tableOption.head"
      :query="listQuery"
      :total="total"
      :columns="columns"
      :list-loading="listLoading"
      :options="tableOption.options"
      :tools-option="tableOption.toolsOption"
      @change="changePage"/>
  </el-dialog>
</template>

<script>
import { addToilet, updateToilet } from '@/api/sanitation/toilet'
export default {
  name: 'EvaluationListDialog',
  data() {
    return {
      title: '评价记录',
      dialogFormVisible: false,
      listQuery: {
        toiletId: '',
        beginDate: '', // 开始时间
        endDate: '' // 结束时间
      }, // 筛选条件
      columns: [
        { text: '评价时间 ', value: 'commentTime', align: 'center' },
        { text: '分值', value: 'score', align: 'center' },
        { text: '评价内容', value: 'comment', align: 'center' }
      ], // 显示列
      list: [],
      total: 0, // 数据总数
      listLoading: true, // 列表加载动画
      typeList: [], // 人员类别
      tableOption: {
        head: {
          show: false, // 是否需要标题栏，
          text: '统计结果' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      } // 表格属性
    }
  },
  methods: {
    /**
     * 初始化对话框
     * @param listQuery 查询参数
     */
    initDialog: function(listQuery, toiletName) {
      this.title = toiletName + '评价记录'
      this.listQuery = listQuery
      this.dialogFormVisible = true
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      this.list = [
        { toiletId: 1, toiletCode: '0001', toiletName: '公厕1号', score: 5, commentTime: '2021-06-30 00:00:00', comment: '干净卫生' },
        { toiletId: 2, toiletCode: '0001', toiletName: '公厕2号', score: 4, commentTime: '2021-06-30 00:00:00', comment: '干净卫生' },
        { toiletId: 3, toiletCode: '0001', toiletName: '公厕3号', score: 4, commentTime: '2021-06-30 00:00:00', comment: '干净卫生' },
        { toiletId: 4, toiletCode: '0001', toiletName: '公厕4号', score: 4.5, commentTime: '2021-06-30 00:00:00', comment: '干净卫生' }
      ]
      this.total = 4
      this.listLoading = false
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .form-div{
    width:100%;
    height:100%;
    display:flex;
    justify-content: space-between;
  }
  .form-left{
    flex:1;
    height:100%;
  }
  .form-right{
    width: 180px;
    height:100%;
    .avatar{
      margin-bottom: 10px;
    }
    text-align: center;
  }
</style>