<template>
  <div>
    <!-- 申请交易专家 -->
    <BackBar1 :title="$t('follow.l87')"/>
    <div class="container">
      <div class="title">
        <!-- 申请成为交易专家 -->
        {{ $t('follow.l109') }}
      </div>
      <el-form class="form" autocomplete="off" :model="form" ref="form">
        <div class="label">
          <!-- <span class="red">*</span> 居住国家/地区 -->
          <span class="red">*</span>{{ $t('follow.l110') }}
        </div>
        <el-form-item prop="country">
          <div class="country-btn" @click="countryShow(1)">
            <div>{{ phoneCountry.name ? phoneCountry.name : $t('auth.l6') }}</div>
            <span class="el-input__suffix"><span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up"></i></span></span>
          </div>
        </el-form-item>
        <div class="label">
          <!-- <span class="red">*</span> 邮箱 -->
          <span class="red">*</span>{{ $t('setting.l11') }}
        </div>
        <el-form-item prop="country">
          <!-- 请输入邮箱 -->
          <el-input :placeholder="$t('setting.l28')" v-model="form.email" />
        </el-form-item>
        <div class="label">
          <!-- 手机号 -->
          {{ $t('login.l21') }}
        </div>
        <el-form-item prop="phone">
          <!-- 请输入手机号码 -->
          <el-input autocomplete="off" :placeholder="$t('login.l1')" type="number" v-model="form.phone">
            <template slot="prepend">
              <div class="area-box" @click="countryShow(2)">
                +{{ area }}<van-icon name="arrow-down" />
              </div>
            </template>
          </el-input>
        </el-form-item>
        <div class="section">
          <div class="label">
            <!-- 擅长领域 -->
            {{ $t('follow.l111') }}
          </div>
          <van-row gutter="24">
            <van-col span="6" v-for="item in typeList" :key="item.code" @click="typeChange(item.code)">
              <div class="item" :class="{active: type.indexOf(item.code) !== -1 }">
                {{ titleName[item.name] }}
                <img class="icon" src="/img/copy/icon3.png" alt="">
              </div>
            </van-col>
          </van-row>
        </div>
        <div class="label1">
          <!-- 自我介绍 -->
          {{ $t('follow.l112') }}
        </div>
        <el-form-item prop="description">
          <!-- 请输入自我介绍 -->
          <el-input :placeholder="$t('follow.l148')" type="textarea" :rows="4" v-model="form.description"></el-input>
        </el-form-item>
        <div class="section">
          <div class="label1">
            <!-- 上传交易盈利截图 -->
            {{ $t('follow.l113') }}
          </div>
          <div class="img-box">
            <van-uploader :after-read="afterRead" result-type="file">
              <div class="upload-box flex">
                <van-icon name="plus" />
                <div>
                  <!-- 上传截图 -->
                  {{ $t('follow.l145') }}
                </div>
              </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="80"
                  height="80"
                  radius="6"
                  fit="contain"
                  :src="item"
                >
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div class="btn-box">
        <div class="href1">
          <!-- 审核结果将在3个工作日内通过系统消息告知 -->
          {{ $t('follow.l114') }}
        </div>
        <div class="btn" @click="insertExpert">
          <!-- 提交 -->
          {{ $t('work.l16') }}
        </div>
      </div>
    </div>
    <selectCountry :title="selectType == 1 ? $t('auth.l6') : ''" @list="getList" :val="selectType == 1 ? phoneCountry : {area:area}" ref="country" @back="selectCountryBack"/>
  </div>
