/**
 * @props title：cell标题
 * @props titleClass：cell标题样式
 * @props titleColor：cell标题文字样式
 * @props content：cell内容
 * @props contentClass：cell内容样式
 * @props type：值 content/input 默认 content，值为input时显示为输入框
 * @props value：input value
 * @props placeholder：input placeholder
 * @props classInput：input样式
 * @props dot：boolean，是否显示右侧圆点按钮
 * @slot content：内容插槽，替代content显示
 * @slot prefix：左侧插槽
 * @slot right：右侧插槽
 * @event input：type为input时输入事件
 * @event click：点击事件
 */
<template>
  <div
    class="mb-px bg-white px-4 rounded"
    @click="clickItem"
  > 
    <div v-if="checkIfEmpty(label)" class="text-sm text-text-secondary py-2">{{ label }}</div>
    <div class="flex py-3 items-center justify-between">
      <slot name="prefix" />
      <div class="flex justify-between flex-1" :class="contentClass">
        <div v-if="required" class="text-color-primary mr-0.5">*</div>
        <div v-if="checkIfEmpty(title)" class="title flex-shrink-0 mr-4" :class="getClass">{{ title }}</div>
        <!-- 输入框 -->
        <template v-if="type === 'input'">
          <input
            class="w-full  text-sm text-text-secondary focus:text-text-primary"
            type="text"
            :value="value"
            :placeholder="placeholder"
            @input="handleInput"
            @blur="handleBlur"
            @focus="handleFocus"
            :class="inputClass"
          >
        </template>
        <template v-else>
          <!-- cell 中间content插槽 -->
          <slot name="content">
          <!-- cell内容 -->
            <div v-if="checkIfEmpty(content)" class="flex-1 flex-shrink-0 text-text-secondary text-sm text-right">{{ content }}</div>
          </slot>
        </template>
      </div>
      <slot name="right" />
      <app-icon
        v-if="dot"
        type="png"
        :path="require('@/assets/icons/dot.png')"
        class-name="h-5 w-1 ml-auto flex-shrink-0 ml-1.5"
      />
    </div>
    <div
      class="text-text-warning text-sm pb-1.5 text-right"
      v-if="isError"
    >{{ errorMessage }}</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  components:{ 
    'app-icon':()=>import('@/components/common/Icon.vue')
    // 'main-page': () => import('@/layout/main-page.vue')
  },
  props: {
    title: String,
    dot: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'content'
    },
    placeholder: {
      type: String,
      default: '请输入...'
    },
    titleColor: {
      type: String,
      default: 'text-text-primary'
    },
    classInput: {
      type: String,
      default: 'text-right'
    },
    titleClass: String,
    contentClass: {
      type: String,
      default: 'items-center'
    },
    required: {
      type: Boolean,
      default: false
    },
    errorMsg: String,
    value: String,
    label: String,
    content: String,
    validator: Function
  },
  name: 'CCell',
  data() {
    return {
      isError: false,
      errorMessage: ''
    }
  },
  computed: {
    getClass(): string {
      return `${this.titleColor || ''} ${this.titleClass || '' }`
    },
    inputClass() {
      if (this.isError) {
        return `${this.classInput} text-text-warning`
      } else {
        return `${this.classInput}`
      }
    }
  },
  methods: {
    clickItem() {
      this.$emit('click')
    },
    checkIfEmpty(string: string) {
      if (typeof string === 'undefined') return false
      return string.replace(/(^\s*)|(\s*$)/g, '') !== ''
    },
    handleInput(e: InputEvent) {
      const value = (e.target as HTMLInputElement).value
      this.$emit('input', value)
    },
    handleBlur(e: InputEvent) {
      const value = (e.target as HTMLInputElement).value
      if (this.required && !this.checkIfEmpty(value)) {
        this.isError = true
        this.errorMessage = this.errorMsg || '值不能为空'
        this.$emit('input', '')
        return
      }
      if (typeof this.validator === 'function') {
        this.validator(value, (x: Error) => {
          if (typeof x !== 'undefined') {
            this.isError = true
            this.errorMessage = x.message
          }
        })
      }
    },
    handleFocus() {
      this.isError = false
      this.errorMessage = ''
    }
  }
})
</script>

<style lang="less">

</style>
