<template>
  <div>
    <el-row :gutter="31">
      <el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="78px"
        label-position="left">
        <el-col :span="11">
          <el-row gutter="20">
            <el-col :span="24">
              <el-form-item label="设备编号" prop="field112">
                <el-input v-model="formData.field112" placeholder="请输入设备编号" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row gutter="31">
            <el-col :span="24">
              <el-form-item label="设备名" prop="field116">
                <el-select v-model="formData.field116" placeholder="请选择设备名" clearable
                  :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field116Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="23">
          <el-row gutter="31">
            <el-col :span="24">
              <el-form-item label="供应商名" prop="field121">
                <el-input v-model="formData.field121" placeholder="请输入供应商名" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="23">
          <el-form-item label="使用时间" prop="field123">
            <el-time-picker v-model="formData.field123" is-range format="HH:mm:ss" value-format="HH:mm:ss"
              :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至"
              clearable></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属部门" prop="field128">
            <el-cascader v-model="formData.field128" :options="field128Options" :props="field128Props"
              :style="{width: '100%'}" placeholder="请选择所属部门" clearable></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="121px" label="" prop="field122">
            <el-button type="primary" icon="el-icon-search" size="medium"> 主要按钮 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        field112: undefined,
        field116: undefined,
        field121: undefined,
        field123: null,
        field128: [1, 2],
        field122: undefined,
      },
      rules: {
        field112: [{
          required: true,
          message: '请输入设备编号',
          trigger: 'blur'
        }],
        field116: [{
          required: true,
          message: '请选择设备名',
          trigger: 'change'
        }],
        field121: [{
          required: true,
          message: '请输入供应商名',
          trigger: 'blur'
        }],
        field123: [{
          required: true,
          message: '使用时间不能为空',
          trigger: 'change'
        }],
        field128: [{
          required: true,
          type: 'array',
          message: '请至少选择一个field128',
          trigger: 'change'
        }],
      },
      field116Options: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      field128Options: [],
      field128Props: {
        "multiple": false
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    getField128Options() {
      // TODO 发起请求获取数据
      this.field128Options
    },
  }
}

</script>
<style>
</style>
