<script>
export default {
  name: "fomItem",
  props: {
    data: {
      type: [Object,String]
    },
    name: {
      type: String
    },
    type: {
      type: String,
      default: 'media'
    },
    isShow: {
      type: Boolean,
      default: false
    },
    optionName: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {
      imageUrl: '',
      imageShow: false,
      videoUrl: '',
      videoShow: false,
      showItem:false,
    }
  },
  mounted() {
    this.showItem = this.getShowStatus();
  },
  methods: {
    showBigImage(imgUrl) {
      this.imageUrl = imgUrl;
      this.imageShow = true;
      this.$emit('showBigImage',imgUrl)
    },
    showBigVideo(videoUrl) {
      this.videoUrl = videoUrl;
      this.videoShow = true;
      this.$emit('showBigVideo',videoUrl)
    },
    getString(value) {
      let typeStr = typeof value;
      if (typeStr === 'string') {
        return value;
      } else if (typeStr === 'object' || typeStr === 'array') {
        return value.join(',');
      }
    },
    getShowStatus(){
        if(!this.isShow){
          if(this.type === 'media'){
            return (Object.keys(this.data).length>0);
          }else if(this.type === 'text'){
            return 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="showItem">
    <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" :data="data">
        <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" style="padding:10rpx;" v-for="(item,index) in (this.type === 'media')?data:data.upload">
            <view class="item-image" v-if="item.type === 'image'">
              <u-image :lazy-load="true" @click="showBigImage(item.url)" :src="item.url" mode="aspectFill" width="100%"></u-image>
            </view>
            <view class="item-video" style="position: relative;" v-else>
              <u-image :lazy-load="true" @click="showBigVideo(item.url)" :src="item.thumb || ''" mode="aspectFill" width="100%"></u-image>
              <view class="" style="position: absolute;left:0;top:0;width:100%;height:100%;display: flex;align-items: center;justify-content: center;">
                <uv-icon @click="showBigVideo(item.url)" name="play-circle" color="#fff" size="80rpx"></uv-icon>
              </view>
            </view>
          </view>
        </view>
      </slot>
    </view>
    <view class="item-content" v-else>
      <view class="">
        {{data}}
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">

</style>