<template>
  <div class="approval">
    <div class="card">
      <header>批示意见</header>
      <textarea placeholder="请输入批示意见" v-model.trim="description" maxlength="200"></textarea>
      <u-row justify="between">
        <span @click="description=''">清空内容</span>
        <span>{{ description.length || 0 }}/200</span>
      </u-row>
    </div>
    <ai-back/>
    <u-button type="primary" @click="submit">提交</u-button>
  </div>
</template>

<script>
import AiBack from "../../../components/AiBack";

export default {
  name: "approval",
  components: {AiBack},
  data() {
    return {
      id: null,
      description: ""
    }
  },
  onLoad(opt) {
    this.id = opt.id
  },
  methods: {
    submit() {
      this.$http.post("/app/appofficialdocumentinfo/instructionById", null, {
        params: {
          id: this.id,
          description: this.description
        }
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast("批示成功")
          uni.navigateBack()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.approval {
  background: #F5F5F5;

  .card {
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 32px;

    header {
      font-size: 32px;
      color: #333333;
      margin-bottom: 16px;
      font-weight: bold;
    }

    textarea {
      width: 100%;
    }

    span:first-child {
      font-size: 28px;
      color: #1365DD;
    }

    span:last-child {
      font-size: 24px;
      color: #999999;
    }
  }

  .u-btn {
    width: 100%;
    height: 112px !important;
    font-size: 32px;
    color: #FFFFFF;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #197DF0 !important;
  }
}
</style>
