<template>
  <div class="root">
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item class="filter-item" label="房间编号">
        <el-input v-model.trim="listQuery.id" placeholder="工单编号" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="listQuery.type" placeholder="请选择">
         <el-option label="选择状态" value="" />
         <el-option label="投诉" value="1"/>
         <el-option label="报修" value="2"/>
         <el-option label="联系物业" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item class="filter-item" label="工单标题">
        <el-input v-model.trim="listQuery.ticketTitle" placeholder="工单标题" />
      </el-form-item>
      <el-form-item class="filter-item" label="发起人">
        <el-input v-model.trim="listQuery.createUserNmae" placeholder="发起人" />
      </el-form-item>
      <el-form-item label="流转状态">
        <el-select v-model="listQuery.status" placeholder="请选择">
         <el-option label="选择状态" value="" />
         <el-option label="待分配" value="0"/>
         <el-option label="拒绝处理" value="1"/>
         <el-option label="正在处理" value="3"/>
         <el-option label="待评价" value="4"/>
         <el-option label="已评价" value="5"/>
         <el-option label="已终止" value="6"/>
        </el-select>
      </el-form-item>
      <el-form-item class="filter-item" label="处理人">
        <el-input v-model.trim="listQuery.updateUserNmae" placeholder="处理人" />
      </el-form-item>       
      <el-form-item>
        <el-button type="info" class="filter-item" @click="handleFilter">清空</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="listData"
      border
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="编号" align="center"/>
      <el-table-column prop="type" label="类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type==='1'">{{ '投诉' }}</span>
          <span v-if="scope.row.type==='2'">{{ '报修' }}</span>
          <span v-if="scope.row.type==='3'">{{ '联系物业' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ticketTitle" label="标题" align="center">
      <template slot-scope="scope" >
        <a :title="scope.row.ticketTitle" @click="clickTitle(scope.row.id)">
          <span style="color: #009FCC	">
           {{ scope.row.ticketTitle.length>='15'?scope.row.ticketTitle.substring(0,15)+'..':scope.row.ticketTitle }}
          </span>
        </a>
      </template>
      </el-table-column>
      <el-table-column prop="createUserNmae" label="发起人" align="center"/> 
      <el-table-column prop="createDate" label="发起时间" align="center"><template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template></el-table-column>
      <el-table-column prop="id" label="流转状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status==='0'">{{ '待分配' }}</span>
          <span v-if="scope.row.status==='1'">{{ '拒绝处理' }}</span>
          <span v-if="scope.row.status==='3'">{{ '正在处理' }}</span>
          <span v-if="scope.row.status==='4'">{{ '待评价' }}</span>
          <span v-if="scope.row.status==='5'">{{ '已评价' }}</span>
          <span v-if="scope.row.status==='6'">{{ '已终止' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tpUserNmae" label="当前处理人" align="center"/>
      <el-table-column prop="updateDate" label="最近操作时间" align="center"><template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template></el-table-column> 
    </el-table>
    <div class="block">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      listQuery: {
        id: '',
        type: '',
        startUserName: '',
        createUserNmae: '',
        updateUserNmae: '',
        ticketTitle:'',
        createUser: '',
        status: '',
        tpUserId: '',
        updateDate: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0, // 数据总数
      listData: [],
      deleteIds: [], // 选择的id集合
      listLoading: true, // 加载圈
      title : '',
    }
  },
  mounted() {
    // 获取数据
    this.dataQuery()
  },
  methods: {
    ...mapActions('listAnnouncement', [
      'BserPassCertification'
    ]),
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.dataQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.dataQuery()
    },
    padDate(value) {
      value = value < 10 ? '0' + value : value
      return value
    },
    dataQuery() { // 查询数据
      this.listLoading = true
      this.$store.dispatch('ListTicket', this.listQuery).then((res) => {
        const resData = res.data
        this.listData = resData.list
        this.listQuery.pageNum = resData.pageNum
        this.listQuery.pageSize = resData.pageSize
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error ListTicket')
      })
    },
    handleSelectionChange(data) {
      this.deleteIds = [] // 设置为 空
      for (let i = 0; i < data.length; i++) {
        this.deleteIds.push(data[i].id)
      }
    },
	  search() {
      this.listQuery.pageNum = 1
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.dataQuery()
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.listQuery.ownerName =''
      this.listQuery.userName=''
      this.listQuery.status= ''
      this.listQuery.ticketTitle= ''
      this.listQuery.createUser= ''
      this.listQuery.type= ''
      this.listQuery.tpUserId=''
      this.listQuery.id= ''
      this.listQuery.createUserNmae= ''
      this.listQuery.updateUserNmae=''
      this.dataQuery()
    },
    clickTitle(id) {
      console.log('111111'+id)
      this.$router.push({ name: 'ticket-details', query: { id: id }})
    },
    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = this.padDate(value.getMonth() + 1)
      var day = this.padDate(value.getDate())
      var hour = this.padDate(value.getHours())
      var minutes = this.padDate(value.getMinutes())
      var seconds = this.padDate(value.getSeconds())
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
    }
  }
}
  

</script>

<style scoped>
.root{
  display: flex;
  flex-flow: column;
}
.form-listQuery{
  margin-top: 20px;
  margin-left: 30px;
}
.operation{
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
}
.block{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.button {
  margin-left: 20px;
}
</style>