<template>
  <div>
    <el-button type="text" size="mini" @click="query_message()">查看留言</el-button>
    <el-drawer
        title="查看留言"
        :visible.sync="dialogTableVisible"
        :with-header="false"
        direction="rtl"
        size="1110px"
        append-to-body>
        <div class="container normal-panel">
          <p style="font-size:16px;font-weight:bold">留言明细</p>
        </div>
      <div class="container normal-panel" style="padding-top:0;display:flex">
        <div class="label_center">
          <p class="search__label">用户类型:</p>
          <el-select
            class="inline-16"
            size="small"
            v-model="status"
            placeholder="请选择用户类型"
            @change="handleSelectChange"
            clearable
          >
            <el-option
              v-for="(item,index) in accountType()"
              :label="item.value"
              :value="item.remarks"
              :key="index"
            ></el-option>
          </el-select>
        </div>
        <div class="label_center">
        <p class="search__label">留言时间:</p>
          <time-select class="inline-16" @clearSelect="clearTime" @timeChange="timeChange"></time-select>
        </div>
        <el-input
            placeholder="请输入搜索内容"
            suffix-icon="el-icon-search"
            v-model="search"
            @keyup.native.enter="queryClick(params.content.pageNumber=1)"
            @clear="clearData()"
            style="width:200px"
            size="small"
            class="input-with-select inline-16" clearable
        >
        </el-input>
      </div>
      <div>
        <tableLayout :layout="tablecols" ref="list" :data="list" :opwidth="200" :custom="true" height="calc(100vh - 300px)">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'usertype'">
              <p v-if="scope.column.data.usertype === 1">企业员工</p>
              <p v-else-if="scope.column.data.usertype === 21">经销商</p>
              <p v-else-if="scope.column.data.usertype === 22">经销商员工</p>
              <p v-else>未知</p>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </template>
        </tableLayout>
        <div class="container normal-panel" style="text-align:right">
          <el-pagination
              background
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="params.content.pageSize"
              :page-sizes="[20, 50, 100, 200]"
              layout="total, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import TimeSelect from '@/HDrpManagement/projectChange/components/TimeSelect'
export default {
  props:['data'],
  inject:['accountType'],
  data () {
    return {
      dialogTableVisible:false,
      tableHieght:"100%",
      tablecols:[],
      list:[],
      total:0,
      currentPage:0,
      search:"",
      params:{
        id: "20221101095703",
        content: {
          pageSize:10,
          pageNumber:1,
          sat_noticeid:'',
          where:{
            condition:""
          }
        }
      },
      classList:[],
      status:''
    }
  },
  components:{
    TimeSelect
  },
  methods:{
    handleSelectChange () {
      this.params.content.where.usertype = this.status
      this.query_message()
    },
    clearTime () {
      this.params.content.where.startdate = ''
      this.params.content.where.enddate = ''
      this.query_message()
    },
    timeChange (time) {
      this.params.content.where.startdate = time[0]
      this.params.content.where.enddate = time[1]
      this.query_message()
    },
    async query_message() {
      this.dialogTableVisible = true
      this.params.content.sat_noticeid = this.data
      console.log("输出内容")
      console.log(this.params)
      const res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.query_message()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.query_message()
    },
    clearData(){
      this.search = ""
    },
    queryClick(){
      this.params.content.where.condition = this.search
      this.query_message()
    }
  },
  mounted () {

  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name)['tableMessage'].tablecols
  }
}

</script>
<style scoped>
/deep/.el-input__prefix {
  display: flex;
  align-items: center;
}
.dialog-footer{
  margin-top:32px;
  text-align: center;
}
.el-drawer__container {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 30;
  height: 80%;
  width: 100%;
}
</style>