<template>
  <div class="scan-params h-full flex justify-center items-center">
    <div class="center">
      <qm-low-form
        :fields="fields"
        :params="params"
        labelAlign="left"
        ref="form"
        :rules="rules"
      >
        <template #label1></template>
        <template #paperTypeBarcodeContentItem>
          <div class="flex items-center">
            <a-input
              style="width: 200px"
              v-model:value="params.paperTypeBarcodeContentItem"
              allow-clear
            />
            <qm-button
              class="m-l-8px"
              :icon="h(PlusCircleOutlined)"
              @click="addTag"
              :disabled="!params.paperTypeBarcodeContentItem"
              >新增</qm-button
            >
          </div>
          <div
            class="p-t-10px p-b-10px"
            v-if="!!params.paperTypeBarcodeContent.length"
          >
            <div
              class="tag"
              v-for="(item, index) in params.paperTypeBarcodeContent"
              :key="item"
              :style="{ color: token.colorPrimary }"
            >
              {{ item }}
              <span class="close" @click="delTag(index)">&times;</span>
            </div>
          </div>
        </template>
        <template #label2></template>
        <template #imageCheckRatio>
          <div class="flex items-center">
            <a-input-number
              v-model:value="params.imageCheckRatio"
              :max="100"
              :min="0"
            />
            <span>%</span>
          </div>
        </template>
        <template #scannerAssignedMaxCount>
          <div class="flex items-center">
            <a-input-number
              v-model:value="params.scannerAssignedMaxCount"
              :max="100"
              :min="0"
            />
            <span>张</span>
          </div>
        </template>
      </qm-low-form>

      <div class="btns">
        <!-- <qm-button :icon="h(EditOutlined)">编辑</qm-button> -->
        <qm-button type="primary" @click="save">保存</qm-button>
      </div>
    </div>
  </div>
</template>
<script name="ScanParams" lang="ts" setup>
import { ref, h, onMounted, reactive } from "vue";
import { PlusCircleOutlined } from "@ant-design/icons-vue";
import useToken from "@/hooks/useToken";
import { EditOutlined } from "@ant-design/icons-vue";
import { getBaseDataConfig, saveBaseDataConfig } from "@/ap/baseDataConfig";
import { useUserStore } from "@/store";

const form = ref();

const userStore = useUserStore();
const { token } = useToken();
const getData = () => {
  getBaseDataConfig({ examId: userStore.curExam?.id }).then((res: any) => {
    params.paperTypeBarcodeContent = res.paperTypeBarcodeContent || [];
    params.imageCheckRatio = res.imageCheckRatio * 100;
    params.imageCheckOrder = res.imageCheckOrder;
    params.enableSyncVerify = res.enableSyncVerify;
    params.scannerAssignedMaxCount = res.scannerAssignedMaxCount;
    params.scannerAssignedVerifyPassword = res.scannerAssignedVerifyPassword;
  });
};
onMounted(() => {
  getData();
});
const params = reactive<any>({
  paperTypeBarcodeContentItem: "",
  paperTypeBarcodeContent: [],
  imageCheckRatio: "",
  imageCheckOrder: "",
  enableSyncVerify: true,
  scannerAssignedMaxCount: "",
  scannerAssignedVerifyPassword: "",
});
const fields = ref([
  {
    cell: "label1",
    label: "卷型条码内容",
    colSpan: 6,
    labelWidth: 130,
  },
  {
    prop: "paperTypeBarcodeContentItem",
    cell: "paperTypeBarcodeContentItem",
    label: "",
    labelWidth: 0,
    colSpan: 18,
  },
  {
    cell: "label2",
    label: "图片检查",
    colSpan: 6,
    labelWidth: 130,
  },
  {
    prop: "imageCheckRatio",
    cell: "imageCheckRatio",
    label: "抽查比例",
    colSpan: 9,
  },
  {
    prop: "imageCheckOrder",
    type: "select",
    attrs: {
      options: [
        { value: "DESC", label: "最新扫描批次" },
        { value: "ASC", label: "批次顺序" },
      ],
    },
    label: "检查顺序",
    colSpan: 9,
  },
  {
    cell: "label3",
    label: "实时审核",
    colSpan: 6,
    labelWidth: 130,
  },
  {
    prop: "enableSyncVerify",
    label: "",
    colSpan: 18,
    type: "radio",
    attrs: {
      options: [
        { label: "是", value: true },
        { label: "否", value: false },
      ],
    },
  },
  {
    cell: "label3",
    label: "人工绑定锁屏控制",
    colSpan: 6,
    labelWidth: 130,
  },
  {
    prop: "scannerAssignedMaxCount",
    cell: "scannerAssignedMaxCount",
    label: "锁屏数量",
    colSpan: 9,
  },
  {
    prop: "scannerAssignedVerifyPassword",
    type: "password",
    colSpan: 9,
    label: "解锁密码",
  },
]);

const addTag = () => {
  params.paperTypeBarcodeContent.push(params.paperTypeBarcodeContentItem);
  params.paperTypeBarcodeContentItem = "";
};
const delTag = (index: number) => {
  params.paperTypeBarcodeContent.splice(index, 1);
};

const rules = {
  paperTypeBarcodeContentItem: [
    {
      validator: async () => {
        if (!params.paperTypeBarcodeContent.length) {
          return Promise.reject("卷型条码内容至少一条");
        } else {
          return Promise.resolve();
        }
      },
    },
  ],
  imageCheckRatio: [{ required: true, message: "请输入抽查比例" }],
  scannerAssignedMaxCount: [{ required: true, message: "请输入锁屏数量" }],
  scannerAssignedVerifyPassword: [
    { required: true, message: "请输入解锁密码" },
  ],
};
const save = () => {
  form.value.formRef.validate().then(() => {
    let p: any = { ...params, examId: userStore.curExam.id };
    p.imageCheckRatio = p.imageCheckRatio / 100;
    delete p.paperTypeBarcodeContentItem;
    saveBaseDataConfig(p).then((res: any) => {
      window.$message.success("保存成功");
    });
  });
};
</script>
<style lang="less" scoped>
.scan-params {
  .center {
    width: 900px;
    max-height: 100%;
    overflow: auto;
    .btns {
      padding-top: 60px;
      padding-left: 150px;
    }
    .ccbl {
      color: @text-color1;
      width: 50%;
      span:last-child {
        color: @text-color3;
        margin-left: 4px;
      }
    }
    .jcsx {
      width: 50%;
    }
    .tag {
      height: 32px;
      padding: 0 10px;
      border-radius: 16px;
      line-height: 30px;
      background: #e8f3ff;
      display: inline-block;
      margin-right: 8px;
      .close {
        font-size: 18px;
        padding: 0 3px;
        cursor: pointer;
        &:hover {
          font-weight: bold;
        }
      }
    }
  }
}
</style>
