<template>
  <div class="tool-library">
    <div class="tool-library-header">
      <h4>软件工具</h4>
      <el-button class="btn" type="text" @click="createTools">配置集成工具库</el-button>
    </div>
    <div class="tool-library-content">
      <el-button type="text" v-for="item in list" class="btn" :key="item.val" @click="detailItem(item)">{{item.val}}</el-button>
    </div>
    <detailDialog ref="detailObject"/>
    <settingDialog ref="setting"/>
  </div>
</template>

<script>
  import detailDialog from "@/components/config_point/toolLibrary/detailDialog";
  import settingDialog from "@/components/config_point/toolLibrary/settingDialog";
  import {queryProtocalList} from "@/fetch/point_http"
  export default {
    data() {
      return {
        list: [
          {val: 'OPC'}, {val: 'webservice'}, {val: 'MQTT'}, {val: 'transfor'}, {val: 'BACNet IP'}
        ]
      }
    },
    components: {detailDialog, settingDialog},
    mounted(){
      this.queryList()
    },
    methods: {
      queryList(){
        let params = {}
        queryProtocalList(params,res=>{
          this.list = []
         let data = res.Content
         data.forEach(el=>{
           this.list.push({
             val:el
           })
         })
        })
      },
      detailItem(item) {
        this.$refs.detailObject.show(item)
      },
      createTools() {
        this.$refs.setting.show()
      }
    }
  }
</script>

<style scoped lang="less">
  .tool-library {
    .tool-library-header {
      overflow: hidden;

      h4 {
        display: inline-block;
      }

      .btn {
        float: right;
      }
    }

    .tool-library-content {
      width: 90%;
      margin: 20px auto;
      background: rgba(247, 247, 247, 1);
      border-radius: 5px;
      padding: 20px 0;

      .btn {
        width: 20%;
        text-align: center;
        font-size: 20px;
      }
    }
  }
</style>
