<template>
    <div class="cell flex justify-between py-3 px-2  " :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 ">
            <app-icon v-if='labelIcon' :name="labelIcon" size='18px'></app-icon>
            <div class="px-2">
                {{text}}
            </div>
            </div>
        <div class="right flex items-center">
            <div v-if="type=='click'" @click="eventEmit(type)">
                <div class='flex flex-row items-center'>
                    <div>{{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='输入' @input="cellOnChange">
            </div>
            <div v-else-if="type==='pick'">
                <div class='flex flex-row items-center'>
                <div>sdf</div>
                <div @click="eventEmit(type)">
                    <app-icon name="icon-xiayibu" size='18px'></app-icon>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
// import { Switch } from 'ant-design-vue'
// Vue.use(Switch)
export default Vue.extend({
    components:{
        'app-icon':()=>import('@/components/common/Icon.vue')
    },
  props: {
    value: String,
    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
  },
  data(){
      return{
          inputValue:this.value,
      }
  },
  methods:{
      eventEmit(v:any){
          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
              })
          }  
      },
      cellOnChange(){
          this.$emit('cellOnChange',this.inputValue)
      }
  },
  computed:{
      getSize(){
          switch (this.size) {
              case 'full':
                    return 'w-full'
              default:
                  return 'w-20';
          }
      },

    //   getBoxType(){
    //       switch (this.boxType) {
    //           case 'border':
    //               return 'border-t border-b border-gray-500'
    //         // case 'background':
    //         //     return ' '
              
    //       }
    //   }
  }
});
</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>