<template>
  <a-spin :spinning="confirmLoading">
    <div v-show="!isEditMedia"
      style="padding-top: 14px;padding-left: 14px;padding-right: 14px; background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);margin-bottom: 14px;">
      <JFormContainer :disabled="true">
        <template #detail>
          <a-form ref="formRef" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
            name="ConfigService2DirectiveForm" style="padding: 0px 0px;">
            <a-row v-show="!isEditMedia">
              <a-col :span="8">
                <a-form-item label="分类标签" v-bind="validateInfos.instructionTagName"
                  id="ConfigServiceDirectiveForm-instructionTagName" name="instructionTagName">
                  <a-input v-model:value="formData.instructionTagName" placeholder="分类标签" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="服务类别" v-bind="validateInfos.categoryName"
                  id="ConfigServiceDirectiveForm-categoryName" name="categoryName">
                  <a-input v-model:value="formData.categoryName" placeholder="服务类别" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="服务类型" v-bind="validateInfos.typeName" id="ConfigServiceDirectiveForm-typeName"
                  name="typeId">
                  <a-input v-model:value="formData.typeName" placeholder="服务类型" disabled />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </template>
      </JFormContainer>
    </div>
    <div style="padding: 14px;background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
      <JFormContainer :disabled="true">
        <template #detail>
          <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
            name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
            <a-row>
              <a-col :span="12">
                <a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
                  id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
                  <a-input v-model:value="formData.directiveName" placeholder="服务指令名称" disabled></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="收费价格(元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
                  name="tollPrice">
                  <a-input v-model:value="formData.tollPrice" placeholder="收费价格" disabled></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
                  name="cycleType">
                  <a-input v-model:value="formData.cycleTypeName" placeholder="周期类型" disabled></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
                  name="comPrice">
                  <a-input v-model:value="formData.comPrice" placeholder="提成价格" disabled></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务时长" v-bind="validateInfos.serviceDuration"
                  id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
                  <a-input v-model:value="formData.serviceDuration" placeholder="服务时长（分钟）" disabled></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </template>
      </JFormContainer>
    </div>
    <div
      style="padding: 14px;background-color: #fff;border-radius: 0 0px 10px 10px;box-shadow: 0 10px 10px rgba(0.1, 0.1, 0.2, 0.1); margin-top: -80px;">
      <JFormContainer>
        <template #detail>
          <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
            name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
            <a-row style="padding: 20px;">
              <a-col :span="6">
                <DirectiveRadioCom :directiveMediaBtnValue="directiveMediaBtnValue" @change="mediaBtnChanged">
                </DirectiveRadioCom>
              </a-col>
            </a-row>
            <a-row style="padding: 0px 20px;">
              <a-col :span="24" v-show="directiveMediaBtnValue == 0">
                <JImageUploadtz :value="!!formData.previewFile ? formData.previewFile : defaultPrePic" disabled />
              </a-col>
              <a-col :span="24" v-show="directiveMediaBtnValue == 1">
                <JImageUploadtz :value="!!formData.previewFileSmall ? formData.previewFileSmall : defaultPreSmallPic"
                  disabled />
              </a-col>
              <a-col :span="24" v-show="directiveMediaBtnValue == 2">
                <JUploadMP3 :value="formData.mp3File" disabled />
              </a-col>
              <a-col :span="24" v-show="directiveMediaBtnValue == 3">
                <JUploadMP4 :value="formData.mp4File" fileType="mp4" disabled />
              </a-col>
              <a-col :span="24" v-show="directiveMediaBtnValue == 4">
                <JImageUploadtz :value="!!formData.immediateFile ? formData.immediateFile : defaultImmediatePic"
                  disabled />
              </a-col>
              <a-col :span="24" v-show="directiveMediaBtnValue == 5">
                <JImageUploadtz
                  :value="!!formData.immediateFileFocus ? formData.immediateFileFocus : defaultImmediatePic" disabled />
              </a-col>
            </a-row>
            <a-row style="padding: 20px;">
              <a-col :span="2">
                <div class="description-container">
                  <a-button @click="toggleDescription">服务指令描述</a-button>
                  <div v-show="showDescription" class="description-box">
                    <div class="box-header">
                      <span class="title">服务指令描述</span>
                      <span class="collapse-icon" @click="toggleDescription">
                        <DownOutlined style="margin-right: 3px;" />收起
                      </span>
                    </div>
                    <div>
                      <a-textarea style="color: #606266;" v-model:value="formData.serviceContent" placeholder="服务指令描述" :maxlength="200"
                        :rows="3" :autoSize="{ minRows: 3 }" :showCount="true" disabled />
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </template>
      </JFormContainer>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, watch } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JUploadMP3 from '/@/components/Form/src/jeecg/components/JUpload/JUploadMP3.vue';
