<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
    >
      <template v-slot:toolbar>
      
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="dialogAdd = true"
            >添加</el-button
          >
          <ht-delete-button
            url="${uc}/logs/sysLogsSettings/v1/"
            :htTable="$refs.htTable"
            >删除</ht-delete-button
          >
        
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="logType"
          label="日志类型"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link type="primary" @click="openDetail(row)" title="查看明细">{{
              row.logType == '1'
                ? '登录日志'
                : row.logType == '2'
                ? '异常日志'
                : '操作日志'
            }}</el-link>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="moduleType"
          label="模块名"
          width="150"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            {{ row.moduleType == '' ? '-' : row.moduleType }}
          </template>
        </ht-table-column>
        <ht-table-column prop="type" label="保存时间" width="150">
          <template v-slot="{row}">
            <el-tag
              v-show="row.saveDays == s.value"
              type="info"
              v-for="s in typeArray"
              :key="s.value"
              >{{ s.text }}</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column prop="isSuccess" label="状态" width="120">
          <template v-slot="{row}">
            <el-tag
              v-show="row.status == s.value"
              :type="s.type"
              v-for="s in statusArray"
              :key="s.value"
              >{{ s.text }}</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column prop="remark" label="备注" width="500">
          <template v-slot="{row}">
            {{ row.remark == '' ? '-' : row.remark }}
          </template>
        </ht-table-column>
      </template>
    </ht-table>

    <!-- 添加弹出抽屉 -->
    <el-dialog
      title="添加日志类型"
      :visible.sync="dialogAdd"
      width="30%"
      :before-close="handleCloseAdd"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="日志类型">
            <!-- <el-select v-model="form.log" placeholder="请选择">
              <el-option :value="1">登录日志</el-option>
              <el-option :value="2">异常日志</el-option>
              <el-option :value="3">操作日志</el-option>
            </el-select> -->
            <ht-select
              :options="[
                {key: 1, value: '登录日志'},
                {key: 2, value: '异常日志'},
                {key: 3, value: '操作日志'}
              ]"
              v-model="form.log"
            />
          </el-form-item>
          <el-form-item label="模块名" v-if="form.log == 3" prop="moduleType">
            <el-input v-model="form.moduleType"></el-input>
          </el-form-item>
          <el-form-item label="保存时间">
            <ht-radio
              v-model="form.saveDays"
              :options="[
                {key: 3, value: '三天(3天)'},
                {key: 7, value: '一周(7天)'},
                {key: 30, value: '一个月(30天)'},
                {key: 90, value: '三个月(90天)'},
                {key: 180, value: '半年(180天)'},
                {key: 365, value: '一年(365天)'}
              ]"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model="form.remark"
              :rows="2"
              clos='55'
              :maxlength="200"
              :showWordLimit="true"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="addSave">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹出抽屉 -->
    <ht-sidebar-dialog
      width="28%"
      title="编辑日志配置"
      :visible="dialogVisible"
      :before-close="handleClose"
    >
      <el-form v-model="curRow" data-vv-scope="editForm">
        <ht-form-item label="日志类型" prop="name" label-width="80px">
          <ht-select
            :options="[
              {key: 1, value: '登录日志'},
              {key: 2, value: '异常日志'},
              {key: 3, value: '操作日志'}
            ]"
            v-model="curRow.logType"
          />
        </ht-form-item>
        <ht-form-item
          label="模块名"
          prop="moduleType"
          label-width="80px"
          v-if="curRow.logType == 3"
        >
          <!-- <el-input placeholder="请输入" v-model="curRow.moduleType"></el-input> -->
          <ht-input
            v-model="curRow.moduleType"
            :validate="{required: true}"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="保存时间" prop="receivers" label-width="80px">
          <ht-radio
            v-model="curRow.saveDays"
            :options="[
              {key: 3, value: '三天(3天)'},
              {key: 7, value: '一周(7天)'},
              {key: 30, value: '一个月(30天)'},
              {key: 90, value: '三个月(90天)'},
              {key: 180, value: '半年(180天)'},
              {key: 365, value: '一年(365天)'}
            ]"
          />
        </ht-form-item>
        <ht-form-item label="状态" prop="subject" label-width="80px">
          <ht-radio
            v-model="curRow.status"
            :options="[
              {key: '0', value: '关闭'},
              {key: '1', value: '开启'}
            ]"
          />
        </ht-form-item>
        <ht-form-item label="备注" prop="content" label-width="80px">
          <ht-input
            type="textarea"
            v-model="curRow.remark"
            :rows="2"
            :maxlength="200"
            :showWordLimit="true"
          />
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <ht-submit-button
          :url="saveUrl"
          :model="curRow"
          request-method="POST"
          scope-name="editForm"
          @before-save-data="beforeSaveData"
          @after-save-data="
            dialogVisible = false
            $refs.htTable.load()
          "
          >保存</ht-submit-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </ht-sidebar-dialog>
  </div>
