<template>
    <div style="height: 90vh;overflow-y: auto;">
        <view class="content">
            <view class="content-input">
                <view class="input-titile"><text class="input-required">*</text>标题</view>
                <input class="input-con" v-model="fromValue.title" placeholder="请输入标题" />
            </view>
            <view class="content-input">
                <view class="input-titile"><text class="input-required">*</text>内容</view>
                <!-- <unieditor v-if="shows" @init-data="receiveInitData" :content="fromValue.content"/> -->
				<view v-html="fromValue.content" style="width: 100%;overflow-x: auto;padding: 30rpx;box-sizing: border-box;">
					
				</view>
            </view>
			<view class="content-input">
			    <view class="input-titile">备注</view>
				<textarea auto-height class="input-con" v-model="fromValue.remark" placeholder="请输入备注" />
			</view>
			
        </view>
        <SelectPopup ref="selectPopupRef"></SelectPopup>
	</div>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, onUnmounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack, checkingPhoneRegExp,config } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
import SelectPopup from '@/components/selectPopup/selectPopup.vue';
import unieditor from '../../components/unieditor.vue'
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const dictStore = useDictStore();
const { dictLabel, oneDictData, complete: dictComplete, getDictSelectOption } = dictStore;

let fromValue = reactive({
	id:'',
    title: '',
	content:'',
	remark:'',
	entProvince:'',
	entCounty:'',
	entCity:'',
	status:'0',
});
let id=ref('')
onLoad((options) => {
	id.value=options.id
	getDetail()
	
});

// 监听页面显示，接收从技能查询页面返回的数据
onShow(() => {
    // 通过事件总线接收技能选择结果
    // uni.$on('skillSelected', handleSkillSelected);
});

// 页面卸载时移除事件监听
// onUnmounted(() => {
//     uni.$off('skillSelected', handleSkillSelected);
// });
// 监听字典数据加载完成，自动更新学历显示

function getDetail(){
	$api.myRequest("/train/public/announcement/selectById", {
		id: id.value,
	}, "GET", 9100, {
		Authorization: `Bearer ${uni.getStorageSync('token')}`,
		'Content-Type': "application/x-www-form-urlencoded"
	}).then((res) => {
		if (res.code === 200) {
			fromValue.id = res.data.id;
			fromValue.title = res.data.title;
			fromValue.content= res.data.content;
			fromValue.remark= res.data.remark;
			fromValue.entProvince = res.data.entProvince;
			fromValue.entCounty = res.data.entCounty;
			fromValue.entCity = res.data.entCity;
			// fromValue = {
			//   ...fromValue,
			//   ...res.data,
			// };
		}
	})
}



</script>

<style lang="stylus" scoped>
.btn{
    margin-top: -30rpx
}
.input-required{
	color: red
}
/* 上传按钮 */
.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 0 30rpx;
  background-color: #f5f7fa;
  color: #1677ff;
  border-radius: 8rpx;
  font-size: 26rpx;
  margin-top: 20rpx;
}

.upload-icon {
  width: 30rpx;
  height: 30rpx;
}

.reupload-text {
  font-size: 22rpx;
  color: #666;
}

/* 上传说明文字 */
.upload-tip {
  font-size: 20rpx;
  color: #999;
  text-align: center;
  line-height: 1.4;
}

/* 已上传文件信息 */
.uploaded-file-info>view {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding: 15rpx 20rpx;
  background-color: #fafafa;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.file-icon {
  width: 36rpx;
  height: 36rpx;
}

