<template>
  <com-head :options="headList" showCtrl>
    <el-form label-width="90px" :inline="true">
      <el-form-item label="時間段：">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="操作員：">
        <el-input
          v-model="search.state.nickName"
          placeholder="請輸入"
        ></el-input>
      </el-form-item>
      <el-form-item label="所屬品牌：">
        <com-company v-model="search.state.deptId" />
      </el-form-item>
      <el-form-item label="手機號：">
        <el-input
          v-model="search.state.phone"
          placeholder="請輸入"
        ></el-input>
      </el-form-item>
      <el-form-item class="searh-btns">
        <el-button @click="search.reset">重置</el-button>
        <el-button type="primary" @click="search.submit">查詢</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer">
    <div class="body-head">
      <h3>日誌列表</h3>
    </div>

    <el-table
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="操作時間" prop="createTime"></el-table-column>
      <el-table-column label="操作員" prop="nickName"></el-table-column>
      <el-table-column label="手機號" prop="phone"></el-table-column>
      <el-table-column
        label="所屬架構"
        prop="deptName"
      ></el-table-column>
      <el-table-column label="角色" prop="roleName"></el-table-column>
      <el-table-column label="操作類型" prop="logType"></el-table-column>
      <el-table-column label="操作記錄" prop="info"></el-table-column>
    </el-table>
    
    <com-pagination
      @size-change="pag.sizeChange"
      @current-change="pag.currentChange"
      :current-page="pag.state.currPage"
      :page-size="pag.state.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pag.state.total"/>

  </div>
</template>

<script>
import { ref, watch } from "vue";
import getTableState from "@/state/tableRef";
import auth from "@/state/viewAuth";
import comHead from "@/components/head";
import comCompany from "@/components/company-select";
import comPagination from "@/components/pagination";
import { dateFormat } from '@/util'
import { getLogList } from "@/request/config";

export default {
  name: 'log',
  setup() {
    const headList = ref([{ name: "操作日誌", value: '0' }]);
    const state = getTableState({
      getUrl: getLogList,
      searchAttr: {
        phone: "",
        nickName: "",
        deptId: "",
        startTime: "",
        endTime: "",
      },
      pagAttr: {totalNum: 'total'}
    });
    const time = ref(null);
    
    watch(time, () => {
      if (time.value) {
        state.search.value.state.startTime = dateFormat(new Date(time.value[0]), 'yyyy-MM-dd hh:mm:ss')
        state.search.value.state.endTime = dateFormat(new Date(time.value[1]),'yyyy-MM-dd 23:59:59')
      } else {
        state.search.value.state.startTime = state.search.value.state.endTime = ''
      }
    })
    watch(
      [() => state.search.value.state.startTime, () => state.search.value.state.endTime],
      () => {
        if (!state.search.value.state.startTime || !state.search.value.state.endTime) {
          time.value = null
        }
      }
    )



    return { ...state, headList, time, auth };
  },
  components: {
    "com-head": comHead,
    "com-company": comCompany,
    "com-pagination": comPagination
  },
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.examine-from {
  width: 320px;
  margin: 0 auto;
}
</style>