<template>
  <div class="pageContent taskSubmission">
    <van-nav-bar
      title="提交任务"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      @click-right="() => {}"
      :fixed="true"
    >
      <template #right>
        <div class="submit">提交</div>
      </template>
    </van-nav-bar>
    <div class="content">
      <textarea name="" id="textarea" maxlength="1000" v-model="textarea" placeholder="请按照要求完成任务"></textarea>
      <div class="other">
        <div class="tools">
          <div class="tool" @click="onSelect('vote')">
            <van-icon class="tool-icon" name="luyin" class-prefix="iconfont"></van-icon>
            <div class="tool-text">录音</div>
          </div>
          <div class="tool" @click="onSelect('image')">
            <van-icon class="tool-icon" name="photo-o"></van-icon>
            <div class="tool-text">图片</div>
          </div>
          <div class="tool" @click="onSelect('video')">
            <van-icon class="tool-icon" name="video-o"></van-icon>
            <div class="tool-text">视频</div>
          </div>
        </div>
        <div class="number">{{ textarea.length }}/1000</div>
      </div>
    </div>

    <div class="taskDemand">任务要求</div>

    <input
      ref="votefile"
      type="file"
      class="file"
      id="votefile"
      accept="audio/mp3,audio/mp4"
      @change="onChange('vote')"
    />
    <input
      ref="imagefile"
      type="file"
      class="file"
      id="imagefile"
      accept="image/png,image/jpeg,image/jpg"
      @change="onChange('image')"
    />
    <input ref="videofile" type="file" class="file" id="videofile" accept="video/mp4" @change="onChange('video')" />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      textarea: ''
    };
  },
  mounted() {},
  methods: {
    onSelect(type) {
      console.log(type);
      this.$refs[type + 'file'].click();
    },
    onChange(type) {
      const file = this.$refs[type + 'file'].files[0];
      console.log(file);
      const formData = new FormData();
      formData.append('file', file);
      formData.append('type', type);
      console.log(formData);
    }
  }
};
</script>

<style scoped lang="scss">
@import './include.scss';
@font-face {
  font-family: 'iconfont'; /* Project id 2652084 */
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANEAAsAAAAABxwAAAL2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqCGIIcATYCJAMICwYABCAFhGcHLxtXBsgeg207eZwyVtIpsOplBI9rn/OSHBH6c6exoBhk9X7ZspEVtsojGbE/2r2vkFPpV2buw7mUmIgZXrt5I7euHSahADJ9/u+d/hbhBfDWHLQ2PrA8oA/UWMsi7OQFxi2yuwKxyGcE2u2KpniYnFkIuo/qqAQsKTPbgyQ3HvG5daAuBBQFp1uFZujSIt5CE+mZ4jneBO+P//ZDnaQpMwtO7iQ1wuGvDmtErv4r8gfVeA14eEITMjZXZorzzY4jSlFik5L2KoeyeVJbBL866toTrPuPRxDNzOxOMIkF5yR0RKf6ywQKWnANaPQqoKV0ThsYuFvd1IL2C9pDm31bWjovNnrXi4eKH63R0VgbXoHqoejhxdNTSlt4j3e7OPT4GLnx9PTi4UGq7u+vDN1fh7IbiOyutOz28bwOdN7UHIuhNXX5rjpyKnLb30Mn1iRWx03XuwotL0or3Evd/FMD0yq07SzstDNK2tIdshx3F5JCRWZBWlHOrZta6lbhLhElsYGJZYFRQYmlVDYkTS0NCg+JL2cDkocDSl1ynMMda4kz39bGuERUTPevz7Ohs4OVE7pyk1x9b2WtWQ7EAtRzt5LkB3zHw6c7XTV6ka+tHQV8fefUFoyoF8hPALSeoSN43cpLQGLRgqRSJRQyyTVqdyBrt8LUTE+/576agdvKhFYDN+dqMZEgazXPKJx1NOmwj2atDtBuQ9LqDgNklERpw7IBhNBrA0m398h6HTEK5wlNhr2gWa9ftLsYOtt1WI6GBILrKG5E9W2I3yCVMLaaBnTzMbdJVEfKosWYsHwcRn4c33w6BUswGWIG28z1p5RBDJGKUTJ3GhaJpEhGpALcQDk8SmXhPj5M1Us4DVIxJCCwOhTWCKnXBuFrICXBeGSa/bx8GFcTkToEyChOECw+po/44fAFMFIUElDLlezCasblj6IYCIOglBiSLAzCRESkEFn1IAGsAcXB6xGTCedjkRiogjO/SvxoO6CdqU1h9cmaHjW18SUAAAA=');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconfont-luyin:before {
  content: '\e60b';
}

.taskSubmission {
  .submit {
    color: white;
    font-size: 25px;
    border-radius: 40px;
    padding: 5px 50px;
    background: black;
  }

  .content {
    background: white;
    border-radius: 12px;
    padding: 10px;

    #textarea {
      width: 100%;
      height: 500px;
      font-size: 30px;
    }

    .other {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 10px 0;

      .tools {
        display: flex;
        align-items: center;
        .tool {
          font-size: 25px;
          text-align: center;
          margin-right: 30px;
          .tool-icon {
            font-size: 60px;
          }
        }
      }

      .number {
        font-size: 25px;
        color: gray;
      }
    }
  }
  .taskDemand {
    padding: 20px 0;
    font-size: 30px;
    color: gray;
  }

  .file {
    display: none;
  }
}
</style>
