<template>
  <view class="content">
    <view class="top-area">
      <image class="bg" src="/static/imgs/mine/mine-top-bg.png"></image>
      <view class="operation-area">
        <view class="user">
          <image class="avatar" :src="curAvatar"></image>
          <view v-if="!hasLogin" @click="go2('login')">
            <view>
              <text style="font-size: 40rpx; color: #fff; font-weight: 600">点击登录</text>
            </view>
            <view style="margin-top: 10rpx">
              <text style="font-size: 26rpx; color: #fff; font-weight: 400">登录解锁更全功能</text>
            </view>
          </view>
          <view v-else>
            <view class="user__name">
              <text class="name">{{ userInfo.name }}</text>
              <image v-if="userInfo.fddEnterpriseStatus === fddStatus.CERTIFIED_SUCCESS" class="image" src="/static/imgs/mine/certified-icon.png"></image>
              <image v-else class="image" @click="certifyCompany()" src="/static/imgs/mine/non-certified-icon.png"></image>
            </view>
            <view style="margin-top: 16rpx; width: 380rpx">
              <text style="font-size: 26rpx; color: #fff; font-weight: 400; word-break: break-all" @click="jumpEnterpriseEdit">
                {{ hasCompany ? userInfo.companyName : '点击完善企业信息' }}
              </text>
            </view>
          </view>
        </view>
        <image v-if="hasLogin" src="/static/imgs/general/setting-icon.png" @click="go2('setting')" class="image_3" />
        <!-- <view  class="logout" @click="logout">
          <text class="text">退出登录</text>
          <image class="icon" src="/static/imgs/mine/logout-icon.png"></image>
        </view> -->
      </view>
    </view>
    <view class="card-area">
      <view class="header">
        <text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">我的设备</text>
      </view>
      <view class="flex-row justify-between equal-division_1">
        <view class="flex-col items-center equal-division-item">
          <text class="text_13">{{ deviceInfo.totalNum }}</text>
          <text class="text_14">设备总数(台)</text>
        </view>
        <view class="flex-col items-center equal-division-item">
          <text class="text_13">{{ deviceInfo.workingNum }}</text>
          <text class="text_14">工作中(台)</text>
        </view>
        <view class="flex-col items-center equal-division-item">
          <text class="text_13">{{ deviceInfo.freeNum }}</text>
          <text class="text_14">空闲(台)</text>
        </view>
      </view>
    </view>
    <!-- <view class="card-area" v-if="fsInfo.status !== -1" style="border-radius: 16rpx">
      <image
        class="poster"
        v-if="fsInfo.status == fsAuditStatus.WAIT_APPLY || fsInfo.status == fsAuditStatus.REJECT"
        src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-to-apply.png"
        @click="applyForFinance()"
      ></image>
      <image
        class="poster"
        v-if="fsInfo.status == fsAuditStatus.AUDITING"
        src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-applying.png"
      ></image>
      <view class="header" v-if="fsInfo.status == fsAuditStatus.PASS">
        <text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">飞算资金</text>
        <view class="item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })">
          <text style="font-size: 26rpx; color: rgba(0, 0, 0, 0.65)">查看明细</text>
          <uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons>
        </view>
      </view>
    </view> -->
    <view class="card-area">
      <view class="header">
        <text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">其他工具</text>
      </view>
      <view class="icon-area">
        <view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })">
          <image class="icon" src="/static/imgs/mine/order-icon.png"></image>
          <text class="label">全部订单</text>
        </view>
        <view class="icon-item" @click="loginGo2('enquiry-list')">
          <image class="icon" src="/static/imgs/mine/enquiry-icon.png"></image>
          <text class="label">询价结果</text>
        </view>
        <view class="icon-item" @click="loginGo2('contract-manage')">
          <image class="icon" src="/static/imgs/mine/contract-icon.png"></image>
          <text class="label">合同管理</text>
        </view>
        <view class="icon-item" @click="loginGo2('apply-manage')">
          <image class="icon" src="/static/imgs/mine/apply-manage-icon.png"></image>
          <text class="label">验厂申请</text>
        </view>
        <view class="icon-item" @click="loginGo2('employee-manage')">
          <image class="icon" src="/static/imgs/mine/icon-employe.png"></image>
          <text class="label">员工管理</text>
        </view>
        <view class="icon-item" @click="loginGo2('address-manage')">
          <image class="icon" src="/static/imgs/mine/enterprise-icon.png"></image>
          <text class="label">地址管理</text>
        </view>
        <view class="icon-item" @click="cancelAccount">
          <image class="icon" src="/static/imgs/mine/cancel-account-icon.png"></image>
          <text class="label">账号注销</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, loginGo2, exit } from '@/utils/hook.js'
