<template>
  <div style="fontSize: 14px">
    <!-- 版本信息 -->
    <div>
      <el-divider content-position="left">{{$t('systemInfo.version')}}</el-divider>
      <div style="padding: 0 30px">
        <p style="color: red">{{$t('systemInfo.record')}}!</p>
      </div>
    </div>
    <!-- 升级日志 -->
    <div>
      <el-divider content-position="left">{{$t('systemInfo.log')}}</el-divider>

      <div style="padding: 0 30px">
        <p class="navigation_title">{{$t('systemInfo.log_list')}}</p>
        <el-form :inline="true" :model="searchParams" class="demo-form-inline">
          <el-form-item :label="$t('systemInfo.version_name')">
            <el-input size="mini" v-model="searchParams.name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('systemInfo.type')">
            <el-select size="mini" v-model="searchParams.type">
              <el-option :label="$t('systemInfo.application_upgrade')" value="0"></el-option>
              <el-option :label="$t('systemInfo.data_upgrade')" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain size="mini" type="primary" @click="searchSystemList">{{$t("btns.query")}}</el-button>
            <el-button plain size="mini" type="danger" @click="resetSystemList">{{$t("btns.reset")}}</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="systemData.datas" style="width: 100%">
          <el-table-column :label="$t('systemInfo.version_name')" prop="version_name" sortable></el-table-column>
          <el-table-column :label="$t('systemInfo.version_num')" prop="version_number" sortable></el-table-column>
          <el-table-column :label="$t('systemInfo.upgrade_date')" prop="upgrade_date" sortable></el-table-column>
          <el-table-column :label="$t('systemInfo.type')" prop="type" sortable></el-table-column>
          <el-table-column :label="$t('systemInfo.remark')" prop="remark" sortable></el-table-column>
        </el-table>


        <!-- 分页 -->
        <el-pagination
          class="text-right pt-1"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="systemData.pageNo"
          :page-sizes="[10, 25, 50, 100]"
          :page-size="10"
          background
          layout="total, prev, pager, next, sizes"
          :total="systemData.rowCount"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {reqSystemInfoList} from '@/service/CommonApi.js'
export default {
  name: 'systemInfo',
  data() {
    return {
      searchParams: {
        name: '',
        type: '0',
        pageNo: 1,
        linesPerPage: 10
      },
      systemData: {}
    }
  },
  methods:{
    /**
     * 获取系统信息列表
     */
    getSystemInfoList(){
      reqSystemInfoList(this.searchParams, {
        onSucess: response => {
            if(response.data.errcode === 0){
              this.systemData = response.data.data
              console.log(this.systemData)
            }
          }
        })
    },

    /**
     * 切换分页，每页显示多少条
     */
    handleSizeChange(val) {
      let searchParams = {
        ...this.searchParams,
        linesPerPage: val,
      };
      this.searchParams = searchParams;
      this.getSystemInfoList();
    },
    /**
     * 当前页
     */
    handleCurrentChange(val) {
      let searchParams = {
        ...this.searchParams,
        pageNo: val,
      };
      this.searchParams = searchParams;
      this.getSystemInfoList();
    },

    /**
     * 查询
     */
    searchSystemList(){
      let searchParams = {
        ...this.searchParams,
        name: this.searchParams.name,
        type: this.searchParams.type
      }
      this.searchParams = searchParams;
      this.getSystemInfoList();
    },

    /**
     * 重置
     */
    resetSystemList(){
      this.searchParams = {
        name: '',
        type: '0',
        pageNo: 1,
        linesPerPage: 100
      }
      this.getSystemInfoList()
    }

  },
  created(){
    this.getSystemInfoList()
  }
}
</script>