<template>
  <div class="q-my-xl q-mr-md">
    <div class="text-h6 q-pb-md" style="border-bottom:1px solid #dedede" v-if="commitsList && commitsList.length>0">
      评论
    </div>
    <q-card flat v-for="(x, i) in commitsList" :key="i" class=" q-mt-md">
      <q-card-section>
        <div class="flex row items-center">
          <q-avatar
            size="40px"
            font-size="18px"
            rounded
            color="orange-2"
            text-color="orange"
            class="text-weight-bold"
          >
            <img :src="x.CreateByIco" v-if="x.CreateByIco" />
            <span v-else-if="x.CreateByName">{{
              x.CreateByName.substring(0, 1)
            }}</span>
          </q-avatar>
          <div class="col q-ml-md">
            <div class="text-subtitle1">{{ x.CreateByName }}</div>
            <div class="remark-font">{{ x.CreateTimeStr }}</div>
          </div>
          <div class="col-auto flex row" v-if="!showOnly">
            <div
              class="q-mr-md"
              style="margin-top:3px;"
              @click="deleteCommmit(x.Id, 2, i)"
            >
              <q-icon
                color="dark"
                size="16px;"
                name="iconfont icon-dagou"
              ></q-icon>
              <q-tooltip content-class="bg-dark text-white"
                >标为解决并隐藏评论</q-tooltip
              >
            </div>
            <q-btn dense flat color="white" text-color="dark">
              <inline-svg
                class="svg-icon svg-icon-g-p"
                src="icons/svg/General/Other2.svg"
                width="16px"
                height="16px"
              ></inline-svg>
              <q-popup-proxy :offset="[0, 5]">
                <q-list separator style="width:120px;">
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    @click="deleteCommmit(x.Id, 3, i)"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/Home/Trash.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>删除</q-item-section>
                  </q-item>
                </q-list>
              </q-popup-proxy>
            </q-btn>
          </div>
        </div>
        <div class="q-mt-md">
          {{ decodeURIComponent(x.Content) }}
        </div>
      </q-card-section>
    </q-card>
    <!--<none-data v-if="!commitsList || commitsList.length == 0"></none-data>-->
    <q-card flat class=" q-mt-md">
      <q-card-section>
        <div class="flex row items-start">
          <q-avatar
            size="40px"
            font-size="18px"
            rounded
            color="orange-2"
            text-color="orange"
            class="text-weight-bold"
          >
            <img :src="userInfo.UserIcon" v-if="userInfo.UserIcon" />
            <span v-else-if="userInfo.AccountName">{{
              userInfo.AccountName.substring(0, 1)
            }}</span>
          </q-avatar>
          <div class="col q-ml-md">
            <q-input
              flat
              dense
              outlined
              v-model="comment"
              :type="commitFocusStatus == 1 ? 'textarea' : 'input'"
              autogrow
              :placeholder="
                commitFocusStatus == 1 ? '输入评论（按Enter换行）' : '添加评论'
              "
              @focus="commitFocusStatus = 1"
              @blur="commitFocusStatus = 0"
            ></q-input>
          </div>
        </div>
      </q-card-section>
      <q-card-actions
        align="right"
        class="q-pr-md q-pb-md"
        v-if="comment.trim().length > 0"
      >
        <q-btn flat color="dark" @click="comment = ''">取消</q-btn>
        <q-btn color="primary" :loading="isAdding" @click="setCommit">发 送</q-btn>
      </q-card-actions>
    </q-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { setComment, queryComment, setCommentStatus } from "../../api/okr/work";
import noneData from "../global/none-data";
export default {
  props: ["periodId",'showOnly','currentId'],
  computed: {
    ...mapGetters(["userInfo"])
  },
  components: {
    noneData
  },
  data() {
    return {
      commitsList: [],
      commitFocusStatus: 0,
      comment: "",
      queryParmam: {
        PageIndex: 1,
        PageSize: 1000,
        School_Id: 0,
        PeriodId: this.periodId,
        State: 1
      },
      isAdding: false
    };
  },
  watch: {
    periodId: {
      handler(newV, oldV) {
        this.queryParmam.PeriodId = newV;
        this.queryCommit();
      },
      deep: true
    },
    currentId: {
      handler(newV, oldV) {
        this.queryParmam.AccountId = newV;
        this.queryCommit();
      },
      deep: true
    }
  },
  mounted() {
    this.queryParmam.PeriodId = this.periodId;
    this.queryParmam.AccountId = this.currentId?this.currentId:this.userInfo.Id;
    this.queryCommit();
    
  },
  methods: {
    deleteCommmit(Id, State, i) {
      setCommentStatus({
        Id,
        State
      }).then(r => {
        this.commitsList.splice(i, 1);
      });
    },
    setCommit() {
      if (!this.isAdding) {
        this.isAdding=true
        if (this.comment.trim() != "") {
          let msg = {
            School_Id: 0,
            PeriodId: this.periodId,
            Content: encodeURIComponent(this.comment),
            AccountId: this.currentId?this.currentId:this.userInfo.Id,
            Type: 4,
            ParentId: 0
          };
          setComment(msg).then(r => {
            this.queryCommit();
          });
        }
      }
    },
    queryCommit() {
      if(!this.isAdding){
          this.commitsList = null;
      }
      queryComment(this.queryParmam).then(r => {
        this.commitsList = r.Data.PageData;
        this.isAdding=false
        this.comment = "";
        // this.commitsList.push({
        //     Id:r.Data,
        //     CreateByName:this.userInfo.AccountName,
        //     CreateByIco:this.userInfo.UserIcon,
        //     UpdateByName:'',
        //     Content:this.comment,
        //     CreateTimeStr:'刚刚'
        // })
      });
    }
  }
};
</script>

<style></style>
