<template>
  <div class="page">
    <header></header>
    <div class="form">
      <div class="main">
        <div class="textarea">
          <div class="color-333 fs32">
            <span class="color-red">*</span>学习心得
          </div>
          <textarea
              type="textarea"
              placeholder="请输入学习心得（200字以内）"
              v-model="content"
              adjust-position="false"
              maxlength="200"
              class="fs32"
          ></textarea>
        </div>
      </div>
    </div>
    <p class="tips-span">说明 : 提交学习心得，意味着完成本次内容的学习。</p>
    <div class="report" @click="changeStatus()">提交</div>
  </div>
</template>

<script>
export default {
  name: "fillLog",
  data() {
    return {
      id: "",
      content: "",
    };
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#E76056",
    })
    this.id = options.id;
    this.getDetailInfo();
  },
  methods: {
    getDetailInfo() {
      this.$instance
      .post(`/app/apppartystudylog/queryStudyLog?id=${this.id}`, null, {})
      .then((res) => {
        if (res.data) {
          if (res.data.content != null) {
            this.content = res.data.content;
          } else {
            this.content = "";
          }
        }
      });
    },
    changeStatus() {
      if (!this.content) {
        this.$toast("请输入学习心得");
        return;
      }
      let params = {
        studyId: this.id,
        content: this.content,
      };
      this.$instance
      .post(`/app/apppartystudylog/addStudyLog`, params)
      .then((res) => {
        if (res.code == 0) {
          this.$toast("学习心得提交完成");
          setTimeout(function () {
            uni.navigateBack({
              delta: 2,
            });
          }, 1000);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~dvcp-wui/common";

.page {
  width: 100%;
  height: 100%;

  .tips-span {
    width: 626px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: rgba(153, 153, 153, 1);
    line-height: 40px;
    margin-top: 20px;
    padding-left: 32px;
  }

  textarea {
    width: 100%;
    height: 688px;
    margin-top: 16px;
  }

  header {
    width: 100%;
    height: 112px;
    background-color: #D7261E;
  }

  .form {
    width: 100%;
    padding: 32px;
    box-sizing: border-box;
    margin-top: -100px;

    .main {
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      box-sizing: border-box;
    }

    .basic-item {
      font-size: 32px;
      justify-content: space-between;
      width: 100%;
      height: 112px;
      padding: 32px 32px 32px 12px;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom: 1px solid #eee;

      input {
        text-align: right;
      }

      .wid-110 {
        width: 214px;
      }

      .skill-span {
        max-width: 432px;
        text-align: right;
        display: inline-block;
        overflow: hidden;
        span-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30px;
      }

      .picker {
        justify-content: flex-end;
        align-items: center;
        color: #999999;
        font-size: 32px;
        background-color: #ffffff;
      }

      .picker > .AiArea {
        background-color: #fff !important;
      }

      .image {
        width: 32px;
        height: 32px;
        vertical-align: middle;
      }

      .wei-span {
        width: 40%;
      }

      .msg-value {
        width: 60%;
      }

      .msg-btn {
        width: 160px;
        text-align: right;
        background-color: #fff !important;
      }

      button {
        font-size: 28px;
        background-color: #fff;
        line-height: 48px;
        padding: 0;
      }

      button::after {
        border: 0;
      }

      .button-hover {
        background-color: #fff;
      }

      button[disabled] {
        background-color: #fff !important;
        font-size: 28px;
        border-radius: 0;
      }
    }
  }

  .report {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 112px;
    line-height: 112px;
    font-size: 32px;
    text-align: center;
    background: rgba(230, 0, 18, 1);
    color: #fff;
  }

  .fs32 {
    font-size: 32px;
  }
}
</style>