</template>
<script>
import { emailReg } from "@/utils/config";
import { getProductGroupList } from "@/api/product";
import axios from 'axios'
import BackBar1 from '@/components/backBar1'
import selectCountry from "@/components/selectCountry";
import { insertExpert } from "@/api/copy";
export default {
  components: {
    BackBar1,
    selectCountry
  },
  data () {
    return {
      form: {
        country: 'cn',
        email: '',
        description: '',
        phone: '',
      },
      area: '86',
      selectType: 1,
      list: [],
      type: [],
      fileList: [],
      typeList: [
        {
          name: '美股',
          code: 'US'
        },
        {
          name: '沪深',
          code: 'CN'
        },
        {
          name: '港股',
          code: 'HK'
        },
      ]
    }
  },
  computed: {
    phoneCountry() {
      var obj = {}
      this.list.forEach(item => {
        if (item.code == this.form.country) {
          obj = item
        }
      })
      return obj
    },
    titleName() {
      return {
        "美股": this.$t('common.l41'),
        "港股": this.$t('common.l42'),
        "沪深": this.$t('download.l19'),
        "指数": this.$t('download.l27'),
        "能源": this.$t('market.l19'),
        "其他": this.$t('inform.l22'),
        "加密货币": this.$t('market.l24'),
        "外汇": this.$t('market.l21'),
        "贵金属": this.$t('market.l22')
      }
    }
  },
  created () {
    this.getProductGroupList()
  },
  methods: {
    insertExpert() {
      if (!this.form.phone) {
        if (!this.form.email.trim()) {
          // 请输入邮箱
          this.$toast(this.$t('setting.l28'));
          return
        }
      }
      if (this.form.email.trim()) {
        if (!emailReg.test(this.form.email.trim())) {
          // 邮箱格式不正确
          this.$toast(this.$t('login.email-reg'));
          return
        }
      }
      if (!this.type.length) {
        // 请选择擅长领域
        this.$toast(this.$t('follow.l149'));
        return
      }
      if (!this.form.description.trim()) {
        // 请输入自我介绍
        this.$toast(this.$t('follow.l148'));
        return
      }
      if (!this.fileList.length) {
        // 请上传交易盈利截图
        this.$toast(this.$t('follow.l150'));
        return
      }
      var data = {
        ...this.form,
        title: this.userInfo.im_name,
        area: this.area,
        file: JSON.stringify(this.fileList),
        product_group: JSON.stringify(this.type)
      }
      insertExpert(data).then(res => {
        this.$notify({
          // message: '提交成功',
          message: this.$t('join.l55'),
          type: 'success'
        });
        this.$router.back()
      }).catch(() => {}).finally(() => {})
    },
    selectCountryBack(val) {
      if (this.selectType == 1) {
        this.form.country = val.code
      } else {
        this.area = val.area
      }
    },
    getList(list) {
      this.list = list
    },
    countryShow(type) {
      this.selectType = type
      this.$refs['country'].reset()
    },
    afterRead(file) {
      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)
    },
    typeChange(code) {
      var i = this.type.indexOf(code)
      if (i === -1) {
        this.type.push(code)
      } else {
        this.type.splice(i, 1)
      }
    },
    getProductGroupList() {
      getProductGroupList({
        visible: 1
      }).then(res => {
        var list = res.list || []
        list.forEach(item => {
          this.typeList.push({
            name: item.title,
            code: item.id
          })
        })
      }).catch(()=> {})
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 10px 16px 0;
}
.title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.form {
  .label {
    color: #888888;
    margin-bottom: 10px;
  }
  .label1 {
    color: #000000;
    margin-bottom: 14px;
  }
  .red {
    color: #E64A44;
  }
}
.country-btn {
  border-radius: 4px;
  border: 1px solid #888888;
  padding: 0 15px;
  position: relative;
  line-height: 40px;
  color: #000000;
  background-color: #F3F5F4;
  .el-input__suffix {
    color: #000000;
  }
  .el-icon-arrow-up {
    transform: rotateZ(180deg);
    &.is-reverse {
      transform: rotateZ(0);
    }
  }
}
.section {
  margin-bottom: 24px;
  padding-top: 8px;
  .label {
    padding-bottom: 4px;
    margin-bottom: 0;
    color: #000000;
  }
  .van-col {
    cursor: pointer;
  }
  .item {
    text-align: center;
    border-radius: 4px;
    border: 1px solid #F3F5F4;
    margin-top: 10px;
    padding: 7px 4px;
    color: #B6B6B6;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    &.active {
      color: #000000;
      border-color: #000000;
      .icon {
        display: block;
      }
    }
  }
  .icon {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 18px;
    display: none;
  }
}
.area-box {
  width: 70px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: #000;
}
.van-uploader {
  display: block;
}
.van-image {
  border-radius: 4px;
  border: 1px solid #F3F5F4;
  overflow: hidden;
}
.el-form-item {
  margin-bottom: 16px;
}
.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: 4px;
  border: 1px solid #F3F5F4;
  width: 80px;
  height: 80px;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  font-size: 12px;
  color: #B6B6B6;
  .van-icon {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 9px;
  }
}
::v-deep .container{
  .van-image__error {
    background-color: #fff;
  }
  .el-textarea__inner {
    border-radius: 4px;
    border: 1px solid #F3F5F4;
    font-size: 12px;
    padding: 13px 9px;
  }
  .el-input__inner {
    border-color: transparent;
    border-radius: 4px;
    background-color: #F3F5F4;
    height: 44px;
    line-height: 42px;
  }
  .el-input-group {
    .el-input__inner {
      padding-left: 13px;
      border-radius: 0 4px 4px 0;
      line-height: 44px;
      border: none;
    }
  }
  .el-input-group__prepend {
    background-color: #F3F5F4;
    padding: 0;
    border: 1px solid #000;
  }
}
.btn-box {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background-color: #fff;
  padding: 6px 0 20px;
}
.href1 {
  color: #888888;
  font-size: 12px;
  text-align: center;
  padding-bottom: 20px;
}
.btn {
  background-color: #000;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
</style>