<template>
  <div class="p-2" style="background: #dfdfdf;">
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form ref="formRef" :model="searchForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :span="14">
            <a-form-item name="packageName">
              <template #label><span title="服务指令包名称">服务指令包</span></template>
              <a-input v-model:value="searchForm.packageName" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="9">
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
                  style="margin-left: 8px">重置</a-button>
              </a-col>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-row style="padding: 5px;">
      <a-col v-for="directive of tableData.records" :key="directive.id" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="4"  style="padding: 5px 10px 0 0;height: 200px;">
        <a-row class="cardDivClass" @click="handlePackageClick(directive)" :class="{ 'selected': selectedDirective.id === directive.id }">
          <a-col :span="24">
            <a-row style="padding: 10px">
              <a-col :span="12">
                <img src="/src/assets/images/logo.png" style="width: 25px;height:25px;" />
              </a-col>
              <a-col :span="12" style="text-align: right;position:relative;">
                <span>
                  <a-switch :checked="directive.izEnabled == '0'" @change="handleChangeIzEnabled(directive)" checked-children="启" un-checked-children="停" disabled />
                </span>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24" style="text-align: center;">
            <span class="titleOne ellipsis-two-lines">
              {{ getHHMM(directive.startTimeStr) }}
              ~
              {{ getHHMM(directive.endTimeStr) }}
            </span>
          </a-col>
          <a-col :span="24" style="text-align: center;">
            <a-popover :title="directive.packageName">
              <template #content>
                <div style="min-width: 240px;">
                  <div style="max-width: 400px;line-height:30px;padding:5px;border-radius:5px;margin:5px;background:#f5f5f5;" v-for="(item,index) in directive.directives">{{ item.directiveName }}</div>
                  
                  <div style="max-width: 400px;line-height:30px;padding:5px;border-radius:5px;margin:5px;background:#f5f5f5;color:red;" v-if="directive.directives.length==0">未配置</div>
                </div>
              </template>
              <span class="titleOne ellipsis-two-lines">{{ directive.packageName }}</span>
            </a-popover>
          </a-col>
          <a-col :span="24">
            <a-divider style="margin: 10px 0 5px 0;"/>
          </a-col>
          <a-col :span="12"  style="padding: 0px  10px">
            {{ directive.createBy_dictText }}
          </a-col>
          <a-col :span="12" style="text-align: right;padding: 0px 10px;">
            {{ directive.createTime.substring(0,10) }}
          </a-col>
        </a-row>
      </a-col>

              <!-- <a-col :span="11" :push="1" v-for="(directive, index) of tableData.records" :key="index">
                <a-card :bordered="false" size="small" class="smart-card"
                  style="margin: 10px;box-shadow: 1px 1px 5px #b0b0b0;" @click="handlePackageClick(directive)"
                  :class="{ 'selected': selectedDirective.id === directive.id }">
                  <div class="selected-indicator" v-if="selectedDirective.id === directive.id"></div>
                  <div>{{ directive.packageName }}</div>
                  <div> {{ directive.createBy }}</div>
                  <div>{{ directive.createTime }}</div>
                </a-card>
              </a-col> -->
            <!-- </a-row>
        </div> -->
      <!-- <a-col :span="8">
        <a-card title="服务指令" style="width: 100%">
          <div class="scrollable-content">
            <a-row>
              <a-col :span="22" :push="1" v-for="directive of selectedDirective.directives" :key="directive.id"
                style="margin-top: 15px;" @click="directiveInfo(directive)">
                <a-badge-ribbon :text="filterDictTextByCache('period_type', directive.cycleType)"
                  :style="{ top: '-10px' }">
                  <a-card size="small">
                    <div :class="{ 'selected-dire': directiveId === directive.id }">
                      <div>
                        {{ directive.directiveName }}
                      </div>
                      <div>
                        体型标签：{{ handleBodyTags('', directive, '') }}
                      </div>
                      <div>
                        情绪标签：{{ handleEmotionTags('', directive, '') }}
                      </div>
                    </div>
                  </a-card>
                </a-badge-ribbon>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6" style="margin-left: 1vw;">
        <div>
          <a-card title="服务指令详情" style="width: 100%">
            <div class="">分类标签：{{ filterDictTextByCache('instruction_tag', derectiveInfo.instructionTagId) }}</div>
            <div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName }}</div>
            <div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName }}</div>
            <div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
            <div class="directiveInfoClass">周期类型：{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}
            </div>
            <div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
            <div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
            <div class="directiveInfoClass">体型标签：{{ handleBodyTags('', derectiveInfo, '') }}</div>
            <div class="directiveInfoClass">情绪标签：{{ handleEmotionTags('', derectiveInfo, '') }}</div>
            <div class="directiveInfoClass">语音文件：
              <span v-if="!derectiveInfo.mp3File">暂无文件</span>
              <audio controls disabled="false" v-else>
                <source :src="getFileAccessHttpUrl(derectiveInfo.mp3File)">
              </audio>
            </div>
            <div class="directiveInfoClass">视频文件：
              <span v-if="!derectiveInfo.mp4File">暂无文件</span>
              <video controls v-else>
                <source :src="getFileAccessHttpUrl(derectiveInfo.mp4File)">
              </video>
            </div>
          </a-card>
        </div>
      </a-col> -->
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, defineExpose } from 'vue';
import { list, queryById, deleteOne } from '../DirectivePackage.api'
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
import dayjs from "dayjs";

