<template>
  <div class="scan-params h-full flex justify-center items-center">
    <div class="center">
      <qm-low-form
        :fields="fields"
        :params="params"
        :label-width="150"
        labelAlign="left"
      >
        <template #a>
          <div class="flex items-center">
            <a-input style="width: 200px" v-model:value="params.a" />
            <qm-button class="m-l-8px" :icon="h(PlusCircleOutlined)"
              >新增</qm-button
            >
          </div>
          <div class="p-t-10px p-b-10px">
            <div
              class="tag"
              v-for="(item, index) in tagList"
              :key="item"
              :style="{ color: token.colorPrimary }"
            >
              {{ item }}
              <span class="close" @click="delTag(index)">&times;</span>
            </div>
          </div>
        </template>

        <template #b>
          <div class="flex items-center">
            <div class="flex items-center m-r-50px ccbl">
              <span>抽查比例：</span>
              <a-input-number v-model:value="params.b" :max="100" :min="0" />
              <span>%</span>
            </div>
            <div class="flex items-center jcsx">
              <span>检查顺序：</span>
              <a-select v-mode:value="params.c" style="width: 200px"></a-select>
            </div>
          </div>
        </template>
        <template #e>
          <div class="flex items-center">
            <div class="flex items-center m-r-50px ccbl">
              <span>锁屏数量：</span>
              <a-input-number v-model:value="params.e" :max="100" :min="0" />
              <span>张</span>
            </div>
            <div class="flex items-center jcsx">
              <span>解锁密码：</span>
              <a-input-password
                v-mode:value="params.f"
                style="width: 200px"
              ></a-input-password>
            </div>
          </div>
        </template>
      </qm-low-form>

      <div class="btns">
        <!-- <qm-button :icon="h(EditOutlined)">编辑</qm-button> -->
        <qm-button type="primary">保存</qm-button>
      </div>
    </div>
  </div>
</template>
<script name="ScanParams" lang="ts" setup>
import { ref, h } from "vue";
import { PlusCircleOutlined } from "@ant-design/icons-vue";
import useToken from "@/hooks/useToken";
import { EditOutlined } from "@ant-design/icons-vue";
const { token } = useToken();
//todo 入参名
const params = ref({
  a: "",
  b: "",
  c: "",
  d: "1",
  e: "",
  f: "",
});
const fields = ref([
  {
    cell: "a",
    label: "卷型条码内容",
    colSpan: 24,
  },
  {
    cell: "b",
    label: "图片检查",
    colSpan: 24,
  },
  {
    prop: "d",
    label: "实时审核",
    colSpan: 24,
    type: "radio",
    attrs: {
      options: [
        { label: "是", value: "1" },
        { label: "否", value: "0" },
      ],
    },
  },
  {
    cell: "e",
    label: "人工绑定锁屏控制",
    colSpan: 24,
  },
]);
const tagList = ref(["666666", "888888", "999999"]);
const delTag = (index: number) => {
  tagList.value.splice(index, 1);
};
</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: 32px;
      background: #e8f3ff;
      display: inline-block;
      margin-right: 8px;
      .close {
        font-size: 18px;
        padding: 0 3px;
        cursor: pointer;
        &:hover {
          font-weight: bold;
        }
      }
    }
  }
}
</style>
