<template>
  <div :class="classNames" @click.stop="onCellClick">
    <div class="dpcell-content-area">
      <img :src="currSrc" v-if="currShowImg">
      <span class="dpcell-title" v-else>{{currTitle}}</span>
      <span class="dpcell-value" v-if="currType === 'cell'">{{calcValue}}</span>
      <textarea v-model="currValue" class="dpcell-textarea" rows="1" :placeholder="currPlaceholder" v-if="currType === 'textarea'"></textarea>
    </div>
    <img src="./../../assets/images/common/icon_left_arrow.png" v-if="currIsLink">
  </div>
</template>

<script>
export default {
  name: 'DPCell',

  props: {
    showBottomLine: {
      type: Boolean,
      default: true
    },

    /**
     * cell类型，有如下类型
     * cell: 默认，点击类型的cell
     * textfield: 输入类型的cell
     */
    type: {
      type: String,
      default: 'cell',
    },

    placeholder: {
      type: String,
      default: ''
    },

    title: {
      type: String,
      default: ''
    },

    value: {
      type: String,
      default: ''
    },

    isLink: {
      type: Boolean,
      default: false,
    },

    src: {
      type: String,
      default: ''
    },

    showImg: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      dpCellClass: 'dpcell',
      bottomLineClass: 'private-1px-b',
      // bottomLineClass: 'common-hair-line-bottom',
      currShowBottomLine: this.showBottomLine,
      currType: this.type,
      currPlaceholder: this.placeholder,
      currTitle: this.title,
      currValue: this.value,
      currIsLink: this.isLink,
      currSrc: this.src,
      currShowImg: this.showImg
    }
  },

  methods: {
    onCellClick () {
      this.$emit('on-cell-click')
    }
  },

  computed: {
    classNames () {
      let classes = {}
      classes[this.dpCellClass] = true
      if (this.currShowBottomLine) {
        classes[this.bottomLineClass] = true
      }
      return classes
    },

    calcValue () {
      try {
        if (this.currValue.length === 0) {
          return this.currPlaceholder
        } else {
          return this.currValue
        }
      } catch (error) {
        this.util.debugLog(error)
      }

      return this.currPlaceholder
    }
  },

  watch: {
    showBottomLine: function (newVal) {
      this.currShowBottomLine = newVal
    },

    type: function (newVal) {
      this.currType = newVal
    },

    placeholder: function (newVal) {
      this.currPlaceholder = newVal
    },

    title: function (newVal) {
      this.currTitle = newVal
    },

    value: function (newVal) {
      this.currValue = newVal
    },

    isLink: function (newVal) {
      this.currIsLink = newVal
    },

    currValue: function (newVal) {
      this.$emit('on-textarea-change', newVal)
    }
  },
}
</script>

<style lang="scss" scoped>
.dpcell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 45px;
  padding: 10px;
  background-color: #fff;
}

.dpcell img {
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

.dpcell-content-area {
  display: flex;
  justify-content: space-between;
  min-width: calc(100% - 20px);
  max-width: 100%;
}

.dpcell-content-area img {
  width: 20px;
  height: 20px;
  margin-left: 0;
}

.dpcell-title {
  min-width: 100px;
  max-width: 150px;
  font-size: 14px;
  color: #333;
}

.dpcell-value {
  margin-left: 10px;
  margin-right: 0;
  font-size: 14px;
  color: #999;
}

.dpcell-textarea {
  width: calc(100% - 10px - 150px);
  margin-left: 10px;
  margin-right: 0;
  text-align: right;
  font-size: 14px;
  color: #999;
  resize: none;
}

.dpcell-textarea::-webkit-input-placeholder {
  font-size: 14px;
  color: #999;
}
</style>

<style lang="less" scoped>
@import '~vux/src/styles/weui/base/mixin/setOnepx.less';

.private-1px-b {
  position: relative;
}

.private-1px-b {
  &:after {
    .setBottomLine(#E8E8E8);
  }
}
</style>
