<template>
  <div
    class="cell flex justify-between py-3 px-2 overflow-hidden"
    :class="
      boxType === 'border'
        ? '  border-b border-font-gray border-opacity-25'
        : 'bg-font-gray bg-opacity-20 rounded-md'
    "
  >
    <div class="left flex items-center flex-row-reverse">
      <div class="px-2 text-sm text-font-dark-blue">
        {{ text }}
      </div>
      <app-icon
        v-if="labelIcon"
        :name="labelIcon"
        color="#ED6F6F"
        @click.native="$emit('clickIcon')"
        size="18px"
      ></app-icon>
    </div>


    <!-- 右边 -->
    <div class="right flex items-center overflow-hidden">
      <div v-if="type == 'click'" @click="eventEmit(type)">
        <div class="flex items-center">
          <div class="text-sm">{{ value }}</div>
          <app-icon v-if="icon" :name="icon" class="self-center"></app-icon>
        </div>
      </div>
      <div v-else-if="type == 'input'">
        <input
          v-model="inputValue"
          type="text"
          class="bg-transparent"
          :placeholder="placeholder"
          @input="cellOnChange"
        />
      </div>

      <input v-else-if="type === 'input-num'"
        :value="inputValue"
        type="number"
        @input="handleInput"
        class="bg-transparent"
        :placeholder="placeholder"
      />
      <div v-else-if="type === 'pick'">
        <div class="flex flex-row items-center">
          <input
            @click="eventEmit(type)"
            v-if="$store.state.create.pickedList.length === 0"
            type="text"
            class="bg-transparent"
            :placeholder="placeholder"
          />
          <app-tag
            v-for="item in $store.state.create.pickedList"
            :key="item.id"
            :text="item.text"
            :id="item.id"
            class="text-sm rounded-xl text-font-white bg-app-red ml-1"
            :active="true"
          ></app-tag>
          <div @click="eventEmit(type)">
            <app-icon name="icon-xiayibu" size="18px"></app-icon>
          </div>
        </div>
      </div>
      <div v-else-if="type === 'upload'" class="overflow-hidden">
        <div class="flex flex-row items-center overflow-hidden">
          <div v-if="name" class="overflow-hidden overflow-ellipsis">
            {{ name }}
          </div>
          <input
            v-else
            @click="cellOnChange"
            type="text"
            class="bg-transparent"
            :placeholder="placeholder"
          />
          <div @click="cellOnChange">
            <app-icon name="icon-xiayibu" size="18px"></app-icon>
          </div>
        </div>
      </div>
      <div v-else-if="type === 'showText'" class="overflow-hidden">
        <div class="flex flex-row items-center overflow-hidden">
          <div
            v-if="name"
            class="overflow-hidden overflow-ellipsis"
            id="copyNodeId"
          >
            {{ name }}
          </div>
          <div :data-clipboard-text="name" ref="btn" @click="handleClickCopy">
            <app-icon name="icon-fuzhi" size="18px"></app-icon>
          </div>
        </div>
      </div>
      <div v-else-if="type === 'select'" class="overflow-hidden">
        <div class="flex flex-row items-center overflow-hidden">
          <div class="overflow-hidden overflow-ellipsis">
            {{ getNameOfSelect(selected) }}
          </div>
          <div @click="eventEmit(type)">
            <app-icon name="icon-xiayibu" size="18px"></app-icon>
          </div>
        </div>
      </div>
      <div v-else-if="type === 'image'">
        <div class="flex flex-row items-center self-end">
            <div class='w-20 pr-1'>
                <img :src="value" class='rounded-full w-18 object-fill' >
            </div>
          <app-icon v-if="icon" :name="icon" class="self-center"></app-icon>
        </div>
      </div>
    </div>
    <ActionSheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
    >
    </ActionSheet>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Clipboard from "clipboard";
import { ActionSheet } from "vant";

export default Vue.extend({
  components: {
    "app-icon": () => import("@/components/common/Icon.vue"),
    ActionSheet,
    "app-tag": () => import("@/components/common/Tag2.vue"),
  },
  props: {
    value: [String, Number],
    pickValue: Array,
    size: String,
    type: {
      type: String,
      default: "click",
    },
    boxType: {
      type: String,
      default: "background",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      required: true,
    },
    icon: String,
    labelIcon: String,
    placeholder: {
      type: String,
      default: "输入",
    },
    name: [String, Number],
    selected: [String, Number, Object],
    list: Array,
  },
  data() {
    return {
      inputValue: this.value,
      show: false,
    };
  },
  methods: {
    handleInput(e: any) {
      // const temp = this.inputValue;
      const value = e.target.value as string;
      this.inputValue = value;
      this.$emit("cellOnChange", Number(this.inputValue));
    },
    eventEmit(v: any) {
      console.log(this.type);

      if (this.disabled) {
        return;
      }
      if (this.type === "click") {
        this.$emit("onClick", v);
      }
      if (this.type === "pick") {
        this.$emit("onClick", (cb: any) => {
          console.log(cb);
          return cb;
        });
      }
      if (this.type === "select") {
        this.show = true;
      }
    },
    cellOnChange() {
      this.$emit("cellOnChange", this.inputValue);
    },
    handleClickCopy() {
      const btn = this.$refs.btn as HTMLElement;
      new Clipboard(btn);
      this.$toast("复制成功");
    },
    onCancel() {},
    onSelect(value: any) {
      this.$emit("cellOnChange", value.value);
    },
    getNameOfSelect(selected: string) {
      const item = this.list.find(
        (item: any) => item.value === selected
      ) as any;
      console.log(item, selected);
      return item && item.name;
    },
  },
  computed: {
    getSize() {
      switch (this.size) {
        case "full":
          return "w-full";
        default:
          return "w-20";
      }
    },
    actions(): any[] {
      return this.list || [];
    },
  },
});
</script>

<style lang="less" scoped>
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
  text-align: right;
  padding: 0 25px;
}
input:not([type="range"]),
textarea {
  padding: 0 10px;
}
</style>