<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <confirm-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onConfirm"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label required">名称：</span>
        <el-input
          v-model.trim="gateway.name"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label required">地址：</span>
        <el-input
          v-model.trim="gateway.ip"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label">备注：</span>
        <el-input
          v-model.trim="gateway.remark"
          type="textarea"
          maxlength="100"
          :rows="3"
          show-word-limit
        />
      </div>
    </confirm-dialog>
    <el-dialog
      :visible.sync="showPlc"
      title="PLC"
      custom-class="c-dialog"
      :close-on-click-modal="false"
    >
      <plc
        v-if="showPlc"
        :gateway="gateway"
      />
    </el-dialog>
  </wrapper>
</template>

<script>
import {
  getGateways,
  addGateway,
  updateGateway,
  deleteGateway
} from '@/api/external'
import PLC from './PLC'

export default {
  name: 'GatewayList',
  components: {
    plc: PLC
  },
  data () {
    return {
      gateway: {},
      schema: {
        list: getGateways,
        buttons: [
          { type: 'add', on: this.onAdd }
        ],
        cols: [
          { prop: 'name', label: '名称' },
          { prop: 'ip', label: '地址' },
          { prop: 'remark', label: '备注' },
          { type: 'invoke', width: 160, render: [
            { label: '编辑', on: this.onEdit },
            { label: 'PLC', on: this.onEditPLC },
            { label: '删除', on: this.onDel }
          ] }
        ]
      },
      showPlc: false
    }
  },
  computed: {
    dialogTitle () {
      return this.gateway.id ? '编辑网关' : '新增网关'
    }
  },
  methods: {
    onAdd () {
      this.gateway = {
        name: '',
        ip: '',
        mac: '',
        account: '',
        password: '',
        remark: ''
      }
      this.$refs.editDialog.show()
    },
    onEdit ({ id, name, ip, remark }) {
      this.gateway = { id, name, ip, remark }
      this.$refs.editDialog.show()
    },
    onConfirm (done) {
      if (!this.gateway.name) {
        this.$message({
          type: 'warning',
          message: '请填写网关名称'
        })
        return
      }
      if (!this.gateway.ip) {
        this.$message({
          type: 'warning',
          message: '请填写网关地址'
        })
        return
      }
      if (this.gateway.id) {
        this.onConfirmEdit(this.gateway, done)
      } else {
        this.onConfirmAdd(this.gateway, done)
      }
    },
    onConfirmAdd (gateway, done) {
      addGateway(gateway).then(() => {
        done()
        this.$refs.table.resetCondition()
      })
    },
    onConfirmEdit (gateway, done) {
      updateGateway(gateway).then(() => {
        done()
        this.$refs.table.pageTo()
      })
    },
    onDel (gateway) {
      deleteGateway(gateway).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onEditPLC (gateway) {
      this.gateway = gateway
      this.showPlc = true
    }
  }
}
</script>
