<template>
  <view>
    <view class="flex-col group">
      <!-- 只能使用v-if，fixed会影响observer -->
      <view class="justify-between header" v-if="showTitle">
        <text class="text">{{ factoryInfo.name || '-' }}</text>
        <view class="flex-row group_1">
          <text class="text_1">分享</text>
          <image src="/static/imgs/general/share-black-icon.png" class="image" />
        </view>
      </view>
      <Banner :list="swiperList" @share="popupShow">
        <image class="back" @click="back" src="/static/imgs/factory/back-icon.png"></image>
      </Banner>
      <view class="flex-col group_3">
        <view class="flex-col section_1">
          <view class="flex-col">
            <view class="justify-between">
              <text class="text_1">{{ factoryInfo.name || '-' }}</text>
              <view class="flex-row group_6" @click="editFactory">
                <text>修改</text>
                <image src="/static/imgs/general/left-arrow-blue-icon.png" class="image_2" />
              </view>
            </view>
            <view class="flex-col group_7">
              <view class="flex-row">
                <image src="/static/imgs/promotion/phone-blue-icon.png" class="image_3" />
                <text class="text_3">{{ factoryInfo.contactName || '-' }} {{ factoryInfo.contactMobile }}</text>
              </view>
              <view class="flex-row group_9">
                <image src="/static/imgs/promotion/address-icon.png" class="image_4" />
                <text class="text_4">{{ factoryInfo.locProvinceName + factoryInfo.locCityName + factoryInfo.locDistrictName + factoryInfo.locDetail }}</text>
              </view>
            </view>
          </view>
          <text class="text_5">
            {{ factoryInfo.factoryIntroduce || '-' }}
          </text>
        </view>
        <view class="flex-col line-tabs">
          <view class="flex-row group_10">
            <view class="flex-col items-center text_7" :style="{ color: curTab == 'device' ? 'rgb(0, 122, 255)' : '' }">
              <text @click="selectTab('device')">工厂设备</text>
              <view v-show="curTab == 'device'" class="section_2"></view>
            </view>
            <view class="flex-col items-center text_7" :style="{ color: curTab == 'production' ? 'rgb(0, 122, 255)' : '' }">
              <text @click="selectTab('production')">产品展示</text>
              <view v-show="curTab == 'production'" class="section_2"></view>
            </view>
          </view>
          <view v-if="curTab == 'device'">
            <view
              class="flex-col section_3"
              v-for="(item, index) in deviceList"
              :key="index"
              @click="go2('device-info', { id: item.id, operation: operation })"
            >
              <image mode="aspectFit" @click.stop="preview(item)" :src="item.imgItemList[0].url" class="image_5" />
              <view class="flex-col">
                <view class="justify-between group_13">
                  <text class="text_8">{{ item.name }}</text>
                </view>
                <text class="text_9">
                  {{ item.machineDescribe }}
                </text>
              </view>
            </view>
          </view>
          <view v-if="curTab == 'production'">
            <view class="grid">
              <view
                class="flex-col grid-item"
                v-for="production in productionList"
                :key="production.id"
                @click="go2('production-info', { id: production.id, operation: operation })"
              >
                <text>{{ production.name }}</text>
                <image mode="aspectFit" :src="production.imgItemList[0].url" class="image_7" />
              </view>
            </view>
          </view>
          <view class="observer">{{ hasMore ? '加载中～' : '没有更多～' }}</view>
        </view>
        <image v-if="operation == 'edit'" @click="addItem" src="/static/imgs/promotion/add-icon.png" class="image_6" />
      </view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="flex-col section_6">
        <text class="text_13">立即分享给好友</text>
        <view class="flex-col group_20">
          <view class="justify-between group_21">
            <view class="flex-col items-center" @click="shareFactory('WXSceneSession')">
              <image src="/static/imgs/general/session-share-icon.png" class="image_14" />
              <text class="text_14">微信好友</text>
            </view>
            <view class="flex-col group_23" @click="shareFactory('WXSceneTimeline')">
              <image src="/static/imgs/general/line-share-icon.png" class="image_15" />
              <text class="text_15">朋友圈</text>
            </view>
          </view>
          <view class="section_7"></view>
          <view class="flex-col items-center button" @click="popupHide">
            <text>取消</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import Banner from './Banner.vue'
