<template>
  <div class="root_container">
    <div class="header">
      <span
        class="tips"
        style="color:#aaaaaa;font-size:14px"
      >{{formData && formData.add_time}} 创建</span>

      <div class="header_contianer">
        <el-button
          type="primary"
          style="margin-left:10px"
          @click="onJumpCustomLog"
        >已上传日志</el-button>
        <el-button
          type="primary"
          style="margin-left:10px"
          @click="onJumpUserList"
        >用户配置</el-button>
        <el-button
          type="primary"
          style="margin-left:10px"
          @click="onJumpExceptionList"
        >异常超量预警</el-button>
      </div>
    </div>
    <div class="table_container">
      <el-form
        ref="form"
        :model="formData"
        label-width="140px"
      >
        <span class="tips_title">基本信息：</span>

        <el-form-item label="APPID">
          <span class="tips_active">{{formData.app_id}}</span>
        </el-form-item>
        <el-form-item label="应用名称">
          <el-input
            v-model="formData.app_name"
            style="width:195px"
          ></el-input>
        </el-form-item>

        <el-form-item label="应用描述">
          <el-input
            type="textarea"
            resize="none"
            style="width:300px;line-height:22px"
            rows=3
            maxlength="30"
            show-word-limit
            v-model="formData.desc"
          ></el-input>
        </el-form-item>

        <span class="tips_title">统计配置：</span>

        <el-form-item label="页面访问统计">
          <el-switch v-model="formData.page_statistics"></el-switch>
          <el-tooltip
            class="item"
            effect="dark"
            content="开启后自动统计该项目下的页面访问次数和时长信息"
            placement="right"
            style="margin-left:35px"
          >
            <i class="el-icon-info tips_info_icon"></i>
          </el-tooltip>
        </el-form-item>

        <el-form-item label="启动次数统计">
          <el-switch v-model="formData.launch_statistics"></el-switch>
          <el-tooltip
            class="item"
            effect="dark"
            content="开启后自动统计该项目下的APP启动次数"
            placement="right"
            style="margin-left:35px;"
          >
            <i class="el-icon-info tips_info_icon"></i>
          </el-tooltip>

        </el-form-item>

        <el-form-item label="设备信息统计">
          <el-switch v-model="formData.device_statistics"></el-switch>

          <el-tooltip
            class="item"
            effect="dark"
            content="开启后自动统计该项目下的设备信息"
            placement="right"
            style="margin-left:35px"
          >
            <i class="el-icon-info tips_info_icon"></i>
          </el-tooltip>
        </el-form-item>

        <span class="tips_title">阿里云日志配置：</span>

        <el-form-item label="accesskey_id">
          <el-input
            v-model="formData.online_accesskey_id"
            style="width:400px"
          ></el-input>
        </el-form-item>

        <el-form-item label="accesskey_secret">
          <el-input
            v-model="formData.online_accesskey_secret"
            style="width:400px"
          ></el-input>
        </el-form-item>

        <el-form-item label="aliyun_store">
          <el-input
            v-model="formData.online_log_store"
            style="width:400px"
          ></el-input>
        </el-form-item>

        <el-form-item label="aliyun_topic">
          <el-input
            v-model="formData.online_log_topic"
            style="width:400px"
          ></el-input>
        </el-form-item>

        <el-form-item label="aliyun_project">
          <el-input
            v-model="formData.online_project"
            style="width:400px"
          ></el-input>
        </el-form-item>

        <el-form-item label="aliyun_endpoint">
          <el-input
            v-model="formData.online_endpoint"
            style="width:400px"
          ></el-input>
        </el-form-item>

        <span class="tips_title">钉钉通知配置：</span>

        <el-form-item label="异常预警通知群">
          <el-input
            v-model="formData.dd_exception_notice_token"
            style="width:400px"
            placeholder="请输入群 ACCESS_TOKEN"
          ></el-input>
          <el-input
            v-model="formData.dd_exception_notice_secret"
            placeholder="请输入群 SECRET"
            style="width:400px;margin-left:10px"
          ></el-input>
          <el-button
            style="margin-left:10px"
            type="primary"
            @click="onTestException"
          >测试</el-button>
        </el-form-item>

        <el-form-item label="日志上报通知群">
          <el-input
            v-model="formData.dd_upload_notice_token"
            placeholder="请输入群 ACCESS_TOKEN"
            style="width:400px"
          ></el-input>
          <el-input
            v-model="formData.dd_upload_notice_secret"
            placeholder="请输入群 SECRET"
            style="width:400px;margin-left:10px"
          ></el-input>
          <el-button
            type="primary"
            style="margin-left:10px"
            @click="onTestUpload"
          >测试</el-button>
        </el-form-item>

        <span class="tips_title">其他配置：</span>

        <el-form-item label="异常预警次数上限">
          <el-input
            v-model="formData.exception_count_limit"
            style="width:195px"
          ></el-input>
          <span
            class="tips"
            style="margin-left:10px"
          >次</span>
        </el-form-item>

        <el-form-item label="本地日志存储时长">
          <el-select
            v-model="formData.log_cache_day"
            placeholder="请选择活动区域"
          >
            <el-option
              label="3天"
              value="3"
            ></el-option>
            <el-option
              label="7天"
              value="7"
            ></el-option>
            <el-option
              label="15天"
              value="15"
            ></el-option>
            <el-option
              label="30天"
              value="30"
            ></el-option>
          </el-select>
          <span
            class="tips"
            style="margin-left:10px"
          >天</span>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="onUpdateInfo"
            :loading="uploadLoading"
          >保存设置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getAppDetails, updateAppInfo } from "../../api/log/app";
