<template>
  <div class="container container-historical-notes-dlg">
    <el-dialog title="历史备注" :visible.sync="historicalNotesDlgVisible" width="50%" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleClose">
      <div>
        <p class="title">添加备注</p>
        <el-input type="textarea" :rows="2" placeholder="请输入备注内容" v-model="textarea"> </el-input>
        <el-button style="margin: 20px 0" type="primary" @click="addHistoricalNotes">保存</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border height="400">
          <el-table-column align="center" prop="Content" label="记录内容" width="180"> </el-table-column>
          <el-table-column align="center" prop="RemarkType" label="备注类型"> </el-table-column>
          <el-table-column align="center" prop="SysAdminName" label="创建人"> </el-table-column>
          <el-table-column align="center" prop="CreateTime" label="创建时间" width="200"> </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dataMainInterface } from "@/api/api.js";

export default {
  name: "",
  props: {
    historicalNotesDlgVisible: {
      type: Boolean,
      default: false,
    },
    CompanyId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tableData: [],
      textarea: "",
      dialogVisible: true,
    };
  },
  watch: {
    historicalNotesDlgVisible: {
      handler(newVal) {
        if (newVal) {
          this.getDataList();
        }
      },
    },
  },
  methods: {
    // 获取列表
    async getDataList() {
      const res = await dataMainInterface.getRaiServeRemarkList({
        CompanyId: this.CompanyId,
      });
      if (res.Ret === 200) {
        this.tableData = res.Data.List || [];
      }
    },
    // 新增历史留言
    async addHistoricalNotes() {
      const res = await dataMainInterface.getRaiServeRemarkAdd({
        CompanyId: this.CompanyId,
        Content: this.textarea,
      });
      if (res.Ret === 200) {
        this.textarea = "";
        this.$message.success("新增成功");
        this.getDataList();
      }
    },
    // 关闭弹框
    handleClose() {
      this.$emit("update:historicalNotesDlgVisible", false);
      this.$emit("update:CompanyId", 0);
    },
  },
};
</script>
<style scoped lang="scss">
.container-historical-notes-dlg {
  .title {
    font-weight: 600;
    margin-bottom: 10px;
  }
}
</style>