</template>
<script>
import req from '@/request.js'
export default {
  components: {},
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      curRow: {},
      dialogVisible: false,
      dialogAdd: false,
      statusArray: [
        {text: '关闭', value: '0', type: 'danger'},
        {text: '开启', value: '1', type: 'info'}
      ],
      typeArray: [
        {text: '三天', value: '3'},
        {text: '一周', value: '7'},
        {text: '一个月', value: '30'},
        {text: '三个月', value: '90'},
        {text: '半年', value: '180'},
        {text: '一年', value: '365'}
      ],
      form: {
        log: 3,
        moduleType: '',
        saveDays: 365,
        status: 0,
        remark: ''
      },
      //根据id批量删除
      ids: [],
      rules: {
        moduleType: [
          {required: true, message: '请输入模块名', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
        ]
      },
    }
  },
  computed: {
    saveUrl: function() {
      return window.context.portal + '/logs/sysLogsSettings/v1/save'
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.dialogAdd = false
    },
    openDetail(row) {
      this.curRow = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    //添加日志类型
    addSave() {
      //console.log(this.form, 'from');
      //判断用户选择是否是异常日志或者是登录日志，如果是就把模块名置空
      if (this.form.log === 1 || this.form.log === 2) {
        this.form.moduleType = ''
      }
      let param = {
        enableDel: 0,
        id: '',
        logType: this.form.log,
        moduleType: this.form.moduleType,
        pkVal: '',
        remark: this.form.remark,
        saveDays: this.form.saveDays,
        status: this.form.status
      }
      // console.log(param, 'params')
      //判断用户是否输入模块名，进行验证
      if(this.form.log === 3){
        if(this.form.moduleType === ''){
          this.$message.warning('请填写模块名！')
        }else{
          this.addData(param)
          this.dialogAdd = false
          this.$refs.htTable.load()
        }
      }else {
        this.addData(param)
        this.$refs.htTable.load()
        this.dialogAdd = false 
      }
      //清空表单
      this.$refs.form.resetFields()
    },
    addData(param) {
      return new Promise((resolve, reject) => {
        req
          .post(
            window.context.portal + `/logs/sysLogsSettings/v1/`,
            param
          )
          .then(
            response => {
              resolve(response.data)
            },
            error => {
              reject(error)
            }
          )
      })
    },
    handleCloseAdd(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done()
      //   })
      //   .catch(_ => {})
      done()
      //清空表单
      this.$refs.form.resetFields()
    },
    //添加弹窗的取消按钮事件
    cancelAdd() {
      this.dialogAdd = false
      //清空表单
      this.$refs.form.resetFields()
    },
    loadData(param, cb) {
      // console.log(param, 'params')
      req
        .post(
          window.context.portal + '/logs/sysLogsSettings/v1/query',
          param
        )
        .then(data => {
          let response = data.data
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    //处理用户在选择异常日志和登录日志时清空模块名
    beforeSaveData() {
      if (this.curRow.logType === 1 || this.curRow.logType === 2) {
        this.curRow.moduleType = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.aside-width {
  width: $--aside-width !important;
}
.el-dropdown-link {
  cursor: pointer;
  font-size: 14px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/* 设置滚动条的样式 */
/deep/ ::-webkit-scrollbar {
  width: 8px;
  background-color: #fff;
}

/* 滚动槽 */
/deep/ ::-webkit-scrollbar-track {
  border-radius: 8px;
}

/* 滚动条滑块 */
/deep/ ::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #eee;
}
</style>
