<template>
  <div class="layout-no-cols">
    <div class="tar">
      <el-row type="flex" class="row-bg" justify="end" v-if="!isComplexSearch">
        <el-col :span="6" >
          <el-input v-model="moduleLog.search.content" placeholder="内容名称或ID" @keyup.enter.native="searchLogsClickHandler"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button @click="searchLogsClickHandler">
              <i class="fa fa-search"></i>搜索
            </el-button>
            <el-button @click="isComplexSearch=!isComplexSearch">高级搜索 ...</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <template v-else>
        <el-row type="flex" :gutter="10" class="row-bg" justify="center" align="middle">
          <el-col :span="6">
            <el-input v-model="moduleLog.search.userName" placeholder="用户名"></el-input>
          </el-col>
          <el-col :span="4">
            <el-select class="layout-select" v-model="moduleLog.search.moduleType" clearable placeholder="组件类型" @change="searchLogsClickHandler">
              <el-option label="区块" value="Block"></el-option>
              <el-option label="广告" value="ADPosition"></el-option>
              <el-option label="调查" value="Vote"></el-option>
              <el-option label="图片播放器" value="ImagePlayer"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <tree-select class="layout-select" clearable :value.sync="moduleLog.search.catalogID" :items="catalogTrees" placeholder="栏目名称"></tree-select>
          </el-col>
          <el-col :span="10">
            <el-date-picker id="moduleLog-date-picker" class="layout-date-picker" v-model="moduleLog.search.dateInterval" type="datetimerange" placeholder="选择日志时间范围" style="width:100%"></el-date-picker>
          </el-col>
        </el-row>
        <div style="padding:3px"></div>
        <el-row type="flex" :gutter="10" class="row-bg" justify="center">
          <el-col :span="6">
            <el-input v-model="moduleLog.search.content" @keyup.enter.native="searchLogsClickHandler" placeholder="内容名称或ID"></el-input>
          </el-col>
          <el-col :span="4">
            <el-select class="layout-select" v-model="moduleLog.search.actionResult" clearable placeholder="操作结果" @change="searchLogsClickHandler">
              <el-option label="成功" value="S"></el-option>
              <el-option label="失败" value="F"></el-option>
            </el-select>
          </el-col>
          <el-col :span="14">
            <el-button-group style="float:left">
              <el-button  type="primary" @click="searchLogsClickHandler">
                <i class="fa fa-search"></i>高级搜索
              </el-button>
              <el-button @click="isComplexSearch=!isComplexSearch">搜索 ...</el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </template>
    </div>

      <el-list-view ref="dataTable1" :data-read-url="getModuleLogsUrl" :pageSize="10">
        <template slot-scope="item">
          <div class="panel-card">
            <div class="card-header">
              <el-row>
                <el-col :span="24">
                  <span class="f12"><i class="fa fa-clock-o"></i>{{item.addTime | fixDateTime}}</span>
                </el-col>
              </el-row>
            </div>
            <div class="card-content">
              <el-row>
                <el-col :span="8">
                  <span>栏目：<em>{{item.catalogName}}</em></span>
                </el-col>
                <el-col :span="8">
                  <span>组件ID：<em>{{item.dataID}}</em></span>
                </el-col>
                <el-col :span="8">
                  <span>组件类型：<em>{{item.contentTypeName}}</em></span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span>操作类型：<em>{{item.actionName}}</em></span>
                </el-col>
                <el-col :span="8">
                  <span>用户名：<em>{{item.addUser}}</em></span>
                </el-col>
              </el-row>
              <el-row>
                <span>操作明细：<em>{{item.actionDetail}}</em></span>
              </el-row>
            </div>
          </div>
        </template>
      </el-list-view>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      isComplexSearch: false,
      catalogTrees: [],
      moduleLog: {
        search: {
          userName: '',
          catalogID: '',
          moduleType: '',
          dateInterval: [],
          content: '',
          actionResult: ''
        }
      }
    }
  },
  methods: {
    getModuleLogsUrl() {
      const userName = this.moduleLog.search.userName
      const moduleType = this.moduleLog.search.moduleType
      const catalogID = this.moduleLog.search.catalogID
      const dateInterval = this.moduleLog.search.dateInterval
      const actionResult = this.moduleLog.search.actionResult
      const searchName = encodeURI(encodeURI(this.moduleLog.search.content))
      return [
        '/ui/contentlogs/moduleLogs',
        {
          params: {
            userName,
            moduleType,
            catalogID,
            startTime: dateInterval[0] ? Date.parse(dateInterval[0]) : null,
            endTime: dateInterval[1] ? Date.parse(dateInterval[1]) : null,
            searchName,
            actionResult
          }
        }
      ]
    },
    searchLogsClickHandler() {
      this.$refs.dataTable1.getData(1)
    },
    async initTreeSelect() {
      let editTree = await axios.get('/ui/catalog/bindeditortree')
      this.catalogTrees = editTree.data.data
    }
  },
  created() {
    this.initTreeSelect()
  },
  components: {
    'tree-select': TreeSelect
  }
}
</script>
<style scoped>
  .platform-log-bar {
    width: 100%;
    height: auto;
    padding: 0 15px;
  }
  .panel-card {
    padding: 0px;
    margin: 10px auto 20px;
  }

  .panel-card .card-header{
    background-color: #fafafa;
    padding: 10px 15px;
  }

  .card-content{
    padding: 10px 15px;
  }
</style>
