<!-- 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18  6 14 072  5   4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。 -->
<script>
export default {
  name: 'FuiPreview',
  props: {
    previewData: {
      type: Object,
      default() {
        return {}
      },
    },
    fields: {
      type: Object,
      default() {
        return {}
      },
    },
    // #ifdef APP-NVUE
    background: {
      type: String,
      default: '#fff',
    },
    // #endif
    // #ifndef APP-NVUE
    background: {
      type: String,
      default: '',
    },
    // #endif
    marginTop: {
      type: [Number, String],
      default: 0,
    },
    marginBottom: {
      type: [Number, String],
      default: 0,
    },
    // 左右间距
    padding: {
      type: [Number, String],
      default: 32,
    },
    labelWidth: {
      type: [Number, String],
      default: 0,
    },
    // left / right / justify
    labelAlign: {
      type: String,
      default: 'left',
    },
    // #ifdef APP-NVUE
    labelColor: {
      type: String,
      default: '#7F7F7F',
    },
    // #endif
    // #ifndef APP-NVUE
    labelColor: {
      type: String,
      default: '',
    },
    // #endif
    // V1.9.9+
    labelRight: {
      type: [Number, String],
      default: 32,
    },
    // V1.9.9+
    hdLabelWidth: {
      type: [Number, String],
      default: 0,
    },
    hdLabelSize: {
      type: [Number, String],
      default: 32,
    },
    hdValSize: {
      type: [Number, String],
      default: 36,
    },
    // #ifdef APP-NVUE
    hdValColor: {
      type: String,
      default: '#181818',
    },
    // #endif
    // #ifndef APP-NVUE
    hdValColor: {
      type: String,
      default: '',
    },
    hdAlign: {
      type: String,
      default: 'right',
    },
    // #endif
    bdSize: {
      type: [Number, String],
      default: 28,
    },
    // #ifdef APP-NVUE
    bdColor: {
      type: String,
      default: '#181818',
    },
    // #endif
    // #ifndef APP-NVUE
    bdColor: {
      type: String,
      default: '',
    },
    // #endif
    // V1.9.9+ 内容对齐方式：left、right
    bdAlign: {
      type: String,
      default: 'right',
    },
    btnSize: {
      type: [Number, String],
      default: 32,
    },
    iconSize: {
      type: [Number, String],
      default: 48,
    },
    // 按钮是否有点击效果
    highlight: {
      type: Boolean,
      default: true,
    },
    hdLeft: {
      type: [Number, String],
      default: 32,
    },
    hdRight: {
      type: [Number, String],
      default: 0,
    },
    // #ifdef APP-NVUE
    borderColor: {
      type: String,
      default: '#eee',
    },
    // #endif
    // #ifndef APP-NVUE
    borderColor: {
      type: String,
      default: '',
    },
    // #endif
    // 是否需要preview外层上下线条
    isBorder: {
      type: Boolean,
      default: true,
    },
    // tag上下padding
    tagPadding: {
      type: [Number, String],
      default: 8,
    },
    // 标题是否显示蓝色竖线条
    isSection: {
      type: Boolean,
      default: false,
    },
   
    // 组件上边距
    topPadding: {
      type: [Number, String],
      default: 0,
    },
  },
  emits: ['click', 'valueClick'],
  data() {
    const app = uni && uni.$fui && uni.$fui.color;
    return {
      pvd: {},
      label: 'label',
      value: 'value',
      list: 'list',
      lColor: 'labelColor',
      valueColor: 'valueColor',
      buttons: 'buttons',
      text: 'text',
      color: 'color',
      icon:'icon',
      customPrefix:'customPrefix',
      iconBtnSize:'iconBtnSize',
      fuiColor: {
					primary: (app && app.primary) || '#465CFF',
					success: (app && app.success) || '#09BE4F',
					warning: (app && app.warning) || '#FFB703',
					danger: (app && app.danger) || '#FF2B2B',
					purple: (app && app.purple) || '#6831FF',
				}
    }
  },
  watch: {
    previewData(val) {
      this.initData(val)
    },
    // 未做深度监听
    fields(val) {
      this.handleFileds()
    },
  },
  created() {
    this.initData(this.previewData)
  },
  methods: {
    handleFileds() {
      if (this.fields && typeof this.fields === 'object') {
        this.label = this.fields.label || 'label'
        this.value = this.fields.value || 'value'
        this.list = this.fields.list || 'list'
        this.lColor = this.fields.labelColor || 'labelColor'
        this.valueColor = this.fields.valueColor || 'valueColor'
        this.buttons = this.fields.buttons || 'buttons'
        this.text = this.fields.text || 'text'
        this.color = this.fields.color || 'color'
        this.paddingTop = this.fields.paddingTop || 'paddingTop'
        this.paddingBottom = this.fields.paddingTop || 'paddingBottom'
      }
    },
    initData(val) {
      this.handleFileds()
      val = val || {}
      val[this.list] = val[this.list] || []
      val[this.buttons] = val[this.buttons] || []
      this.pvd = val
    },
    handleClick(idx) {
      const params = this.pvd[this.buttons][idx] || {}
      this.$emit('click', {
        index: idx,
        ...params,
      })
    },
    itemClick(index) {
      this.$emit('valueClick', {
        index,
        item: this.pvd[this.list][index],
      })
    },
    setValue(index, value) {
      const idx = Number(index)
      if (idx || idx === 0) {
        const data = JSON.parse(JSON.stringify(this.pvd))
        const item = data[this.list][idx]
        item[this.value] = value
        this.pvd = data
      }
    },
  },
}
</script>