import { sendDingdingNotice } from "./../../api/log/helper";
import { Message } from "element-ui";
export default {
  data() {
    return {
      formData: {},
      tableDatas: [],

      //记录高度
      tableHeight: "0px",

      initSuccess: false,
      uploadLoading: false,
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 50 + "px";
    },
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 98 - 50 + "px";
    //获取数据
    this.obtainAppDetails();
  },
  methods: {
    //获取app列表
    obtainAppDetails() {
      getAppDetails(this.$route.query.pro_id)
        .then((result) => {
          this.formData = result.data.data;
          this.initSuccess = true;
        })
        .catch((err) => {});
    },
    //更新信息
    onUpdateInfo() {
      if (this.initSuccess) {
        this.uploadLoading = true;
        updateAppInfo(this.formData)
          .then((result) => {
            Message.success("更新成功");
            this.uploadLoading = false;
          })
          .catch((err) => {
            this.uploadLoading = false;
          });
      }
    },
    //发送钉钉消息
    onSendDingding(title, content, accessToken, secret) {
      sendDingdingNotice(title, content, accessToken, secret)
        .then((result) => {
          Message.success("消息已发送，若没有收到请检查配置信息");
        })
        .catch((err) => {});
    },
    //跳转到自定义日志
    onJumpCustomLog() {
      this.$router.push({
        path: "/custom/log/list?pro_id=" + this.formData.id,
      });
    },
    //跳转到用户列表
    onJumpUserList() {
      this.$router.push({ path: "/user/list?pro_id=" + this.formData.id });
    },
    //跳转异常超量列表
    onJumpExceptionList(){
      this.$router.push({ path: "/excess/list?app_id=" + this.formData.app_id });
    },
    //测试异常
    onTestException() {
      if (
        this.formData &&
        this.formData.dd_exception_notice_token &&
        this.formData.dd_exception_notice_secret
      ) {
        this.onSendDingding(
          "后台测试发送异常预警消息",
          "# 后台测试发消息\n\n 异常消息次数已达50条",
          this.formData.dd_exception_notice_token,
          this.formData.dd_exception_notice_secret
        );
      } else {
        Message.warning("请先完善配置信息");
      }
    },
    //测试上传
    onTestUpload() {
      if (
        this.formData &&
        this.formData.dd_upload_notice_token &&
        this.formData.dd_upload_notice_secret
      ) {
        this.onSendDingding(
          "后台测试发送日志上报提醒消息",
          "# 后台测试发消息\n\n 有新用户上报了日志信息",
          this.formData.dd_upload_notice_token,
          this.formData.dd_upload_notice_secret
        );
      } else {
        Message.warning("请先完善配置信息");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}
.header {
  margin-left: 18px;
  margin-top: 18px;
  padding-bottom: 18px;
  position: relative;
}
.table_container {
  margin-left: 18px;
  margin-right: 18px;
}
.tips {
  color: #606266;
  line-height: 40px;
  font-size: 14px;
}
.tips_active {
  color: #409eff;
  line-height: 40px;
  cursor: pointer;
  font-size: 14px;
}
.tips_title {
  padding-left: 18px;
  margin-bottom: 10px;
  color: #aaa;
  font-size: 14px;
  line-height: 40px;
  height: 40px;
  background: #efefef;
  display: block;
}

.tips_info_icon {
  color: #ccc;
  font-size: 20px;
  cursor: pointer;
}

.tips_info_icon::before {
  position: absolute;
  top: 11px;
  left: 55px;
}

.header_contianer {
  top: 0;
  position: absolute;
  right: 18px;
}
</style>