<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 填写申请资料 -->
    <backBar v-if="!appFlag" :title="$t('join.l40')"/>
    <div class="page">
      <div class="title">
        <!-- 证明您的影响力 立即赚取每日收益 -->
        {{ $t('join.l41') }}
      </div>
      <div class="uid-box flex">
        <div>
          <!-- 您的极度账号UID： -->
          {{ $t('join.l42') }}
        </div>
        <div class="uid">
          {{ uid }}
        </div>
      </div>
      <div class="textarea-box">
        <div class="label">
          <!-- 请说明您的推广优势： -->
          {{ $t('join.l43') }}
        </div>
        <!-- 请用尽量简单的话说明您的优势，500字以内 -->
        <van-field
          v-model="advantage"
          rows="3"
          type="textarea"
          maxlength="500"
          :placeholder="$t('join.l44')"
          show-word-limit
        />
      </div>
      <div class="section">
        <div class="label">
          <!-- 影响力证明（请选择最有影响力的一项填写） -->
          {{ $t('join.l45') }}
        </div>
        <van-row gutter="9">
          <van-col span="6" v-for="item in typeList" :key="item.code">
            <div class="item flex" :class="{active: type == item.code}" @click="type = item.code">{{ item.name }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="input-box" v-if="type == 'Other'">
        <div class="label">
          <!-- 请输入平台名称 -->
          {{ $t('join.l46') }}
        </div>
        <van-field v-model="platform" placeholder="" />
      </div>
      <div class="input-box" v-if="type != 'TikTok' && type != '抖音' && type != 'Other'">
        <div class="label">
          <!-- 请输入主页链接 -->
          {{ $t('join.l47') }}
        </div>
        <van-field v-model="link" placeholder="" />
      </div>
      <div class="input-box">
        <div class="label">
          <!-- 请填写粉丝数量 -->
          {{ $t('join.l48') }}
        </div>
        <van-field type="digit" v-model="fans" placeholder="" />
      </div>
      <div class="input-box">
        <div class="label">
          <!-- 请上传证明截图 -->
          {{ $t('join.l49') }}
        </div>
        <div class="img-box">
          <van-uploader :after-read="afterRead" result-type="file">
            <div class="upload-box flex">
              <img class="add" src="/img/join/add.png" alt="极度证券">
            </div>
          </van-uploader>
          <div :class="'img' + ((index+1)%5)" v-for="(item, index) in fileList" :key="index">
            <div class="img">
              <img class="close" src="/img/join/close.png" @click="deleteFile(index)" alt="极度证券">
              <van-image
                width="61"
                height="61"
                radius="6"
                fit="contain"
                :src="item"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
          </div>
        </div>
      </div>
      <div class="btn" :class="{dis: status==1}" @click="insertAgent">
        <!-- 提交申请 -->
        {{ $t('join.l50') }}
      </div>
      <div class="text" v-if="status != 1">
        <div class="radius"></div>
        <div>
          <!-- 申请成为极度合伙人，表示您将同意并遵循极度合伙人的一切条款 -->
          {{ $t('join.l51') }}
        </div>
      </div>
      <div class="text">
        <div class="radius"></div>
        <div v-if="status == 1">
          <!-- 您已提交过申请，申请结果将在3个工作日内，通过系统消息通知您，请耐心等待。 -->
          {{ $t('join.l52') }}
        </div>
        <div v-else>
          <!-- 申请结果将在3个工作日内，通过系统消息通知您 -->
          {{ $t('join.l53') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import backBar from '@/components/backBar'
import { insertAgent, getAgent } from "@/api/user";
export default {
  components: {
    backBar
  },
  data () {
    return {
      advantage: '',
      platform: '',
      link: '',
      fans: '',
      uid: '',
      status: '',
      type: 'X',
      fileList: [],
      typeList: [
        {
          name: 'X',
          code: 'X'
        },
        {
          name: 'Facebook',
          code: 'Facebook'
        },
        {
          name: this.$t('join.l56'),
          code: '公众号'
        },
        {
          name: this.$t('join.l57'),
          code: '抖音'
        },
        {
          name: 'YouTube',
          code: 'YouTube'
        },
        {
          name: 'TikTok',
          code: 'TikTok'
        },
        {
          name: this.$t('join.l58'),
          code: '微博'
        },
        {
          name: this.$t('inform.l22'),
          code: 'Other'
        },
      ]
    }
  },
  created () {
    this.uid = this.$route.params.uid
    this.getAgent()
  },
  methods: {
    insertAgent() {
      if (this.status == 1) {
        return
      }
      if (!this.advantage.trim()) {
        // this.$toast('请输入推广优势');
        this.$toast(this.$t('join.l54'));
        return
      }
      // if (this.type == 'Other') {
      //   if (!this.platform.trim()) {
      //     this.$toast('请输入平台名称');
      //     return
      //   }
      // }
      // if (this.type != 'TikTok' && this.type != '抖音' && this.type != 'Other') {
      //   if (!this.link.trim()) {
      //     this.$toast('请输入主页链接');
      //     return
      //   }
      // }
      // if (!this.fans.trim()) {
      //   this.$toast('请填写粉丝数量');
      //   return
      // }
      // if (!this.fileList.length) {
      //   this.$toast('请上传证明截图');
      //   return
      // }
      var obj = {
        advantage: this.advantage.trim(),
        fans: this.fans.trim(),
        file: this.fileList
      }
      if (this.type == 'Other') {
        obj.platform = this.platform.trim()
      } else {
        obj.platform = this.type
      }
      if (this.type != 'TikTok' && this.type != '抖音' && this.type != 'Other') {
        obj.link = this.link.trim()
      }
      var data = {
        uid: this.uid,
        value: JSON.stringify(obj)
      }
      this.fullscreenLoading = true
      insertAgent(data).then(res => {
        this.$notify({
          // message: '提交成功',
          message: this.$t('join.l55'),
          type: 'success'
        });
        this.$router.back()
      }).finally(() => {
        this.fullscreenLoading = false
      }).catch(() => {})
    },
    getAgent() {
      this.fullscreenLoading = true
      getAgent({
        uid: this.uid
      }).then((res) => {
        this.status = res
        if (res == 2) {
          this.$router.replace('/join/' + this.uid)
        }
      }).catch((err) => {
        if (err.code == 4000) {
          this.$notify({
            // message: '账号不存在',
            message: this.$t('join.l39'),
            type: 'danger',
            duration: 1500
          })
          this.$router.back()
        }
      }).finally(() => {
        this.fullscreenLoading = false
        this.loaded = true
      })
    },
    afterRead(file) {
      if (['image/jpg', 'image/jpeg', 'image/png'].indexOf(file.file.type) == -1) {
        // 请上传 jpg/jpeg/png 格式图片
        this.$toast(this.$t('ajax.l5'));
        return false;
      }
      this.upload(file.file)
    },
    upload(file) {
      const formData = new FormData();
      formData.append("file", file);
      this.fullscreenLoading = true
      axios.post(this.$uploadUrl, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          var file = res.data
          if (file.msg != 'ok') {
            this.$notify({
              message: file.msg || this.$t('fund.l83'),
              type: 'danger'
            });
            return
          }
          this.fileList.push(file.data)
        })
        .catch((err) => {
          this.$notify({
            // message: '上传失败',
            message: this.$t('fund.l83'),
            type: 'danger'
          });
        }).finally(() => {
          this.fullscreenLoading = false;
        })
    },
    deleteFile(index) {
      this.fileList.splice(index, 1)
    },
    beforeUpload() {
      this.fullscreenLoading = true
      return true
    },
    fileChange(file) {
      this.fullscreenLoading = false
      if (file.msg != 'ok') {
        this.$notify({
          message: file.msg || this.$t('fund.l83'),
          type: 'danger'
        });
        return
      }
      this.fileList.push(file.data)
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  padding: 11px 17px 30px;
}
.title {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 10px;
}
.uid-box {
  font-size: 16px;
  color: #616161;
  margin-bottom: 15px;
  .uid {
    background: #FAFAFA;
    border-radius: 8px;
    border: 1px solid #F1F1F1;
    line-height: 40px;
    padding-left: 13px;
    color: #000000;
    width: 104px;
  }
}
.van-field {
  background: #FAFAFA;
  border-radius: 8px;
  border: 1px solid #F1F1F1;
  padding: 8px 12px;
}
.textarea-box {
  margin-bottom: 20px;
  .label {
    color: #9C9C9C;
    margin-bottom: 11px;
  }
}
.section {
  margin-bottom: 23px;
  .label {
    padding-bottom: 2px;
    color: #333333;
  }
  .item {
    cursor: pointer;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #F1F1F1;
    text-align: center;
    color: #333333;
    margin-top: 10px;
    justify-content: center;
    &.active {
      color: var(--color-);
      border-color: var(--color-);
    }
  }
}
.input-box {
  margin-bottom: 23px;
  .label {
    color: #616161;
    margin-bottom: 11px;
  }
}
.img-box {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 11px;
  .img {
    position: relative;
  }
  .img0 {
    padding-right: 4px;
    padding-bottom: 8px;
  }
  .img1,.img2,.img3 {
    padding: 0 4px 8px;
  }
  .img4 {
    padding-left: 4px;
    padding-bottom: 8px;
  }
  .close {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
    width: 26px;
    z-index: 2;
  }
}
.van-uploader {
  padding-right: 4px;
  padding-bottom: 8px;
}
.upload-box {
  border-radius: 6px;
  border: 1px solid #F0F0F0;
  width: 61px;
  height: 61px;
  justify-content: center;
  cursor: pointer;
  .add {
    width: 26px;
  }
}
.btn {
  cursor: pointer;
  text-align: center;
  background-color: var(--color-);
  line-height: 44px;
  border-radius: 6px;
  color: #FEFFFF;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 22px;
  &.dis {
    opacity: 0.5;
  }
}
.text {
  color: #B3B3B3;
  font-size: 12px;
  line-height: 22px;
  display: flex;
  align-items: flex-start;
  padding-right: 38px;
  .radius {
    min-width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #B3B3B3;
    margin-right: 4px;
    margin-top: 8px;
  }
}
</style>