<template>
  <div class="right-wrap">
    <div class="right-box" v-loading="loading">
      <div style="font-size: 0">
        <el-select placeholder="选择业务模块" v-model="search.businessType" style="width: 160px" clearable @change="onSearch">
          <el-option v-for="el in moduleList" :key="el.key" :label="el.value" :value="el.key"></el-option>
        </el-select>
        <el-select placeholder="选择操作事项" v-model="search.optType" style="width: 160px;margin-left: 10px" clearable @change="onSearch">
          <el-option v-for="el in businessList" :key="el.key" :label="el.value" :value="el.key"></el-option>
        </el-select>
        <el-select placeholder="操作人姓名/手机号" v-model="search.optUser" style="width: 170px;margin-left: 10px" popper-class="operate-clerk-list" clearable filterable :filter-method="searchClerk" v-select-loadmore="loadMoreClerk" @change="onSearch">
          <el-option v-for="el in userList" :key="el.clerkId" :value="el.clerkId" :label="el.clerkName">
            <p>{{ el.clerkName }}</p>
            <p>{{ el.phoneNumber }}</p>
          </el-option>
        </el-select>
        <el-input placeholder="操作内容" v-model="search.search" style="width: 260px;margin-left: 10px" clearable prefix-icon="el-icon-search" @change="onSearch"></el-input>
        <el-date-picker v-model="search.dateRange" @change="onSearch" :picker-options="pickerOptions" clearable style="width: 256px;margin-left: 10px" type="daterange" value-format="yyyy-MM-dd" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      </div>
      <el-table :data="tableData" style="margin: 20px 0">
        <el-table-column label="业务模块" prop="businessTypeName" :formatter="(row, col, val) => val || '--'"></el-table-column>
        <el-table-column label="操作事项" prop="optTypeName" :formatter="(row, col, val) => val || '--'"></el-table-column>
        <el-table-column label="操作页面" prop="optPage" :formatter="(row, col, val) => val || '--'"></el-table-column>
        <el-table-column label="操作账号" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <template v-if="row.userName || row.phoneNumber">
              <p class="text-overflow">
                {{ row.userName ? row.userName : '' }}
                <span v-if="row.ywName" style="color: #909399">（{{ row.ywName }}）</span>
              </p>
              <p>{{ row.phoneNumber ? row.phoneNumber : '' }}</p>
            </template>
            <template v-else>--</template>
          </template>
        </el-table-column>
        <el-table-column label="操作内容" prop="content" :formatter="(row, col, val) => val || '--'" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作时间" prop="createTime">
          <template slot-scope="{ row }" v-if="row.createTime">
            {{ filters.timeStampToYmd(Number(row.createTime)) }}<br />
            {{ filters.timeStampToHms(Number(row.createTime)) }}
          </template>
          <template v-else>--</template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="pager.total > 0" background style="text-align: right" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pager.total" :current-page="pager.currentPage" :page-size="pager.pageSize" :page-sizes="[20, 40, 60, 80]"></el-pagination>
    </div>
  </div>
</template>

<script>
import { logList, businessType, optTypes, listUserBySearchName } from '@/api/actCode';
import filters from '@/filters/index';
export default {
  name: 'operateLog',
  data() {
    return {
      filters,
      requestProject: 'gic-web',
      loading: false,
      search: {
        businessType: '',
        optType: '',
        optUser: '',
        search: '',
        dateRange: []
      },
      clerkListPager: {
        searchName: '',
        pageNum: 1,
        pageSize: 20,
        totalPage: 1
      },
      moduleList: [],
      businessList: [],
      userList: [],
      tableData: [],
      pager: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      enterpriseId: JSON.parse(sessionStorage.getItem('userInfos')).enterpriseId,
      pickerOptions: {
        disabledDate(date) {
          const now = new Date();
          let start = new Date();
          start = new Date(start.setMonth(now.getMonth() - 3));
          return date.getTime() < start.getTime() || date.getTime() > now.getTime();
        }
      }
    };
  },
  mounted() {
    this.initData();
    this.getTableData();
  },
  methods: {
    initData() {
      const params = {};
      params.requestProject = this.requestProject;
      businessType(params).then(res => {
        const { code, result } = res.data || {};
        if (code == 0) {
          this.moduleList = (result || []).filter(el => el.key != 1001);
        }
      });
      optTypes({ params }).then(res => {
        const { code, result } = res.data || {};
        if (code == 0) {
          this.businessList = (result || []).filter(el => el.key != 1001);
        }
      });
      this.getClerkList();
    },
    loadMoreClerk() {
      if (this.clerkListPager.pageNum >= this.clerkListPager.totalPage) return;
      this.clerkListPager.pageNum += 1;
      this.getClerkList();
    },
    searchClerk(searchName) {
      this.clerkListPager.searchName = searchName;
      this.clerkListPager.pageNum = 1;
      this.clerkListPager.totalPage = 1;
      document.querySelector('.operate-clerk-list .el-scrollbar__wrap').scrollTop = 0;
      this.getClerkList();
    },
    getClerkList() {
      const { pageNum, pageSize, searchName } = this.clerkListPager;
      const params = { searchName, pageNum, pageSize };
      params.requestProject = this.requestProject;
      listUserBySearchName(params).then(res => {
        const { code, result } = res.data || {};
        if (pageNum == 1) {
          this.userList = [];
        }
        if (code == 0) {
          this.userList = this.userList.concat(result.result || []);
          this.clerkListPager.totalPage = result.totalPage;
        }
      });
    },
    getTableData() {
      this.loading = true;
      const { pageSize, currentPage } = this.pager;
      const { businessType, optType, optUser, search, dateRange } = this.search;
      let para = {
        businessType,
        optType,
        optUser,
        search,
        startDate: Array.isArray(dateRange) ? dateRange[0] : '',
        endDate: Array.isArray(dateRange) ? dateRange[1] : '',
        pageSize,
        pageNum: currentPage,
        enterpriseId: this.enterpriseId
      };
      para.requestProject = this.requestProject;
      logList(para).then(res => {
        let data = res.data;
        if (data.code == 0) {
          this.tableData = data.result.result;
          this.pager.total = data.result.totalCount;
        }
        this.loading = false;
      });
    },
    onSearch() {
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      this.pager.currentPage = val;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.pager.pageSize = val;
      this.handleCurrentChange(1);
    }
  }
};
</script>

<style scoped lang="less">
.right-wrap {
  padding: 20px;
}
.text-overflow {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .el-table::before {
  display: none;
}
.operate-clerk-list .el-select-dropdown__item {
  padding: 8px 12px;
  height: 52px;
  line-height: normal;
  p:first-child {
    line-height: 20px;
  }
  p:last-child {
    line-height: 17px;
  }
  &:hover p {
    color: #2f54eb;
  }
}
</style>
