<template>
  <div class="h-100" style="min-height:calc(100% - 112px)">
    <page-table
      tabIndex
      pagination
      :is-level="tableInfo.isLevel"
      :api-url="tableInfo.url"
      :refresh="tableInfo.refresh"
      :data.sync="tableInfo.data"
      :query="filterInfo.query"
      :list-type-info="listTypeInfo"
      :init-curpage="tableInfo.initCurpage"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      @handleClick="handleClick"
    />
    <page-dialog
      class="page-data-dialog"
      :title="dialogInfo.title"
      :visible.sync="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
      @handleClick="handleClick"
    >
      <page-filter
        :query.sync="dialogFilterInfo.query"
        :filter-list="dialogFilterInfo.list"
        @handleClick="handleClick"
      />
      <div>
        <div
          class="mian-item"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.3)"
        >
          <div class="contentAll">
            <div
              class="content"
              v-for="(item, index) in applyChartInfo"
              :key="index"
            >
              <div class="describe">{{ item.chartName }}</div>
              <div class="apply-chart">
                <chart-line
                  height="100px"
                  :chart-data="item.chartData"
                  :x-list="xList"
                  :title-show="false"
                  :legend-show="false"
                  :x-axis-show="false"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </page-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //搜索相关
      filterInfo: {
        query: {
          serverIp: "192.168.32.101"
        }
      },
      //表格相关
      tableInfo: {
        url: this.nozzle.exeQueryList, //接口地址
        refresh: 1,
        initCurpage: 1,
        isLevel: true,
        data: [
          // {
          //   "exeName": "ins-ctpq7oqv",
          //   "serverIp": "127.0.0.1",
          //   "homePath": "/src/util/ruter",
          //   "pid": "82731",
          //   "port": "8080",
          //   "status": 0,
          //   "updateTime": "2020-12-10 23:33:00",
          // }
        ],
        fieldList: [
          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
          {
            label: "服务器IP",
            value: "serverIp",
            minWidth: 150,
            tooltip: true
          },
          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
          { label: "进程号", value: "pid", width: 120 },
          { label: "端口", value: "port", width: 80 },
          { label: "状态", value: "status", width: 80, list: "statusList" },
          {
            label: "更新时间",
            value: "updateTime",
            minWidth: 120,
            tooltip: true
          }
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "80",
          btList: [
            {
              label: "查看详情",
              size: "small",
              type: "text",
              event: "detail",
              show: true
            }
          ]
        }
      },
      //列表相关
      listTypeInfo: {
        statusList: [{ key: "正常", value: 0 }, { key: "停止", value: 1 }]
      },
      //弹窗相关
      dialogInfo: {
        title: "",
        width: "650px",
        visible: false,
        btLoading: false,
        type: "",
        btList: [
          { label: "关闭", type: "", icon: "", event: "close", show: true }
        ]
      },
      //弹窗搜索相关
      dialogFilterInfo: {
        query: {
          exeName: "",
          serverIp: "",
          beginTime: "",
          endTime: ""
        },
        list: [
          {
            type: "date",
            label: "开始时间",
            value: "beginTime",
            dateType: "datetime",
            datePickerOptions: "pickerOptionsStart",
            hideLabel: true
          },
          {
            type: "date",
            label: "结束时间",
            value: "endTime",
            dateType: "datetime",
            datePickerOptions: "pickerOptionsEnd",
            hideLabel: true
          },
          {
            type: "button",
            label: "查询",
            btType: "primary",
            icon: "el-icon-search",
            event: "search",
            show: true
          }
        ]
      },
      //应用图表相关
      applyChartInfo: [
        // {
        //   chartName: "cpu",
        //   chartData: {
        //     nameList: ["cpu"],
        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
        //     dataList: [[33,44,55]]
        //   }
        // },
        // {
        //   chartName: "mem",
        //   chartData: {
        //     nameList: ["mem"],
        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
        //     dataList: [[33,44,55]]
        //   }
        // }
      ],
      xList: [],
      loading: false
    };
  },
  watch: {
    "dialogInfo.visible"(val) {
      if (!val) {
      }
    }
  },
  mounted() {
    this.tableInfo.refresh = Math.random();
  },
  methods: {
    //点击事件
    handleClick(event, data) {
      switch (event) {
        //详情
        case "detail":
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          this.dialogInfo.title = `${data.exeName}应用详情`;
          let curTime = new Date().getTime();
          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(
            curTime - 3600 * 1000
          );
          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
          this.dialogFilterInfo.query.exeName = data.exeName;
          this.dialogFilterInfo.query.serverIp = data.serverIp;
          this.handleAjax();
          break;
        //搜索
        case "search":
          this.handleAjax();
          break;
        //关闭
        case "close":
          this.dialogInfo.visible = false;
          break;
      }
    },
    //请求事件
    handleAjax() {
      this.applyChartInfo = [];
      this.loading = true;
      this.$http
        .post(this.nozzle.exeQueryDetail, this.dialogFilterInfo.query)
        .then(res => {
          this.loading = false;
          if (res.data.code === 200) {
            if (res.data.data.length) {
              res.data.data.forEach(item => {
                if (item.name !== "time") {
                  this.applyChartInfo.push({
                    chartName: item.name,
                    chartData: {
                      nameList: [item.name],
                      dataList: [item.data]
                    }
                  });
                } else {
                  this.xList = item.data;
                }
              });
            }
          }
        })
        .catch(e => {
          this.loading = false;
          console.log(e);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
// .page-table {
//   color: #000;
//   /deep/ .el-table th .cell {
//     // color: #000 !important;
//   }
//   /deep/ .el-table td .cell {
//     // color: #000 !important;
//   }
// }
.contentAll {
  min-height: 250px;
}
.content {
  @include fa();
  &:not(:first-child) {
    padding-top: 10px;
    border-top: 1px solid rgb(58, 58, 60);
  }
  .apply-chart {
    flex: 1;
    // width: 400px;
  }
  .describe {
    width: 50px;
    text-align: center;
  }
}
/deep/ .el-input__inner {
  color: #999 !important;
}
</style>