<template>
  <div class="div_main">

    <el-form :inline="true"
             :model="formData"
             ref="ref_searchform"
             :label-width="'100px'">

      <el-form-item label="查询时间"
                    prop="startTime">
        <el-date-picker v-model="timeRange"
                        type="daterange"
                        :clearable="false"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        prefix-icon="el-icon-caret-bottom"
                        value-format="yyyy-MM-dd"
                        @change="handleTimeChange">
        </el-date-picker>

      </el-form-item>

      <div>
        <el-form-item label="总计："
                      prop="startTime">
          <span>{{totalPoint}}</span>
        </el-form-item>
      </div>

    </el-form>

    <el-table class="table"
              :data="tableData"
              border
              :height="tableHeight"
              v-loading="tableLoading"
              :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
              style="width: 100%">

      <el-table-column label="序号"
                       header-align="center"
                       align="center"
                       type="index"
                       width="50"></el-table-column>
      <el-table-column prop="categoryName"
                       header-align="center"
                       align="center"
                       label="需求类型"
                       width="180">
      </el-table-column>
      <el-table-column prop="demandUserName"
                       header-align="center"
                       align="center"
                       label="需求人"
                       width="100">
      </el-table-column>
      <el-table-column prop="content"
                       header-align="center"
                       align="center"
                       label="需求内容"
                       min-width="230">
      </el-table-column>

      <el-table-column prop="pointTime"
                       header-align="center"
                       align="center"
                       label="时间"
                       width="150">
      </el-table-column>

      <el-table-column prop="score"
                       header-align="center"
                       align="center"
                       label="评价"
                       width="80">
      </el-table-column>

      <el-table-column prop="point"
                       header-align="center"
                       align="center"
                       label="积分"
                       width="80">
      </el-table-column>

    </el-table>
    <div>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pageNo"
                     :page-sizes="[10, 20, 50]"
                     :page-size="pageSize"
                     layout="sizes, prev, pager, next, total"
                     :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>


import util from '@js/util.js';
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      loading: false,
      totalPoint: 100,
      total: 0,
      pageSize: 10,
      pageNo: 0,
      tableLoading: false,
      serviceId: '',

      pickerOptions: { //控制时间范围
        disabledDate (time) {
          return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000))
        }
      },

      timeRange: [],
      unitId: '',
      formData: {

        startTime: '',
        endTime: ''
      },

      tableData: [],



    }
  },
  components: {

  },
  async created () {

  },
  async mounted () {


  },

  methods: {
    async initForm (serviceId) {
      this.initDate()

      this.serviceId = serviceId

      //获取数据
      await this.loadTable()
    },

    handleSearch () {
      this.loadTable()
    },


    async loadTable () {
      this.tableLoading = true

      const url = "/heart/userdemand/recordList"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/userdemand/recordList"
      let params = {
        serviceType: this.serviceType,
        serviceId: this.serviceId,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        ...this.formData
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.totalPoint = data.totalPoint
        this.total = data.page.total
        this.tableData = data.page.list
      } else {
        this.$message.error(msg)
      }
      this.tableLoading = false
    },

    //初始化时间
    initDate () {
      let today = new Date((new Date).getTime())

      let year = today.getFullYear()
      let month = today.getMonth() + 1 //月
      let day = today.getDate() //日

      let days = new Date(year, month, 0);
      days = days.getDate(); //获取当前月的天数
      let year2 = year;
      let month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      let day2 = day;
      let days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = '0' + month2;
      }
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      if (day2 < 10) {
        day2 = '0' + day2;
      }
      let t2 = year2 + '-' + month2 + '-' + day2;
      let t1 = year + '-' + month + '-' + day;
      // let t3 = formate(t2, style);
      this.formData.startTime = t2 + ' 00:00:00'
      this.formData.endTime = t1 + ' 23:59:59'

      this.timeRange = [t2, t1]
    },


    handleTimeChange (time) {
      if (time) {
        const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
        const endTimeArray = util.dateFormatter(time[1], 'date').split('-')

        this.formData.startTime = startTimeArray[0] + '-' + startTimeArray[1] + '-' + startTimeArray[2] + ' 00:00:00'
        this.formData.endTime = endTimeArray[0] + '-' + endTimeArray[1] + '-' + endTimeArray[2] + ' 23:59:59'

        // this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
        // this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        // this.startTimeShow = ''
        // this.endTimeShow = ''
      }

      this.loadTable()

    },

    handleSizeChange (val) {
      this.pageSize = val
      this.pageNo = 1
      this.loadTable()
    },
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadTable()
    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    tableHeight () {

      return (this.clientHeight - 460)

    },
    rowHeight () {
      return (this.clientHeight - 200) + 'px'
    },
    ...mapGetters(['clientHeight'])
  },
  watch: {

  },
  props: {
    serviceType: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss";

.div_main {
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: 15px;
  padding: 23px 30px 10px;
}

.div_search {
  background: #ffffff;
  border-radius: 4px;
  padding: 30px 20px 5px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}

.item_width_1 {
  width: 260px;
}
.item_width_2 {
  width: 495px;
}

.div_table {
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: 15px;
  padding: 23px 30px 10px;

  .table {
    margin-top: 20px;
  }
}

.el-row {
  /* margin-bottom: 20px; */
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: 50px;
}
</style>
