<template>
  <div>
    <!-- 阈值管理 -->
    <BasicLayout>
      <template #wrapper>
        <el-card class="box-card">
          <!-- <el-row :gutter="10" style="margin-bottom:24px;">
            <el-col :span="1.5">
              <el-button
                v-permisaction="['disposition:index:add']"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增</el-button>
            </el-col>
          </el-row> -->
          <el-row type="flex" justify="start" :gutter="35">
            <el-col
              :span="8"
              v-for="o in plugList"
              :key="o.ID"
              style="margin-bottom: 35px"
            >
              <el-card class="plugCard" :body-style="{ padding: '0px' }">
                <div style="width: 100%;padding:20px 30px;">
                  <div style="display:flex;aligin-item:center;">
                    <div>
                      <img
                        style="
                          width: 64px;
                          height: 64px;
                          display: block;
                          margin: -11px auto 0;
                        "
                        :src="plugin"
                        class="image"
                      />
                    </div>
                    <div
                      style="
                        text-align: center;
                        font-size: 18px;
                        color: #333;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        line-height: 46px;
                        margin-left: 24px;
                      "
                    >
                      {{ o.name }}
                    </div>
                  </div>
                  <div style="display:flex;margin-top:24px;color:#999;justify-content: space-between;">
                    <div>
                      <div>By Grafana Labs</div>
                      <div style="margin-top:12px">Version:9.4.3</div>
                    </div>
                    <div>
                        <!-- :type="o.pluginsState == '1' ? 'success' : 'primary'" -->
                      <el-button
                        v-if="plugList.length>0 || plugList != null"
                        style="margin-top: 10px;"
                        type='success'
                        :disabled="false"
                        plain
                        @click="handleUpdate(o)"
                        >已配置</el-button
                      >

                      <el-button
                        v-else
                        style="margin-top: 10px;"
                        type='info'
                        :disabled="false"
                        plain
                        @click="handleAdd"
                        >未配置</el-button
                      >
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

        <!-- 添加或修改应用配置对话框 -->
        <el-dialog v-if="open" :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="URL" prop="url">
              <el-input v-model="form.url" placeholder="请输入url"/>
            </el-form-item>
            <el-form-item label="admin key" prop="adminkey">
              <el-input v-model="form.adminkey" placeholder="请输入admin Key"/>
            </el-form-item>
            <el-form-item label="edit key" prop="editkey">
              <el-input v-model="form.editkey" placeholder="请输入edit Key" />
            </el-form-item>
            <el-form-item label="view key" prop="viewkey">
              <el-input v-model="form.viewkey" placeholder="请输入view Key"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
          　
          <div v-if="isShowProgress" class="popContainer">
            <el-progress
              type="circle"
              color="#4343c8"
              :percentage="percentage"
              v-if="isShowProgress"
            ></el-progress>
          </div>
        </el-card>
      </template>
    </BasicLayout>
  </div>
</template>

<script>
import Vue from "vue";
import { listOtPlugins, singleOtPlugin,addOtPlugins,updateOtPlugins,delOtPlugins } from "@/api/plugin";

