<script setup>
import { interactiveInterface } from '@/api/api.js';
import mPage from '@/components/mPage.vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { nextTick, reactive, ref } from 'vue';
import { Search } from "@element-plus/icons-vue";

const pageState = reactive({
  searchParams: {
    CreateDate: '',
    ProductType: '',
    KeyWord: '',
    CurrentIndex: 1,
    PageSize: 10
  },
  total: 0,
  dataList: [],
  boardArray: [],
  // 弹窗标题
  dialogTitle: '',
  //---------------留言详情弹窗
  // 是否显示
  isDetailShow: false,
  detailForm: {},
  //  ----------------留言回复弹窗
  // 是否显示
  isReplayShow: false,
  replayForm: {
    CommentId: '',
    content: ''
  },
  expandRow: {}
})


// 切换页码
function pageChange(page) {
  pageState.searchParams.CurrentIndex = page
  getMessageList()
}
// 搜索
function search() {
  pageState.searchParams.CurrentIndex = 1
  getMessageList()
}
// 获取留言列表
const messageTable = ref(null)
function getMessageList(option = '') {
  // option 操作 expand展开对应行
  interactiveInterface.getAllBoardMessage(pageState.searchParams).then(res => {
    pageState.dataList = res.Data.List || []
    pageState.total = res.Data.Paging.Totals || 0
    if (option == 'expand') {
      nextTick(() => {
        messageTable.value?.toggleRowExpansion(pageState.expandRow, true)
      })
    }
  })
}
//获取板块列表
function getProductionList() {
  interactiveInterface.getProductList().then(res => {
    pageState.boardArray = [{ ProductName: '全部', ProductType: '' }, ...res.Data]
  })
}
// // 刷新列表
// refreshList(){
//   this.getMessageList()
// },
// 置顶/取消置顶
function topOption(row) {
  interactiveInterface.messageTop({ CommentId: row.CommentId }).then(res => {
    row.IsTop = res.Data.IsTop
    ElMessage.success('操作成功')
  })
}
// 留言详情
const replayForm = ref(null)
function messageDetail(row) {
  // console.log(row);
  pageState.dialogTitle = '留言人详情'
  pageState.detailForm = row
  pageState.isDetailShow = true
}
// 回复
function replayMessage(row) {
  pageState.dialogTitle = '留言回复'
  pageState.replayForm = {
    CommentId: row.CommentId,
    content: ''
  }
  pageState.expandRow = row;
  replayForm.value?.clearValidate()
  pageState.isReplayShow = true
}
// 提交
function submit() {
  replayForm.value?.validate((valid) => {
    if (valid) {
      interactiveInterface.messageReplay(pageState.replayForm).then(res => {
        if (res.Ret == 200) {
          ElMessage.success('回复成功')
          pageState.isReplayShow = false
          getMessageList('expand')
        }
      })
    }
  })
}
// 删除操作
function deleteOption(row) {
  // console.log(row);
  let text = row.ReplyCommentId ? '回复' : '留言'
  let productType = row.ProductType ? row.ProductType
    : row.ReplyCommentId ? 1 : ''
  ElMessageBox.confirm(text + '删除后不可恢复，确定删除吗？', {
    confirmText: '确定',
    cancelText: '取消',
    customClass: 'warning-outline-icon',
    iconClass: 'el-icon-warning-outline'
  }).then(res => {
    interactiveInterface.messageDelete({ CommentId: row.CommentId, ProductType: productType }).then(res => {
      if (res.Ret == 200) {
        ElMessage.success('删除成功')
        getMessageList()
      }
    })
  }).catch(() => { })
}
// 合并单元格
function spanMethod({ row, rowIndex, column, columnIndex }) {
  if ((!row.Title) && (!row.ProductType)) {
    if (columnIndex == 3) {
      return {
        rowspan: 1,
        colspan: 2
      }
    } else if (columnIndex == 4) {
      return {
        rowspan: 1,
        colspan: 0
      }
    }
  }
}




function initPage() {
  getMessageList()
  getProductionList()
}
initPage()

</script>

