<template>
  <div style="padding:20px">
    <div class="logTop">
      <el-cascader
        style="width:260px;"
        placeholder="全部类型/全部事由"
        :options="options"
        filterable
        clearable
        :props="{ checkStrictly: true }"
        @change="filterMethod">
        <template slot-scope="{data}">
          <span>{{data.operTypeName || data.openReasonName}}</span>
        </template>
      </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
        v-if="!memberId"
        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"
      />
      <dm-pagination
        v-else
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="logPageParam.currentPage"
        :page-size="logPageParam.pageSize"
        layout="prev, pager, next"
        :total="totalCount"
      />
    </div>
  </div>
</template>

<script>
import mixin from '../../wechatmembers/cardMixin';
import url from '../../axios/url';
import { doFetch, doFetchGet } from '../../axios/api';
export default {
  name: 'customerLog',
  mixins: [mixin],
  props: {
    memberId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      logPageParam: {
        pageSize: 20,
        currentPage: 1,
        operReason: null,
        operType: null,
        beginTime: '',
        endTime: ''
      },
      totalCount: 0,
      options: [
        // {
        //   value: 'zhinan',
        //   label: '指南',
        //   children: [{
        //     value: 'shejiyuanze',
        //     label: '设计原则',
        //     children: [{
        //       value: 'yizhi',
        //       label: '一致'
        //     }, {
        //       value: 'fankui',
        //       label: '反馈'
        //     }, {
        //       value: 'xiaolv',
        //       label: '效率'
        //     }, {
        //       value: 'kekong',
        //       label: '可控'
        //     }]
        //   }, {
        //     value: 'daohang',
        //     label: '导航',
        //     children: [{
        //       value: 'cexiangdaohang',
        //       label: '侧向导航'
        //     }, {
        //       value: 'dingbudaohang',
        //       label: '顶部导航'
        //     }]
        //   }]
        // }
        ]
    };
  },
  created() {
    this.setDefalutTime()
    this.getLogPage();
    this.getLogTypeData();
  },
  methods: {
    // 级联搜索
    filterMethod(e) {
      console.log(e);
    },
    // 客户日志类型列表
    getLogTypeData() {
      doFetchGet(url.getMemberLogType,{}).then(res=>{
        if(res.data.errorCode == 0) {
          this.options = res.data.result || [];
          console.log(this.options,'999');
        }
      })
    },
    // 客户日志列表
    getLogPage () {
      this.tableLoading = true;
      this.logPageParam.beginTime = this.dateDefault[0];
      this.logPageParam.endTime = this.dateDefault[1];
      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 !important;
  align-items: center !important;
  margin-right: 10px;
}
.tip-p{
  margin-left: 20px;
    color: #6B6D71;
    // padding-bottom: 16px;
}
</style>