import { go2, back } from '@/utils/hook.js'
import { getFactoryInfo } from '@/apis/factoryApi.js'
import { getEquipmentList } from '@/apis/deviceApi.js'
import { getProductionList } from '@/apis/productionApi.js'
import { fileType, H5_URL_FACTORY } from '@/enums/index.js'
export default {
  components: {
    Banner
  },
  data() {
    return {
      factoryId: null,
      operation: 'info',
      factoryInfo: {},
      swiperList: [],
      swiperCurrent: 0,
      curTab: 'device',
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      deviceList: [],
      productionList: [],
      observer: null,
      hasMore: false,
      showTitle: false
    }
  },
  watch: {
    curTab(val) {
      // 重置
      this.hasMore = false
      this.pagination.pageNum = 1
      this.getList()
    }
  },
  onLoad(options) {
    if (options.id) {
      this.factoryId = options.id
      this.operation = options.operation
    }
  },
  onShow() {
    this.getCompanyInfo()
    this.getList()
  },
  mounted() {
    this.observer = uni.createIntersectionObserver(this)
    // 手动监听元素出现在视口
    this.observer
      .relativeToViewport({
        bottom: 50
      })
      .observe('.observer', (res) => {
        if (res.intersectionRatio > 0 && this.hasMore) {
          this.pagination.pageNum++
          this.getList()
        }
      })
    let observerTitle = uni.createIntersectionObserver(this)
    observerTitle
      .relativeToViewport({
        bottom: 50
      })
      .observe('.text_1', (res) => {
        if (res.intersectionRatio > 0) {
          this.showTitle = false
        }
        if (res.intersectionRatio == 0) {
          this.showTitle = !this.showTitle
        }
      })
  },
  methods: {
    go2,
    back,
    editFactory() {
      go2('factory-operation', { id: this.factoryId, role: 'edit' })
    },
    getCompanyInfo() {
      getFactoryInfo({ id: this.factoryId }).then((res) => {
        if (res) {
          this.factoryInfo = res
          this.swiperList = res.imgItemList.map((item) => {
            if (item.type == fileType.IMG) {
              return {
                type: 'image',
                url: item.fileUrl
              }
            }
            if (item.type == fileType.VIDEO) {
              return {
                type: 'video',
                url: item.fileUrl,
                imageUrl: item.videoPicUrl
              }
            }
            return {}
          })
        }
      })
    },
    selectTab(tab) {
      this.pagination.pageNum = 1
      this.curTab = tab
    },
    // 获取列表
    getList() {
      if (this.curTab == 'device') {
        getEquipmentList({ ...this.pagination }).then((res) => {
          if (res) {
            if (res.current <= 1) {
              this.deviceList = res.records
            } else {
              this.deviceList = this.deviceList.concat(res.records)
            }
            this.hasMore = this.deviceList.length < res.total
          }
        })
      }
      if (this.curTab == 'production') {
        getProductionList({ ...this.pagination }).then((res) => {
          if (res) {
            if (res.current <= 1) {
              this.productionList = res.records
            } else {
              this.productionList = this.productionList.concat(res.records)
            }
            this.hasMore = this.productionList.length < res.total
          }
        })
      }
    },
    preview(device) {
      let urls = device.imgItemList.map((item) => {
        return item.url
      })
      uni.previewImage({
        current: 0,
        urls
      })
    },
    // 添加设备或产品
    addItem() {
      if (this.curTab == 'device') {
        go2('device-operation', { factoryId: this.factoryId, operation: 'add' })
      }
      if (this.curTab == 'production') {
        go2('production-operation', { factoryId: this.factoryId, operation: 'add' })
      }
    },
    popupShow() {
      this.$refs.popup.open('bottom')
    },
    popupHide() {
      this.$refs.popup.close()
    },
    shareFactory(scene) {
      uni.share({
        provider: 'weixin',
        type: 0,
        title: this.factoryInfo.name,
        summary: '印包客支持远程验厂，在线了解工厂',
        scene: scene, // WXSceneTimeline,WXSceneSession
        imageUrl: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/wx-share-store.png',
        href: H5_URL_FACTORY + `shareId=${this.factoryInfo.id}`,
        success: () => {
          console.log('分享成功')
        },
        fail: (err) => {
          console.log('err', err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.back {
  position: absolute;
  top: 68rpx;
  left: 20rpx;
  width: 66rpx;
  height: 66rpx;
}
.group {
  padding-bottom: 68rpx;
  flex: 1 1 auto;
  overflow-y: auto;
  height: 100vh; // 粘性定位的锚定元素
  .group_3 {
    margin-top: -40rpx;
    position: relative;
    .section_1 {
      padding: 32rpx 32rpx 20rpx;
      background-color: #fff;
      border-radius: 40rpx 40rpx 0px 0px;
      .text_5 {
        margin-right: 7rpx;
        margin-top: 48rpx;
        color: rgb(51, 51, 51);
        font-size: 26rpx;
        line-height: 37rpx;
        text-align: left;
      }
      .group_7 {
        margin-top: 18rpx;
        color: rgb(51, 51, 51);
        font-size: 26rpx;
        line-height: 37rpx;
        white-space: nowrap;
        .group_9 {
          margin-top: 12rpx;
          padding: 0 3rpx;
          .image_4 {
            margin: 3rpx 0 3rpx;
            width: 27rpx;
            height: 30rpx;
          }
          .text_4 {
            margin-left: 12rpx;
            width: 650rpx;
            white-space: break-spaces;
          }
        }
        .image_3 {
          margin: 4rpx 0 4rpx;
          width: 28rpx;
          height: 28rpx;
        }
        .text_3 {
          margin-left: 12rpx;
        }
      }
      .text_1 {
        width: 600rpx;
        color: rgb(0, 0, 0);
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        white-space: break-all;
      }
      .group_6 {
        margin: 7rpx 7rpx 7rpx 0;
        color: rgb(0, 122, 255);
        font-size: 26rpx;
        line-height: 37rpx;
        white-space: nowrap;
        .image_2 {
          margin: 9rpx 0 9rpx 15rpx;
          width: 10rpx;
          height: 18rpx;
        }
      }
    }
    .line-tabs {
      width: 750rpx;
      padding-bottom: 20rpx;
      .group_10 {
        position: sticky;
        top: 128rpx;
        z-index: 10;
        padding: 20rpx 38rpx;
        background-color: rgb(255, 255, 255);
        .section_2 {
          margin-top: 18rpx;
          background-color: rgb(0, 122, 255);
          border-radius: 3rpx;
          width: 80rpx;
          height: 6rpx;
        }
        .text_7 {
          margin-right: 32rpx;
          color: rgb(51, 51, 51);
          font-size: 28rpx;
          line-height: 40rpx;
          white-space: nowrap;
        }
      }
      .section_3 {
        margin: 20rpx 32rpx 0rpx;
        padding: 26rpx 0 25rpx 24rpx;
        filter: drop-shadow(0px 11rpx 23.5rpx #00000014);
        background-color: rgb(255, 255, 255);
        border-radius: 10rpx;
        .image_5 {
          background-color: rgb(0, 0, 0);
          margin-right: 24rpx;
          width: 638rpx;
          height: 390rpx;
        }
        .group_13 {
          margin-top: 20rpx;
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 600;
          line-height: 45rpx;
          white-space: nowrap;
          .text_8 {
            align-self: center;
          }
        }
        .text_9 {
          margin-top: 12rpx;
          margin-right: 40rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 32rpx;
          text-align: left;
        }
      }
    }
  }
  .image_6 {
    position: fixed;
    bottom: 160rpx;
    right: 32rpx;
    box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    width: 82rpx;
    height: 82rpx;
  }
}
.observer {
  width: 100%;
  display: flex;
  align-self: center;
  justify-content: center;
  padding: 20rpx 32rpx 20rpx;
  color: rgb(130, 132, 138);
  font-size: 32rpx;
}
.header {
  padding: 59rpx 35rpx 21rpx 38rpx;
  background-color: rgb(255, 255, 255);
  border-bottom: solid 1rpx rgb(221, 221, 221);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 128rpx;
  .text {
    color: rgb(0, 0, 0);
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
    white-space: nowrap;
  }
  .group_1 {
    margin: 7rpx 0 6rpx;
    color: rgb(51, 51, 51);
    font-size: 24rpx;
    line-height: 33rpx;
    white-space: nowrap;
    .text_1 {
      margin-bottom: 3rpx;
    }
    .image {
      margin-left: 14rpx;
      width: 37rpx;
      height: 37rpx;
    }
  }
}
.section_6 {
  padding-top: 40rpx;
  overflow: hidden;
  border-radius: 40rpx 40rpx 0px 0px;
  background-color: rgb(255, 255, 255);
  height: 408rpx;
  .text_13 {
    align-self: center;
    color: rgb(51, 51, 51);
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    white-space: nowrap;
  }
  .group_20 {
    margin-top: 40rpx;
    .group_21 {
      padding: 0 48rpx 32rpx;
      color: rgb(51, 51, 51);
      font-size: 24rpx;
      line-height: 33rpx;
      white-space: nowrap;
      .group_23 {
        width: 494rpx;
        .image_15 {
          width: 96rpx;
          height: 96rpx;
        }
        .text_15 {
          margin-left: 12rpx;
          margin-top: 16rpx;
        }
      }
      .image_14 {
        border-radius: 50%;
        width: 96rpx;
        height: 96rpx;
      }
      .text_14 {
        margin-top: 16rpx;
      }
    }
    .section_7 {
      background-color: rgb(247, 248, 250);
      height: 16rpx;
    }
    .button {
      padding: 26rpx 0;
      color: rgb(51, 51, 51);
      font-size: 32rpx;
      line-height: 45rpx;
      white-space: nowrap;
      background-color: rgb(255, 255, 255);
    }
  }
}
.grid {
  padding: 20rpx 32rpx 91rpx;
  width: 750rpx;
  color: rgb(31, 31, 31);
  font-size: 28rpx;
  font-weight: 500;
  line-height: 40rpx;
  white-space: nowrap;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 22rpx;
  grid-column-gap: 16rpx;
  .grid-item {
    padding: 24rpx 20rpx 20rpx;
    border-radius: 10rpx;
    filter: drop-shadow(0px 5rpx 11rpx #00000014);
    background-color: rgb(255, 255, 255);
    background-position: 0px 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .image_7 {
      margin-top: 20rpx;
      width: 296rpx;
      height: 296rpx;
    }
  }
}
</style>
