<script>
export default {
  name: "fomItem",
  props: {
    data: {
      type: Object
    },
    name: {
      type: String
    },
    type: {
      type: String,
      default: 'media'
    },
    isShow: {
      type: Boolean,
      default: false
    },
    optionName: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {
      imageUrl: '',
      imageShow: false,
    }
  },
  methods: {
    showBigImage(imgUrl) {
      this.imageUrl = imgUrl;
      this.imageShow = true;
    },
    getString(value) {
      let typeStr = typeof value;
      if (typeStr === 'string') {
        return value;
      } else if (typeStr === 'object' || typeStr === 'array') {
        return value.join(',');
      }
    },
    getShowStatus(){
        console.log(this.name)
      if(!this.isShow){
        if(this.type === 'media' || this.type === 'text'){
          return (Object.keys(this.data).length>0);
        }else{
          return (this.data.value || this.data.option || this.data.remark || (typeof this.data.upload === 'object' && Object.keys(this.data.upload).length > 0))
        }
      }else{
        return true;
      }

    },
  },
}
</script>

<template>
  <view class="content-item service-end" v-if="getShowStatus()">
    <view class="item-title">
      <view class="title row"
            style="position:relative;justify-content: flex-start;width:100%;top:0;left:0;margin-bottom:30rpx;">
        <view class="value col" style="position: relative;text-align: left;">

          <!--        <u-text text="协议内容" size="38" color="#191919"></u-text>-->
          <view class="" style="position: relative;display:inline-block;">
            <view style="color:#191919;font-size:32rpx;display:inline-block;position: relative;z-index: 2;">
              {{ name }}：
            </view>
            <view class="background"
                  style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="item-content" v-if="type !== 'text'">
      <slot name="option">
        <view v-if="type !== 'media'">
          {{ getString(optionName !== 'value' ? data.option:(data.value?data.value +'次':'')) }}
        </view>
      </slot>
      <slot name="remark">
        <view v-if="type !== 'media'">
          {{ data.remark }}
        </view>
      </slot>
      <slot name="media">
        <view class="row">
          <view class="col-4" v-for="(item,index) in (this.type === 'media')?data:data.upload">
            <view class="item-image" v-if="item.type === 'image'">
              <u-image @click="showBigImage(item.url)" :src="item.url" mode="widthFix" width="100%"></u-image>
            </view>
            <view class="item-video" v-else>
              <video mode="aspectFill" :src="item.url"
                     style="width:100%;height:200rpx;border-radius: 16rpx;border:2rpx solid #262626;"></video>
            </view>
          </view>
        </view>
      </slot>
    </view>
    <view class="item-content" v-else>
      <view class="">
        {{data}}
      </view>
    </view>
  </view>
  <u-overlay :show="imageShow" @click="imageShow = false">
    <view class="" style="display:flex;align-items: center;justify-content:center;width:100%;height:100vh;">
      <u-image mode="widthFix" :src="imageUrl" height="auto" width="100vw"></u-image>
    </view>
  </u-overlay>
</template>

<style scoped lang="scss">

</style>