<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      @row-dblclick="row => showDialog(row.id)"
      :pageResult="pageResult"
      quick-search-props="actuatorCode,actuatorName"
      :default-sorter="[{direction: 'ASC', property: 'actuatorCode'}]"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          @click="showDialog()"
          icon="el-icon-plus"
          type="primary"
          >添加</el-button
        >
        <ht-delete-button
          url="${cssc}/biz/model/modelActuator/v1/"
          :htTable="$refs.htTable"
          >删除</ht-delete-button
        >
      </template>
      <template>
        <ht-table-column
          prop="actuatorCode"
          label="执行器编码"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="actuatorName"
          label="执行器名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="actuatorIp"
          label="执行器IP"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="actuatorPort"
          label="执行器端口"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="actuatorStatus"
          label="执行器状态"
          :sortable="true"
          :show-overflow-tooltip="true"
          :filters="[
            {value: 'NORMAL', text: '在线'},
            {value: 'NONE', text: '离线'}
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.actuatorStatus == 'NORMAL'"
              >在线</el-tag
            >
            <el-tag type="info" v-if="row.actuatorStatus == 'NONE'"
              >离线</el-tag
            >
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <common-dialog
      width="800px"
      title="执行器管理信息"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      destroy-on-close
    >
      <el-form v-form data-vv-scope="actuatorForm">
        <ht-form-item label="执行器编码" label-width="150px">
          <ht-input
            v-model="actuatorInfo.actuatorCode"
            validate="required"
            placeholder="请输入执行器编码"
          />
        </ht-form-item>
        <ht-form-item label="执行器名称" label-width="150px">
          <ht-input
            v-model="actuatorInfo.actuatorName"
            validate="required"
            placeholder="请输入执行器名称"
          />
        </ht-form-item>
        <ht-form-item label="执行器IP" label-width="150px">
          <ht-input
            v-model="actuatorInfo.actuatorIp"
            validate="required"
            placeholder="请输入执行器IP"
          />
        </ht-form-item>
        <ht-form-item label="执行器端口" label-width="150px">
          <ht-input
            v-model="actuatorInfo.actuatorPort"
            :validate="{
              required: true,
              regex: {
                exp: '^[0-9]+$',
                message: '只能是数字'
              }
            }"
            placeholder="请输入执行器端口"
          />
        </ht-form-item>
        <!-- <ht-form-item label="执行器状态" label-width="150px">
          <ht-radio
            style="width: 100%"
            v-model="actuatorInfo.actuatorStatus"
            :options="[
              {key: 'NORMAL', value: '在线'},
              {key: 'NONE', value: '离线'}
            ]"
            validate="required"
          />
        </ht-form-item> -->
      </el-form>
      <div slot="footer" style="text-align: center">
        <ht-submit-button
          url="${cssc}/biz/model/modelActuator/v1/"
          :model="actuatorInfo"
          :request-method="saveMethod"
          scope-name="actuatorForm"
          @after-save-data="afterSaveData"
          >保存</ht-submit-button
        >
        <el-button @click="beforeCloseDialog">取消</el-button>
      </div>
    </common-dialog>
  </div>
</template>
<script>
export default {
  name: 'execution-manage',
  data() {
    return {
      actuatorInfo: {
        actuatorStatus: ''
      },
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      saveMethod: 'POST'
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    loadData(param, cb) {
      this.$http
        .post('${cssc}/biz/model/modelActuator/v1/query', param)
        .then(
          resp => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    showDialog(id) {
      if (id) {
        this.saveMethod = 'PUT'
        this.$http.get('${cssc}/biz/model/modelActuator/v1/' + id).then(
          resp => {
            this.actuatorInfo = resp.data
            this.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
      }
      // })
    },
    beforeCloseDialog() {
      this.dialogVisible = false
      this.actuatorInfo = []
      this.actuatorInfo.actuatorStatus = ''
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    }
  }
}
</script>
