<template>
    <el-container>
        <el-aside width="15%">
            <div class="menu-box">
                <el-card class="box-card">
                    <div slot="header" class="menu-header">
                        <div class="header-title">设备</div>
                        <el-dropdown size="small" style="vertical-align: middle;" @command="handleCommand">
                            <el-button type="primary" round >
                                <i class="el-icon-s-tools" style="font-size:14px;"></i><i
                                    class="el-icon-arrow-down el-icon--right" style="font-size:14px;"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="add">新加设备</el-dropdown-item>
                                <el-dropdown-item command="del">删除设备</el-dropdown-item>
                                <el-dropdown-item>设备重启</el-dropdown-item>
                                <el-dropdown-item>导入配置</el-dropdown-item>
                                <el-dropdown-item>导出配置</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <el-menu :style="{ 'borderRight': 'none' }" :defaultActive="deviceActiveStatus"
                        @select="getDeviceConfigure">
                        <el-menu-item class="serve-item" shadow="always" v-for="(item, i) in deviceData" :key="i"
                            :index="i + ''">
                            <div style="position:relative;">
                                <div style="display:inline-block;">{{ item.name }}</div>
                                <div
                                    :class="{ 'device-status': true, 'device-status-online': item.status === 1, 'device-status-offline': item.status === 0 }">
                                </div>
                            </div>
                        </el-menu-item>
                    </el-menu>

                </el-card>
            </div>
        </el-aside>
        <el-main :style="{ padding: '10px' }">
            <el-card class="box-card">
                <div slot="header" style=" position: relative;">
                    <div class="header-title">设备配置</div>
                    <el-button class="header-button" type="primary" @click="setDeviceConfigure">应用</el-button>
                </div>
                <device-configure ref="deviceConfigure" :defaultDeviceName="defaultDeviceName" :defaultFormData="defaultFormData" />
            </el-card>
            <el-card class="box-card" style="margin-top:5px;">
                <d2-crud ref="d2Crud"
                :columns="columns"
                :data="devicePointData"
                :rowHandle="rowHandle"
                add-title="新增"
                edit-title="绑定"
                :add-template="addTemplate"
                :add-rules="addRules"
                :form-options="formOptions"
                @row-add="addDevicePoint"
                @row-edit="devicePointBandingNode"
                @row-remove="delDevicePoint"
                @dialog-cancel="handleDialogCancel"
                @banding="bandingNodeTemplate"
                @cell-data-change="handleCellDataChange"
                @form-data-change="handleFormDataChange">
                <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
                </d2-crud>
            </el-card>
        </el-main>

    </el-container>
</template>

<script>

