<template>
  <div>
    <MOSTY.PageTree :pageTitle="'系统版本管理'" :isShowLeftTree="false">
      <template #serach>
        <el-divider />
        <section class="query-flex" ref="queryHeight">
          <section class="query-section">
            <section class="flex">
              <el-input placeholder="请输入版本" v-model="listQuery.sysVersion" style="width: 250px;" clearable></el-input>
              <el-date-picker class="ml12 mr12" v-model="listQuery.startPublishTime" type="datetime"
                placeholder="选择发布时间" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                style='width:250px' />
              <el-date-picker v-model="listQuery.endPublishTime" type="datetime" placeholder="结束时间"
                format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style='width:250px' />
            </section>

          </section>
          <div class="query-btn">
            <el-button type="primary" @click="handleFilter" class='mr10'>查询</el-button>
            <el-button type="primary" @click="reset()"> 重置 </el-button>
          </div>
        </section>
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="addVersion">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <div class="eltab9">
          <el-table :data="tableData" border stripe style="width: 100%" height="100%" :key="keyCount">
            <el-table-column sortable prop="sysVersion" label="版本" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="addFunction" label="新增功能" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="fixBug" label="修复bug" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="xtCjsj" label="发布时间" width="160">
              <template #default="{ row }">{{
                $filters.dateFilter(row.xtCjsj)
              }}</template>
            </el-table-column>
            <el-table-column sortable prop="bz" label="备注" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" fixed="right" width="260">
              <template #default="{ row }">
                <el-button @click="updateVersion(row)" size="small">修改</el-button>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="delVersion(row)">
                  <template #reference>
                    <el-button type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye" :style="{ top: tableHeight + 'px' }">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.page" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.size"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </template>
    </MOSTY.PageTree>

    <div v-if="dialogFormVisible" class="dialog">
      <MOSTY.FromPage :title="isEdit ? '修改' : '新增'" @closeDialog="closeDialog">
        <template #content>
          <el-form class="mosty-from-wrap" :inline="true" label-position="top" :model="dialogForm" ref="elform">
            <el-form-item prop="sysVersion" class="one" label="版本" :rules="[{ required: true, message: '请填写版本号' }]"
              label-width="140px">
              <el-input v-model="dialogForm.sysVersion" show-word-limit maxlength="50" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="one" prop="addFunction" label="新增功能"
              :rules="[{ required: true, message: '请填写新增功能描述' }]" label-width="140px">
              <el-input v-model="dialogForm.addFunction" :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"></el-input>
            </el-form-item>
            <el-form-item class="one" prop="fixBug" label="修复bug" :rules="[{ required: true, message: '请填写修复bug' }]"
              label-width="140px">
              <el-input v-model="dialogForm.fixBug" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
            </el-form-item>
            <el-form-item class="one" prop="publishTime" label="发布时间" :rules="[{ required: true, message: '请选择发布时间' }]"
              label-width="140px">
              <el-date-picker v-model="dialogForm.publishTime" type="datetime" placeholder="选择时间"
                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item class="one" label="备注" label-width="140px">
              <el-input v-model="dialogForm.bz" :autosize="{ minRows: 2, maxRows: 4 }" show-word-limit maxlength="200"
                type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template #footer>

          <!-- 修改 -->
          <el-button v-if="isEdit" type="primary" size="small" @click="onSave" :loading="buttonLoading">保存</el-button>
          <!-- 新增 -->
          <el-button v-else type="primary" size="small" @click="onAdd" :loading="buttonLoading">保存</el-button>
          <el-button size="small" @click="closeDialog">关闭</el-button>
        </template>
      </MOSTY.FromPage>


    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import {
  getSysVersionList,
  updateVersionManage,
  deleteVersionManage,
  addVersionManage
} from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const keyCount = ref(0); //tabel组件刷新值
const searchBox = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
//查询参数
const total = ref(0);
const elform = ref(null);

const listQuery = ref({
  page: 1,
  size: 20,
  dictName: "",
  dictCode: "",
  xtZxbz: ""
});
const isEdit = ref(true);
const dialogForm = ref({});
const buttonLoading = ref(false);
// 数据相关
const tableData = ref([]);
const dialogFormVisible = ref(false);

// 获取数据的方法
const getListData = async () => {
  const params = listQuery.value;
  params.current = params.page;
  const res = await getSysVersionList(params);
  tableData.value = res?.records;
  total.value = Number(res.total);
};

const handleFilter = () => {
  listQuery.value.page = 1;
  getListData();
};
getListData();

// 分页相关
/**
 * size 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.size = currentSize;
  getListData();
};
const reset = () => {
  listQuery.value = {
    page: 1,
    size: 20,
    sysVersion: "",
    startPublishTime: "",
    endPublishTime: ""
  };
  getListData();
};
/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.page = currentPage;
  getListData();
};

const updateVersion = (row) => {
  isEdit.value = true;
  dialogForm.value = { ...row };
  dialogFormVisible.value = true;
};

const addVersion = (row) => {
  isEdit.value = false;
  dialogForm.value = {};
  dialogFormVisible.value = true;
};
const onSave = () => {
  elform.value.validate((valid) => {
    if (!valid) {
      ElMessage.error("请完成必填项！");
      return false;
    }
    buttonLoading.value = true;
    updateVersionManage({
      ...dialogForm.value
    })
      .then((res) => {
        dialogFormVisible.value = false;
        ElMessage.success("修改成功");
        handleFilter();
      })
      .finally(() => {
        buttonLoading.value = false;
      });
  });
};

const onAdd = () => {
  elform.value.validate((valid) => {
    if (!valid) {
      ElMessage.error("请完成必填项！");
      return false;
    }
    buttonLoading.value = true;
    addVersionManage({
      ...dialogForm.value
    })
      .then((res) => {
        dialogFormVisible.value = false;
        ElMessage.success("新增成功");
        handleFilter();
      })
      .finally(() => {
        buttonLoading.value = false;
      });
  });
};

const delVersion = (row) => {
  deleteVersionManage({
    id: Number(row.id)
  }).then((res) => {
    ElMessage.success("删除成功");
    handleFilter();
  });
};

const closeDialog = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogForm.value = {};
      dialogFormVisible.value = false;
    })
    .catch(() => {
      // catch error
    })

};

onMounted(() => {

  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.query-flex {
  display: flex;
  justify-content: space-between;

  .query-section {
    width: 68%;
  }

  .query-btn {
    width: 250px;
    display: flex;
    justify-content: flex-end;

    .toggle {
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #0f3916;

      .el-icon {
        transform: rotate(90deg);
        transition: all 0.25s ease;
      }

      &.active {
        .el-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 12px 0;
}

.user-manage-container {
  .table-header-wrap {
    margin-bottom: 22px;
  }

  ::v-deep .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  ::v-deep .el-tag {
    margin-right: 6px;
  }

  .pagination {
    margin-top: 20px;
  }
}
</style>
