<template>
  <div class="data-tab">
    <el-form-item label="数据类型">
      <div>
        <el-radio v-model="app.attrData.options.mamDataType" :label="1">静态数据</el-radio>
      </div>
      <div>
        <el-radio v-model="app.attrData.options.mamDataType" :label="2">动态数据</el-radio>
      </div>
    </el-form-item>

    <div v-show="app.attrData.options.mamDataType === 1">
      <p>数据值</p>
      <div style="width: 100%;hieght: 350px;border: 1px solid #ccc;margin-bottom: 15px;">
        <textarea id="myTextarea" class="form-control" name="code" />
      </div>
      <div v-show="app.attrData.type=='Radarchart'">
        <p>radar</p>
        <el-input v-model="radar_new" type="textarea" :rows="16" placeholder="请输入内容" size="mini" />
      </div>
    </div>

    <div v-if="app.attrData.options.mamDataType === 2">
      <div>
        <p>接口地址</p>
        <el-input v-model="app.attrData.options.mamApi" type="textarea" :rows="8" />
      </div>

      <el-form-item label="接口方式">
        <div>
          <el-radio v-model="app.attrData.options.mamMethod" label="post">POST</el-radio>
        </div>
        <div>
          <el-radio v-model="app.attrData.options.mamMethod" label="get">GET</el-radio>
        </div>
      </el-form-item>

      <el-form-item label="刷新时间">
        <el-input-number
          v-model="app.attrData.options.mamRefreshTime"
          controls-position="right"
          :mix="1"
          size="mini"
        />
      </el-form-item>
    </div>

    <div>
      <p>数据处理</p>
      <el-input
        v-model="app.attrData.options.mamDataProcessing"
        type="textarea"
        :rows="8"
        placeholder="请输入内容"
        size="mini"
      />
    </div>

    <div class="action-btns">
      <el-button style="width: 250px;" type="primary" plain @click="handleRefreshData">刷新数据</el-button>
    </div>
    <!-- lorem
    loremloremloremloremloremloremloremloremloremloremloremlorem
    loremloremloremloremloremloremloremloremloremloremloremlorem
    loremloremloremloremloremloremloremloremloremloremloremlorem
    loremloremloremloremloremloremloremloremloremloremloremlorem -->
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "DataTab",
  inject: ["app"],
  data() {
    return {
      editor: null,
      radar_new: ""
    };
  },
  mounted() {
    const myTextarea = document.getElementById("myTextarea");
    this.editor = window.CodeMirror.fromTextArea(myTextarea, {
      lineNumbers: false,
      height: "350px",
      cursorBlinkRate: 600,
      cursorHeight: 1,
      mode: "javascript", // 设置mode 对应的也要这之前引入相应的js
      value: "",
      content: "",
      json: true,
      tabSize: 2,
      dragDrop: true,
      smartIndent: false,
      showCursorWhenSelecting: true,
      theme: "erlang-dark"
    });
    this.editor.setValue(this.app.attrData.options.mamDataValue);
    console.log("数据结构", this.app);
    this.radar_new = this.app.attrData.options.radar_new;
  },
  methods: {
    // 点击刷新数据按钮 通知组件数据更新
    handleRefreshData() {
      if (this.app.attrData.options.mamDataType === 1) {
        // 静态数据
        const codeValue = this.editor.getValue();
        //进度条
        if(this.app.attrData.options.type=='Progressochart'){
          this.$set(this.app.attrData.options,"mamDataValue",codeValue*1);
          return false
        }
        this.$set(this.app.attrData.options, "mamDataValue", codeValue);
        //如果是雷达图的时候走这里 因为需要改变两个数据结构
        if(this.app.attrData.options.type=='Radarchart'){
          this.$set(this.app.attrData.options.radar,"indicator",eval(this.radar_new));
        }
        console.log('走这里了没有111',codeValue)
        
        console.log("this.app.attrData.options：", this.app.attrData.options);
      } else {
        // 动态数据
        request({
          url: this.app.attrData.options.mamApi,
          method: this.app.attrData.options.mamMethod,
          params: {}
        })
          .then(res => {
            this.$set(this.app.attrData.options, "mamDataValue", res);
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>
<style lang="scss">
.data-tab {
  .action-btns {
    display: table;
    margin: 20px auto;
    margin-bottom: 80px;
  }
}
</style>
