<!--公厕新增，编辑，详情-->
<template>
  <el-dialog :visible.sync="dialogFormVisible" :fullscreen="false" :title="title" width="60%" append-to-body>
    <div class="form-div">
      <div class="form-left">
        <el-row>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">公厕编号：</span>
              <span class="item-value-middle">{{ form.code }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">公厕名称：</span>
              <span class="item-value-middle">{{ form.name }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">建设单位：</span>
              <span class="item-value-middle">{{ form.owner }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">占地面积(m²)：</span>
              <span class="item-value-middle">{{ form.area }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="item-div">
              <span class="item-title">位置：</span>
              <span class="item-value-middle">{{ form.position }} ( {{ form.lng }} , {{ form.lat }} )</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">责任人：</span>
              <span class="item-value-middle">{{ form.responsiblePerson }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">责任人电话：</span>
              <span class="item-value-middle">{{ form.responsiblePersonTel }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">启用时间：</span>
              <span class="item-value-middle">{{ form.ts }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">备注：</span>
              <span class="item-value-middle">{{ form.notes }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="form-right">
        <el-row>
          <div class="avatar">
            <el-image
              :src="photo!==''?photo:defaultPhoto"
              fit="cover"
              style="width: 110px; height: 145px"/>
          </div>
          <div>
            <el-rate
              v-model="score"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"/>
          </div>
        </el-row>
      </div>

    </div>
    <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"
      size="small"
      @change="changePage"/>
  </el-dialog>
</template>

<script>
import { getRecordsByToilet, getToiletInfoDetail, getScoreByToilet } from '@/api/sanitation/toilet'
import { getToday, getLastMonth } from '@/utils/dateutils'
export default {
  name: 'ToiletDetailDialog',
  data() {
    return {
      title: '公厕详情',
      dialogFormVisible: false,
      listQuery: {
        toiletId: '',
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        offset: 1,
        limit: 5
      }, // 筛选条件
      form: {
        id: '', // id
        code: '', // 编号
        name: '', // 名称
        owner: '', // 建设单位
        area: '', // 占地面积
        position: '', // 位置：社区/道路
        lng: '', // 经度
        lat: '', // 纬度
        responsiblePerson: '', // 责任人
        responsiblePersonTel: '', // 责任人电话
        ts: '', // 启用时间
        notes: '' // 备注
      },
      photo: '', // 图片路径
      defaultPhoto: require('../../assets/global_images/toiletPhoto.png'), // 默认图片路径
      score: 0,
      columns: [
        { text: '保洁时间 ', value: 'startTime', align: 'center' },
        { text: '人员 ', value: 'name', align: 'center' },
        { text: '保洁内容', value: 'jobContent', align: 'center' }
      ], // 显示列
      list: [],
      total: 0, // 数据总数
      listLoading: true, // 列表加载动画
      tableOption: {
        head: {
          show: true, // 是否需要标题栏，
          text: '保洁记录' // 标题名称
        },
        options: {
          needIndex: true // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      } // 表格属性
    }
  },
  methods: {
    /**
     * 初始化对话框
     * @param listQuery 查询参数
     */
    initDialog: function(item) {
      this.title = item.name + '详情'
      this.listQuery = {
        toiletId: item.id,
        startTime: getLastMonth('yyyy-MM-dd') + ' 00:00:00',
        endTime: getToday('yyyy-MM-dd') + ' 23:59:59',
        offset: 1,
        limit: 5
      }
      this.form = item
      this.dialogFormVisible = true
      this.fetchToiletDetail()
      this.fetchCleanRecords()
      this.fetchScoreData()
    },
    // 获取公厕详情
    fetchToiletDetail() {
      getToiletInfoDetail(this.listQuery.toiletId).then(res => {
        console.log(res)
      })
    },
    // 保洁记录
    fetchCleanRecords() {
      this.listLoading = true
      getRecordsByToilet(this.listQuery).then((res) => {
        this.list = res.data.rows
        this.total = res.data.total
        // this.list = [
        //   { name: '张三', jobContent: '保洁', startTime: '2021-07-01 08:00:00' },
        //   { name: '张三', jobContent: '保洁', startTime: '2021-07-02 09:00:00' },
        //   { name: '张三', jobContent: '保洁', startTime: '2021-07-03 10:00:00' },
        //   { name: '张三', jobContent: '保洁', startTime: '2021-07-04 11:00:00' }
        // ]
        // this.total = 4
        this.listLoading = false
      })
    },
    // 获取评分
    fetchScoreData() {
      getScoreByToilet({ toiletId: this.listQuery.toiletId }).then(res => {
        if (res.code === 200) {
          this.score = res.data
        }
      })
    },
    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;
    margin-bottom: 10px;
  }
  .form-left{
    flex:1;
    height:100%;
    .item-div{
      line-height:2;
      margin-left: 5px;
      .item-title{
        font-weight: bold;
      }
    }
  }
  .form-right{
    width: 180px;
    height:100%;
    .avatar{
      margin-bottom: 10px;
    }
    text-align: center;
  }
</style>