<template>
  <div style="width:360px;max-height:480px">
    <div class="q-pa-md" style="border:1px solid #eee;" v-for="(x,i) in commitsList">
      <div class="flex row items-center">
        <div class="col">{{x.UpdateByName}}已解决此评论</div>
        <div class="text-primary q-mx-md cursor-pointer col-auto" @click="deleteCommmit(x.Id,i)">重新打开</div>
      </div>
      <div
        class="q-pa-xs bg-grey-3 rounded-borders q-mt-xs"
        style="padding-left:8px;"
      >
        <div
          class="text-grey-7 q-pl-md"
          style="border-left:2px solid #9e9e9e;height:20px;"
        >
          评论
        </div>
      </div>
      <div class="flex row items-center q-mt-md">
        <q-avatar
          size="25px"
          font-size="16px"
          rounded
          color="orange-2"
          text-color="orange"
          class="q-mr-xs"
        >
          <img :src="x.CreateByIco" v-if="x.CreateByIco" />
          <span v-else-if="x.CreateByName">{{
            x.CreateByName.substring(0, 1)
          }}</span>
        </q-avatar>
        <div class="remark-font col q-mx-xs">{{ x.CreateByName }}</div>
        <div class="remark-font">{{x.CreateTimeStr}}</div>
      </div>
      <div style="padding-left:30px;margin-top:10px;">
        {{decodeURIComponent(x.Content)}}
      </div>
    </div>
    <div class="q-my-lg text-center" v-if="commitsList.length==0">
        <img src="../../assets/images/history.png" width="80px" />
        <div class="text-center q-mt-md remark-font">已解决的评论会存档在这里</div>
    </div>
  </div>
</template>

<script>
import {queryComment,setCommentStatus } from "../../api/okr/work";
export default {
  props: ["periodId", "accountId"],
  data() {
    return {
      CreateByIco: null,
      CreateByName: "罗超",
      commitsList:[],
      queryParmam: {
        PageIndex: 1,
        PageSize: 1000,
        School_Id: 0,
        PeriodId: 0,
        State: 2,
        AccountId:0
      }
    };
  },
  watch: {
    periodId: {
      handler(newV, oldV) {
        this.queryParmam.PeriodId = newV;
        this.queryCommit();
      },
      deep: true
    }
  },
  mounted() {
    this.queryParmam.PeriodId = this.periodId;
    this.queryParmam.AccountId = this.accountId;
    this.queryCommit();
    
  },
  methods: {
    deleteCommmit(Id, i) {
      setCommentStatus({
        Id,
        State:1
      }).then(r => {
        this.commitsList.splice(i, 1);
        this.$emit('change')
      });
    },
    queryCommit() {
      queryComment(this.queryParmam).then(r => {
        this.commitsList = r.Data.PageData;
      });
    }
  }
};
</script>

<style></style>