import { each, assign } from 'lodash'
export default {
  props: {
    server_id: {
      default: 0
    }
  },
  components: {
    DeviceConfigure: () => import('./deviceConfigure')
  },
  data () {
    return {
      active: '',
      columns: [
        {
          title: '序号',
          key: 'id'
        },
        {
          title: '名称',
          key: '@Name',
          component: {

            size: 'small'
          }
        },
        {
          title: '绑定',
          key: '@Binding'

        },
        {
          title: '地址',
          key: '@Address',
          component: {
            name: 'el-input',
            size: 'small'
          }
        },
        {
          title: '类型',
          key: '@RequestType',
          component: {
            name: 'el-input',
            size: 'small'
          }
        },
        {
          title: '采集周期',
          key: '@RequestInterval',
          component: {
            name: 'el-input',
            size: 'small'
          }
        },
        {
          title: '长度',
          key: '@Length',
          component: {
            name: 'el-input',
            size: 'small'
          }
        },
        {
          title: '说明',
          key: '@Description',
          component: {
            name: 'el-input',
            size: 'small'
          }
        },
        {
          title: '当前值',
          key: '@Value',
          component: {
            name: 'el-input',
            size: 'small'
          }
        }
      ],
      rowHandle: {
        minWidth: '200',
        custom: [
          {
            text: '绑定',
            size: 'mini',
            emit: 'banding',
            show (index, row) {
              if (row.showBindButton) {
                return true
              }
              return false
            }
          },
          {
            text: '发送',
            size: 'mini',
            show (index, row) {
              if (row.showSendButton) {
                return true
              }
              return false
            }
          },
          {
            text: '复制',
            size: 'mini',
            show (index, row) {
              if (row.showCopyButton) {
                return true
              }
              return false
            }
          }
        ],
        remove: {
          size: 'mini',

          confirm: true,
          show (index, row) {
            if (row.showRemoveButton) {
              return true
            }
            return false
          }
        }
      },
      formOptions: {
        modal: false,
        saveLoading: false,
        showOverflowTooltip: true
      },
      addTemplate: {
        '@Name': {
          title: '名称'
        },

        '@Address': {
          title: '地址'
        },
        '@RequestType': {
          title: '类型'
        },
        '@RequestInterval': {
          title: '采集周期(ms)'
        },
        '@Length': {
          title: '长度'
        },
        '@Description': {
          title: '说明'
        },
        '@Value': {
          title: '当前值'
        }
      },
      addRules: {
        '@Name': [{ required: true, type: 'string', message: '请输入名称', trigger: 'blur' }],
        '@Address': [{ required: true, message: '请输入地址', trigger: 'blur' }],
        '@RequestType': [{ required: true, type: 'string', message: '请选择类型', trigger: 'blur' }],
        '@RequestInterval': [{ required: true, message: '请输入采集周期(ms)', trigger: 'blur' }],
        '@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }],
        '@Value': [{ required: true, message: '请输入当前值', trigger: 'blur' }]
      },
      serverId: 0,
      devicePointData: [],
      nodeCodeData: [],
      workingSubclasses: [],
      dialogVisible: false,
      deviceActiveStatus: '0',
      defaultDeviceName: '',
      defaultFormData: {},
      deviceData: [],
      deviceConfigure: {}
    }
  },
  watch: {
    server_id: {
      handler (val) {
        this.serverId = val
        this.getDevice()
      },
      immediate: true
    }
  },
  methods: {
    addRow () {
      this.$refs.d2Crud.showDialog({
        mode: 'add'
      })
    },
    handleFormDataChange ({ key }) {
      if (key === 'workingSubclass') {
        const { workingSubclass } = this.$refs.d2Crud.formData
        this.getCodesByWorkingSubclass(workingSubclass)
        this.$refs.d2Crud.$forceUpdate()
      }
    },
    handleCellDataChange ({ rowIndex, row }) {
      this.devicePointData[rowIndex] = row
      this.setDeviceConfigure()
    },
    bandingNodeTemplate () {
      this.$refs.d2Crud.showDialog({
        mode: 'edit',
        template: {
          workingSubclass: {
            title: '工序编码',
            value: '',
            component: {
              name: 'el-select',
              options: this.workingSubclasses,
              span: 12
            }
          },
          nodeCode: {
            title: '节点名称',
            value: '',
            component: {
              name: 'el-select',
              options: this.nodeCodeData,
              span: 12
            }
          }

        }
      })
    },
    handleDialogCancel (done) {
      this.$message({
        message: '用户取消保存',
        type: 'warning'
      })
      done()
    },
    handleCommand (command) {
      switch (command) {
        case 'add':
          this.addDevice()
          break
        case 'del':
          this.delDevice()
          break
      }
    },
    async getCodesByWorkingSubclass (workingSubclass) {
      try {
        const nodeCode = await this.$api.QUERY_CODES(workingSubclass)
        const nodeCodeData = []
        each(nodeCode, (o) => {
          nodeCodeData.push({ value: o, label: o })
        }
        )
        this.nodeCodeData = nodeCodeData
        this.$nextTick(() => {
          this.$refs.d2Crud.handleFormTemplateMode('nodeCode').component.options = this.nodeCodeData
          this.$refs.d2Crud.$forceUpdate()
        })
      } catch (e) {
        console.log(e)
      }
    },
    async getworkingSubclasses () {
      try {
        const workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES()
        const workingSubclassesData = []
        each(workingSubclasses, (o) => {
          workingSubclassesData.push({ value: o, label: o })
        }
        )
        this.workingSubclasses = workingSubclassesData
      } catch (e) {
        console.log(e)
      }
    },
    async getDevice () {
      try {
        this.deviceData = await this.$api.GET_DEVICE(this.serverId)
        if (this.deviceData.length > 0) {
          this.getDeviceConfigure(this.deviceActiveStatus)
        }
      } catch (e) {
        console.log(e)
      }
    },
    async getDeviceConfigure (e) {
      this.deviceActiveStatus = e
      this.devicePointData = [] // 当切换设备时把保存configure、point的数据清空
      this.defaultDeviceName = ''
      const deviceData = await this.$api.GET_DEVICE_CONFIGURE(this.deviceData[e].id)
      if (deviceData[0].conf) {
        const conf = JSON.parse(deviceData[0].conf)
        if (conf['@Name'] !== undefined) {
          this.defaultDeviceName = conf['@Name']
          this.defaultFormData = conf
        }
        // 获取point信息
        if (conf.RequestNode !== undefined && conf.RequestNode.length > 0) {
          this.devicePointData = each(conf.RequestNode, (o, i) => (
            assign(o, {
              id: i + 1,
              showBindButton: true,
              showSendButton: true,
              showCopyButton: true,
              showRemoveButton: true
            })
          ))
        }
      }
    },
    addDevice () {
      const that = this
      this.$prompt('输入设备名称', '新加设备', {
        confirmButtonText: '确定',
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: '请输入设备名称'
      }).then(({ value }) => {
        this.$api.ADD_DEVICE({ action: 'add_device', name: value, server_id: this.serverId })
        that.getDevice()
        this.$message({
          message: '新加设备成功',
          type: 'success'
        })
      })
    },
    async delDevice () {
      try {
        await this.$api.DEL_DEVICE({ action: 'remove_device', id: this.deviceData[this.deviceActiveStatus].id })
        this.$message({
          message: '删除设备成功',
          type: 'success'
        })
        this.getDevice()
      } catch (e) {
        console.log(e)
      }
    },
    async addDevicePoint (row, done) {
      this.formOptions.saveLoading = true
      if (!this.$refs.defaultDeviceTypeNameValue) {
        this.$message({
          message: '请先应用设备配置',
          type: 'error'
        })
        done(false)
      } else {
        this.devicePointData.push(row)
        await this.setDeviceConfigure()
        await this.getDevice()
        done()
      }
      this.formOptions.saveLoading = false
    },
    async delDevicePoint ({ index, row }, done) {
      this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData.splice(index, 1)
      await this.setDeviceConfigure()
      done()
    },
    async getDevicePoint () {
      const data = { action: 'add_node', server_id: this.serverId, device_id: this.deviceData[this.deviceActiveStatus].id }
      try {
        this.devicePointData = await this.$api.GET_DEVICE_POINT(data)
      } catch (e) {
        console.log(e)
      }
    },
    async devicePointBandingNode ({ index, row }, done) {
      this.devicePointData[index]['@Binding'] = row.nodeCode
      this.setDeviceConfigure()
      done()
    },
    async setDeviceConfigure () {
      try {
        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522', 'admin', '123456')
        if (this.devicePointData.length > 0) {
          this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData
        }
        console.log(this.$refs.deviceConfigure.deviceConfigureModelValue)
        deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = [this.$refs.deviceConfigure.deviceConfigureModelValue]
        await this.$api.SET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522', 'admin', '123456', { data: deviceConfigure.Content })
        const data = {
          action: 'update_device',
          conf: JSON.stringify(this.$refs.deviceConfigure.deviceConfigureModelValue),
          id: this.deviceData[this.deviceActiveStatus].id
        }

        this.$api.SET_DEVICE_CONFIGURE(data)
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      } catch (e) {
        console.log(e)
      }
    },
    getDeviceStatus () {
      this.$api.GET_DEVICE_STATUS(this.serverId).then(res => {
        each(this.deviceData, (item) => {
          if (item.id in res.device_status) {
            item.status = res.device_status[item.id]
          }
        })
        this.$emit('changeStatus', res.server_status)
      })
    }
  },
  mounted () {
    this.getDevice()
    this.getworkingSubclasses()
    setInterval(this.getDeviceStatus, 2000)
  }
}
</script>

<style scoped>
.menu-box {
    box-sizing: border-box;
    padding: 10px;
    vertical-align: middle;
}

.el-dropdown {
    vertical-align: top;
}

.el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.menu-header {
    position: relative;

}

.header-title {
    width: 60%;
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    color: black;
    vertical-align: middle;
}

.header-button {
    float: right;
    vertical-align: middle;
}

.serve-item {
    border: none;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
    outline: 0;
    border-radius: 4px;

}

.device-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;

    right: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.device-status-online {
    background-color: #67c23a;
}

.device-status-offline {
    background-color: #ccc;
}
</style>
