<template>
  <view class="warpper">
    <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #ffffff">
      <view class="card-box" v-for="(item, index) in list" :key="index">
        <view class="header">
          <view class="title">{{ item.name }}</view>
          <view class="desc">
            <view class="bottom-btn" @tap="dropdownTap(index)">
              {{ dropdownName }}
              <!-- <uni-icons custom-prefix="iconfont" type="icon-required" size="16" color="#888888"></uni-icons> -->
              <uni-icons size="16" custom-prefix="iconfont" type="icon-m_dow_arrow" color="#888888"></uni-icons>
            </view>
            <view class="down-box" v-if="item.isShowSelect">
              <view class="row" v-for="(citem, cindex) in dropdownList" :key="cindex" @tap="dropdownItemTap(cindex)">
                <text :class="params.duration == cindex ? 'activeText' : ''">{{ citem }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="content">
          <view class="info">
            <view class="">
              <view class="value">{{ item.totalCapacity }}件</view>
              <view class="title">
                <image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
                设备产能
              </view>
            </view>
            <view class="">
              <view class="value">{{ item.totalTime }}h</view>
              <view class="title">
                <image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
                工作时长
              </view>
            </view>
            <view class="">
              <view class="value">{{ item.totalAvgStartingUp }}%</view>
              <view class="title">
                <image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
                开机率
              </view>
            </view>
          </view>
          <view class="shrink-box" v-if="item.collapse">
            <view class="row">
              <view class="left">
                <view class="title">设备图片：</view>
                <view class="look-over" @tap="previewImg(item.img, [item.img])">点击查看</view>
              </view>
              <view class="right">
                <view class="title">购买年份：</view>
                <view class="value">{{ item.purchasingDate }}年</view>
              </view>
            </view>
            <view class="row">
              <view class="left">
                <view class="title">购买金额：</view>
                <view class="value">{{ item.purchaseAmount }}万</view>
              </view>
              <view class="right">
                <view class="title">设备产能：</view>
                <view class="value">{{ item.capacity }}</view>
              </view>
            </view>
            <view class="row">
              <view class="left">
                <view class="title">成色：</view>
                <view class="value">{{ item.newnessDegree }}</view>
              </view>
              <view class="right">
                <view class="title">设备类型：</view>
                <view class="value">{{ item.machineTypeName }}</view>
              </view>
            </view>
            <view class="row">
              <view class="left">
                <view class="title">最大输纸 长度：</view>
                <view class="value">{{ item.inputMaxSizeLength }}mm</view>
              </view>
              <view class="right">
                <view class="title">最大输纸 宽度：</view>
                <view class="value">{{ item.inputMaxSizeWidth }}mm</view>
              </view>
            </view>
            <view class="row">
              <view class="left">
                <view class="title">最大输纸 厚度：</view>
                <view class="value">{{ item.inputMaxThickness }}mm</view>
              </view>
              <view class="right">
                <view class="title">咬口：</view>
                <view class="value">{{ item.lockSeam }}mm</view>
              </view>
            </view>
          </view>
        </view>
        <view class="see-more">
          <view class="" @tap="seemoreTap(index)">
            <text>设备详情</text>
            <image
              class="icon"
              :src="item.collapse ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"
            ></image>
          </view>
        </view>
        <uGap></uGap>
      </view>
    </scroll-list>
  </view>
</template>

<script>
import lvSelect from './lv-select.vue'
import uGap from '@/components/u-gap/u-gap.vue'
import { getDeviceInfo } from '@/apis/clientDetailApi.js'
export default {
  components: { lvSelect, uGap },
  data() {
    return {
      isShowSelect: false,
      dropdownList: ['近30天', '近7天', '今日', '全部'], // 0:近30天 1：近7天 2：今日 3：全部
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无设备信息~',
        background: '#F7F8FA',
        disabled: false,
        emptyImage: '/static/imgs/order/order-empty.png'
      },
      seemoreFlag: 0,
      params: {
        asc: '',
        desc: '',
        duration: '3',
        customerEnterpriseId: this.$store.state.supplierInfo.id || null // 客户企业ID默认为空，传值时网关获取当前用户关联企业id失效、
        // customerEnterpriseId: '651107734133018624',
      },
      pagination: {
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      list: []
    }
  },
  onLoad() {
    // this.getList()
  },
  computed: {
    dropdownName() {
      let text = '全部'
      switch (this.params.duration) {
        case 0:
          text = '近30天'
          break
        case 1:
          text = '近7天'
          break
        case 2:
          text = '今日'
          break
        case 3:
          text = '全部'
          break
        default:
          break
      }
      return text
    }
  },
  methods: {
    previewImg(img, list) {
      uni.previewImage({
        urls: list,
        current: img
      })
    },
    getList() {
      return new Promise((resolve, reject) => {
        getDeviceInfo({ ...this.params, ...this.pagination })
          .then((res) => {
            // console.log('设备信息', res.records)
            if (res) {
              res.records.forEach((el) => {
                el.collapse = false
                el.isShowSelect = false
              })
              if (this.pagination.pageNum == 1) {
                this.list = res.records
              } else {
                this.list = this.list.concat(res.records)
              }
              // this.list = []
              // this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]
              resolve({ list: this.list, total: res.total })
            } else {
              reject()
            }
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    seemoreTap(index) {
      this.list[index].collapse = !this.list[index].collapse
    },
    dropdownTap(index) {
      this.list[index].isShowSelect = !this.list[index].isShowSelect
      this.list.forEach((el, i) => {
        if (i !== index) {
          this.list[i].isShowSelect = false
        }
      })
    },
    dropdownItemTap(index) {
      this.params.duration = index
      this.downCallback()
    },
    downCallback() {
      this.pagination.pageNum = 1
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.refreshFail()
        })
    },
    upCallback() {
      this.pagination.pageNum++
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.loadSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.loadFail()
        })
    }
  }
}
</script>

<style lang="scss">
.warpper {
  .card-box {
    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 88rpx;
      background: #ffffff;
      padding: 0rpx 36rpx 0rpx 32rpx;
      .title {
        font-size: 30rpx;
        color: #000000;
        letter-spacing: 0;
        font-weight: 600;
      }
      .desc {
        font-size: 28rpx;
        color: #888888;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
        .bottom-btn {
          position: relative;
          z-index: 8;
        }
        .down-box {
          position: absolute;
          margin-top: 14rpx;
          text-align: center;
          right: 15rpx;
          z-index: 10;
          width: 204rpx;
          height: 218.9rpx;
          background: #ffffff;
          border-radius: 6rpx;
          padding: 0rpx 30rpx;
          .row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 54rpx;
            font-size: 22rpx;
            color: #323233;
            text-align: center;
            font-weight: 400;
            border-bottom: 1.6rpx solid #ebedf0;
          }
          .activeText {
            color: #007aff;
          }
        }
        .down-box::before {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border-bottom: solid 12rpx #ffffff;
          border-right: solid 12rpx transparent;
          border-left: solid 12rpx transparent;
          left: 80%;
          top: -12rpx;
          margin-left: -12rpx;
        }
      }
    }
    .content {
      border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
      border-top: 2rpx solid rgba(221, 221, 221, 0.5);
      .info {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        height: 148rpx;
        background: #ffffff;
        .value {
          font-size: 28rpx;
          color: #333333;
          letter-spacing: 0;
          text-align: center;
          font-weight: 500;
        }
        .title {
          margin-top: 16rpx;
          font-size: 24rpx;
          color: #888888;
          letter-spacing: 0;
          text-align: center;
          font-weight: 400;
          display: flex;
          flex-direction: row;
          align-items: center;
        }
        .icon {
          width: 32rpx;
          height: 32rpx;
          padding-right: 6rpx;
        }
      }
      .shrink-box {
        background: #f7f8fa;
        padding: 8rpx 36rpx 16rpx 32rpx;
        .row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 16rpx;
          .left {
            display: flex;
            flex-direction: row;
            width: 60%;
          }
          .right {
            display: flex;
            flex-direction: row;
            width: 40%;
          }
          .title {
            flex: 0 0 140rpx;
            font-size: 28rpx;
            color: #888888;
            letter-spacing: 0;
            font-weight: 400;
          }
          .value {
            font-size: 28rpx;
            color: #333333;
            letter-spacing: 0;
            font-weight: 400;
          }
          .look-over {
            font-size: 28rpx;
            color: #007aff;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }
    }
    .see-more {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      line-height: 80rpx;
      background: #ffffff;
      padding: 0rpx 32rpx;
      font-size: 28rpx;
      color: #007aff;
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
      .icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}
</style>
