<template>
  <div class="camera part-box">
    <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"
            suffix="scan icon"
            autofocus
            v-code-input.prevent="{ inputOver }"
            v-else
          >
          </Input>
        </FormItem>
        <div class="camera-write">
          <Button icon="handle icon" @click="toHandInput">手工输入</Button>
        </div>
      </Form>
      <div class="camera-btn">
        <Button size="large" type="primary" long @click="submit">下一步</Button>
      </div>
    </div>
  </div>
</template>

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

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

      this.setCamera(this.modalForm.camera);

      const scanRouter = this.clientConfig.packageScan
        ? "GroupScan"
        : "LineScan";
      const routerName = this.curSubject.collectConfig
        ? this.clientConfig.paperStage
          ? "CheckInfo"
          : scanRouter
        : "ScanArea";
      this.$router.push({ name: routerName });
    }
  }
};
</script>
