<style>
  .EmployeeRemark .LogList {
    height: 380px;
    overflow: auto;
  }

  .EmployeeRemark .LogList_Create {
    color: #2D2D2D;
    font-size: 14px;
    font-weight: bold;
  }

  .EmployeeRemark .LogList_Item {
    display: flex;
    font-size: 13px;
    align-items: center;
    margin-bottom: 5px
  }

  .EmployeeRemark .LogList::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .EmployeeRemark .LogList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .EmployeeRemark .LogList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }

</style>
<template>
  <div class="EmployeeRemark">
    <q-input filled v-model="saveMsg.Content" class="col-12 row-2" maxlength="100" :rules="[val => !!val || '请填写备注信息']" label="备注信息" type="textarea" />
    <div class="col" style="display:flex;width:100%;margin:30px 0;align-items:center;">
      <div style="width:50%">
        <q-select filled stack-label option-value="Id" option-label="Name" v-model="saveMsg.RemarkType" ref="RemarkType"
          :options="RemarkTypeList" label="内容类型" :dense="false" class="q-pr-lg " emit-value map-options />
      </div>
      <div style="width:50%;display:flex;justify-content: space-between;height:30px;">
        <q-toggle size="md" label="公文" color="primary" :false-value="0" :true-value="1" v-model="saveMsg.IsAddNotice" />
        <q-btn label="发布" color="accent q-px-md" size="12px" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveRemark" />
      </div>
    </div>
    <div class="LogList">
      <q-timeline>
        <template v-for="(item,index) in remarkList">
          <q-timeline-entry>
            <template v-slot:title>
              <span class="LogList_Create">{{item.CreateStr}}</span>
            </template>
            <div v-for="(subItem,subIndex) in item.AccountRemarkList" class="LogList_Item">
              <img v-if="subItem.RemarkType==1" src="../../../assets/images/myimg/type3.png" />
              <img v-if="subItem.RemarkType==2" src="../../../assets/images/myimg/type1.png" />
              <img v-if="subItem.RemarkType==3" src="../../../assets/images/myimg/type2.png" />&nbsp;
              {{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() {
        if(this.saveMsg.Content==''){
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写备注信息`
          })
          return;
        }
        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
          }
        })
      }
    },
    watch: {
      saveObj: function (val, oldval) {
        this.saveMsg.AccountId = this.saveObj.AccountId;
        this.saveMsg.AccountType = this.saveObj.AccountType;
        this.qMsg.AccountId = this.saveObj.AccountId;
        this.qMsg.AccountType = this.saveObj.AccountType;
        this.getRemarkPage();
      }
    }
  }

</script>
