<template>
  <div>
    <card-table ref="table" :modalData="dataList" :searchParams="queryParams" @pagination="getList"
                :loading="loading" :tableSearch="true" @columnSearch="handleQuery"
                @resetList="resetQuery">
      <template #operations="{ selections }">
        <CustomButton label="messageCenter.batchRead" :loading="readLoading" @handleClick="handleRead(selections)"/>
      </template>
      <CustomColumn type="selection" width="50" :selectable="row => row.readStatus !== '1'" openReserve/>
      <CustomColumn #default="{index}" label="No." :min-width="50">
        {{ ($refs.table.searchParams.pageSize) * ($refs.table.searchParams.pageNum - 1) + (index + 1) }}
      </CustomColumn>
      <CustomColumn :label="$t('messageCenter.readStatus')" prop="readStatus" :min-width="50">
        <template #default="{ row }">
          <el-tag v-if="row.readStatus !== '1'" type="info">{{ $t('messageCenter.noRead') }}</el-tag>
          <el-tag v-else type="success">{{ $t('messageCenter.read') }}</el-tag>
        </template>
      </CustomColumn>
      <!--<Column :label="$t('messageCenter.messageType')" dict-type="information_type" prop="messageType" :min-width="120"-->
      <!--        :searchDict="dict['message_type']" :searchParams="queryParams" :showSearch="true" searchType="select">-->
      <!--</Column>-->
      <Column :label="$t('messageCenter.messageType')" dict-type="information_type" prop="messageType" :min-width="120"
              :searchDict="dict.type.message_type" :showSearch="true" searchType="select">
      </Column>
      <Column :label="$t('messageCenter.messageContent')" prop="messageContent" :minWidth="250"
              :searchParams="queryParams" :showSearch="true" searchType="input">
        <template #default="{row}">
          <span v-if="row.messageContent&&row.messageContent.indexOf('。')>-1">
               <span>{{ row.messageContent.split("。")[0]+"。" }}</span><br>
               <span>{{ row.messageContent.split("。")[1] }}</span>
          </span>
          <span v-else>{{row.messageContent}}</span>

        </template>

      </Column>
      <Column :label="$t('common.createTime')" :width="250"
              :searchParams="queryParams" :showSearch="true" searchType="dateRange">
        <template #default="{ row }">
          <span>{{ parseTime(row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </Column>
      <Column :label="$t('common.operate')" align="center" min-width="100" fixed="right"
              :showSearch="true" searchType="operate"/>
    </card-table>
  </div>
</template>

<script>

import SearchForm from "../../../components/CustomElement/CustomForm/SearchForm.vue";
import CustomTable from "../../../components/CustomElement/CustomTable/CustomTable.vue";
import CustomButton from "../../../components/CustomElement/CustomButton.vue";
import CustomColumn from "../../../components/CustomElement/CustomTable/CustomColumn.vue";
import CustomDictColumn from "../../../components/CustomElement/CustomTable/CustomDictColumn.vue";
import CustomDictSelect from "../../../components/CustomElement/CustomForm/items/CustomDictSelect.vue";
import CustomDatePicker from "../../../components/CustomElement/CustomForm/items/CustomDatePicker.vue";
import {listMessage, readMessage} from "../../../api/business/message/message";
import Column from "../../../components/element/table/Column.vue";
import {parseTime} from "../../../utils/ruoyi";
import {mapGetters} from "vuex";
import CardTable from "../../../components/element/table/CardTable.vue";

export default {
  name: "MessageCenter",
  components: {
    CardTable,
    Column,
    CustomDatePicker, CustomDictSelect, CustomDictColumn, CustomColumn, CustomButton, CustomTable, SearchForm
  },
  dicts: ['message_type'],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        messageType: undefined,
        messageContent: '',
        createTime: undefined,
      },
      readLoading: false,
      dataList: [],
      loading: false,
    };
  },
  computed: {
    ...mapGetters(["dict"]),
  },
  watch: {},
  methods: {
    parseTime,
    getList(param) {
      this.loading = true;
      listMessage(param).then(response => {
        this.dataList = response.rows;
        this.queryParams.total = response.total;
        this.loading = false;
      });
    },
    resetQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.messageType = undefined;
      this.queryParams.messageContent = '';
      this.queryParams.createTime = undefined;
      this.handleQuery(this.queryParams);
    },

    handleQuery(param) {
      param.pageNum = 1;
      this.getList(param);
    },
    handleRead(selections) {
      if (!selections || selections.length === 0) {
        this.$message.error(this.$t('validation.errorAtLeast'))
        return
      }
      this.readLoading = true
      readMessage({ids: selections.map(item => item.id).join(',')}).then((res) => {
        if (res.code === 200) {
          this.$message.success(this.$t('common.updateSuccess'))
          this.handleQuery(this.queryParams);
          this.$refs.table.$refs.table.clearSelection();

          // 触发vuex中的消息数量刷新（右上角小铃铛）
          this.$store.commit('refreshMsg');
        }
      }).finally(() => this.readLoading = false)
    },
  },


  created() {

  },
  mounted() {
    this.getList(this.queryParams);
  },


}


</script>

<style scoped>

</style>

