<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-sticky class="sticky">
      <div class="header flex">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 创建工单 -->
        {{ $t('work.l13') }}
        <div></div>
      </div>
    </van-sticky>
    <div class="section">
      <div class="label">
        <!-- 工单类型 -->
        {{ $t('work.l2') }}
      </div>
      <div class="ul flex">
        <div class="li" :class="{active: type == 1}" @click="type = 1">
          <!-- 账号类 -->
          {{ $t('work.l3') }}
        </div>
        <div class="li" :class="{active: type == 2}" @click="type = 2">
          <!-- 操作类 -->
          {{ $t('work.l4') }}
        </div>
        <div class="li" :class="{active: type == 3}" @click="type = 3">
          <!-- 资金类 -->
          {{ $t('work.l5') }}
        </div>
        <div class="li" :class="{active: type == 4}" @click="type = 4">
          <!-- 其他 -->
          {{ $t('inform.l22') }}
        </div>
      </div>
    </div>
    <div class="padding"></div>
    <div class="section2">
      <div class="li flex">
        <div class="label">
          <!-- 标题 -->
          {{ $t('work.l11') }}
        </div>
        <div class="right">
          <!-- 请输入 -->
          <el-input v-model="title" :placeholder="$t('common.l48')"></el-input>
        </div>
      </div>
      <div class="input-box">
        <!-- 说说你的建议或遇到的问题 -->
        <el-input :autosize="{ minRows: 4, maxRows: 12}" type="textarea" v-model="content" :placeholder="$t('work.l15')"></el-input>
      </div>
      <div class="avatar-uploader">
        <van-uploader :after-read="afterRead" result-type="file">
          <van-image
            width="87"
            height="87"
            fit="contain"
            :src="file || '/img/list/upload.png'"
          >
          </van-image>
        </van-uploader>
      </div>
    </div>
    <div class="fixed flex">
      <div class="btn rtn" @click="insertWorkOrder">
        <!-- 提交 -->
        {{ $t('work.l16') }}
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import backBar from '@/components/backBar'
import { insertWorkOrder } from "@/api/work";
export default {
  components: {
    backBar
  },
  data () {
    return {
      type: 1,
      content: '',
      title: '',
      file: ''
    }
  },
  methods: {
    insertWorkOrder() {
      if (!this.title.trim()) {
        // this.$toast('请输入标题');
        this.$toast(this.$t('work.l17'));
        return
      }
      if (!this.content.trim()) {
        // this.$toast('请输入你的建议或遇到的问题');
        this.$toast(this.$t('work.l18'));
        return
      }
      this.fullscreenLoading = true
      insertWorkOrder({
        type: this.type,
        content: this.content,
        title: this.title,
        file: this.file ? JSON.stringify([this.file]) : '',
      }).then(res => {
        this.$notify({
          // message: '提交成功',
          message: this.$t('join.l55'),
          type: 'success'
        });
        this.$router.back()
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    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);
      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.file = file.data
        })
        .catch((err) => {
          this.$notify({
            message: this.$t('fund.l83'),
            type: 'danger'
          });
        });
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  padding-bottom: 94px;
}
.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  justify-content: space-between;
  height: 50px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  padding-left: 9px;
  padding-right: 17px;
}
.section {
  background-color: var(--bg-);
  padding: 12px 18px 15px;
  .label {
    font-size: 16px;
    color: #4F4F4F;
    margin-bottom: 12px;
  }
  .ul {
    column-gap: 12px;
    row-gap: 12px;
    flex-wrap: wrap;
  }
  .li {
    cursor: pointer;
    background-color: #F4F7FA;
    border-radius: 6px;
    flex: 1;
    padding: 11px 6px;
    // min-width: 76px;
    text-align: center;
    color: #4F4F4F;
    &.active {
      color: #fff;
      background-color: #000;
    }
  }
}
.section2 {
  background-color: var(--bg-);
  padding: 0 18px;
  .li {
    height: 53px;
    font-size: 16px;
    color: #4F4F4F;
    border-bottom: 1px solid #EDEDED;
  }
  .label {
    width: 75px;
  }
  .right {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
}
.padding {
  height: 10px;
  background-color: #F9FBFF;
}
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 18px 32px;
  background-color: var(--bg-);
  column-gap: 11px;
  .btn {
    flex: 1;
    cursor: pointer;
    line-height: 42px;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .rtn {
    background-color: #000;
    color: #fff;
  }
}
.input-box {
  padding: 15px 0;
}
::v-deep {
  .el-input__inner {
    border: none;
    padding: 0;
  }
  .el-textarea__inner {
    padding: 5px 0;
    border: none;
  }
}
</style>