<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div style="margin-top:-15px;background:#fff;padding:15px">
        <el-row :gutter="24" style="display:flex">
          <el-input v-model="queryParams.title" style="width: 220px;padding:0 10px" placeholder="请输入系统模块" />
          <el-input v-model="queryParams.userId" style="width: 220px;padding:0 10px" placeholder="请输入操作人员" />
          <el-select v-model="queryParams.businessType" clearable placeholder="请选择类型" style="width:220px;padding:0 10px">
            <el-option v-for="item in getDoType" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
          <div v-if="searchShow == true" :span="6" style="display:flex;margin-top:2px">
            <!-- <div class="search-btn"> -->
            <div class="searchBtn" style="margin-left:10px" @click="handleQuery">搜索</div>
            <div class="resetBtn" style="margin-left:10px" @click="reset">重置</div>
            <el-button v-if="searchShow == false" type="text" style="color: #2766dd !important;margin-left:10px"
              icon="el-icon-arrow-up" @click="searchShow = true">收起</el-button>
            <el-button v-if="searchShow == true" type="text" style="color:#2766DD;margin-left:10px"
              icon="el-icon-arrow-down" @click="searchShow = false">展开</el-button>
            <!-- </div> -->
          </div>
        </el-row>
        <el-row :gutter="24" style="display:flex">
          <div v-if="searchShow == false" :span="6">
            <el-date-picker v-model="dateRange" style="width: 420px;margin-left:10px" end-placeholder="结束日期"
              range-separator="至" start-placeholder="开始日期" clearable value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
              :clearable="true" />
          </div>
          <el-col style="width:240px"></el-col>
          <div v-if="searchShow == false" :span="6">
            <div class="search-btn" style="display: flex;">
              <!-- <el-button class="search" @click="handleQuery">搜索</el-button>
              <el-button class="reset" @click="reset">重置</el-button> -->
              <div class="searchBtn" style="margin-top: 10px;" @click="handleQuery">搜索</div>
              <div class="resetBtn" style="margin-left:10px;margin-top: 10px;" @click="reset">重置</div>
              <el-button v-if="searchShow == false" type="text" icon="el-icon-arrow-up"
                style="color: #2766dd !important;margin-left:10px;margin-top: 10px;"
                @click="searchShow = true">收起</el-button>
              <el-button v-if="searchShow == true" type="text" icon="el-icon-arrow-down"
                @click="searchShow = false">展开</el-button>
            </div>
          </div>
        </el-row>
      </div>
    </div>

    <div style="margin-top: 15px;background:#fff;padding:20px">
      <div class="table-content">
        <div style="width: 100%; height: 30px">
          <!-- <div class="addBtn" style="margin-right:0" @click="exportOut">导出</div> -->
          <!-- <div class="addBtn" @click="addDepartMenDict">删除</div> -->
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="operId" label="日志编号" align="center" fixed="left" />
          <el-table-column prop="title" show-overflow-tooltip="true" label="系统模块" align="center" />
          <el-table-column prop="businessType" label="操作类型" align="center">
            <template slot-scope="scope">
              <!-- <dict-tag :options="getDoType" :value="scope.row.businessType" /> -->
              {{ switchNumber(scope.row.businessType) }}
            </template>
          </el-table-column>
          <el-table-column prop="requestMethod" label="请求方式" align="center" />
          <el-table-column prop="userId" label="操作人员" align="center" />
          <el-table-column prop="operIp" label="操作地址" align="center" />
          <el-table-column prop="operTime" label="操作时间" align="center" />
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <div class="operateBtn">
                <div style="cursor: pointer;font-size:14px;color: #2766DD;;" @click="showDetail(scope.row)">
                  详细
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <div class="pagination">
            <el-pagination :page-sizes="[10, 15, 20]" :page-size="searchData.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </el-row>
      </div>
    </div>
    <!-- 操作日志详细 -->
    <el-dialog title="操作日志详细" :visible.sync="open" width="720px" append-to-body>
      <div class="dialog_box">
        <el-form :model="formDetail">
          <el-row>
            <el-col :span="12">
              <el-form-item label="操作模块">{{
                formDetail.title
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作状态">
                <div v-if="formDetail.status === 1">正常</div>
                <div v-else-if="formDetail.status === 2">失败</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作时间">{{
                formDetail.operTime
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求方式">{{
                formDetail.requestMethod
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录信息">{{ formDetail.operName }} / {{ formDetail.operIp }} /
                {{ formDetail.operLocation }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="请求参数">{{
                formDetail.operParam
              }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="请求地址">{{
                formDetail.operUrl
              }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="操作方法">{{
                formDetail.method
              }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="返回参数">{{
                formDetail.jsonResult
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.status === 1" label="异常信息">{{
                formDetail.errorMsg
              }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button class="reset" @click="open = false">关 闭</el-button> -->
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOperationList,
  getDoingTypeList,
  getloafOut,
  getDeleteList
} from '@/api/operation'
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      searchShow: true,
      formDetail: {},
      value1: '',
      queryParams: {
        pageSize: '10',
        pageNum: '1',
        title: '',
        userId: '',
        businessType: ''
      },
      open: false,
      form: {
        dicrName: '',
        dictType: '',
        status: '',
        remark: ''
      },
      statusOptions: [
        {
          label: '启用',
          value: '0'
        },
        {
          label: '停用',
          value: '1'
        }
      ],
      searchData: {},
      dateRange: [],
      tableData: [],
      getDoType: [],
      ids: [],
      total: 0,
      dialogFormVisible: false
    }
  },
  created() {
    this.getList()
    this.getTypeList()
  },
  methods: {
    showDetail(row) {
      this.open = true
      this.formDetail = row
    },
    addDepartMenDict() {
      if (this.ids.length == 0) {
        this.$message({
          type: 'error',
          message: '请选择要删除的日志数据!'
        })
      } else {
        this.$confirm('确定要删除吗?', '信息提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            getDeleteList(this.ids).then((res) => {
              if (res.code == 200) {
                this.getList()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.operId)
    },
    exportOut() {
      getloafOut({}).then((res) => {
        this.exportFile(res, '操作日志信息')
      })
    },
    exportFile: function (obj, name = Date.now(), suffix = 'xlsx') {
      const url = window.URL.createObjectURL(
        new Blob([obj], { type: 'application/vnd.ms-excel' })
      )
      const aDOM = document.createElement('a')
      aDOM.style.display = 'none'
      aDOM.href = url
      const fileName = name + '.' + suffix
      aDOM.setAttribute('download', fileName)
      document.body.appendChild(aDOM)
      aDOM.click()
      document.body.removeChild(aDOM)
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    reset() {
      this.queryParams = {}
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
      this.dateRange = []
    },
    // 操作类型
    getTypeList() {
      getDoingTypeList({}).then((res) => {
        this.getDoType = res.data
      })
    },
    switchNumber(num) {
      this.getDoType.map((item) => {
        if (num.toString() === item.dictValue) {
          num = item.dictLabel
        }
      })
      return num
    },

    getList() {
      if (this.dateRange) {
        this.queryParams.startTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      } else {
        this.queryParams.satrtTime = ''
        this.queryParams.endTime = ''
      }
      getOperationList(this.queryParams).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 45px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {

  .search-content {
    width: 100%;
    height: 80px;
    background-color: #fff;
    padding-top: 20px;

    .el-input {
      margin: 0 20px;
    }

    .el-select {
      margin: 0 20px;
    }

    .search-btn {
      float: right;
      margin-right: 20px;
    }
  }

  .table-content {
    margin-top: -20px;
    width: 100%;
    background-color: #fff;

    .addBtn {
      margin: 23px 6px;
      cursor: pointer;
      float: right;
      text-align: center;
      width: 98px;
      height: 34px;
      border-radius: 2px;
      line-height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #F7F8FB;
      background-color: #2766DD;
    }

    .addBtn:hover {
      background-color: #4D85F4;
    }

    .rightTable {
      float: right;
      width: 85%;
      background-color: #fff;

      .btn {
        margin: 20px 15px 20px;
        cursor: pointer;
        float: right;
        text-align: center;
        width: 98px;
        height: 34px;
        line-height: 34px;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        background-color: #2866dd;
      }

      .startUsing {
        width: 60px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        border-radius: 5px;
        background-color: #00974b;
      }

      .Deactivate {
        width: 60px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        border-radius: 5px;
        background-color: #ff9933;
      }

      .operateBtn {
        display: flex;
        justify-content: center;
        color: #2766DD;

        div {
          font-size: 14px;
          margin: 0 5px;
          cursor: pointer;
        }
      }

      .pagination {
        margin: 10px 0;
        width: 100%;
        height: 20px;

        .el-pagination {
          float: right;
        }
      }
    }
  }
}

.search {
  background-color: #2766DD;
  color: #F7F8FB;
}

.search:hover {
  background-color: #4D85F4;
}

.reset {
  color: #333334;
  border: 1px solid #D7D7D7;
}

.reset:hover {
  color: #1F9FFF;
  border: 1px solid #1F9FFF;
  background: none;
}

::v-deep .el-pagination .number {
  width: 72px
}

::v-deep .el-date-editor .el-range__icon {
  position: absolute;
  top: 2px;
}

.searchBtn {
  cursor: pointer;
  background-color: #2766dd;
  color: #f7f8fb;
  font-size: 14px;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.searchBtn:hover {
  background-color: #4d85f4;
}

.resetBtn {
  cursor: pointer;
  color: #565656;
  font-size: 14px;
  border: 1px solid #d7d7d7;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.resetBtn:hover {
  color: #1f9fff;
  border: 1px solid #1f9fff;
  background: none;
}

::v-deep .el-input__icon {
  // line-height: 47px;
}

::v-deep .el-date-editor .el-range__icon {
  line-height: 30px;
}
</style>