.file-name {
  font-size: 24rpx;
  color: #333;
  max-width: 400rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-file-btn {
  padding: 0 15rpx;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 22rpx;
  color: #ff4d4f;
  background-color: transparent;
}
.content{
    padding: 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
    height: calc(100% - 120rpx)

}
.footer{
	width: 100%;
	height: 120rpx;
	background: #fff;
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 0;
	display: flex;
	align-content: center;
	justify-content: center;
}
.footerBtn{
	width: 90%;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center
	border-radius: 10rpx;
	color: #fff;
	background: #409EFF;
}
.content-input
    margin-bottom: 52rpx
    .input-titile
        font-weight: 400;
        font-size: 28rpx;
        color: #6A6A6A
    .input-con
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        line-height: 80rpx;
        height: 80rpx;
        border-bottom: 2rpx solid #EBEBEB
        position: relative;
    .error-message
        color: #ff4757;
        font-size: 24rpx;
        margin-top: 10rpx;
        line-height: 1.4;
    .success-message
        color: #2ed573;
        font-size: 24rpx;
        margin-top: 10rpx;
        line-height: 1.4;
    .input-error
        .input-con
            border-bottom-color: #ff4757;
    .triangle::before
        position: absolute;
        right: 20rpx;
        top: calc(50% - 2rpx);
        content: '';
        width: 4rpx;
        height: 18rpx;
        border-radius: 2rpx
        background: #697279;
        transform: translate(0, -50%) rotate(-45deg) ;
    .triangle::after
        position: absolute;
        right: 20rpx;
        top: 50%;
        content: '';
        width: 4rpx;
        height: 18rpx;
        border-radius: 2rpx
        background: #697279;
        transform: rotate(45deg)
.input-nx
    position: relative
    border-bottom: 2rpx solid #EBEBEB
    padding-bottom: 30rpx
    display: flex
    flex-wrap: wrap
    .nx-item
        padding: 16rpx 24rpx
        width: fit-content
        border-radius: 20rpx
        border: 2rpx solid #E8EAEE
        background-color: #f8f9fa
        margin-right: 16rpx
        margin-top: 16rpx
        font-size: 28rpx
        color: #333333
        transition: all 0.2s ease
        
        &:hover
            background-color: #e9ecef
            border-color: #256bfa
            color: #256bfa
.content-sex
    height: 110rpx;
    display: flex
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2rpx solid #EBEBEB
    margin-bottom: 52rpx
    .sex-titile
        line-height: 80rpx;
    .sext-ri
        display: flex
        align-items: center;
        .sext-box
            height: 76rpx;
            width: 152rpx;
            text-align: center;
            line-height: 80rpx;
            border-radius: 12rpx 12rpx 12rpx 12rpx
            border: 2rpx solid #E8EAEE;
            margin-left: 28rpx
            font-weight: 400;
            font-size: 28rpx;
        .sext-boxactive
            color: #256BFA
            background: rgba(37,107,250,0.1);
            border: 2rpx solid #256BFA;
    .next-btn
        width: 100%;
        height: 90rpx;
        background: #256BFA;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 90rpx

// 技能信息样式
.content-skills
    margin-bottom: 52rpx
    
    .skills-header
        display: flex
        justify-content: space-between
        align-items: center
        margin-bottom: 32rpx
        
        .input-titile
            font-weight: 400
            font-size: 28rpx
            color: #6A6A6A
        
        .add-skill-btn
            padding: 16rpx 32rpx
            background: #256BFA
            color: #FFFFFF
            border-radius: 8rpx
            font-size: 26rpx
            font-weight: 500
            transition: all 0.3s ease
            
            &:active
                background: #1a5cd9
                transform: scale(0.98)
            
            &.disabled
                background: #CCCCCC
                color: #999999
                cursor: not-allowed
                
                &:active
                    background: #CCCCCC
                    transform: none
    
    .skills-list
        .skill-item
            background: #FFFFFF
            border: 2rpx solid #E8EAEE
            border-radius: 12rpx
            padding: 24rpx
            margin-bottom: 24rpx
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05)
            transition: all 0.3s ease
            
            &:hover
                box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1)
                border-color: #256BFA
            
            .skill-header
                display: flex
                justify-content: space-between
                align-items: center
                margin-bottom: 20rpx
                
                .skill-number
                    font-weight: 500
                    font-size: 28rpx
                    color: #333333
                
                .skill-actions
                    .action-btn
                        padding: 8rpx 16rpx
                        border-radius: 6rpx
                        font-size: 24rpx
                        font-weight: 400
                        transition: all 0.2s ease
                        
                        &.delete-btn
                            background: #FF4D4F
                            color: #FFFFFF
                            
                            &:active
                                background: #D9363E
                                transform: scale(0.95)
            
            .skill-fields
                display: flex
                flex-direction: column
                gap: 20rpx
                
                .skill-field
                    .field-label
                        font-weight: 400
                        font-size: 26rpx
                        color: #6A6A6A
                        margin-bottom: 8rpx
                    
                    .field-input
                        font-weight: 400
                        font-size: 28rpx
                        color: #333333
                        line-height: 72rpx
                        height: 72rpx
                        border: 2rpx solid #E8EAEE
                        border-radius: 8rpx
                        padding: 0 20rpx
                        background: #F8F9FA
                        transition: all 0.3s ease
                        
                        &:focus
                            border-color: #256BFA
                            background: #FFFFFF
                        
                        &.triangle::before
                            right: 30rpx
                            top: calc(50% - 2rpx)
                        
                        &.triangle::after
                            right: 30rpx
                            top: 50%
    
    .empty-skills
        text-align: center
        padding: 60rpx 0
        background: #F8F9FA
        border-radius: 12rpx
        border: 2rpx dashed #E8EAEE
        
        .empty-text
            font-size: 28rpx
            color: #999999
            font-weight: 400
</style>
