<!--
  @name: tyCell
  @description: -
  @author 张文
  @date: 2022-01-18
-->
<template>
  <div
    class="ty-global-flex-between ty-cell-box"
    :style="{borderBottom: !border ? 'none' : ''}"
  >

    <div
      :class="[
        'ty-global-flex-between',
        isLink ? 'ty-global-click-style' : '',
        'ty-cell-boss'
      ]"
      @click="click"
    >
      <div
        :class="[
          'ty-cell-title-box',
          required?'ty-global-required':'',
          showColon?'ty-global-show-colon':''
        ]"
        :style="{
          textAlign:titleAlign,
          width:typeof titleWidth === 'number' ? titleWidth + 'px' : titleWidth,
          flexShrink:titleWidth !== 'auto' ? 0 :'',
          flex: titleWidth !== 'auto' ? 'initial' : 1
        }"
      >
        <slot name="title">{{ title }}</slot>
      </div>

      <div
        class="ty-cell-value-box"
        :style="{
          textAlign: valueAlign,
          width:typeof valueWidth === 'number' ? valueWidth + 'px' : valueWidth,
          flexShrink:valueWidth !== 'auto' ? 0 :'',
          flex: valueWidth !== 'auto' ? 'initial' : 1
        }"
      >
        <slot name="value">
          <span v-if="value">{{ value }}</span>
        </slot>
        <span
          v-if="!value && isEdit"
          class="ty-cell-placeholder"
        >{{ placeholder ? placeholder : $tyLanguage.get('wms_project.pda.component.cell.select','请选择') + title }}</span>
      </div>

      <van-icon
        class="ty-cell-icon"
        v-if="isLink && (!isEdit || !value)"
        name="arrow"
      />

    </div>

    <template v-if="isEdit">
      <van-icon
        class="ty-cell-icon"
        v-if="isEdit && value"
        name="clear"
        @click="clear"
      />
    </template>

    <!-- 用于储存提交数据的值 -->
    <input
      class="ty-cell-inp"
      type="text"
      :value="formVal"
      :name="name"
    >
  </div>
</template>

<script>

export default {
  name: "tyCell",
  props: {

    // 当前是否是编辑模式，开启后当右侧有值时会自动显示清除按钮
    isEdit:{
      type: Boolean,
      default: false
    },

    // 标题
    title: String,
    // 标题对齐方式
    titleAlign: {
      type: String,
      default: 'left'
    },
    // 标题宽度
    titleWidth: {
      type: [String, Number],
      default: 'auto'
    },

    // 右侧显示内容
    value: [String, Number],
    // 右侧内容对齐方式
    valueAlign: {
      type: String,
      default: 'right'
    },
    // 标题宽度
    valueWidth: {
      type: [String, Number],
      default: 'auto'
    },

    // 占位提示文字
    placeholder: String,

    // 是否显示边框
    border: {
      type: Boolean,
      default: true
    },
    // 是否展示右侧箭头并开启点击反馈
    isLink: {
      type: Boolean,
      default: true
    },
    // 是否显示必填星号
    required: {
      type: Boolean,
      default: false
    },
    // 是否显示冒号
    showColon: {
      type: Boolean,
      default: false
    },

    // 表单提交时显示的name名字
    name: String,
    // 表单提交的数据是否同 value 的值一致
    submitValue:{
      type: Boolean,
      default: true
    },
    // 表单提交的数据
    formValue: String,

    // 点击后跳转的页面
    path: String,
    // 点击跳转后携带的参数
    query:{
      type: Object,
      default: () => {}
    }
  },
  computed:{
    val:{
      get(){
        return this.value
      },
      set(v){
        this.$emit('input', v)
      }
    },
    formVal:{
      get(){
        if (this.submitValue){
          return this.value
        }
        return this.formValue
      },
      set(v){
        !this.submitValue && this.$emit('update:formValue', v)
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    // 清除按钮
    clear() {
      this.val = ''
      this.formVal = ''
      this.$emit('clear')
    },

    // 点击
    click(ev){
      if (!this.isLink) return

      if (this.isLink && this.path){
        this.$router.push({
          path: this.path,
          query: this.query
        })
        return
      }

      this.$emit('click', ev)
    }
  }
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";

.ty-cell-box{
  border-bottom: solid 1px @borderColor;
  position: relative;
  font-size: 14px;
  padding: 5px 0;
}

.ty-cell-boss{
  flex: 1;
  width: calc(100% - 28px);
  padding: 5px 0;
}

.ty-cell-title-box{
  color: @titleColor;
}

.ty-cell-value-box{
  margin: 0 6px;
  color: @fontColor;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ty-cell-placeholder{
  color: #cdcdcd;
  font-size: 14px;
}

.ty-cell-icon{
  color: #cdcdcd;
  font-size: 18px;
}

.ty-cell-inp{
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

</style>