<template>
  <view
    class="fui-preview__wrap" :class="{ 'fui-preview__unlined': !isBorder, 'fui-preview__background': !background }"
    :style="{ 'border-top-color': borderColor, 'border-bottom-color': borderColor, 'marginTop': `${marginTop}rpx`, 'marginBottom': `${marginBottom}rpx`, 'background': background,paddingTop: `${topPadding}rpx` }"
  >
  
    <view
      v-if="pvd[label] || pvd[value]" class="fui-preview__hd"
      :style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx`}"
    >
      <view class="fui-preview__item">
        <fui-section v-if="isSection" :title="pvd[label] || ''" is-line line-width="8rpx" :padding="['0','0']" :line-color="fuiColor.primary" />
        <text
        v-else
          class="fui-preview__label" style="color: #333;font-weight:600"
          :style="{ color: labelColor, fontSize: `${hdLabelSize}rpx`, width: hdLabelWidth > 0 ? `${hdLabelWidth}rpx` : 'auto', marginRight: `${labelRight}rpx` }"
        >
          {{ pvd[label] || '' }}
        </text>
        <text
        style="text-align: right;"
          class="fui-preview__value-hd" :class="{ 'fui-preview__color': !hdValColor }"
          :style="{ color: hdValColor, fontSize: `${hdValSize}rpx`, textAlign: hdAlign }"
        >
          {{ pvd[value] || '' }}
        </text>
      </view>
      <view
        v-if="borderColor"
        :style="{ background: borderColor, left: `${hdLeft}rpx`, right: `${hdRight}rpx` }" class="fui-preview__border"
        :class="{ 'fui-preview__border-color': !borderColor }"
      />
    </view>
    <view :style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx`,paddingTop: `${tagPadding}rpx`,paddingBottom: `${tagPadding}rpx`}" >
      <slot name="tag" />
    </view>

    <view
      v-if="pvd[list] && pvd[list].length > 0" class="fui-preview__bd"
      :style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx` }"
    >
      <view v-for="(item, index) in pvd[list]" :key="index" class="fui-preview__item" :style="{ paddingTop: `${String(item[paddingTop]) || 8}rpx`,paddingBottom: `${String(item[paddingBottom]) || 8}rpx` }">
        <text
          class="fui-preview__label"
          :class="[!labelColor && !item[lColor] ? 'fui-preview__gray' : '', `fui-preview__label-${labelAlign}`]"
          :style="{ color: item[lColor] || labelColor, fontSize: `${bdSize}rpx`, width: labelWidth > 0 ? `${labelWidth}rpx` : 'auto', marginRight: `${labelRight}rpx` }"
        >
          {{ item[label] }}
        </text>
        <!-- #ifndef APP-NVUE -->
        <text
          class="fui-preview__value" :class="{ 'fui-preview__color': !bdColor && !item[valueColor] }"
          :style="{ color: item[valueColor] || bdColor, fontSize: `${bdSize}rpx`, textAlign: bdAlign }"
          @tap="itemClick(index)"
        >
          {{ item[value] }}
        </text>
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <view class="fui-preview__value-wrap">
          <text
            class="fui-preview__value" :class="{ 'fui-preview__color': !bdColor && !item[valueColor] }"
            :style="{ color: item[valueColor] || bdColor, fontSize: `${bdSize}rpx`, textAlign: bdAlign }"
            @tap="itemClick(index)"
          >
            {{ item[value] }}
          </text>
        </view>
        <!-- #endif -->
      </view>
    </view>
    <slot />
    <view
      v-if="pvd[buttons] && pvd[buttons].length > 0" class="fui-preview__ft"
      :style="{ 'border-top-color': borderColor }"
    >
      <view
        v-for="(btn, idx) in pvd[buttons]" :key="idx"
        :style="{ 'border-right-color': idx !== pvd[buttons].length - 1 ? borderColor : 'transparent' }"
        :class="[highlight ? 'fui-preview__hover-weex' : '', idx !== pvd[buttons].length - 1 ? 'fui-preview__btn-def' : 'fui-preview__btn']"
        :hover-class="highlight ? 'fui-preview_hover' : ''" :hover-stay-time="150" @tap="handleClick(idx)"
      >
      
        <fui-icon v-if="btn[icon] && !btn[customPrefix]" :name="btn[icon]" style="margin-right: 16rpx;" :color="btn[color] || fuiColor.primary" :size="btn[iconBtnSize] || iconSize" ></fui-icon>
        <fui-icon v-if="btn[icon] && btn[customPrefix]" :name="btn[icon]" style="margin-right: 16rpx;" :color="btn[color] || fuiColor.primary" :size="btn[iconBtnSize] || iconSize" custom-prefix="iconfont"></fui-icon>
        <text
          :style="{ fontSize: `${btnSize}rpx`, color: btn[color] || '#465CFF' }"
          :class="{ 'fui-preview__link': !btn[color] }"
        >
         {{ btn[text] }}
        </text>
      </view>
    </view>
  </view>
</template>

<style scoped>

.fui-preview__wrap {
  /* #ifndef APP-NVUE */
  width: 100%;
  border-top-width: 0;
  border-bottom-width: 0;
  /* #endif */
  flex: 1;
  position: relative;
  overflow: hidden;

  /* #ifdef APP-NVUE */
  border-top-width: 0.5px;
  border-top-style: solid;
  border-bottom-width: 0.5px;
  border-bottom-style: solid;
  /* #endif */
}

/* #ifndef APP-NVUE */
.fui-preview__background {
  background: var(--fui-bg-color, #FFFFFF) !important;
}

/* #endif */
.fui-preview__unlined {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

/* #ifndef APP-NVUE */
.fui-preview__wrap::before {
  top: 0;
  border-top: 1px solid var(--fui-color-border, #EEEEEE);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5)
}

.fui-preview__wrap::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}

.fui-preview__wrap::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}

.fui-preview__wrap::after {
  bottom: 0;
  border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5)
}

.fui-preview__unlined::before {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

.fui-preview__unlined::after {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

/* #endif */
.fui-preview__hd {
  position: relative;
  padding-top: 32rpx;
  padding-bottom: 8rpx;
  text-align: right;
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
  line-height: 56rpx;
}

.fui-preview__border {
  position: absolute;
  bottom: 0;
  /* #ifdef APP-NVUE */
  height: 0.5px;
  z-index: -1;
  /* #endif */
  /* #ifndef APP-NVUE */
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  transform-origin: 0 100%;
  z-index: 1;
  /* #endif */
}

/* #ifndef APP-NVUE */
.fui-preview__border-color {
  background: var(--fui-color-border, #EEEEEE) !important;
}

/* #endif */

/* #ifdef APP-NVUE */
.fui-preview__value-wrap {
  flex: 1;
}

/* #endif */
.fui-preview__value {
  text-align: right;
  /* #ifndef APP-NVUE */
  flex: 1;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
  /* #endif */
}

/* #ifndef APP-NVUE */
.fui-preview__color {
  color: var(--fui-color-title, #181818) !important;
}

/* #endif */

.fui-preview__value-hd {
  font-style: normal;
  font-size: 36rpx;
  flex: 1;
}

.fui-preview__bd {
  flex: 1;
  /* padding-top: 32rpx; */
  padding-top: 0rpx;
  padding-bottom: 32rpx;
  line-height: 48rpx;
  /* #ifndef APP-NVUE */
  box-sizing: border-box
    /* #endif */
}

.fui-preview__ft {
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
  position: relative;
  height: 100rpx;
  /* #ifdef APP-NVUE */
  border-top-width: 0.5px;
  border-top-style: solid;
  /* #endif */
  /* #ifndef APP-NVUE */
  display: flex;
  border-top-width: 0;
  /* #endif */
  flex-direction: row;
}

/* #ifndef APP-NVUE */
.fui-preview__ft::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid var(--fui-color-border, #EEEEEE);
  transform-origin: 0 0;
  transform: scaleY(.5)
}

/* #endif */

.fui-preview__item {
  padding: 8rpx 0;
  overflow: hidden;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  /* #ifdef APP-NVUE */
  align-items: flex-start;
  /* #endif */
}

.fui-preview__label {
  margin-right: 32rpx;
  /* #ifndef APP-NVUE */
  min-width: 112rpx;
  text-align: justify;
  flex-shrink: 0;
  /* #endif */
}

/* #ifndef APP-NVUE */
.fui-preview__label-right {
  text-align-last: right;
}

.fui-preview__label-justify {
  text-align-last: justify;
}

/* #endif */

/* #ifndef APP-NVUE */
.fui-preview__gray {
  color: var(--fui-color-subtitle, #7F7F7F) !important;
}

/* #endif */

.fui-preview__btn,
.fui-preview__btn-def {
  flex: 1;
  text-align: center;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

.fui-preview__btn-def {
  position: relative;
  /* #ifdef APP-NVUE */
  border-right-width: 0.5px;
  border-right-style: solid;
  /* #endif */
}

.fui-preview__link {
  /* #ifdef APP-NVUE */
  color: #465CFF !important;
  /* #endif */
  /* #ifndef APP-NVUE */
  color: var(--fui-color-link, #465CFF) !important;
  /* #endif */
}

/* #ifndef APP-NVUE */
.fui-preview__btn-def::after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid var(--fui-color-border, #eee);
  transform-origin: 100% 0;
  transform: scaleX(.5)
}


/* #endif */

/* #ifndef APP-NVUE */
.fui-preview_hover {
  background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important;
}

/* #endif */

/* #ifdef APP-NVUE */
.fui-preview__hover-weex:active {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/* #endif */
</style>
