<template>
    <div>
        <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item class="filter-item">
        <el-select v-model="listQuery.messageType" placeholder="待办类型">
         <el-option label="论坛待办" value="-1"/>
         <el-option label="工单待办" value="-2"/>
         <el-option label="费用待办" value="-3"/>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-select v-model="listQuery.status" placeholder="是否有效">
         <el-option label="正在处理" value="1"/>
         <el-option label="无效" value="0"/>
        </el-select>
      </el-form-item>
      <span >
        <span class="demonstration"></span>
        <el-date-picker
        v-model="listQuery.dataValue"
        type="date"
        placeholder="年-月-日">
        </el-date-picker>
      </span>
      <el-form-item class="filter-item">
        <el-input v-model="listQuery.messageContent" 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="createDate" label="时间" align="center"><template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template></el-table-column>
      <el-table-column prop="messageContent" label="待办内容" align="center">
       <template slot-scope="scope" >
        <a :title="scope.row.messageContent" v-if="scope.row.status==='1'">
          <span style="color: black	" >
           {{ scope.row.messageContent.length>='100'?scope.row.messageContent.substring(0,15)+'..':scope.row.messageContent }}
          </span>
        </a>

        <a :title="scope.row.messageContent" v-if="scope.row.status==='0'">
          <span style="color:#AAAAAA" >
           {{ scope.row.messageContent.length>='100'?scope.row.messageContent.substring(0,15)+'..':scope.row.messageContent }}
          </span>
        </a>
      </template>
       </el-table-column>
        <el-table-column prop="id" label="操作" align="center">
        <template slot-scope="scope">
            <!--无效的-->
          <span  v-if="scope.row.status==='0'">
          <!--公告-->
          <a><span v-if="scope.row.messageType==='5'" @click="announcementDetails(scope.row.announcementId)">{{'查看帖子详情'}}</span></a>
          <!--活动标题-->
          <a><span v-if="scope.row.messageType==='8'" @click="activityDetails(scope.row.activityId)">{{'查看帖子详情'}}</span></a>
          <!--二手租赁-->
          <a><span v-if="scope.row.messageType==='9'">{{'查看帖子详情'}}</span></a>
          <!--投诉-->
          <a><span v-if="scope.row.messageType==='1'" @click="ticketDetails(scope.row.ticketId)">{{'查看工单详情'}}</span></a>
          <!--报修-->
          <a><span v-if="scope.row.messageType==='2'" @click="ticketDetails(scope.row.ticketId)">{{'查看工单详情'}}</span></a>
          <!--联系物业-->
          <a><span v-if="scope.row.messageType==='3'" @click="ticketDetails(scope.row.ticketId)">{{'查看工单详情'}}</span></a>
          <!--缴费-->
          <a><span v-if="scope.row.messageType==='7'" @click="billDetails(scope.row.billId)">{{'查看费用单详情'}}</span></a>
          </span>
             <!--有效的-->
          <span v-if="scope.row.status==='1'" style="color:	#5599FF">
          <!--公告-->
          <a><span v-if="scope.row.messageType==='5'" @click="announcementDetails(scope.row.announcementId)">{{'查看帖子详情'}}</span></a>
          <!--活动标题-->
          <a><span v-if="scope.row.messageType==='8'" @click="activityDetails(scope.row.activityId)">{{'查看帖子详情'}}</span></a>
          <!--二手租赁-->
          <a><span v-if="scope.row.messageType==='9'" @click="handleLook()">{{'查看帖子详情'}}</span></a>
          <!--投诉-->
          <a><span v-if="scope.row.messageType==='1'" @click="ticketDetails(scope.row.ticketId)">{{'查看工单详情'}}</span></a>
          <!--报修-->
          <a><span v-if="scope.row.messageType==='2'" @click="ticketDetails(scope.row.ticketId)">{{'查看工单详情'}}</span></a>
          <!--联系物业-->
          <a><span v-if="scope.row.messageType==='3'" @click="ticketDetails(scope.row.ticketId)">{{'查看工单详情'}}</span></a>
          <!--缴费-->
          <a><span v-if="scope.row.messageType==='7'" @click="billDetails(scope.row.billId)">{{'查看费用单详情'}}</span></a>
          </span>
        </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>
export default {
    data() {
        return {
          listQuery: {
            id: '',
            messageContent: '',
            status: '',
            //待办类型
            messageType:'',
            pageNum: 1,
            pageSize: 10,
            dataValue: ''
          },
           total: 0,
           listLoading: true, // 加载圈
           listData: [],
        }
    },
    mounted(){
        //  this.listLoading = false
    this.dataQuery()
    },
    methods:{
    dataQuery() { // 查询数据
      this.listLoading = true
      this.$store.dispatch('ListMessage', this.listQuery).then((res) => {
        const resData = res.data
        console.log('resData',resData.list)
        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 ListMessage')
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.dataQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.dataQuery()
    },
    handleFilter() {
      this.listQuery.messageContent = ''
      this.listQuery.status = ''
      this.listQuery.messageType = ''
      this.listQuery.dataValue = ''
      this.listQuery.pageNum = 1
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.dataQuery()
    },
    search() {
      this.dataQuery()
    },
    handleSelectionChange(data) {
      this.deleteIds = [] // 设置为 空
      for (let i = 0; i < data.length; i++) {
      this.deleteIds.push(data[i].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
    },
      padDate(value) {
      value = value < 10 ? '0' + value : value
      return value
    },
    // 公告详情
    announcementDetails(id) {
      console.log('id11',id)
      this.$router.push({ name: 'contentParticulars-details', params: { id: id }})
    },
    // 活动
     activityDetails(id) { // 查看活动
      this.$router.push({ name: 'activity-info', params: { id: id }})
    },
    //工单
    ticketDetails(id) {
      console.log('111111'+id)
      this.$router.push({ name: 'ticket-details', query: { id: id }})
    },
    // 缴费
    billDetails(billId){
      this.$store.dispatch('bill/GetBillInfoBydId', billId).then(res => {
        const resCode = res.code
        if (resCode === '0') {
          const resData = res.data
          if (resData.billStatus === '2') {
            this.$router.push({ name: 'bill-edi', query: { id: billId }})
          } else {
            this.$router.push({ name: 'bill-info', query: { id: billId }})
          }
        }
      }).catch(() => {
        console.log('error bill/GetBillInfoBydId')
      })
        this.$router.push({ name: 'bill-info', query: { id: billId }})
    },
    // 二手租赁
    handleLook(id) {
      this.$router.push({ name: 'transaction-info', params: { id: id }})
    },
    }

}
</script>

<style>
.form-listQuery{
  margin-top: 20px;
  margin-left: 30px;
}
.root{
  display: flex;
  flex-flow: column;
}
.block{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.spanSize{
    color:aqua
}
</style>
