<template>
  <div class="manage-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="数据字典" name="first">
        <vab-query-form>
          <el-input v-model="input" placeholder="名称查询"></el-input>
          <el-input v-model="input" placeholder="分类名查询"></el-input>
          <el-input v-model="input" placeholder="CODE查询"></el-input>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
          <el-button type="primary" @click="handleAdd">添加数据字典</el-button>
        </vab-query-form>
        <el-table :data="tableData" 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="sort"
            label="分类"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="code"
            label="CODE"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="parent"
            label="父类"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="parentcode"
            label="父CODE"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('defalult.cz')"
            align="center"
          >
            <el-button type="text" size="small" @click="handleClick(scope.row)">
              {{ $t('defalult.bj') }}
            </el-button>
            <el-button type="text" size="small">
              {{ $t('defalult.sc') }}
            </el-button>
            <el-button type="text" size="small">添加子分类</el-button>
          </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="LPM管理" name="second">
        <vab-query-form>
          <el-input v-model="input" placeholder="名称查询"></el-input>
          <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
          <el-button type="primary" @click="handleAdd">添加LPM</el-button>
        </vab-query-form>
        <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="handleClick(scope.row)">
              {{ $t('defalult.bj') }}
            </el-button>
            <el-button type="text" size="small">
              {{ $t('defalult.sc') }}
            </el-button>
          </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="third">
        <vab-query-form>
          <el-input v-model="input" placeholder="名称查询"></el-input>
          <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
        </vab-query-form>
        <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="handleClick(scope.row)">
              {{ $t('defalult.bj') }}
            </el-button>
            <el-button type="text" size="small">
              {{ $t('defalult.sc') }}
            </el-button>
          </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="fourth">
        <vab-query-form>
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-date-picker
            v-model="value1"
            type="date"
            :placeholder="$t('defalult.xzrq')"
          ></el-date-picker>
          <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
        </vab-query-form>
        <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="操作时间11111"
            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>
export default {
  name: 'Develop',
  data() {
    return {
      input: '',
      value: '',
      value1: '',
      activeName: 'first',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            },
          },
        ],
      },
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' },
      ],
      tableData: [
        {
          id: '1',
          name: '摄像头类型',
          sort: 'CAMERA_TYPE',
          code: '281',
          parent: '父类所在位置',
          parentcode: 'CAMERA_TYPE',
        },
        {
          id: '2',
          name: '摄像头类型',
          sort: 'CAMERA_TYPE',
          code: '281',
          parent: '父类所在位置',
          parentcode: 'CAMERA_TYPE',
        },
        {
          id: '3',
          name: '摄像头类型',
          sort: 'CAMERA_TYPE',
          code: '281',
          parent: '父类所在位置',
          parentcode: 'CAMERA_TYPE',
        },
      ],
      tableData2: [
        {
          id: '1',
          name: '摄像头类型',
          ip: 'CAMERA_TYPE',
          port: '281',
          key: '父类所在位置',
        },
      ],
      tableData3: [
        {
          id: '1',
          key: '摄像头类型',
          price: 'CAMERA_TYPE',
          remarks: '281',
        },
      ],
      tableData4: [
        {
          ip: '42.323.41.133',
          id: '2000243213',
          date: '2022-07-24 11:30:31',
          source: 'PC端',
          module: '用户中心',
          name: '登录',
          remarks: '登录成功',
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;

  .vab-query-form {
    margin-bottom: 30px;

    .el-input {
      width: 180px;
      margin-right: 10px;
    }
    .el-select {
      width: 180px;
      margin-right: 10px;
    }
  }
}
</style>
