<template>
  <el-dialog :visible.sync="visible" title="设备命令" @close="updCommandData">
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">

        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
        <crudOperation :permission="permission" />

        <!--表单组件-->
        <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" append-to-body  style="width: 1000px; margin-left: 25%">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
            <el-form-item label="设备ID" prop="deviceId" hidden="hidden">
              <el-input v-model="form.deviceId" />
            </el-form-item>
            <el-form-item label="指令名称" prop="commandName">
              <el-input v-model="form.commandName" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="指令类型" prop="commandType">
              <el-select v-model="form.commandType"  size="small" placeholder="类型" class="filter-item" style="width: 370px">
                <el-option v-for="item in commandTypes" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="指令参数">
              <el-input v-model="form.commandParams" style="width: 370px;" rows="3" type="textarea"/>
            </el-form-item>
            <el-form-item label="指令描述">
              <el-input v-model="form.description" style="width: 370px;" rows="3" type="textarea"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>

        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%; height: 400px" @selection-change="crud.selectionChangeHandler" >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="commandName" label="指令名称" />
          <el-table-column prop="commandType" label="指令类型" >
            <template slot-scope="scope">
              <span v-if="scope.row.commandType=='FILE_TRANSFER'">文件传输</span>
              <span v-else-if="scope.row.commandType=='PRINT_CONTROL'">打印控制</span>
              <span v-else>视频流传输</span>
            </template>
          </el-table-column>
          <el-table-column prop="commandParams" label="指令参数" />
          <el-table-column prop="description" label="指令描述" />
          <el-table-column v-if="checkPer(['admin','busDeviceCommand:edit','busDeviceCommand:del'])" label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import crudBusDeviceCommand from '@/api/bus/busDeviceCommand/busDeviceCommand'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, deviceId: null, commandName: null, commandType: null, description: null, isSystem: null, commandParams: null, createBy: null, updateBy: null, createTime: null, updateTime: null }
export default {
  name: 'BusDeviceCommand',
  components: { pagination, crudOperation, udOperation },
  props: {
    visible: { type: Boolean, default: false },
    data: { type: Number, required: true }
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '指令', url: 'api/busDeviceCommand', idField: 'id', sort: 'id,desc', crudMethod: { ...crudBusDeviceCommand }})
  },
  data() {
    return {
      commandTypes: [
        { 'label': '文件传输', 'value': 'FILE_TRANSFER' },
        { 'label': '打印控制', 'value': 'PRINT_CONTROL' },
        { 'label': '视频流传输', 'value': 'VIDEO_STREAM' }
      ],
      permission: {
        add: ['admin', 'busDeviceCommand:add'],
        edit: ['admin', 'busDeviceCommand:edit'],
        del: ['admin', 'busDeviceCommand:del']
      },
      rules: {
        commandName: [
          {required: true, message: '指令名称不能为空', trigger: 'blur'}
        ],
        commandType: [
          {required: true, message: '指令类型不能为空', trigger: 'blur'}
        ],
        commandParams: [
          {required: true, message: '指令参数不能为空', trigger: 'blur'}
        ],
      }
    }
  },
  watch: {
    data(newVal) {
      defaultForm.deviceId = newVal
    }
  },
  created() {
    this.crud.optShow.download = false
  },
  methods: {
    updCommandData() {
      this.visible = false
      this.$emit('update:visible', false)
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