import { fddEnterpriseStatus, fsAuditStatus, orderStatusEnum, enterpriseType } from '@/enums/index.js'
import { getVerifyUrl, getFsCredit, getBaseInfo, getFeisuanUrl, cancelAccount } from '@/apis/commonApi.js'
import { getDeviceStatistics } from '@/apis/mineApi'

export default {
  data() {
    return {
      fddStatus: Object.freeze(fddEnterpriseStatus),
      fsInfo: {
        status: -1, // 初始不存在
        availableCreditLine: 0,
        usedCreditLine: 0,
        creditLine: 0
      },
      deviceInfo: {
        totalNum: 0,
        workingNum: 0,
        freeNum: 0
      },
      fsAuditStatus: Object.freeze(fsAuditStatus),
      orderStatusEnum: Object.freeze(orderStatusEnum)
    }
  },
  methods: {
    logout() {
      exit()
    },
    loginGo2,
    cancelAccount() {
      uni.showModal({
        title: '提示',
        content: '注销账号会删除账号下相关信息，请谨慎操作！',
        confirmText: '确定注销',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            cancelAccount().then((res) => {
              if (res) {
                this.logout()
              }
            })
          }
        }
      })
    },
    // 企业法大大实名认证
    certifyCompany() {
      if (!this.hasCompany) {
        uni.showToast({
          title: '您还没有企业信息，请先完善企业信息',
          icon: 'none'
        })
        return
      }
      if (
        [fddEnterpriseStatus.UNCERTIFIED, fddEnterpriseStatus.CERTIFIED_ING, fddEnterpriseStatus.CERTIFIED_FAIL].includes(this.userInfo.fddEnterpriseStatus)
      ) {
        getVerifyUrl({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => {
          if (res) {
            console.log('res:', res)
            // #ifdef APP-PLUS
            go2('page-view', {
              title: '实名认证',
              url: encodeURIComponent(res)
            })
            // #endif
            // #ifdef H5
            window ? (window.location.href = res) : ''
            // #endif
          }
        })
      }
      if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED) {
        uni.showToast({
          title: '认证中，请稍后~',
          icon: 'none'
        })
      }
    },
    go2,
    applyForFinance() {
      getFeisuanUrl().then((res) => {
        if (res) {
          // #ifdef APP-PLUS
          go2('page-view', {
            title: '飞算申请',
            url: encodeURIComponent(res)
          })
          // #endif
          // #ifdef H5
          window ? (window.location.href = res) : ''
          // #endif
        }
      })
    },
    jumpEnterpriseEdit() {
      if (!this.hasCompany) {
        loginGo2('enterprise-info')
      } else {
        if (this.$store.state.companyInfo.enterpriseType === enterpriseType.PRINT_PACKAGE_FACTORY) {
          loginGo2('enterprise-info-edit')
        }
      }
    }
  },
  computed: {
    vipExpireTime() {
      if (this.$store.state.companyInfo.vipExpireTime) {
        return this.$store.state.companyInfo.vipExpireTime.substr(0, 10)
      }
      return ''
    },
    isVip() {
      return this.$store.state.companyInfo.isVip
    },
    hasLogin() {
      return this.$store.state.qnToken != ''
    },
    curAvatar() {
      if (!this.hasLogin) {
        return '/static/imgs/mine/user-avatar.png'
      }
      if (this.userInfo.avatar) {
        return this.userInfo.avatar
      } else {
        return '/static/imgs/mine/default-avatar.png'
      }
    },
    userInfo() {
      return {
        avatar: this.$store.state.userInfo.avatar || '',
        name: this.$store.state.userInfo.name || this.$store.state.userInfo.mobile || '',
        companyName: this.$store.state.companyInfo.name || '',
        fddEnterpriseStatus: this.$store.state.companyInfo.fddEnterpriseStatus || 1
      }
    },
    hasCompany() {
      return this.$store.state.companyInfo.id != null
    }
  },
  onShow() {
    this.hasLogin &&
      getFsCredit({
        enterpriseId: this.$store.state.companyInfo.id
      }).then((res) => {
        if (res) {
          this.fsInfo = res
        }
      })
    this.hasLogin && getBaseInfo({}, true)
    !this.hasLogin && (this.fsInfo.status = -1)
    this.hasCompany &&
      getDeviceStatistics().then((res) => {
        if (res) {
          this.deviceInfo = res
        }
      })
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 750rpx;
}
.top-area {
  width: 750rpx;
  height: 308rpx;
  overflow: hidden;
  position: relative;
  .bg {
    width: 750rpx;
    height: 380rpx;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .operation-area {
    width: 750rpx;
    margin: 96rpx 0 36rpx;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    .image_3 {
      margin-left: 24rpx;
      width: 36rpx;
      height: 40rpx;
      z-index: 10;
    }
    .user {
      max-width: 550rpx;
      z-index: 5;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      .avatar {
        width: 156rpx;
        height: 156rpx;
        border-radius: 50%;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        margin-right: 16rpx;
      }
      .user__name {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        .name {
          font-size: 38rpx;
          color: #fff;
          font-weight: 600;
          margin-right: 16rpx;
          word-break: break-all;
        }
        .image {
          width: 100rpx;
          height: 32rpx;
          flex-grow: 0;
          flex-shrink: 0;
        }
      }
    }
    .logout {
      z-index: 5;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      flex-grow: 0;
      flex-shrink: 0;
      .text {
        font-size: 24rpx;
        color: #ffffff;
      }
      .icon {
        margin-left: 8rpx;
        width: 24rpx;
        height: 24rpx;
        flex-grow: 0;
        flex-shrink: 0;
      }
    }
  }
}
.card-area {
  width: 686rpx;
  margin: 20rpx 32rpx 0;
  background-color: #fff;
  box-shadow: 0 2rpx 14rpx 0 rgba(220, 220, 220, 0.5);
  border-radius: 10rpx;
  .header {
    padding: 20rpx 24rpx 14rpx;
    border-bottom: 2rpx solid #f8f8f8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      .icon {
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: 10rpx;
      }
      .text {
        font-size: 30rpx;
        color: rgba(0, 0, 0, 0.85);
        letter-spacing: 1.5rpx;
        font-weight: 600;
      }
    }
  }
}
.equal-division_1 {
  padding: 32rpx 32rpx 40rpx;
  align-self: center;
  .equal-division-item {
    flex: 1 1 auto;
    .text_13 {
      color: rgb(0, 0, 0);
      font-size: 36rpx;
      font-weight: 500;
      line-height: 50rpx;
      white-space: nowrap;
    }
    .text_14 {
      margin-top: 7rpx;
      color: rgb(102, 102, 102);
      font-size: 26rpx;
      line-height: 37rpx;
      white-space: nowrap;
    }
  }
}
.order-area {
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.icon-area {
  padding: 40rpx 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 32rpx 36rpx;
  .icon {
    width: 68rpx;
    height: 68rpx;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .label {
    font-size: 26rpx;
    color: #666666;
    margin-top: 10rpx;
  }
}
.poster {
  width: 686rpx;
  height: 140rpx;
}
.fs-card {
  width: 686rpx;
  padding: 24rpx 32rpx 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  .left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    .pre {
      font-size: 36rpx;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
    }
    .next {
      font-size: 56rpx;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 700;
    }
  }
  .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-size: 32rpx;
    color: #333333;
    font-weight: 500;
  }
}
</style>
