<template>
  <div
    class="row column justify-between height-100 v-scroll-box"
    v-loadmore="loadmore"
  >
    <div class="card-list scroll-box" :style="{ maxHeight: listHeight }">
      <div
        v-for="(item, idx) in state.listData"
        :key="idx"
        class="card-message-item"
      >
        <div class="card-title-div">
          <span class="card-title">{{ item.Theme }}</span
          ><span class="card-time fl-ml-sm">{{ item.Date }}</span>
        </div>
        <div class="card-content">
          {{ item.Content }}
        </div>
        <div class="card-footer text-right">留言人：{{ item.Name }}</div>
      </div>
    </div>
    <div class="create-div row justify-center">
      <div class="row fl-my-sm items-center">
        <div class="col-2">标题</div>
        <a-input
          :disabled="calcItemDisable()"
          v-model:value="state.formData.Theme"
          class="col-10 bg-fff border-radius-8"
          placeholder="请输入内容"
          :bordered="false"
        />
      </div>

      <a-textarea
        :disabled="calcItemDisable()"
        v-model:value="state.formData.Content"
        class="col-12 bg-fff border-radius-8 resize-textarea"
        placeholder="在此输入内容"
        :bordered="false"
        :showCount="true"
        :rows="3"
      />
      <a-button
        v-permission="'r_artwork_view_btn_createnote'"
        type="primary"
        shape="round"
        class="fl-mt-sm"
        style="width: 131px"
        @click="handleCreate"
        :loading="state.btnLoading"
        >发起公告</a-button
      >
    </div>
  </div>
</template>
<script setup>
import {
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  getCurrentInstance,
} from "vue";
const currentInstance = getCurrentInstance();
const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;
import { Local } from "@/utils/storage.js";
import { processError } from "@/utils/helper/message";
let props = defineProps({
  pageType: {
    type: String,
  },
  fatherData: {
    type: Object,
  },
});
let loginUserData = Local.get("userInfo");
const state = reactive({
  btnLoading: false,
  listData: [],
  formData: {
    Theme: "",
    Content: "",
    Name: loginUserData.NickName,
    UserId: loginUserData.ID,
    ArtworkUuid: props.fatherData.ArtworkUuid,
  },
  pageCount: 1,
  canLoadMore: true,
});

const listHeight = computed(() => {
  if (props.pageType === "authentication") {
    return window.innerHeight * 0.2 + "px";
  }
  return window.innerHeight * 0.4 + "px";
});
onBeforeMount(() => {
  getPageData();
});
onMounted(() => {});
const getPageData = () => {
  let url = "note/notelistbyawid";
  let params = {
    ArtworkUuid: props.fatherData.ArtworkUuid,
  };
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.listData = res.data.Data || [];
      } else {
        state.canLoadMore = false;
      }
      if (res.status !== 0) {
        processError(res.message || "获取数据失败");
      }
    },
    (err) => {
      processError(err.message);
    }
  );
};
const handleCreate = () => {
  let url = "note/createnote";
  let params = state.formData;
  if (!state.formData.Theme) {
    return processError("请输入公告标题！");
  }
  if (!state.formData.Content) {
    return processError("请输入公告内容！");
  }
  state.btnLoading = true;
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.formData.Theme = "";
        state.formData.Content = "";
        state.pageCount = 1;
        getPageData();
      } else {
        processError(res.message || "获取数据失败");
      }
      state.btnLoading = false;
    },
    (err) => {
      state.btnLoading = false;
      processError(err.message);
    }
  );
};

const calcItemDisable = () => {
  return !$hadRule("r_artwork_view_btn_createnote");
};
const loadmore = () => {
  if (state.canLoadMore) {
    state.pageCount++;
    getPageData();
  }
};
</script>
<style scoped>
.card-list {
  overflow: auto;
  padding-left: 2px;
  padding-right: 2px;
}
.card-message-item {
  padding: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  box-shadow: 0 1px 2px -2px rgb(0 0 0 / 20%), 0 2px 2px 0px rgb(0 0 0 / 14%),
    0 1px 0px 1px rgb(0 0 0 / 12%);
  border-radius: 8px;
}
.card-title-div {
  border-bottom: 1px solid #cbcbcb;
}
.card-content {
  font-weight: 600;
}
.card-time {
  font-size: 14px;
  color: rgb(110, 104, 104);
}
.card-title {
  font-weight: bolder;
  font-size: 16px;
  color: #000;
}
.card-footer {
  color: rgb(110, 104, 104);
}
.create-div {
  border-radius: 20px;
  background-color: #cbcbcb;
  padding: 10px;
}
.bg-fff {
  background-color: #fff;
}
</style>
