<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <bg-form-gap title="基本信息"></bg-form-gap>
      <bg-detail-table2 style="width: 1076px" :list="state.baseInfo">
        <template #status>
          <span> <i class="use"></i> 启用 </span>
        </template>
      </bg-detail-table2>

      <bg-form-gap title="执行脚本"></bg-form-gap>
      <div style="height: 260px; margin-bottom: 20px; width: 1076px">
        <bg-code-editor v-model="state.useText"></bg-code-editor>
      </div>
      <div class="file-box">
        <bg-icon icon="#bg-ic-c-file-data"></bg-icon>&nbsp;&nbsp; 文件.yml
        <el-button type="primary" @click="downloadFile(url)"
          ><bg-icon icon="#bg-ic-to-bottom"></bg-icon>&nbsp;&nbsp;下载</el-button
        >
      </div>

      <bg-form-gap title="执行主机"></bg-form-gap>
      <bg-table
        class="pc-box input_table"
        :headers="state.pcHeaders"
        :rows="state.pcTableRows"
        :border="true"
        :isIndex="true">
        <template v-slot:account="{ row }">
          <span>
            {{ row.account }}
          </span>
        </template>
      </bg-table>

      <bg-form-gap title="任务历史"></bg-form-gap>
      <bg-table style="width: 1076px" :headers="state.historyHeaders" :rows="state.historyTableRows" :stripe="true">
        <template v-slot:state="{ row }">
          <span>
            {{ row.state }}
          </span>
        </template>
      </bg-table>
      <div style="width: 1076px" v-if="state.tableTotal > 10">
        <bg-pagination
          :page="state.filter.page"
          :size="state.filter.size"
          :total="state.tableTotal"
          @change-page="changePage"
          @change-size="changeSize">
        </bg-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const router = useRouter();
const route = useRoute();
const state = reactive({
  baseInfo: [
    {
      label: "预警规则名称",
      value: "服务中断推送规则1",
    },
    {
      label: "启用状态",
      value: "启用",
      childSlot: "status",
    },
    {
      label: "预警对象",
      value: "容器云",
    },
    {
      label: "预警分类",
      value: "容器集群",
    },
    {
      label: "创建人",
      value: "admin",
    },
    {
      label: "创建时间",
      value: "2023-08-19 23:22:22",
    },
    {
      label: "更新时间",
      value: "2023-08-19 23:22:22",
    },
    {
      label: "预警指标",
      value: "CPU使用率",
    },
  ],
  useText: "",
  historyHeaders: [
    {
      label: "状态",
      prop: "state",
    },
    {
      label: "执行说明",
      prop: "desc",
    },
    {
      label: "执行开始时间",
      prop: "begin",
    },
    {
      label: "执行耗时",
      prop: "time",
    },
    {
      label: "操作人",
      prop: "person",
    },
  ],
  historyTableRows: [],
  filter: {
    page: 1,
    size: 10,
  },
  tableTotal: 0,
  pcHeaders: [
    {
      label: "账号",
      prop: "account",
    },
    {
      label: "端口",
      prop: "port",
    },
  ],
  pcTableRows: [
    {
      account: "asasdd",
      port: "8080",
    },
    {
      account: "asasdd",
      port: "8080",
    },
  ],
});

const downloadFile = () => {};

const changePage = (page) => {
  state.filter.page = page;
  getTableRows();
};
const changeSize = (size) => {
  state.filter.limit = size;
  changePage(1);
};

const getTableRows = () => {};
</script>

<style lang="scss" scoped>
.main_container {
  padding: 24px 32px;
  display: block;
}
.use {
  width: 6px;
  height: 6px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #48ad97;
}

.file-box {
  width: 1076px;
  height: 48px;
  line-height: 48px;
  background-color: #fafafa;
  border-radius: 4px;
  font-size: 14px;
  color: #202531;
  padding: 0 12px;
  margin-bottom: 20px;
  .bg-icon {
    font-size: 24px;
    vertical-align: middle;
  }
  .el-button {
    float: right;
    margin-top: 6px;
    .bg-icon {
      font-size: 10px;
    }
  }
}

.vue-ace-editor {
  margin-top: 0;
}

.pc-box {
  width: 1076px;
  margin-bottom: 20px;
}

.input_table {
  :deep() {
    .el-table__header {
      th {
        background-color: #f5f6f9;
        border-color: #dadee7;
        border-top: 1px solid #dadee7 !important;
        &:first-child {
          border-left: 1px solid #dadee7;
        }
        &:last-child {
          border-right: 1px solid #dadee7;
        }
      }
    }
    .el-scrollbar {
      border-radius: 0px;
    }

    .el-table__border-left-patch {
      width: 0;
    }

    .el-table__inner-wrapper .el-table__row td:nth-of-type(1) {
      border-left: 1px solid #dadee7;
    }
  }
}
</style>
