<template>
  <div class="hct-message">
    <div class="hct-message-header">
      <div class="hct-message-tab">
        <span
          v-for="(item, i) in tabs"
          :key="i"
          :class="['tab-item', data.type == i ? 'active' : '']"
          @click="selectTab(i)"
        >
          {{ item.label
          }}<span>{{ item.isNum ? "(" + item.num + ")" : `` }}</span>
        </span>
      </div>
      <el-button
        v-show="data.text"
        @click="clickButton(i)"
      >
        {{ data.text }}
      </el-button>
      <el-checkbox v-model="data.allSelect" />
    </div>
    <div
      :class="[
        'hct-message-content',
        data.type == 1 ? 'hct-message-padding' : '',
      ]"
    >
      <div
        v-for="(item, i) in messageList"
        :key="i"
        class="hct-message-item"
      >
        <span
          v-if="data.type == 0 || data.type == 1"
          class="hct-message-point"
        />
        <span
          v-else
          class="hct-message-point-hidden"
        />
        <div
          class="hct-item-content"
          @click="openDetail(item)"
        >
          <div class="hct-item-state">
            相机包编号为(HCB0042152)的商品备案已审核通过
          </div>
          <div class="hct-item-name">
            订单管理-物流订单列表
          </div>
          <div class="hct-item-time">
            <span>2022-07-06 12:20:10</span>
            <i
              v-if="data.type != 4"
              :class="[
                'iconfont',
                data.collectList.includes(item.id)
                  ? 'icon-hctshoucang'
                  : 'icon-hctshoucang-moren1',
              ]"
              @click.stop="collect(item.id)"
            />
          </div>
        </div>
        <el-checkbox
          :checked="findInx(item.id, data.checkedList) > -1"
          @change="checkboxChange(item.id)"
        />
      </div>
    </div>
    <div
      v-if="data.type == 1"
      class="hct-message-footer"
    >
      <span class="left-noAgree">不同意</span>
      <span class="right-agree">同意</span>
    </div>
    <el-dialog
      v-model="data.dialogVisible"
      title="消息详情"
      width="1044px"
      center
    >
      <div class="dialog-content">
        <div class="dialog-content-title">
          相机包编号为(HCB0042152)的商品备案已审核通过
        </div>
        <div class="dialog-content-notice">
          尊敬的永用户：您提交的商品名为测试相机的商品备案申请，编号为HCBA0046467已审核通过，详情可点击这里查看详情
        </div>
        <div class="dialog-content-info">
          <div>
            发布人：张三
          </div>
          <div>
            发布时间：2022-07-20 16:05:10
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button :icon="Back">上一条</el-button>
          <div class="dialog-footer-center">
            <el-button @click="del">删除</el-button>
            <el-button
              type="primary"
              @click="unread"
            >未读</el-button>
          </div>
          <el-button>下一条<el-icon><Right /></el-icon></el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { Back, Right } from "@element-plus/icons-vue";
let emit = defineEmits(['checkboxChange','collect','selectTab','openDetail'])
let props = defineProps({
  messageList: Array,
})
let messageList = ref(props.messageList);
let data = reactive({
  type: 0, // 选中的标签
  text: "标记为已读",
  allSelect: false, // 是否全选
  checkedList: [], // 已选中的多选
  collectList: [], // 已选中的收藏
  tabs: [], //tab列表
  dialogVisible: false, // 消息详情弹窗
});
// 选择多选框
const checkboxChange = (e) => {
  let i = findInx(e, data.checkedList);
  if (i > -1) {
    data.checkedList.splice(i, 1);
  } else {
    data.checkedList.push(e);
  }
};
// 收藏
const collect = (e) => {
  let i = findInx(e, data.collectList);
  if (i > -1) {
    data.collectList.splice(i, 1);
  } else {
    data.collectList.push(e);
  }
};
// 查找数组中的下标
const findInx = (val, list) => {
  return list.findIndex((value, index, array) => {
    return val == value;
  });
};
// 点击切换tab
const selectTab = (e) => {
  data.type = e;
  switch (e) {
    case 0:
      data.text = "标记为已读";
      break;
    case 1:
      data.text = "";
      break;
    case 2:
      data.text = "";
      break;
    case 3:
      data.text = "标记为未读";
      break;
    case 4:
      data.text = "取消收藏";
      break;
    case 5:
      data.text = "删除";
      break;
    default:
      break;
  }
  emit('selectTab')
};
// 点击按钮 触发
const clickButton = (e) => {};
// 打开详情
const openDetail = (item) => {
  data.dialogVisible = true;
};
// confim
function Confim() {
  data.dialogVisible = false
}
let tabs = reactive([
  {
    label: "未读",
    id: 0,
    num: 0,
    isNum: true,
  },
  {
    label: "待办",
    id: 1,
    num: 0,
    isNum: true,
  },
  {
    label: "已办",
    id: 2,
    num: 0,
    isNum: false,
  },
  {
    label: "已读",
    id: 3,
    num: 0,
    isNum: false,
  },
  {
    label: "收藏",
    id: 4,
    num: 0,
    isNum: false,
  },
  {
    label: "全部",
    id: 5,
    num: 0,
    isNum: false,
  },
]);
</script>

