<template>
  <div class="camera home-main">
    <div class="part-head">
      <h2>获取相机编号</h2>
    </div>
    <div class="camera-form">
      <Form
        ref="modalFormComp"
        :model="modalForm"
        :rules="rules"
        :label-width="0"
      >
        <FormItem prop="camera">
          <Input
            size="large"
            v-model.trim="modalForm.camera"
            placeholder="相机编码"
            key="1"
            autofocus
            v-if="canEdit"
          >
          </Input>
          <Input
            size="large"
            v-model.trim="modalForm.camera"
            placeholder="扫描相机编码"
            :key="2"
            autofocus
            v-code-input.prevent="{ inputOver }"
            v-else
          >
          </Input>
        </FormItem>
        <div class="camera-write" @click="toHandInput">
          <span>手工输入</span>
        </div>
      </Form>
      <div class="camera-btn">
        <i-button size="large" type="primary" long @click="submit"
          >确认</i-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  name: "camera",
  data() {
    return {
      canEdit: false,
      modalForm: {
        camera: ""
      },
      rules: {
        camera: [
          {
            required: true,
            message: "相机编码不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    ...mapMutations("client", ["setCamera"]),
    inputOver(code) {
      this.modalForm.camera = code;
    },
    toHandInput() {
      this.modalForm.camera = "";
      this.canEdit = true;
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate();
      if (!valid) return;

      this.setCamera(this.modalForm.camera);
      this.$router.push({ name: "ScanArea" });
    }
  }
};
</script>
