<template>
    <el-button :disabled="!contentId" @click="open=true" :type="buttonType">
      <i class="fa fa-list-alt"></i>操作记录
       <el-dialog title="操作记录" :visible.sync="open" @open="dialogOpen" :append-to-body="true" class="content-operate-log-dialog">
        <el-input placeholder="请输入操作人" v-model="userName" @keyup.enter.native="search" class="input-date-picker">
          <el-date-picker v-model="addTimes" id="contentOperLog-date-picker" type="datetimerange" slot="prepend" placeholder="请选择时间范围"></el-date-picker>
          <el-button slot="append" @click="search"><i class="fa fa-search"></i>搜索</el-button>
        </el-input>

        <el-table :data-read-url="getLogs" ref="oRecordTable" tooltip-effect="dark">
          <el-table-column width="65" align="center" label="序号">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column prop="actionName" label="操作" width="120"></el-table-column>
          <el-table-column prop="actionDetail" label="操作明细" show-overflow-tooltip></el-table-column>
          <el-table-column prop="addUser" label="操作人" width="120"></el-table-column>
          <el-table-column width="160" prop="addTime" label="操作时间">
            <template slot-scope="scope">
              {{scope.row.addTime | fixDateTime}}
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer">
          <el-button type="primary" @click="open = false">关闭</el-button>
        </div>
      </el-dialog>
    </el-button>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    contentId: {
      type: [String, Number]
    },
    buttonType: {
      type: String,
      default: ''
    }
  },
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      open: false,
      userName: '',
      addTimes: ''
    }
  },
  methods: {
    async dialogOpen() {
      this.addTimes = ''
      this.userName = ''
      this.$nextTick(() => {
        this.search()
      })
    },
    getLogs() {
      let startDate = ''
      let endDate = ''
      if (this.addTimes) {
        if (this.addTimes[0]) {
          startDate = util.formatDate(this.addTimes[0], 'yyyy-MM-dd HH:mm:ss')
        }
        if (this.addTimes) {
          endDate = util.formatDate(this.addTimes[1], 'yyyy-MM-dd HH:mm:ss')
        }
      }
      return [
        `/ui/contentcore/contents/${this.contentId}/logs`,
        { params: { startDate: startDate, endDate: endDate, userName: this.userName, contentType: 'Content' } }
      ]
    },
    search() {
      this.$refs.oRecordTable.getData()
    }
  }
}
</script>
<style>
.content-operate-log-dialog .el-dialog {
  width: 700px;
}
@media (max-width: 480px) {
  .content-operate-log-dialog .el-dialog {
    width: 96%;
  }
}
.content-operate-log-dialog .input-date-picker .el-input-group__prepend{
  padding:0px;
  border:none;
  width:60%;
}
</style>