<template>
  <div id="messageManage-container">
    <div class="search-zone">
      <div class="search-zone-left">
        <el-date-picker
          v-model="pageState.searchParams.CreateDate"
          placeholder="留言时间"
          @change="search"
          value-format="yyyy-MM-dd"
          style="width: 248px; margin-right: 48px"
        ></el-date-picker>
        <el-select
          v-model="pageState.searchParams.ProductType"
          placeholder="板块"
          @change="search"
        >
          <el-option
            :label="item.ProductName"
            :value="item.ProductType"
            v-for="item in pageState.boardArray"
            :key="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="search-zone-right">
        <el-input
          v-model="pageState.searchParams.KeyWord"
          placeholder="留言内容"
          @input="search"
          style="width: 230px"
          :prefix-icon="Search"
        ></el-input>
      </div>
    </div>
    <el-table
      :data="pageState.dataList"
      border
      row-key="CommentId"
      :tree-props="{ children: 'ReplyList' }"
      :span-method="spanMethod"
      ref="messageTable"
    >
      <el-table-column label="留言内容" prop="Content">
        <template #default="{ row }">
          {{ row.Content }}
        </template>
      </el-table-column>
      <el-table-column
        label="时间"
        prop="CreateTime"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column label="留言人" prop="RealName" align="center">
        <template #default="{ row }">
          <span
            style="color: #409eff; cursor: pointer"
            @click="messageDetail(row)"
            v-if="row.RealName"
            >{{ row.RealName }}</span
          >
          <span v-else>{{ row.AdminName || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="来源"
        prop="Title"
        show-overflow-tooltip
        align="center"
      >
        <template #default="{ row }">
          {{ row.Title }}
        </template>
      </el-table-column>
      <el-table-column
        label="板块"
        prop="ProductType"
        show-overflow-tooltip
        align="center"
      >
        <template #default="{ row }">
          <span>{{
            pageState.boardArray[row.ProductType]
              ? pageState.boardArray[row.ProductType].ProductName
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <div class="table-option">
            <template v-if="row.ProductType == 1">
              <span @click="topOption(row)" v-if="row.IsTop == 0">置顶</span>
              <span @click="topOption(row)" v-else>取消置顶</span>
            </template>
            <span @click="replayMessage(row)" v-if="row.ProductType == 1"
              >回复</span
            >
            <span @click="deleteOption(row)" style="color: #b72e18">删除</span>
          </div>
        </template>
      </el-table-column>
      <template #empty>
        <div style="padding: 100px 0">
          <img
            src="~@/assets/img/cus_m/nodata.png"
            style="display: block; width: 128px; height: 128px; margin: 0 auto"
          />
          <span>暂无数据</span>
        </div>
      </template>
    </el-table>
    <div style="height: 40px; margin-top: 10px; padding: 0 20px">
      <m-page
        :page_no="pageState.searchParams.CurrentIndex"
        :pageSize="10"
        :total="pageState.total"
        @handleCurrentChange="pageChange"
      />
    </div>
    <!-- 留言详情弹窗 -->
    <el-dialog
      v-model="pageState.isDetailShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="pageState.isDetailShow = false"
      width="568px"
      draggable
      center
      :title="pageState.dialogTitle"
    >
      <el-form :model="pageState.detailForm" label-width="105px">
        <el-form-item label="留言内容：" id="content-form-item">
          <span>{{ pageState.detailForm.Content }}</span>
        </el-form-item>
        <el-form-item label="留言人姓名：">
          {{ pageState.detailForm.RealName }}
        </el-form-item>
        <el-form-item label="公司名称：">
          {{ pageState.detailForm.CompanyName || "--" }}
        </el-form-item>
        <el-form-item label="客户状态：">
          {{ pageState.detailForm.CompanyStatus || "--" }}
        </el-form-item>
        <el-form-item label="所属销售：">
          {{ pageState.detailForm.SellerName || "--" }}
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button
            @click="pageState.isDetailShow = false"
            type="primary"
            style="height: 40px; width: 224px"
            >知道了</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 留言回复弹窗 -->
    <el-dialog
      v-model="pageState.isReplayShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="pageState.isReplayShow = false"
      width="568px"
      draggable
      center
      :title="pageState.dialogTitle"
    >
      <el-form :model="pageState.replayForm" ref="replayForm">
        <el-form-item
          :rules="[
            { required: true, message: '回复内容不能为空', trigger: 'blur' },
          ]"
          prop="content"
        >
          <el-input
            v-model="pageState.replayForm.content"
            placeholder="请输入回复"
            type="textarea"
            resize="none"
            :show-word-limit="true"
            maxlength="150"
            rows="10"
          ></el-input>
        </el-form-item>
        <span
          style="
            font-size: 16px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          "
        >
          注：至多输入150字，超出部分不予显示
        </span>
      </el-form>
      <template #footer>
        <div style="margin-top: ;20px">
          <el-button
            @click="submit"
            type="primary"
            style="width: 132px; height: 40px"
            >保存</el-button
          >
          <el-button
            @click="pageState.isReplayShow = false"
            style="width: 132px; height: 40px"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#messageManage-container {
  background-color: white;
  padding: 18px 20px;
  box-sizing: border-box;
  min-height: calc(100vh - 110px);
  border: 1px solid #ececec;
  .search-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 21px;
  }
  .table-option {
    display: flex;
    align-items: center;
    justify-content: space-around;
    span {
      cursor: pointer;
      color: #409eff;
    }
  }
}
</style>
<style lang="scss">
#content-form-item {
  .el-form-item__label,
  .el-form-item__content {
    line-height: normal;
  }
}
#messageManage-container {
  .el-table__indent {
    padding-left: 0 !important;
  }
  .el-table__placeholder {
    width: 0;
  }
}

.warning-outline-icon {
  .el-icon-warning-outline {
    color: #e6a23c;
  }
}
</style>