<template>
  <div style="pointer-events: none">
    <el-dialog title="修改配置文件" :visible.sync="dialogFormVisible"  width="1000px" class="myDia" :modal="false" :close-on-press-escape="false" v-el-drag-dialog>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="通讯配置" name="1">
          <el-row class="row-Show">
            <span class="title-show">标题</span>
            <el-input size="mini" style="width: 300px" v-model="configInfo['title']"></el-input>
            <span class="title-show">工位和协议</span>
            <el-input size="mini" style="width: 120px" v-model="configInfo['webSocketOpName']"></el-input>
            <el-input size="mini" style="width: 180px" v-model="configInfo['webSocketBSport']"></el-input>
          </el-row>
          <el-row class="row-Show">
            <span class="title-show">通讯类型</span>
            <el-radio-group size="mini" v-model="configInfo['connectType']">
              <el-radio :label="1">WebSocket</el-radio>
              <el-radio :label="2">MQTT</el-radio>
              <el-radio :label="3">其他</el-radio>
            </el-radio-group>
          </el-row>
          <el-row class="row-Show">
            <span class="title-show">Socket_IP&Port</span>
            <el-input size="mini" style="width: 300px" v-model="configInfo['webSocketIp']"></el-input>
            <span class="title-show">MQTT_IP&Port</span>
            <el-input size="mini" style="width: 200px" v-model="configInfo['MQTTHost']"></el-input>
            <el-input size="mini" style="width: 100px" v-model="configInfo['MQTTPort']"></el-input>
          </el-row>
          <el-row class="row-Show">
            <span class="title-show">数据服务器</span>
            <el-input size="mini" style="width: 300px" v-model="configInfo['dataBaseURL']"></el-input>
            <span class="title-show">node服务</span>
            <el-input size="mini"  style="width: 300px" v-model="configInfo['NodeRootIp']"></el-input>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            机器人/设备配置
            <el-button size="mini" type="warning" style="margin-left: 10px" @click.stop.prevent="dialogFormVisible = false">重置配置文件</el-button>
            <el-button size="mini" type="primary" style="margin-left: 10px" @click.stop.prevent="exportConfig">导出配置文件</el-button>
            {{ currentUUid }}
          </template>
          <el-col :span="6">
            <el-table
                :data="tableDataRobot"
                :highlight-current-row="false"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                style="width: 100%"
                max-height="300"
                border
                size="mini"
                class="my-table-show"
                @cell-dblclick="showEdit"
                @row-click="rowClick">
              <el-table-column type="index" label=" " align="center" width="40"/>
              <!--              <el-table-column align="center" label="name">-->
              <!--                <template slot-scope="scope">-->
              <!--                  {{ scope.row.name }}-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <el-table-column align="center" label="机器人模型id">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.uuid"></el-input>
                  <span v-else>{{ scope.row.uuid }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="50px" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" style="color: #00893d" @click="applyRobotConfig(scope.row)">应用</el-button>
                  <br>
                  <el-button size="mini" type="text" style="color: red">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="18">
            <el-table
                :data="RobotChildrenData"
                :highlight-current-row="false"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                style="width: 100%"
                max-height="300"
                border
                size="mini">
              <el-table-column type="index" label=" " align="center" width="50"/>
              <!--              <el-table-column align="center" label="关节名字">-->
              <!--                <template slot-scope="scope">-->
              <!--                  {{ scope.row.name }}-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <el-table-column align="center" label="关节ID" width="150">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.ModelId "></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="type" width="110">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.type" size="mini">
                    <el-option
                        v-for="item in robotJointType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="axis" width="80">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.axis" size="mini">
                    <el-option
                        v-for="item in robotJointAxis"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="flip" width="80">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.flip" size="mini">
                    <el-option
                        v-for="item in robotJointFlip"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="delta" width="80">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.delta "></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="multiple" width="120">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.multiple "></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" width="50px" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" style="color: #00893d" @click="applyRobotConfig(scope.row, scope.$index)">应用</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>
  </div>
</template>

<script>
import Mousetrap from './js/mousetrap.js'
import axios from 'axios'
export default {
  name: 'ConfigVue',
  data() {
    return {
      currentUUid: '',
      activeNames: '2',
      configInfo: {},
      tableDataRobot: [],
      tableDataRobotChildren: {},
      RobotChildrenData: [],
      dialogFormVisible: false,
      robotJointType: [
        {
          label: 'position',
          value: 'position'
        },
        {
          label: 'rotation',
          value: 'rotation'
        }
      ],
      robotJointFlip: [
        {
          label: 1,
          value: 1
        },
        {
          label: -1,
          value: -1
        }
      ],
      robotJointAxis: [
        {
          label: 'x',
          value: 'x'
        },
        {
          label: 'y',
          value: 'y'
        },
        {
          label: 'z',
          value: 'z'
        }
      ],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  mounted() {
    this.getConfig().then(res => {
      this.configInfo = res
      console.log(res)
      this.solveRobotInfoFirst()
    })
    const scope = this
    Mousetrap.bind('ctrl+c', function() {
      scope.solveConfig()
      return false
    })
  },
  methods: {
    solveConfig() {
      console.log('ctrl + c')
      this.dialogFormVisible = !this.dialogFormVisible
    },
    getConfig() {
      return new Promise((resolve, reject) => {
        axios.get('./DMT_WEB/config/config.json').then(res => {
          const configData = res.data
          resolve(configData)
        }).catch(err => {
          reject(err)
        })
      })
    },
    solveRobotInfoFirst() {
      this.tableDataRobot = []
      this.tableDataRobotChildren = {}
      for (const argumentsKey in this.configInfo.robotList) {
        this.tableDataRobot.push({
          name: '',
          uuid: argumentsKey,
          edit: false
        })
        this.tableDataRobotChildren[argumentsKey] = []
        for (let i = 0; i < this.configInfo.robotList[argumentsKey].length; i++) {
          this.tableDataRobotChildren[argumentsKey].push(this.configInfo.robotList[argumentsKey][i])
        }
      }
    },
    showEdit(row) {
      row.edit = !row.edit
    },
    rowClick(row) {
      this.currentUUid = row.uuid
      this.RobotChildrenData = this.tableDataRobotChildren[row.uuid]
    },
    exportConfig() {
      this.configInfo['robotList'] = this.tableDataRobotChildren
      const saveJsonStr = JSON.stringify(this.configInfo)
      const blob = new Blob([saveJsonStr], {
        type: 'application/json'
      })
      const objectUrl = URL.createObjectURL(blob)
      const aa = document.createElement('a')
      aa.href = objectUrl
      aa.download = 'config.json'
      aa.click()
      URL.revokeObjectURL(objectUrl)
    },
    applyRobotConfig(row, index) {
      const rootRobotJoint = window.editor.robotList[this.currentUUid][index]
      if (row.ModelId === rootRobotJoint.ModelId) {
        window.editor.robotList[this.currentUUid][index].axis = row.axis
        window.editor.robotList[this.currentUUid][index].delta = row.delta
        window.editor.robotList[this.currentUUid][index].flip = row.flip
        window.editor.robotList[this.currentUUid][index].type = row.type
      }
    }
  }
}
</script>

<style scoped>
  .row-Show {
    margin: 10px 0
  }
  .title-show {
    font-weight: bolder;
    font-size: 16px;
    margin: 0 10px;
    width: 130px;
    display: inline-block;
    text-align: right;
  }
</style>
<style>
  .myDia .el-dialog {
    pointer-events: auto;
  }
  .myDia .el-dialog__body {
    padding: 5px 15px;
  }
  .myDia .el-dialog--center .el-dialog__body {
    padding: 15px;
  }
  .myDia .el-dialog__title {
    font-size: 22px;
    color: #000000;
  }
  .myDia .el-dialog__header {
    padding: 15px;
  }
  .myDia .el-dialog__wrapper{
    pointer-events:none;
  }
  .myDia .el-dialog{
    pointer-events:auto;
  }
</style>