const selectedDirective = ref({ id: '' })
const registerModal = ref();
const searchForm = ref({})
const tableData = ref({})
const derectiveInfo = ref({})
const labelCol = reactive({
  xs: 24,
  sm: 4,
  xl: 9,
  xxl: 9
});
const wrapperCol = reactive({
  xs: 24,
  sm: 20,
  xl: 18,
  xxl: 18
});

/**
 * 搜索
 */
function searchQuery() {
  queryList({})
}

function getHHMM(value){
  if(value){
return dayjs(value).format('HH:mm')
  }else{
    return '未配置'
  }
}
/**
 * 重置
 */
function searchReset() {
  searchForm.value = {}
  queryList({})
}

/**
 * 新增
 */
function handleAdd() {
  registerModal.value.disableSubmit = false;
  registerModal.value.add();
}
/**
 * 成功回调
 */
function handleSuccess() {
  queryList({})
}

/**
 * 数据查询
 */
function queryList(params) {
  resetSeletedDirectiveInfo()
  list({ pageNo: 1, pageSize: -1, packageName: searchForm.value.packageName }).then(res => {
    tableData.value = res
    selectedDirective.value = { id: '' }
  })
}

/**
 * 编辑
 * @param data
 */
function packageEdit(data) {
  queryById({ id: data.id }).then(item => {
    registerModal.value.edit(item);
  })
}

/**
 * 移除
 * @param data
 */
function remove(data) {
  deleteOne({ id: data.id }, handleSuccess())
}

/**
 * 处理体型标签翻译
 * @param directive_ 
 */
function handleBodyTags(prefix, directive_, suffix) {
  if (!!directive_.bodyTagList && directive_.bodyTagList.length > 0) {
    let str = directive_.bodyTagList.map(item => item.tagName).join('、 ');
    return prefix + str + suffix
  } else {
    return ''
  }
}

/**
 * 处理情绪标签翻译
 * @param directive_ 
 */
function handleEmotionTags(prefix, directive_, suffix) {
  if (!!directive_.emotionTagList && directive_.emotionTagList.length > 0) {
    let str = directive_.emotionTagList.map(item => item.tagName).join('、 ');
    return prefix + str + suffix
  } else {
    return ''
  }
}

const directiveId = ref('')
/**
 * 点击服务指令卡片时触发：右侧展示指令详细信息
 * @param directive 
 */
function directiveInfo(directive_) {
  derectiveInfo.value = directive_
  directiveId.value = directive_.id
}

/**
 * 指令包点击事件
 * @param directive_ 
 */
function handlePackageClick(directive_) {
  resetSeletedDirectiveInfo()
  //重新赋值当前选择的包信息
  selectedDirective.value = directive_
}

/**
 * 重置已选择服务指令及服务指令详情
 */
function resetSeletedDirectiveInfo() {
  //重置已选择服务指令及服务指令详情
  derectiveInfo.value = {}
  directiveId.value = ''
}

onMounted(() => {
  queryList({ pageNo: 1, pageSize: -1 })
})

defineExpose({
  selectedDirective
});
</script>

<style lang="less" scoped>
.jeecg-basic-table-form-container {
  padding: 0;

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }

  .query-group-cust {
    min-width: 100px !important;
  }

  .query-group-split-cust {
    width: 30px;
    display: inline-block;
    text-align: center
  }

  .ant-form-item:not(.ant-form-item-with-help) {
    margin-bottom: 16px;
    height: 32px;
  }

  :deep(.ant-picker),
  :deep(.ant-input-number) {
    width: 100%;
  }
}

.ant-drawer .ant-drawer-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow: auto;
  background: #dfdfdf;
}

.selected {
  // background: url("@/assets/icons/success.svg") no-repeat;
  // background-position: calc(100% - 5px) calc(100% - 5px);
  // background-size: auto 30%;
  // transition: none !important;
  background: #edf8ff !important;
  border: 1px solid #7cc3f0;
}

.selected-dire {
  color: rgb(0, 156, 0);
  font-weight: bold;
}

.derectiveInfoClass {
  border: 1px solid grey;
  margin: 5px;
}

.smart-card {
  margin: 10px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  // 悬停效果
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  // 点击动画
  &:active {
    transform: scale(0.98);
  }

  // 选中状态
  &.active-card {
    border-left: 4px solid #1890ff;

    .selected-indicator {
      position: absolute;
      right: 8px;
      top: 8px;
      width: 8px;
      height: 8px;
      background: #1890ff;
      border-radius: 50%;
    }
  }
}

.scrollable-content {
  height: 70vh;
  /* 设置固定高度为视口的50% */
  overflow-y: auto;
  /* 垂直方向超出时显示滚动条 */
  padding-right: 8px;
  /* 防止滚动条遮挡内容 */
}

.titleOne {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}
.cardDivClass{ 
  transition: all 0.3s ease;
  position: relative;
  padding: 5px;background-color: white;border-radius: 8px;height: 180px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
}

.cardDivClass:hover{ 
  padding: 5px;background-color: #f4fcff;border-radius: 8px;height: 180px;
  box-shadow: 
    0 0 0 2px #d3d3d3,  /* 描边 */
    0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  transform: translate(-2px , -2px); /* 轻微上浮效果 */
}

.iconEditClass{
  position:absolute;top:0;right:54px;background: #dfdfdf;border-radius:50%;width: 25px;height: 25px;display:flex;justify-content: center;align-items: center;align-items: center;
}
</style>
