<template>
  <view class="dict">
    <view>字典管理</view>
    <view class="dict-main">
      <input
        class="dict-input"
        v-model="dictText"
        placeholder=""
        @keydown.enter.native="searchDict"
        placeholder-class="input-placeholder"
      />
      <view class="dict-but">
        <button type="primary" @click="searchDict" size="mini">
          搜索
        </button></view
      >
    </view>
    <view
      >{{ dictValue }} <text class="dict-copy" @click="copy">复制</text
      ><text class="dict-copy" @click="clearDictValue">清空</text></view
    >
  </view>
  <view class="dict-card-list">
    <block v-for="(v, i) in dictLists">
      <view class="dict-card-main">
        <view
          >type：{{ v.type }}
          <text class="dict-add" @click="addDict(v.type)">添加</text></view
        >
        <view>value：{{ v.value }}</view>
        <view>text：{{ v.text }}</view>
      </view>
    </block>
  </view>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { filterDicts } from "@/hooks/dict";

const dictText = ref("");
const dictLists = ref([]);
let dictValue = ref([]);
function searchDict() {
  dictLists.value = filterDicts(dictText.value);
}
function addDict(v) {
  dictValue.value.push(v);
}
function copy() {
  uni.setClipboardData({
    data: toStringDictType(),
  });
}
function toStringDictType() {
  let text = "";
  dictValue.value.forEach((v, i) => {
    if (i != dictValue.value.length - 1) {
      text += `"${v}",`;
    } else {
      text += `"${v}"`;
    }
  });
  return `[${text}]`;
}
function clearDictValue() {
  dictValue.value = [];
}
</script>

<style lang="scss" scoped>
.dict {
  width: 50vw;
  margin: auto;
  .dict-main {
    display: flex;
    align-items: center;
    .dict-input {
      width: 180px;
      padding: 2px 0;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      text-indent: 1em;
    }
    .dict-but {
      margin-left: 10px;
      transform: translateY(1px);
    }
  }
  .dict-copy {
    font-size: 12px;
    border: 0.5px solid #ccc;
    background-color: skyblue;
    border-radius: 2px;
    padding: 0 5px;
    margin: 0 5px;
    cursor: pointer;
  }
}
.dict-card-list {
  display: flex;
  flex-wrap: wrap;
  .dict-card-main {
    padding: 10px;
    margin: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    view {
      padding: 5px;
    }
    .dict-add {
      font-size: 12px;
      border: 0.5px solid #ccc;
      background-color: skyblue;
      border-radius: 2px;
      padding: 0 5px;
      cursor: pointer;
    }
  }
}
</style>
