 <template>
  <div class="member-group-log">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="member-group-log__content">
      <div class="font-0">
        <el-input class="w-220 m-r-8" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchKey" clearable @clear="clearSearch" @keyup.enter.native="onSearch" />
        <el-date-picker
          class="date-picker"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dateValue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          @change="selectDate"
        ></el-date-picker>
      </div>
      <div class="common-wrap__table m-t-20">
        <el-table v-loading="loading" :data="tableData">
          <el-table-column label="日志ID" :width="350" :formatter="formatter" prop="logId"></el-table-column>
          <el-table-column :width="180" label="分组名称" prop="operateObject" :formatter="formatter" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作内容" prop="content" :formatter="formatter" show-overflow-tooltip></el-table-column>
          <el-table-column :width="180" label="操作时间">
            <template slot-scope="scope">
              <p class="h-18">{{ scope.row.createTime | formatTimeYMD }}</p>
              <p class="h-18">{{ scope.row.createTime | formatTimeHMS }}</p>
            </template>
          </el-table-column>
          <el-table-column :width="180" label="操作人">
            <template slot-scope="scope">
              <p class="h-18">{{ getName(scope.row.userName) }}</p>
              <p class="h-18">{{ getPhone(scope.row.userName) }}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block common-wrap__page text-right" v-if="tableData.length !== 0">
        <dm-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </dm-pagination>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>

<script>
import navCrumb from '@/components/nav/nav.vue';
import { dateformat } from '@/utils/formatTime'
export default {
  name: 'member-group-log',
  components: { navCrumb },
  data() {
    return {
      searchKey: '',
      dateValue: [],
      tableData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      loading: false,
      navpath: [
        {
          name: '首页',
          path: `${window.location.origin}/report/#/memberSummary`,
          relocation: true
        },
        {
          name: '会员管理',
          path: ''
        },
        {
          name: '会员分组',
          path: '/memberGroupList'
        },
        {
          name: '分组操作日志',
          path: ''
        }
      ]
    };
  },
  filters: {
    formatTimeYMD(data) {
      if(!data) return '--'
      return dateformat(new Date(data), 'yyyy-MM-dd')
    },
    formatTimeHMS(data) {
      if(!data) return '--'
      return dateformat(new Date(data),'hh:mm:ss')
    },
  },
  methods: {
    selectDate(val) {
      this.currentPage = 1;
      this.getList();
    },
    clearSearch() {
      this.currentPage = 1;
      this.getList();
    },
    getList() {
      this.loading = true
      let [startDate = '', endDate = ''] = this.dateValue || [];
      return this.axios.get('http://gicdev.demogic.com' + '/gic-member-tag-web/member-tag-group/groupLog', {
        params: {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          requestProject: 'gic-member-tag-web',
          search: this.searchKey,
          startDate,
          endDate
        }
      }).then(res => {
        let { data, data: { result } } = res
        console.log(data)
        if(data.errorCode === 1) {
          this.total = result.totalCount
          this.tableData = result.result || []
        }
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getList();
    },
    onSearch() {
      this.currentPage = 1;
      this.getList();
    },
    getName(item) {
      if(!item) return '--'
      return item.split('-')[0] || '--'
    },
    getPhone(item) {
      if(!item) return '--'
      return item.split('-')[1] || '--'
    },
    formatter(row,col,value) {
      if(!value) {
        return '--'
      } else {
        return value
      }
    }
  },
  mounted() {
    this.searchKey = this.$route.query.groupName || ''
    this.getList()
  }
};
</script>

<style lang="scss" scoped>
.member-group-log {
  // min-width: 1200px;
  overflow: auto;
  width: 100%;
  &__content {
    margin: 24px;
    background: #fff;
    padding: 24px;
    min-height: calc(100% - 240px);
  }
  .h-18 {
    height: 18px;
    line-height: 18px;
  }
}
</style>

<style lang="scss">
.el-tooltip__popper {
    max-width: 95%;
  }
</style>
