<script lang="ts">
export default {
  name: 'backup'
};
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import Page from '@/components/Pagination/page.vue'
import { getBackFileList, backupDataTable, recoverDataTable, downloadDataTable } from '@/api/backup';
import { downloadFile } from '@/utils/index';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
// 右侧查询
const querystr = ref({
  datascope: '',
  filename: '',
  size: 10,
  current: 1
});
const operationTime = ref()
// 表格
const tableData = ref([]) as any;
const total = ref(0);
const tableloading = ref(false);
// 备份数据
const dialogStartBackup = ref(false);

const backup = ref()
const form = ref({
  datascope: "全部数据",
  filename: "",
});
// 初始加载
onMounted(() => {
  init()
})

// 重置
function reset() {
  querystr.value = {
    datascope: '',
    filename: '',
    size: 10,
    current: 1
  }
  operationTime.value = null
  init()
}
// 查询字典项
function init() {
  const params = {
    filename: querystr.value.filename,
    datascope: querystr.value.datascope,
    size: querystr.value.size,
    current: querystr.value.current,
    startDate: '',
    endDate: ''
  }
  tableloading.value = true;
  if (operationTime.value != null) {
    params.startDate = operationTime.value[0];
    params.endDate = operationTime.value[1];
  }
  getBackFileList(params).then((result: any) => {
    if (result.data.list == null) {
      tableData.value = []
      total.value = 0;
      tableloading.value = false;
      return
    }
    tableData.value = result.data.list;
    total.value = result.data.total;
    querystr.value.size = result.data.size;
    querystr.value.current = result.data.current
    tableloading.value = false;
  }).catch((err: any) => {
    tableloading.value = false;
  });
}
// 备份数据点击
function backupsClick() {
  form.value.datascope = '全部数据'
  dialogStartBackup.value = true;
}
// 数据恢复点击
function dataRecovery(row: any) {
  ElMessageBox.confirm(`您确定将当前选中的  <span style="color:red;"> ${row.filename}</span>  数据文件包恢复到数据库吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    dangerouslyUseHTMLString: true,
    type: "warning",
  }).then(() => {
    let params = {
      id: row.id,
    };
    recoverDataTable(params).then((res: any) => {
      if (res.code == 0) {
        init();
        ElMessage({
          message: "恢复成功",
          type: "success",
        });
      }
    }).catch((err: any) => {
      ElMessage({
        message: "恢复失败",
        type: "error",
      });
      tableloading.value = false;
    });;
  });
}
function downloads(row: any) {
  let params = {
    id: row.id,
  };
  downloadDataTable(params).then((res: any) => {
    downloadFile(res, '数据库文件', 'sql')
  }).catch((err: any) => {
  });
}
// 关闭开始备份弹框
function startBackupClose() {
  backup.value.resetFields();
  dialogStartBackup.value = false;
}
// 开始备份点击
function startBackup() {
  const params = {
    datascope: form.value.datascope
  }
  tableloading.value = true
  backupDataTable(params).then((res: any) => {
    if (res.code == '0') {
      init();
      dialogStartBackup.value = false;
      ElMessage({
        type: "success",
        message: "数据备份成功"
      })
    }
  }).catch(() => {
    tableloading.value = false
  })
}
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  } else if (rowIndex % 2 === 1) {
    return 'success-row'
  }
  return ''
}
</script>
<template>
  <div class="faulttemplate-box">
    <section class="silderRight">
      <el-row>
        <el-col :span="24" class="top-nav">
          <div style="margin-bottom:10px">
            <el-input v-model="querystr.filename" placeholder="请输入文件名称" clearable style="width: 200px;margin-right: 10px;"
              @clear="init" @keyup.enter="init" />
            <el-select v-model="querystr.datascope" placeholder="日志类型" clearable @change="init"
              style="width: 200px;margin-right: 10px;">
              <el-option v-for="item in ['全部数据', '基础数据', '业务数据']" :key="item" :label="item" :value="item" />
            </el-select>
            <el-date-picker popper-class="elDatePicker" v-model="operationTime" value-format="YYYY-MM-DD"
              start-placeholder="开始时间" end-placeholder="结束时间" type="daterange" @change="init"
              style="vertical-align: middle;;margin-right: 10px;" />
            <el-button  class="searchButton" type="primary" @click="init">搜索</el-button>
            <el-button  class="searchButton" @click="reset">重置</el-button>
          </div>
          <div class="left-nav">
            <el-button  class="searchButton" type="primary" @click="backupsClick">
               备份数据</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="draggable">
        <el-table v-loading="tableloading" :data="tableData" row-key="id"
          style="width: 100%;margin-bottom: 20px;height: calc(100vh - 275px);overflow: auto;"
          :row-class-name="tableRowClassName"
          :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="backupdate" label="备份时间" width="170">
            <template #default="scope">
              {{ scope.row.backupdate.replace('T', ' ') }}
            </template>
          </el-table-column>
          <el-table-column prop="filename" label="文件名称"></el-table-column>
          <el-table-column prop="filesize" label="文件大小" width="90"></el-table-column>
          <el-table-column prop="datascope" label="数据类型" width="90"></el-table-column>
          <el-table-column prop="backuptype" label="备份策略" width="90"></el-table-column>
          <!-- <el-table-column prop="recoverdate" label="恢复时间" width="180"></el-table-column>
          <el-table-column prop="recover" label="恢复操作人员" width="180"></el-table-column> -->
          <el-table-column fixed="right" label="操作" width="110">
            <template #default="scope">
              <span
                style="display: flex;display: -webkit-flex; justify-content: space-around; -webkit-justify-content: space-around;align-items: center;">
                <img src="@/assets/newimg/ht_xz.png" alt="" itle="下载"
                  style="cursor: pointer;width:15px;height:15px;margin-right:10px" @click="downloads(scope.row)">
                <!-- <el-button type="primary" style="padding: 0 5px;height:30px;" @click="dataRecovery(scope.row)">数据恢复</el-button> -->
              </span>
            </template>
          </el-table-column>
        </el-table>
        <Page :total="total" v-model:size="querystr.size" v-model:current="querystr.current" @pagination="init()"></Page>
      </div>
    </section>

    <!-- 子项 弹框-->
    <Eldialog v-if="dialogStartBackup" :title="'备份数据库'" :zIndex="2000" :width="'620px'" :height="'600px'"
      @before-close="startBackupClose">
      <template v-slot:PopFrameContent>
        <el-form ref="backup" :model="form" label-width="80px" style="margin-top:15px">
          <el-form-item label="数据类型">
            <el-radio-group v-model="form.datascope">
              <el-radio label="全部数据">全部数据</el-radio>
              <el-radio label="任务数据">任务数据</el-radio>
              <el-radio label="基础数据">基础数据</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span class="dialog-footer" 
          style="display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content:center;margin-bottom: 10px;">
          <div class="details-button" @click="startBackup">开始备份</div>

        </span>
      </template>
    </Eldialog>
  </div>
</template>
<style lang="scss" scoped>
.faulttemplate-box {
  padding: 60px 15px 8px 15px;
  height: 100%;
  display: flex;
  background-color: #f2f4f900;
  display: -webkit-flex;
}

.silderRight {
  flex: 1;
  width: 100%;
  height: calc(100vh - 160px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 3px;
  padding: 15px;
  padding-bottom: 0px;
  box-sizing: border-box;
  background: url(@/assets/newimg/cjrw_1890.png);
  background-size: 100% 100%;
  // margin-left: 15px;
}



.top-nav {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

:deep(.el-table__cell) {
  color: #383838;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
  border: none;
  color: #fff;
}





:deep(.el-tree) {
  background-color: #ffffff00 !important;
  --el-tree-node-hover-bg-color: #0099ff09;
}

:deep(.el-input) {
  --el-input-bg-color: #ffffff00 !important;
}
</style>