<template>
  <view :class="['doc-wrap', { 'order-file': orderFile }]">
    <u-navbar
      back-icon-color="#333333"
      background="#FFFFFF"
      title="安装文件"
      titleColor="#333333"
      :border-bottom="false"
      title-bold
    ></u-navbar>
    <template v-if="!orderFile">
      <!-- 合作商、品牌标签列表 -->
      <view v-for="(item, key) in labels" :key="key" class="label-list">
        <view class="label-title">
          <!-- 合作商或品牌 -->
          <view>{{ items[key] }}</view>
          <!-- 跳转到所有标签页面的更多按钮 -->
          <view
            class="label-file-right"
            @click="handleMore(key)"
            v-if="item.length > 3"
          >
            <text class="label-right-text">更多</text>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <scroll-view
          scroll-x="true"
          class="label-content"
          :scroll-into-view="scrollId[key]"
        >
          <view
            v-for="(label, ind) in item"
            :key="ind"
            class="label-item"
            :id="idText + label.id"
          >
            <!-- 选中为蓝底，非选中状态为灰底 -->
            <view
              :class="[
                'label-normal',
                { selected: label.id == selected[key].id },
              ]"
              @click="handleClick(key, label)"
            >
              <text class="label-text u-line-2">{{ label.name }}</text>
            </view>
          </view>
          <!-- 标签加载中 -->
          <view class="tag-loading-view" v-if="tapLoading[key]">
            <u-loading mode="flower"></u-loading>
          </view>
          <!-- 无供应商、无品牌 -->
          <view class="tag-tip-view" v-else-if="item.length <= 0">{{
            '暂无' + items[key]
          }}</view>
        </scroll-view>
      </view>
    </template>
    <view class="file-title">文件列表</view>
    <view class="file-list">
      <!-- 文件列表 -->
      <view class="file-row" v-for="(item, index) in list" :key="index">
        <view class="file-left">
          <view class="file-name">
            <u-icon
              class="item-icon"
              name="doc"
              custom-prefix="wxh"
              size="52"
              color="#2272FF"
            ></u-icon>
            <!-- 文件后缀的首字母，大写 -->
            <view class="file-format-text">{{ formatText(item.name) }}</view>
          </view>

          <text>{{ item.name }}</text>
        </view>
        <!-- 文件操作按钮 -->
        <view class="file-right">
          <u-button
            :custom-style="shareStyle"
            shape="circle"
            @click="handleShare(item)"
            >分享</u-button
          >
          <u-button
            :custom-style="previewStyle"
            shape="circle"
            @click="handlePreview(item)"
            >查看</u-button
          >
        </view>
      </view>
      <!-- 如果是加载中，就显示转圈；如果加载完成 -->
      <view class="loading-view" v-if="loading">
        <u-loading mode="flower"></u-loading>
      </view>
      <!-- 加载完成之后，没有数据的提示：未选择品牌提示、无文件提示 -->
      <view class="tip-view" v-else-if="list.length <= 0">{{ tipText }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 文件列表
      firstLoad: true, // 初次加载
      labels: {
        // 标签列表
        '1': [], // 合作商标签列表
        '2': [], // 品牌标签列表
      },
      selected: {
        // 选中的标签
        '1': {}, // 选中的合作商
        '2': {}, // 选中的品牌
      },
      scrollId: {
        '1': '', // 选中的合作商view的id
        '2': '', // 选中的品牌view的id
      },
      loading: false, // 文件列表加载中
      tapLoading: {
        '1': true, // 合作商加载中
        '2': true, // 品牌加载中
      },
      orderFile: false, // 是否是订单详情进来
      fileList: {}, // 文件地址缓存 {url最后一段： tmpPath}
    }
  },
  computed: {
    // 合作商的key是'1'，品牌的key是'2'
    items() {
      return {
        '1': '合作商',
        '2': '品牌',
      }
    },
    // 分享按钮风格
    shareStyle() {
      return {
        marginRight: '10rpx',
        width: '100rpx',
        height: '52rpx',
        background: '#FFFFFF',
        color: '#2272FF',
        fontSize: '24rpx',
        fontWeight: '400',
        lineHeight: '52rpx',
      }
    },
    // 查看按钮风格
    previewStyle() {
      return {
        width: '100rpx',
        height: '52rpx',
        background: '#2272FF',
        color: '#FFFFFF',
        fontSize: '24rpx',
        fontWeight: '400',
        lineHeight: '52rpx',
      }
    },
    // 文件列表文件图片
    wenjianImage() {
      return process.uniEnv.qn_base_url + 'wenjian-bk.png'
    },
    // 列表无数据的提示文字
    tipText() {
      return this.selected['2'].name || this.orderFile
        ? '暂无文件'
        : '请选择品牌'
    },
    idText() {
      return 'item'
    },
  },
  onLoad(e) {
    if (e && e.partnerCompanyId && e.brandId) {
      // 订单详情进来获取指定合作商和品牌的文件资料
      this.orderFile = true
      this.loadFileList(e.partnerCompanyId, e.brandId)
    } else {
      // 获取所有文件资料
      this.loadFileLabel('1')
    }
    this.fileList = getApp().globalData.fileList || {} // 文件地址缓存 {url最后一段： tmpPath}
  },
  onShow() {
    // 从标签列表页面返回，获取选中的标签
    let pages = getCurrentPages()
    let page = pages[pages.length - 1]
    let selectedItem = page.selectedItem
    if (selectedItem) {
      page.selectedItem = null
      for (var item of this.labels[selectedItem.type]) {
        if (item.id == selectedItem.id) {
          this.handleClick(selectedItem.type, item)
          this.scrollId[selectedItem.type] = this.idText + selectedItem.id
          return
        }
      }
    }
  },
  methods: {
    // 选中标签
    handleClick(key, label) {
      this.selected[key] = label
      this.scrollId[key] = ''
      if (key == '1') {
        // 合作商
        this.selected['2'] = {} // 清空选中品牌标签
        this.list = [] // 清空文件列表
        this.loadFileLabel('2', label.id) // 获取新合作商对应品牌
      } else {
        // 品牌
        this.loadFileList(this.selected['1'].id, this.selected['2'].id) // 获取文件列表
      }
    },
    // 跳转到所有标签
    handleMore(key) {
      var partnerCompanyId = '' // 合作商id
      if (key == '2') {
        // 点击品牌的更多，跳转要传合作商id
        partnerCompanyId = this.selected['1'].id
      }
      this.$u.route({
        url:
          'pages/order/document-tag' +
          '?partnerCompanyId=' +
          partnerCompanyId +
          '&selectedId=' +
          this.selected[key].id,
      })
    },
    // 点击了分享
    handleShare(item) {
      // 分享资料事件
      getApp().track('share_document', {
        id: this.vuex_user.id,
        url: item.url,
      })
      let filePath = this.fileList[(item.url || '').split('/').pop()]
      if (filePath) {
        // 有下载记录
        wx.shareFileMessage({
          // 如果用checkFile检查文件是否存在后再分享，shareFileMess报错：shareFileMessage:fail can only be invoked by user TAP gesture.
          filePath: filePath,
          fileName: item.name,
          success() {},
          fail: (error) => {
            console.log(error)
            if (error.errMsg.indexOf('internal') != -1) {
              // 文件不存在重新下载
              this.downloadFile(item.url, (result) => {
                wx.shareFileMessage({
                  filePath: result.tempFilePath,
                  fileName: item.name,
                  success() {},
                  fail: console.error,
                })
              })
            }
          },
        })
      } else {
        // 无下载记录
        this.downloadFile(item.url, (res) => {
          // 下载
          wx.shareFileMessage({
            filePath: res.tempFilePath,
            fileName: item.name,
            success() {},
            fail: console.error,
          })
        })
      }
    },
    // 点击了查看
    handlePreview(item) {
      // 查看资料事件
      getApp().track('preview_document', {
        id: this.vuex_user.id,
        url: item.url,
      })
      let filePath = this.fileList[(item.url || '').split('/').pop()]
      if (filePath) {
        // 有下载记录
        this.checkFile(filePath, (res) => {
          // 文件是否还存在
          if (res.size && res.size > 0) {
            // 存在，预览文件
            this.previewFile(filePath)
          } else {
            // 文件已经不存在, 下载
            this.downloadFile(item.url, (result) => {
              this.previewFile(result.tempFilePath)
            })
          }
        })
      } else {
        // 无下载记录
        this.downloadFile(item.url, (res) => {
          // 下载
          this.previewFile(res.tempFilePath)
        })
      }
    },
    // 缓存文件是否存在
    checkFile(filePath, complete) {
      uni.getFileInfo({
        filePath: filePath,
        complete: complete,
      })
    },
    // 下载文件
    downloadFile(url, block) {
      uni.showLoading({
        title: '加载中',
      })
      uni.downloadFile({
        url: url,
        success: (res) => {
          uni.hideLoading()
          this.fileList[url.split('/').pop()] = res.tempFilePath
          block(res)
        },
      })
    },
    // 预览文件
    previewFile(filePath) {
      if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) {
        // 查看图片
        wx.previewImage({
          current: filePath, // 当前显示图片的http链接
          urls: [filePath], // 需要预览的图片http链接列表
        })
      } else {
        // 查看文件
        uni.openDocument({
          filePath: filePath,
          success: function(res) {
            console.log('打开文档成功')
          },
        })
      }
    },
    // 获取合作商或品牌列表
    async loadFileLabel(type, partnerCompanyId) {
      this.tapLoading[type] = true
      let param = {
        type: type, // 1:合作商标签，2：品牌标签
      }
      if (type == '2') {
        param.partnerCompanyId = partnerCompanyId // 合作商的标签id
      }
      let res = await this.$u.api.fileLabel(param)
      this.tapLoading[type] = false
      if (res && res.code == 200) {
        this.labels[type] = res.data || []

        // this.labels[type] = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据

        // 初次进入页面，获取完合作商列表之后，接着获取第一个合作商的品牌列表
        if (this.firstLoad && type == '1') {
          this.firstLoad = false
          if (this.labels[type].length > 0) {
            this.selected[type] = this.labels[type][0]
            this.loadFileLabel('2', this.selected[type].id)
          }
        }
      }
    },
    // 获取文件列表
    async loadFileList(partnerCompanyId, brandId) {
      this.loading = true
      let res = await this.$u.api.fileList({
        partnerCompanyId: partnerCompanyId, // 合作商标签
        brandId: brandId, // 品牌标签
      })
      this.loading = false
      if (res && res.code == 200) {
        this.list = res.data || []

        // this.list = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据
      }
    },
    // 文件后缀的首字母，大写
    formatText(name) {
      let arr = name.split('.')
      if (arr.length > 1) {
        let item = arr.pop()
        return item.substr(0, 1).toUpperCase()
      } else {
        return 'P'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.doc-wrap {
  background-color: #f4f5f7;
  height: 100vh;
  display: flex;
  flex-direction: column;

  &.order-file {
    background-color: #ffffff;
  }

  .label-list {
    padding: 0 0 40rpx 30rpx;

    .label-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .label-file-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #2272ff;
        font-size: 26rpx;
        padding-right: 30rpx;

        .label-right-text {
          font-weight: 400;
        }
      }
    }

    .label-content {
      width: 100%;
      height: 104rpx;
      white-space: nowrap;
      .label-item {
        overflow: hidden;
        padding-right: 20rpx;
        flex-shrink: 0;
        display: inline-block;
        .label-normal {
          height: 104rpx;
          width: 200rpx;
          font-size: 26rpx;
          color: #666666;
          background-color: #ffffff;
          border-radius: 8rpx;
          padding-left: 20rpx;
          padding-right: 20rpx;
          text-align: center;
          // display: flex;
          // justify-content: center;
          // align-items: center;
          display: table;
          .label-text {
            word-break: break-all;
            white-space: normal !important;
            display: table-cell;
            vertical-align: middle;
          }
          &.selected {
            color: #ffffff;
            background-color: #2272ff;
          }
        }
      }
      .tag-loading-view {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20rpx;
        position: absolute;
        padding-right: 30rpx;
      }
      .tag-tip-view {
        color: #999999;
        width: 100%;
        margin-top: 30rpx;
        text-align: center;
        position: absolute;
        padding-right: 30rpx;
      }
    }
  }
}

.file-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  padding: 20rpx 30rpx;
  border-radius: 32rpx;
  background-color: #ffffff;
  // margin-top: 10rpx;
}

.file-list {
  padding: 0 30rpx;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;

  .file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10rpx;
    margin-bottom: 50rpx;

    .file-left {
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 26rpx;

      .file-name {
        margin-right: 20rpx;
        position: relative;
        .item-icon {
          position: absolute;
        }
        .file-format-text {
          position: relative;
          width: 52rpx;
          height: 52rpx;
          text-align: center;
          font-size: 32rpx;
          font-weight: bold;
          color: #ffffff;
          line-height: 52rpx;
        }
      }
    }

    .file-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .button-class {
        margin-left: 10rpx;
      }
    }
  }

  .tip-view {
    color: #999999;
    width: 100%;
    margin-top: 200rpx;
    text-align: center;
  }

  .loading-view {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 200rpx;
  }
}
</style>