<script>
export default {
  name: "HctMessage",
};
</script>

<style scoped lang='scss'>
.hct-message {
  width: 482px;
  height: 415px;
  border-radius: 6px;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow: hidden;
  .hct-message-header {
    display: flex;
    justify-content: space-between;
    padding: 16px 10px;
    // box-sizing: border-box;
    height: 26px;
    line-height: 26px;
    .hct-message-tab {
      display: flex;
      padding-left: 8px;
      .tab-item {
        display: inline-block;
        margin: 0 8px;
        color: #999;
        font-size: 14px;
        span {
          color: #ff6666;
        }
      }
      .active {
        color: #3592ff;
      }
    }
    :deep(.el-button) {
      width: 90px;
      height: 26px;
      font-size: 14px;
      color: #3592ff;
      border: 1px solid #3592ff;
    }
  }

  .hct-message-content {
    height: 350px;
    padding: 0 10px;
    overflow-y: auto;
    box-sizing: border-box;
    .hct-message-item {
      display: flex;
      // justify-content: space-between;
      // align-items: center;
      position: relative;
      height: 64px;
      font-size: 14px;
      margin: 10px 0;
      .hct-message-point {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #ff6666;
        margin-right: 8px;
      }
      .hct-message-point-hidden {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #fff;
        margin-right: 8px;
      }
      .hct-item-content {
        width: 320px;
        height: 64px;
        line-height: 16px;
        .hct-item-state {
          color: #333;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        }
        .hct-item-name {
          color: #666;
          font-size: 12px;
          margin-top: 8px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        }
        .hct-item-time {
          color: #666;
          font-size: 12px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          margin-top: 8px;
          > span {
            margin-right: 8px;
          }
        }
      }
      .el-checkbox {
        position: absolute;
        top: -8px;
        right: 0;
      }
    }
  }
  .hct-message-padding {
    padding-bottom: 48px;
  }
  .hct-message-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background-color: #fff;
    line-height: 48px;
    display: flex;
    justify-content: space-between;
    z-index: 2100;
    .left-noAgree,
    .right-agree {
      width: 240px;
      text-align: center;
      position: relative;
      font-size: 14px;
      color: #999999;
    }
    .right-agree {
      color: #3592ff;
    }
    .right-agree::after {
      content: "";
      height: 30px;
      width: 1px;
      background-color: #dddddd;
      position: absolute;
      left: 0;
      top: 9px;
    }
  }
  :deep(.el-dialog__body) {
      padding: 38px 64px 32px;
    }
  .dialog-content {
      font-size: 18px;
    .dialog-content-title {
      margin-bottom: 52px;
    }
    .dialog-content-notice {
      line-height: 32px;
      height: 230px;
    }
    .dialog-content-info {
      text-align: right;
      font-size: 16px;
      color: #999;
      line-height: 36px;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    > :deep(.el-button) {
      width: 132px;
      height: 52px;
      color: #999;
      border: 1px solid #DDDDDD;
      font-size: 18px;
      .el-icon {
        margin-left: 10px;
      }
    }
    .dialog-footer-center {
      > :deep(.el-button) {
        width: 123px;
        height: 52px;
        background: rgba(53, 146, 255,0.2);
        font-size: 20px;
        border-radius: 4px;
        color: #3592FF;
        border: 1px solid rgba(53, 146, 255,0.2);
      }
      :deep(.el-button:nth-child(1)) {
        background: rgba(255, 102, 102,0.2);
        border-radius: 4px;
        color: #FF6666;
        border: 1px solid rgba(255, 102, 102,0.2);
      }
    }
  }
  /* 整个滚动条 */
  :deep(::-webkit-scrollbar) {
    /* 对应纵向滚动条的宽度 */
    // width: 6px;
    display: none;
  }
}
</style>