import JUploadMP4 from '/@/components/Form/src/jeecg/components/JUpload/JUploadMP4.vue';
import JImageUploadtz from '/@/components/Form/src/jeecg/components/JImageUploadtz.vue';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import DirectiveRadioCom from './DirectiveRadioCom.vue'
import { DownOutlined } from '@ant-design/icons-vue';
import { queryUpBizPrefix } from '/@/api/common/api'
import { list } from '../DirectiveOpeLogInfo.api'

const showDescription = ref(false);

// 切换悬浮容器的显示状态
const toggleDescription = () => {
  showDescription.value = !showDescription.value;
};
const defaultPrePic = import.meta.env.VITE_DEFAULT_DIRECTIVE_PRE_PIC
const defaultPreSmallPic = import.meta.env.VITE_DEFAULT_DIRECTIVE_PRESMALL_PIC
const defaultImmediatePic = import.meta.env.VITE_DEFAULT_DIRECTIVE_IM_PIC
const upBizPrefix = ref('')

const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  categoryName: '',
  createBy: '',
  createTime: '',
  cycleTypeName: '',
  directiveName: '',
  instructionTagName: '',
  opeType: '',
  opeType_dictText: '',
  orgCode: '',
  orgCode_dictText: '',
  typeName: '',
  tollPrice: 0,
  comPrice: 0,
  serviceDuration: '',
  serviceContent: '',
  immediateFile: '',
  immediateFileFocus: '',
  mp3File: '',
  mp4File: '',
  previewFile: '',
  previewFileSmall: '',
});
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 4 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 19 } });
const confirmLoading = ref<boolean>(false);
const isEditMedia = ref(false)
//表单验证
const validatorRules = reactive({
});

const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });

/**
 * 编辑
 * isEditMedia_是否为编辑指令资源 （隐藏业务字段）
 */
async function detail(record_) {
  let data = await list({ 'pkId': record_.id })
  let record = data.records[0]
  record.cycleTypeName = record_.cycleTypeName
  console.log("🌊 ~ detail ~ record:", record)
  nextTick(() => {
    resetFields();
    const tmpData = {};
    Object.keys(formData).forEach((key) => {
      if (record.hasOwnProperty(key)) {
        tmpData[key] = record[key]
      }
    })
    //赋值
    Object.assign(formData, tmpData);
  });
}

const directiveMediaBtnValue = ref(0)
function mediaBtnChanged(v_) {
  directiveMediaBtnValue.value = v_

}

onMounted(() => {
  queryUpBizPrefix().then(res => {
    upBizPrefix.value = res.result
  })
})

defineExpose({
  detail,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  padding: 0px;
}

:deep .ant-checkbox-wrapper {
  margin-top: 5px;
  margin-bottom: 14px;
  width: 30%;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  margin-bottom: 14px;
}

.upload-text {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 8px;
}

.divider {
  color: rgba(0, 0, 0, 0.2);
}

.description-container {
  position: relative;
  z-index: 1000;
}

.description-box {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #f6faff;
  border-radius: 4px;
  padding: 12px;
  width: 43vw;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.title {
  font-weight: bold;
  font-size: 16px;
}

.collapse-icon {
  color: #1890ff;
  cursor: pointer;
}

.content {
  background: #fff;
  border-radius: 4px;
  padding: 12px;
  position: relative;
}

.instruction {
  color: #8c8c8c;
  margin-bottom: 30px;
}

.confirm-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: #1890ff;
  border-radius: 20px;
}

/* 渐隐渐现动画 */
.slide-fade-enter-active {
  transition: opacity 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: opacity 0.3s cubic-bezier(0.5, 0, 0.8, 1);
}

/* 进入时从透明开始 */
.slide-fade-enter-from {
  opacity: 0;
}

/* 离开时渐变到透明 */
.slide-fade-leave-to {
  opacity: 0;
}

/* 确保容器初始状态无变形 */
.slide-fade-enter-to,
.slide-fade-leave-from {
  opacity: 1;
}
</style>
