<template>
  <div class="simple_remark_com_wrapper">
    <el-popover
      placement="right"
      trigger="click"
      width="400"
      title="备注"
      @hide="handleOnHide"
    >
      <el-input
        type="textarea"
        v-model="nData"
        rows="6"
        placeholder="请输入备注信息"
        maxlength="300"
        show-word-limit
      />
      <span slot="reference" class="trigger">备注： </span>
    </el-popover>
    <div class="content">
      <span v-if="newLine">
        <div v-for="v in mValue" :key="v">
          {{ v }}
        </div>
      </span>
      <span v-else>{{ mValue }}</span>
    </div>
  </div>
</template>
<script>
import { editPhysicalSigns } from "@/api/custom/healthy";

export default {
  name: "RemarkComT",
  props: ["value", "id"],
  components: {},
  data() {
    return {
      newLine: false,
      nData: "",
    };
  },
  watch: {
    value(val) {
      this.nData = val;
    },
    nData(val) {
      this.$emit("updata:value", val);
    },
  },
  computed: {
    mValue: function () {
      if (
        this.nData &&
        typeof this.nData === "string" &&
        (this.nData.includes("</br>") || this.nData.includes("\n"))
      ) {
        this.newLine = true;
        if (this.nData.includes("</br>")) {
          return this.nData.split("</br>");
        } else if (this.nData.includes("\n")) {
          return this.nData.split("\n");
        }
        this.newLine = false;
        return this.nData;
      }
      this.newLine = false;
      return this.nData;
    },
  },
  methods: {
    handleOnHide() {
      // console.log("handleOnHide");
      editPhysicalSigns({ id: this.id, remark: this.nData }).then((res) => {
        if (res.code === 200) {
          this.$message.success("备注修改成功");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.simple_remark_com_wrapper {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;

  .trigger {
    width: 42px;
    color: #8c8c8c;
    cursor: pointer;
  }

  .content {
    flex: 1;
  }
}
</style>
