<template>
  <div class="EmployeeRemark">
    <q-input filled stack-label maxlength="20" :dense="false" v-model="saveMsg.Content" ref="Content"
      class="col-6 q-pr-lg q-pb-lg" label="备注信息" />
    <q-select filled stack-label option-value="Id" option-label="Name" v-model="saveMsg.RemarkType" ref="RemarkType"
      :options="RemarkTypeList" label="内容内心" :dense="false" class="col-3 q-pr-lg " emit-value map-options />
    <div class="col-3 q-pb-lg q-pt-lg">
      <q-toggle size="md" label="公文" color="primary" :false-value="0" :true-value="1" v-model="saveMsg.IsAddNotice" />
    </div>
    <q-btn label="发布" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
      @click="saveRemark" />
    <div class="LogList">
      <q-timeline>
        <template v-for="(item,index) in remarkList">
          <q-timeline-entry>
            <template v-slot:title>
              {{item.CreateStr}}
            </template>
            <div v-for="(subItem,subIndex) in item.AccountRemarkList">
              {{subItem.RemarkType}}(图标) {{subItem.CreateTimeStr}} {{subItem.CreateByName}} {{subItem.Content}}
            </div>
          </q-timeline-entry>
        </template>
      </q-timeline>
    </div>
  </div>
</template>

<script>
  import {
    queryRemarkTypeList,
    saveAccountRemark,
    queryRemarkPage
  } from '../../../api/school/index'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    name: "EmployeeRemark",
    data() {
      return {
        saveMsg: {
          Content: "", //备注内容
          RemarkType: 1, //内容内心
          IsAddNotice: 0, //0-否1-是，是否发布公告
          AccountId: 0, //账号表中的AccountId
          AccountType: 0, //账号表中的AccountType
        },
        qMsg: {
          PageIndex: 1,
          PageSize: 5,
          RemarkType: 0, //备注类型
          KeyWord: "", //关键字
          StartDate: "", //开始日期
          EndDate: "", //结束日期
          AccountId: 0, //账号表中的AccountId
          AccountType: 0, //账号表中的AccountType
        },
        RemarkTypeList: [], //行政备注类型列表
        saveLoading: false,
        pageCount: 0,
        remarkList: [], //备注列表
      }
    },
    created() {
      this.getRemarkType();
      if (this.saveObj) {
        this.saveMsg.AccountId = this.saveObj.AccountId;
        this.saveMsg.AccountType = this.saveObj.AccountType;
        this.qMsg.AccountId = this.saveObj.AccountId;
        this.qMsg.AccountType = this.saveObj.AccountType;
      }
    },
    mounted() {
      this.getRemarkPage();
    },
    methods: {
      //获取行政备注类型列表
      getRemarkType() {
        queryRemarkTypeList().then(res => {
          if (res.Code == 1) {
            this.RemarkTypeList = res.Data;
          }
        });
      },
      saveRemark() {
        this.saveLoading = true;
        saveAccountRemark(this.saveMsg).then(res => {
          this.saveLoading = false;
          if (res.Code == 1) {
            this.clearMsg();
            this.getRemarkPage();
          }
        });
      },
      //清空数据
      clearMsg() {
        this.saveMsg.Content = "";
        this.saveMsg.RemarkType = 1;
        this.saveMsg.IsAddNotice = 0;
      },
      getRemarkPage() {
        queryRemarkPage(this.qMsg).then(res => {
          if (res.Code == 1) {
            this.remarkList = res.Data.PageData;
            this.pageCount = res.Data.PageCount
            console.log("res", res);
          }
        })
      }
    },
  }

</script>