export default {
  name: "Config",
  data() {
    return {
      plugin:require("../../assets/plugin.jpg"),
      isShowProgress: false,
      percentage: 0,
      customColor: "",
      timer: null,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10,
        order: "des", //asc
      },
      plugList: [],
      disabled: false,
      open:false,
      title:'',
      // 表单参数
      form: {
        name:"grafana插件",
        alias:"grafana",
        url:'',
        adminkey:'',
        editkey:'',
        viewkey:'',
        config:{
          admin:'',
          edit:'',
          view:''
        },
      },
       // 表单校验
      rules: {
        // name: [
        //   { required: true, message: '应用名称不能为空', trigger: 'blur' }
        // ],
        // alias: [
        //   { required: true, message: '应用别名不能为空', trigger: 'blur' }
        // ],
        url: [
          { required: true, message: 'url不能为空', trigger: 'blur' }
        ],
        adminkey: [
          { required: true, message: 'admin key不能为空', trigger: 'blur' }
        ],
        editkey: [
          { required: true, message: 'edit key不能为空', trigger: 'blur' }
        ],
        viewkey: [
          { required: true, message: 'view key不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      // listPlug(this.queryParams).then((response) => {});
      listOtPlugins().then((res) => {
        if (res.code == 200) {
          this.plugList = res.data.list;
        }
      });
    },
    startAnimate(step, limit, speed) {
      setTimeout(() => {
        // num 为百分比
        if (this.percentage < limit) {
          this.percentage += step;
          this.startAnimate(step, limit, speed);
        } else {
          this.percentage = limit;
          setTimeout(() => {
            this.isShowProgress = false;
          }, 500);
        }
      }, speed);
    },
    // 显示任务进度条
    getProgress(barId) {
      if (this.timer) {
        clearInterval(this.timer);
      } else {
        this.isShowProgress = true;
        // 轮询进度接口
        // this.timer = setInterval(() => {
        //   // 发送请求获取进度
        //   getProgress(barId)
        //     .then((res) => {
        //       if (res.code === 200) {
        //         // 蓝色
        //         this.customColor = "#409eff";
        //         this.percentage = res.completePercent;
        //         if (this.percentage === 100) {
        //           // 绿色
        //           this.customColor = "#67c23a";
        //           clearInterval(this.timer);
        //           this.timer = null;
        //           // 延迟1秒关闭进度条
        //           setTimeout(() => {
        //             this.percentage = 0;
        //             this.isShowProgress = false;
        //             this.msgSuccess("完成");
        //           }, 1000);
        //         }
        //       } else {
        //         this.msgError("获取进度失败");
        //       }
        //     })
        //     .catch((err) => {
        //     });
        // }, 2000);
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      // this.getMenuTreeselect(0)
      this.open = true
      this.title = '添加应用'
      this.isEdit = false
    },
    handleUpdate(item){
      item.config = JSON.parse(item.config)
      this.open = true;
      this.title = '修改应用'
      this.isEdit = true;
      this.form = item
      this.form.adminkey = item.config.admin;
      this.form.editkey = item.config.editor;
      this.form.viewkey= item.config.viewer;
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    reset(){
      this.form = {
        id: undefined,
        name: 'grafana插件',
        alias: 'grafana',
        url:'',
        config:{
          admin:'',
          editor:'',
          viewer:''
        },
        adminkey:'',
        editkey:'',
        viewkey:''
      }
      this.resetForm('form')
    },
     /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id !== undefined) {
            this.form.config = JSON.stringify(this.form.config);
            updateOtPlugins(this.form, this.form.id).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            this.form.config.admin = this.form.adminkey;
            this.form.config.editor = this.form.editkey;
            this.form.config.viewer = this.form.viewkey;
            this.form.config = JSON.stringify(this.form.config);
            addOtPlugins(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    }
  },
};
</script>
<style scoped lang="scss">
.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .box-card > .el-card__body {
  padding: 24px 20px !important;
}
::v-deep .el-row--flex {
  flex-wrap: wrap;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:active {
  color: #9c9c9c;
  background-color: #dce0e6;
  border-color: #dce0e6;
}
.el-button--small {
  padding: 8px 15px;
  font-size: 12px;
  border-radius: 3px;
}
.pluginsDesc {
  margin-bottom: 26px;
  font-size: 12px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 54;
  line-height: 1.5;
}
.plugCard {
  border-radius: 12px;
}
.plugCard:hover {
  box-shadow: 0px 0px 8px 1px #0273ff;
}
::v-deep .el-button--medium {
  // padding: 16px 45px;
  padding: 8px 30px;
  font-size: 14px;
  border-radius: 4px;
}
::v-deep .el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:hover,
.el-button.is-disabled.is-plain:focus {
  background-color: #f1f1f1;
  border-color: #e6e6e6;
  color: #a19fab;
}
::v-deep .el-progress__text {
  color: #fff;
}
</style>
<style>
@media only screen and (max-width: 470px) {
  .message-delete {
    width: 300px;
  }
  .el-message {
    min-width: 300px;
  }
  .el-dialog {
    margin-top: 54vh !important;
  }
}
</style>
