<template>
  <div class="manage-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="数据字典" name="first">
        <dict-index ref="dict"></dict-index>
      </el-tab-pane>
      <el-tab-pane label="LPM管理" name="second">
        <div class="manage-wrap">
          <div class="manage-input">
            <el-input
              v-model="input"
              size="small"
              placeholder="名称查询"
            ></el-input>
          </div>
          <div class="manage-button">
            <el-button type="primary" size="small">
              {{ $t('defalult.cx') }}
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="dialogEditLPM = true"
            >
              添加LPM
            </el-button>
            <el-dialog v-model="dialogEditLPM" title="添加数据字典">
              <el-form :model="form">
                <el-form-item
                  :label="$t('trigger.mc')"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="IP" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="PORT" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="LPM-KEY" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-button type="primary" @click="dialogEditLPM = false">
                  保存
                </el-button>
                <el-button @click="dialogEditLPM = false">取 消</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <el-table :data="tableData2" border stripe style="width: 100%">
          <el-table-column
            prop="id"
            :label="$t('trigger.xh')"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            :label="$t('trigger.mc')"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ip"
            label="IP"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="port"
            label="PORT"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="key"
            label="LPM-KEY"
            width="380"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('defalult.cz')"
            align="center"
          >
            <el-button type="text" size="small" @click="dialogFormLPM = true">
              {{ $t('defalult.bj') }}
            </el-button>
            <el-dialog v-model="dialogFormLPM" title="添加数据字典">
              <el-form :model="form">
                <el-form-item
                  :label="$t('trigger.mc')"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="IP" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="PORT" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="LPM-KEY" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-button type="primary" @click="dialogFormLPM = false">
                  保存
                </el-button>
                <el-button @click="dialogFormLPM = false">取 消</el-button>
              </div>
            </el-dialog>
            <el-button type="text" size="small">
              {{ $t('defalult.sc') }}
            </el-button>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          style="text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="系统参数" name="third">
        <div class="manage-wrap">
          <div class="manage-input">
            <el-input
              v-model="input"
              size="small"
              placeholder="名称查询"
            ></el-input>
          </div>
          <div class="manage-button">
            <el-button type="primary" size="small">
              {{ $t('defalult.cx') }}
            </el-button>
          </div>
        </div>
        <el-table :data="tableData3" border stripe style="width: 100%">
          <el-table-column
            prop="id"
            :label="$t('trigger.xh')"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="key"
            label="名称KEY"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="值"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="remarks"
            :label="$t('alarm.bz')"
            width="380"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('defalult.cz')"
            align="center"
          >
            <el-button type="text" size="small" @click="dialogFormIn = true">
              {{ $t('defalult.bj') }}
            </el-button>
            <el-dialog v-model="dialogFormIn" title="编辑信息">
              <el-form :model="form">
                <el-form-item
                  :label="$t('trigger.mc')"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数值" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                  :label="$t('alarm.bz')"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-button type="primary" @click="dialogFormIn = false">
                  保存
                </el-button>
                <el-button @click="dialogFormIn = false">取 消</el-button>
              </div>
            </el-dialog>
            <el-button type="text" size="small">
              {{ $t('defalult.sc') }}
            </el-button>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          style="text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="日志管理" name="fourth">
        <div class="manage-wrap">
          <div class="manage-input">
            <el-form ref="queryForm" :model="queryForm" label-width="100px">
              <vab-query-form>
                <el-form-item width="100" prop="deviceName" label="数据选择">
                  <el-select v-model="value1" size="small" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item width="100" prop="deviceName" label="日期选择">
                  <el-date-picker
                    v-model="value1"
                    size="small"
                    type="date"
                    :placeholder="$t('defalult.xzrq')"
                  ></el-date-picker>
                </el-form-item>
              </vab-query-form>
            </el-form>
          </div>
          <div class="manage-button">
            <el-button type="primary" size="small">
              {{ $t('defalult.cx') }}
            </el-button>
          </div>
        </div>
        <el-table :data="tableData4" border stripe style="width: 100%">
          <el-table-column
            prop="ip"
            label="IP"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="id"
            label="用户ID"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="date"
            label="操作时间"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="source"
            label="请求来源"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="module"
            label="所属模块"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            :label="$t('trigger.mc')"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="remarks"
            :label="$t('alarm.bz')"
            align="center"
          ></el-table-column>
        </el-table>
        <vab-query-form>
          <vab-query-form-left-panel></vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </vab-query-form-right-panel>
        </vab-query-form>
      </el-tab-pane>
      <el-tab-pane label="系统备份" name="fifth">角色管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import dictIndex from './dict/index';
export default {
  name: 'Develop',
  components: {
    dictIndex,
  },
  data() {
    return {
      activeName: 'first',
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.paneName == 'first') {
        this.$refs['dict'].dictIndex();
      }
    },
  },
};
</script>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
.el-dialog {
  .el-dialog__header {
    background-color: #1890ff !important;
    padding: 15px 20px;
    text-align: left !important;
    .el-dialog__title {
      color: #e8f4ff !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #e8f4ff !important;
    }
  }
  .el-dialog__body {
    padding: 20px !important;
    .el-form-item {
      margin-bottom: 10px !important;
      .el-input {
        width: 100% !important;
      }
      .el-select {
        width: 100% !important;
      }
      .el-cascader {
        width: 100% !important;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 20px !important;
    }
  }
  .dialog-footer {
    text-align: right;
  }
}
</style>
