<template>
  <div class="container">
    <!-- 遮罩层区域 -->
    <div class="mask" @click="handleClose"></div>
    <!-- 主体内容区域 -->
    <div class="detail">
      <!-- 标题区域 -->
      <div class="detail_title"></div>

      <!-- 关闭按钮区域 -->
      <div class="close_icon" @click="handleClose"></div>

      <!-- 筛选区域 -->
      <div class="detail_search">
        姓名
        <el-input
          v-model="nameValue"
          style="width: 575px; height: 75px; margin: 0 50px 0 30px"
          size="large"
          placeholder="请输入姓名"
          :suffix-icon="Search"
        />

        评价时间
        <el-date-picker
          v-model="timeRang"
          type="daterange"
          range-separator="至"
          start-placeholder="请选择日期"
          end-placeholder="请选择日期"
          size="large"
          style="width: 575px; height: 75px; margin: 0 50px 0 30px"
        />
        舆情等级
        <el-select
          v-model="levelValue"
          placeholder="全部"
          size="large"
          style="width: 575px; margin-left: 30px"
        >
          <el-option
            v-for="(item, index) in levelList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>

      <!-- 表格区域 -->
      <div class="detail_table">
        <el-table :data="tableData" height="835px" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="100"
          />
          <el-table-column label="头像" align="center">
            <template #default="{ row }">
              <el-image
                class="table_img"
                fit="contain"
                :src="row.url"
                :preview-src-list="[row.url]"
                hide-on-click-modal
                preview-teleported
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="time" label="评价时间" align="center" />
          <el-table-column prop="type" label="来源渠道" align="center" />
          <el-table-column prop="order" label="订单号" align="center" />
          <el-table-column prop="content" label="评价内容" align="center" />
          <el-table-column prop="level" label="舆情等级" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <div class="table_btn" @click="lookDetail(row)">查看详情</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器区域 -->
      <div class="pagination">
        <el-pagination
          background
          :pager-count="5"
          layout="prev, pager, next"
          :total="1000"
        />
      </div>

      <!-- 评价详情弹窗区域 -->
      <Transition name="fade">
        <EvaluateMsgDialog
          v-if="showMsg"
          :showObj="showObj"
          @closeMsg="closeMsg"
        />
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import EvaluateMsgDialog from "./evaluateMsgDialog.vue";

const $emit = defineEmits(["closeDialog"]);

const nameValue = ref("");

const levelValue = ref("");

const timeRang = ref("");

const levelList = ref(["全部", "优", "良"]);

const tableData = [
  {
    url: "https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
    name: "华志杰",
    time: "2024-10-01 11:39:30",
    type: "线上特产",
    order: "1222366444444",
    content: "体验非常好",
    level: "优",
  },
  {
    url: "https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
    name: "刘子麟",
    time: "2024-10-01 11:39:30",
    type: "线上特产",
    order: "1222366444444",
    content: "还行",
    level: "良",
  },
  {
    url: "https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
    name: "夏文涛",
    time: "2024-10-01 11:39:30",
    type: "线上特产",
    order: "1222366444444",
    content: "体验非常好",
    level: "优",
  },
  {
    url: "https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
    name: "朱秀平",
    time: "2024-10-01 11:39:30",
    type: "线上特产",
    order: "1222366444444",
    content: "还行",
    level: "良",
  },
  {
    url: "https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
    name: "张海涛",
    time: "2024-10-01 11:39:30",
    type: "线上特产",
    order: "1222366444444",
    content: "体验非常好",
    level: "优",
  },
  {
    url: "https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
    name: "张玉玲",
    time: "2024-10-01 11:39:30",
    type: "线上特产",
    order: "1222366444444",
    content: "还行",
    level: "良",
  },
  {
    url: "https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
    name: "李荣",
    time: "2024-10-01 11:39:30",
    type: "线上特产",
    order: "1222366444444",
    content: "体验非常好",
    level: "优",
  },
  {
    url: "https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg",
    name: "王晓雪",
    time: "2024-10-01 11:39:30",
    type: "线上特产",
    order: "1222366444444",
    content: "还行",
    level: "良",
  },
];

const showObj = ref({});

// 评价详情弹窗显示隐藏控制
const showMsg = ref<boolean>(false);

// 点击关闭按钮回调
const handleClose = () => {
  $emit("closeDialog", false);
};

// 点击查看详情按钮回调
const lookDetail = (row: any) => {
  showMsg.value = true;
  showObj.value = row;
};

// 自定义事件
const closeMsg = (data: boolean) => {
  showMsg.value = data;
};
</script>

<style lang="scss" scoped>
.container {
  z-index: 9999;
  position: absolute;
  top: -362px;
  left: -140px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7072px;
  height: 1872px;
  background-color: rgba($color: #000000, $alpha: 0.4);

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 7072px;
    height: 1872px;
  }

  .detail {
    position: relative;
    width: 2687px;
    height: 1302px;
    background-image: url(@/assets/images/9.png);
    background-size: 100% 100%;

    .detail_title {
      margin-top: 51px;
      margin-left: 51px;
      width: 2521px;
      height: 96px;
      background-image: url(@/assets/images/79.png);
      background-size: 100% 100%;
    }

    .close_icon {
      position: absolute;
      top: 59px;
      right: 17px;
      width: 82px;
      height: 82px;
      cursor: pointer;
      background-image: url(@/assets/images/12.png);
      background-size: 100% 100%;
    }

    .detail_search {
      display: flex;
      align-items: center;
      margin-left: 53px;
      width: 2567px;
      height: 176px;
      font-size: 30px;
    }

    .detail_table {
      margin-left: 53px;
      width: 2567px;
      height: 835px;

      .table_img {
        width: 52px;
        height: 63px;
      }

      .table_btn {
        color: #0aadda;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-left: 53px;
      width: 2567px;
      height: 100px;
    }
  }
}

::v-deep(.el-input__wrapper) {
  font-size: 30px;
  background-color: rgba(36, 98, 125, 0.5);
}

::v-deep(.el-input__inner) {
  color: #fff;
}

::v-deep(.el-range-input),
::v-deep(.el-range-separator) {
  color: #fff;
  font-size: 30px;
}

::v-deep(.el-date-editor .el-range__icon),
::v-deep(.el-date-editor .el-range__close-icon),
::v-deep(.el-select__caret) {
  font-size: 30px;
}

::v-deep(.el-select--large .el-select__wrapper) {
  height: 75px;
  font-size: 30px;
  background-color: rgba(36, 98, 125, 0.5);
}

::v-deep(.el-select__placeholder) {
  color: #fff;
  line-height: 75px;
}

/*最外层透明*/
.detail_table ::v-deep(.el-table),
.detail_table ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.detail_table ::v-deep(.el-table th),
.detail_table ::v-deep(.el-table tr),
.detail_table ::v-deep(.el-table td) {
  background-color: transparent !important;
  color: white;
  font-size: 16px;
  border-color: rgba(255, 255, 255, 0.1);
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(41, 67, 102, 0.7);
}

::v-deep(.el-pagination.is-background .el-pager li),
::v-deep(.el-pagination.is-background .btn-next),
::v-deep(.el-pagination.is-background .btn-prev) {
  color: #000;
  background-color: #cccccc;
}

::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  color: #fff;
  background-color: #0aadda;
}

// ::v-deep(.el-pagination__goto),
// ::v-deep(.el-pagination__classifier),
// ::v-deep(.el-input__inner) {
//   color: #b0b0b0;
// }
</style>
