<template>
  <div class="monitoring">
    <header>
      <div class="left">
        <el-input
            placeholder="插件名称、插件编号、插件版本"
            v-model="searchForm.name"
            @keyup.enter.native="searchBtnHandle"
        >
          <i slot="suffix" class="el-input__icon el-icon-search" @click="searchBtnHandle"></i>
        </el-input>
      </div>
      <div class="right">
        <el-button
          icon="el-icon-back"
          @click="
            $router.replace({ path: '/applicationList/applicationListAdmin' })
          "
        >返回</el-button
        >
        <el-button type="primary" icon="el-icon-plus" @click="inserterAdd"
        >添加插件
        </el-button
        >
      </div>
    </header>
    <main>
      <BaseTable
          ref="mainTable"
          :tableData="tableData"
          :tableColumn="tableColumn"
          :funData="funData"
          :funWidth="funWidth"
          :showIndex="true"
          :tabLoading="mainTabLoading"
          @onFunc="tableButtonHandle"
          :tableHeight="'70vh'"
          :border="false"
      >
      </BaseTable>
      <div class="page">
        <basePage
            :pageModel="pageModel"
            @update:pageModel="currentChangeHandle"
        ></basePage>
      </div>
    </main>
    <footer></footer>
    <baseDialog
        :title="'插件配置'"
        v-model="plugInDialog"
        @confirm="plugInConfirm"
        :width="'50%'"
    >
      <div v-if="plugInDialog">
        <baseNewForm
            ref="dataSettingForm"
            :spanNumber="24"
            :isFunBtn="false"
            :lookFlag="lookFlag"
            :formRule="!lookFlag"
            :formRow="formRow"
            :ruleForm="ruleForm"
            @onSubmit="onSubmit"
        ></baseNewForm>
      </div>
    </baseDialog>
  </div>
</template>

<script>
import {deepClone} from "@/utils/index.js";
import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
import baseDialog from "@/views/integrationOption/compoments/baseDialog";
import configData from "./configData.js";
import dayjs from "dayjs";
import BaseTable from "@/views/intergrationTask/compoments/baseTable.vue";
import basePage from "@/views/intergrationTask/compoments/basePage.vue";
import {getApiModuleApi} from "@/api/apiChunks/index.js";
export default {
  data() {
    return {
      ruleForm: {pluginStatus: "1"},
      formRow: configData.formRow,
      lookFlag: false,
      plugInDialog: false,
      refreshLoading: false,
      searchForm: {
        name: "",
      },
      mainTabLoading: false,
      funData: [
        {
          type: "view",
          text: "更新",
          color: "#5a9cf8",
        },
        {
          type: "dele",
          text: "删除",
          color: "#e47470",
        },
      ],
      tableColumn: configData.tableColumn,
      tableData: [],
      pageModel: {
        pageIndex: 1,
        total: 10,
        limit: 10,
      },
      editFlag: false,
    };
  },
  methods: {
    searchBtnHandle() {
      this.initMainTableData(this.searchForm)
    },
    async onSubmit() {
      if(!this.ruleForm.id){
        const res = await getApiModuleApi({
          tl: "sysApplicationService",
          as: "application",
          dj: "saveAppPlugin"
        }, {appId: this.$route.query.id, ...this.ruleForm})
        if(res.status==='200'){
          this.$vmNews("提交成功","success")
          this.plugInDialog =false
          this.ruleForm={}
          this.initMainTableData()
        }
      }else {
        const res = await getApiModuleApi({
          tl: "sysApplicationService",
          as: "application",
          dj: "updateAppPlugin"
        }, {appId: this.$route.query.id, ...this.ruleForm})
        if (res.status === '200') {
          this.$vmNews("提交成功", "success")
          this.plugInDialog = false
          this.ruleForm = {}
          this.initMainTableData()
        }
      }
    },
    plugInConfirm() {
      this.$refs.dataSettingForm.submitForm();
    },
    // 添加应用
    inserterAdd() {
      this.plugInDialog = true;
      // this.$router.push({ path: "/inserterAdmin/inserterAdd" });
    },
    // 时间处理
    getTimeHandler(time) {
      var days = parseInt(time / (1000 * 60 * 60 * 24));
      var hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = (time % (1000 * 60)) / 1000;
      return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
    },
    // 初始化表单
    async initMainTableData(obj = {}) {
      this.refreshLoading = true;
      const res = await getApiModuleApi(
          {
            tl: "sysApplicationService",
            as: "application",
            dj: "queryAppPlugin",
          },
          {
            pageNum: this.pageModel.pageIndex,
            pageSize: this.pageModel.limit,
            ...obj,
            appId:this.$route.query.id,
          }
      );
      this.refreshLoading = false;
      if (res.status == 200) {
        this.tableData = res.attribute.list;
        this.pageModel.total = res.attribute.total;
        console.log(res);
      }
    },
    // 点击提交
    submitsearchForm() {
      this.initMainTableData(this.searchForm);
    },
    // 表单操作
    tableButtonHandle(val, item) {
      if (item.type === "view") {
        this.ruleForm = deepClone(val)
        this.plugInDialog=true
      } else if (item.type === "dele") {
        this.$confirm("确认删除？")
            .then(async () => {
              const res =await getApiModuleApi({
                tl:"sysApplicationService",
                as:"application",
                dj:"deleteAppPlugin"
              },{id:val.id})
              if(res.status === '200'){
                this.$vmNews("删除插件成功","success")
                this.initMainTableData()
              }
            })
            .catch(() => {
            });
      }
    },
    // 页码
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.$nextTick(() => {
        this.initMainTableData(this.searchForm);
      });
    },
  },
  computed: {
    // 操作框的宽度
    funWidth() {
      return this.funData.length * 70;
    },
  },
  components: {
    BaseTable,
    basePage,
    baseDialog,
    baseNewForm,
  },
  created() {
    this.initMainTableData();
    this.$emit("flashActive",5)
  },
};
</script>

<style scoped lang='scss'>
.monitoring {
  position: relative;
  width: 100%;
  background-color: #fafafa;

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;

    .left {
      width: 20vw;
      align-items: center;
      display: flex;

      .search {
        margin-left: 30px;
        display: flex;

        > .chunk {
          margin-left: 10px;
        }
      }
    }
  }

  main {
    margin-top: 10px;
    padding: 20px 20px 5px;
    border-radius: 20px;
    background-color: #fff;
  }

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