<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="产品信息"></uni-nav-bar>
    <view class="flex-col group_4">
      <view class="flex-col group_5">
        <view class="flex-col items-center group_6">
          <swiper class="swiper" @change="changeSwiper">
            <swiper-item v-for="(item, index) in info.imgItemList" :key="index">
              <image mode="aspectFit" :src="item.url" class="image" @click="preview(item.url)" />
            </swiper-item>
          </swiper>
          <view class="flex-col items-center text-wrapper">
            <text>{{ swiperCurrent + 1 }}/{{ info.imgItemList.length }}</text>
          </view>
        </view>
        <view class="flex-col section_1">
          <text class="text_5">{{ info.name || '产品' }}</text>
          <text class="text_6">
            {{ info.produceDescribe || '没有描述' }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getProductionInfo } from '@/apis/factoryApi.js'
export default {
  data() {
    return {
      info: { imgItemList: [] },
      id: null,
      swiperCurrent: 0
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
    }
  },
  onShow() {
    if (this.id) {
      getProductionInfo({ id: this.id }).then((res) => {
        if (res) {
          this.info = res
        }
      })
    }
  },
  methods: {
    go2,
    back,
    changeSwiper(e) {
      this.swiperCurrent = e.detail.current
    },
    preview(url) {
      let urls = info.imgItemList.map((img) => img.url)
      uni.previewImage({
        current: url,
        urls: urls
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .group_4 {
    flex: 1 1 auto;
    overflow-y: auto;
    .group_5 {
      .group_6 {
        width: 750rpx;
        height: 440rpx;
        .swiper {
          width: 100%;
          height: 100%;
          .image {
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0);
          }
        }
        color: rgb(255, 255, 255);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
        position: relative;

        .text-wrapper {
          background-color: rgba(0, 0, 0, 0.4);
          border-radius: 20rpx;
          width: 64rpx;
          position: absolute;
          right: 32rpx;
          bottom: 60rpx;
        }
      }
      .section_1 {
        margin-top: -40rpx;
        padding: 32rpx 30rpx 100rpx 32rpx;
        background-image: linear-gradient(
          180deg,
          rgb(255, 255, 255) 0%,
          rgb(255, 255, 255) 0%,
          rgb(253, 253, 254) 30.62%,
          rgba(247, 248, 250, 0) 100%,
          rgba(247, 248, 250, 0) 100%
        );
        border-radius: 40rpx 40rpx 0px 0px;
        position: relative;
        .text_5 {
          color: rgb(0, 0, 0);
          font-size: 36rpx;
          font-weight: 500;
          line-height: 50rpx;
          white-space: nowrap;
        }
        .text_6 {
          margin-top: 20rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 37rpx;
          text-align: left;
        }
      }
    }
  }
}
</style>
