<template>
  <div style="padding:20px">
    <div class="logTop">
      <el-cascader
      style="width:260px;"
        placeholder="全部类型/全部事由"
        :options="options"
        filterable>
      </el-cascader>
      <el-date-picker style="width: 256px; margin-left:10px;" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" value-format="yyyy-MM-dd" @change="handleSearch"> </el-date-picker>
      <p class="font14 tip-p" v-if="!memberId">展示近一年的日志</p>
    </div>
    <el-table :data="tableData"  style="width: 100%">
      <el-table-column prop="createTime" label="时间">
        <template slot-scope="scope">
          {{ scope.row.createTime | formatTime }}
        </template>
      </el-table-column>
      <el-table-column prop="operType" label="日志类型" />
      <el-table-column prop="operReason" label="事由" />
      <el-table-column prop="operContent" label="日志详情" show-overflow-tooltip/>
      <el-table-column prop="operRemark" label="备注" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span v-html="row.operRemark" />
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="120" v-if="memberId">
        <template slot-scope="{ }">
          <el-button type="text" @click="goLink('/customerLog')">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page mTop20" v-if="totalCount > 0">
      <dm-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="logPageParam.currentPage"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="logPageParam.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="totalCount"
      />
    </div>
  </div>
</template>

<script>
import mixin from '../../wechatmembers/cardMixin';
import url from '../../axios/url';
import { doFetch } from '../../axios/api';
export default {
  name: 'customerLog',
  mixins: [mixin],
  props: {
    memberId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      logPageParam: {
        pageSize: 20,
        currentPage: 1,
      },
      totalCount: 0,
    };
  },
  created() {
    this.getLogPage();
  },
  methods: {
    getLogPage () {
      this.tableLoading = true;
      doFetch(url.logPage, {
        ...this.logPageParam,
        memberId: this.memberId || this.$route.query.memberId,
      })
        .then(res => {
          this.tableLoading = false;
          if (res.data.errorCode === 0) {
            this.tableData = res.data.result.page.result || [];
            this.tableData = this.tableData.map(el => {
              if (typeof el.operRemark == 'string') { el.operRemark = el.operRemark.replace(/\n/g, ' <br />'); }
              return el;
            });
            this.totalCount = res.data.result.page.totalCount;
          } else {
            checkFalse(res.data.message);
            return false;
          }
        })
        .catch(err => {
          this.tableLoading = false;
          checkStatus(err);
        })
        .finally(_ => this.count++);
    },
     handleSizeChange (v) {
      this.logPageParam.pageSize = v;
      this.logPageParam.currentPage = 1;
      this.getLogPage();
    },
    handleCurrentChange (v) {
      this.logPageParam.currentPage = v;
      this.getLogPage();
    },
    handleSearch() {
      this.logPageParam.currentPage = 1;
      this.getLogPage();
    },
    goLink (v) {
      console.log(this.memberId, 'this.memberId');
      if (v) this.$router.push({ path: v, query: { memberId: this.memberId } });
    },
  }
};
</script>
<style lang="scss" scoped>
.logTop {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.tip-p{
  margin-left: 20px;
    color: #6B6D71;
    // padding-bottom: 16px;
}
</style>