<template>
  <div class="layout-01-main-container" v-loading.fullscreen="loading">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="50px"
      label-position="left"
      class="demo-ruleForm"
    >
      <el-form-item label="分组" prop="group">
        <el-select
          v-model="ruleForm.group"
          @change="resetName"
          placeholder="请选择group"
        >
          <el-option
            v-for="(item, index) in groups"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="name" prop="name">
        <el-select v-model="ruleForm.name" placeholder="请选择name">
          <el-option
            v-for="(item, index) in names"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >查询跳转</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "sls-log",
  data() {
    return {
      ruleForm: {
        group: "",
        name: "",
      },
      rules: {
        group: [{ required: true, message: "请选择group", trigger: "change" }],
        name: [{ required: true, message: "请选择name", trigger: "change" }],
      },
      list: [],
      loading: false,
      // groups: [],
      // names: [],
    };
  },
  computed: {
    groups() {
      return [...new Set(this.list.map(v => v.group))];
    },
    names() {
      return [
        ...new Set(
          this.list
            .filter(v => v.group === this.ruleForm.group)
            .map(v => v.name)
        ),
      ];
    },
  },
  async created() {
    try {
      this.loading = true;
      const res = await this.$http.get("/api/sls/project");
      console.log(res);
      this.list = res.data;
    } catch (error) {
      console.log(error);
    } finally {
      this.loading = false;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          this.goAliyun();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    resetName() {
      this.ruleForm.name = "";
    },
    async goAliyun() {
      try {
        this.loading = true;
        const r = this.list.find(
          v => v.group === this.ruleForm.group && v.name === this.ruleForm.name
        );
        const params = new URLSearchParams();
        params.append("project", r.project);
        params.append("store", r.store);
        const res = await this.$http.post("/api/sls/view", params);
        console.log(res);
        this.$message("正在跳转...");
        window.location = res.data;
      } catch (error) {
        console.log(error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>
