<template>
    <AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
 <!--       <template #headerleft>
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template> -->
		<view class="info-box">
			<view class="info-item info-line">
				<image class="info-img" :src="baseUrl+'/dispatch/person-icon.png'" mode=""></image>
				<view class="info-label">
					人员姓名
				</view>
				<view class="info-value">
					王小美
				</view>
			</view>
			<view class="info-item">
				<image class="info-img" :src="baseUrl+'/dispatch/help-icon.png'" mode=""></image>
				<view class="info-label">
					帮扶类型
				</view>
				<view class="info-value">
					招聘岗位推荐
				</view>
			</view>
		</view>
        <view class="main-list" :style="getBackgroundStyle('k.png')">
			<view class="list-top">
				<view class="list-title">
					<text>新增跟进记录</text>
					<view class="title-line"></view>
				</view>
			</view>
			
            <view class="form-container">
                <uni-forms ref="formRef" v-model="formData" :rules="rules" validate-trigger="submit">
                  <!-- 跟进日期 -->
                  <uni-forms-item label="跟进日期：" name="followDate" required>
                    <picker mode="date" :value="formData.followDate" @change="onDateChange('followDate', $event)">
                      <view class="picker-value">{{ formData.followDate || '请选择跟进日期' }}</view>
                    </picker>
                  </uni-forms-item>
            
                  <!-- 跟进方式 -->
                  <uni-forms-item label="跟进方式：" name="followMethod" required>
                    <picker mode="selector" :range="followMethods" :value="methodIndex" @change="onMethodChange">
                      <view class="picker-value">{{ followMethods[methodIndex] || '请选择跟进方式' }}</view>
                    </picker>
                  </uni-forms-item>
            
                  <!-- 跟进内容 -->
                  <uni-forms-item label="跟进内容：" name="followContent" required>
                    <textarea
                      v-model="formData.followContent"
                      class="textarea"
                      placeholder="请输入跟进内容"
                      :maxlength="500"
                    />
                  </uni-forms-item>
            
                  <!-- 跟进结果 -->
                  <uni-forms-item label="跟进结果：" name="followResult" required>
                    <textarea
                      v-model="formData.followResult"
                      class="textarea"
                      placeholder="请输入跟进结果"
                      :maxlength="500"
                    />
                  </uni-forms-item>
            
                  <!-- 下一步计划 -->
                  <uni-forms-item label="下一步计划：" name="nextPlan">
                    <textarea
                      v-model="formData.nextPlan"
                      class="textarea"
                      placeholder="请输入下一步计划（可选）"
                      :maxlength="500"
                    />
                  </uni-forms-item>
            
                  <!-- 下次联系时间 -->
                  <uni-forms-item label="下次联系：" name="nextContactDate">
                    <picker mode="date"  :value="formData.nextContactDate" @change="onDateChange('nextContactDate', $event)">
                      <view class="picker-value">{{ formData.nextContactDate || '请选择下次联系时间' }}</view>
                    </picker>
                  </uni-forms-item>
                </uni-forms>
            
                <!-- 按钮组 -->
                <view class="button-group">
				  <button class="btn submit-btn" @click="handleSubmit">保存跟进</button>
                  <button class="btn reset-btn"  @click="handleReset">重置</button>
                </view>
			</view>
        </view>
		<view class="main-list" :style="getBackgroundStyle('k.png')">
			<view class="list-top">
				<view class="list-title">
					<text>跟进历史记录</text>
					<view class="title-line"></view>
				</view>
				<view class="title-total">
					共<text class="total-num">7</text>条记录
				</view>
			</view>
			<!-- v-if="dataList.length>0" -->
			<view class="list-box" >
				<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
			</view>
		    <!-- <empty v-else pdTop="200"></empty> -->
		</view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"

// state
const title = ref('');
const formData = reactive({
  followDate: null,
  followMethod: null,
  followContent: null,
  followResult: null,
  nextPlan: null,
  nextContactDate: null
})
const followMethods = ['电话', '面谈', '微信', '邮件', '其他']
const methodIndex = ref(0)
const list2=[{
	title: '买家下单',
	desc: '跟进方式：电话\n跟进人：新生社区管理员\n跟进内容：内容内容内容'
}, {
	title: '卖家发货',
	desc: '跟进方式：电话\n跟进人：新生社区管理员\n跟进内容：内容内容内容'
}, {
	title: '买家签收',
	desc: '跟进方式：电话\n跟进人：新生社区管理员\n跟进内容：内容内容内容'
}, {
	title: '交易完成',
	desc: '跟进方式：电话\n跟进人：新生社区管理员\n跟进内容：内容内容内容'
}]
const active=ref(null)
// 表单引用
const formRef = ref(null)

// 校验规则
const rules = {
  followDate: {
    required: true,
    message: '请选择跟进日期'
  },
  followMethod: {
    required: true,
    message: '请选择跟进方式'
  },
  followContent: {
    required: true,
    message: '请填写跟进内容'
  },
  followResult: {
    required: true,
    message: '请填写跟进结果'
  }
}

const searchKeyword = ref('');
const dataList=ref([])
const pageSize=ref(10)
const pageNum=ref(1)
const totalNum=ref(0)
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
const trainVideoImgUrl=config.trainVideoImgUrl

// 所属区域选项（可根据实际替换为动态数据）
const regions = ['北京市', '上海市', '广州市', '深圳市', '杭州市']
const regionIndex = ref(0)

// 事件处理
const onDateChange = (field, e) => {
  formData[field] = e.detail.value
}

const onMethodChange = (e) => {
  const idx = e.detail.value
  methodIndex.value = idx
  formData.followMethod = followMethods[idx]
}

const handleSubmit = () => {
  formRef.value?.validate()
    .then(() => {
      uni.showToast({ title: '校验通过', icon: 'success' });
    })
    .catch((errors) => {
      console.log('校验失败:', errors);
      uni.showToast({ title: '请填写必填项', icon: 'none' });
    });
};

const handleReset = () => {
  Object.keys(formData).forEach(key => {
    formData[key] = ''
  })
  methodIndex.value = 0
  uni.showToast({ title: '已重置', icon: 'none' })
}
onLoad(() => {
    // getDataList('refresh');
});



// 获取视频列表
function getDataList(type = 'add') {
	// let maxPage=Math.ceil(totalNum.value/pageSize.value)
	// let params={}
 //    if (type === 'refresh') {
 //        pageNum.value = 1;
	// 	params={
	// 		category:'',
	// 		hour:'',
	// 		level:'',
	// 		searchValue:searchKeyword.value,
	// 		orderStr:'',
	// 		pageSize:pageSize.value,
	// 		pageNum:pageNum.value
	// 	}
	// 	$api.myRequest('/train/public/trainVideo/trainVideoList', params).then((resData) => {
	// 		dataList.value=resData.rows
	// 		totalNum.value=resData.total
	// 	});
 //    }
 //    if (type === 'add' && pageNum.value < maxPage) {
 //        pageNum.value += 1;
	// 	params={
	// 		category:'',
	// 		hour:'',
	// 		level:'',
	// 		searchValue:searchKeyword.value,
	// 		orderStr:'',
	// 		pageSize:pageSize.value,
	// 		pageNum:pageNum.value
	// 	}
	// 	$api.myRequest('/train/public/trainVideo/trainVideoList', params).then((resData) => {
	// 		dataList.value=dataList.value.concat(resData.rows)
	// 		totalNum.value=resData.total
	// 	});
		
	// }
}
	

// 播放视频
function playVideo(video) {
    navTo(`/packageB/train/video/videoDetail?id=${video.videoId}`);
}
</script>

<style lang="stylus" scoped>
.btnback
  width: 64rpx
  height: 64rpx

image
  height: 100%
  width: 100%
.info-box
  margin: 30rpx 30rpx
  background: linear-gradient(0deg, #D9ECFF 0%, #F0F7FF 100%)
  border-radius: 20rpx
  padding: 40rpx 0
  display: flex
  align-items: center
.info-img
  width: 40rpx
  height: 40rpx
  margin-bottom: 20rpx
.info-line
  border-right: 2rpx solid #B7D6FF
.info-item
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  width: 50%
.info-label
  font-size: 26rpx
  color: #6E7E9B
  margin-bottom: 20rpx
.info-value
  font-weight: bold
  font-size: 28rpx
  color: #3D61AC
.main-list
  background-color: #ffffff
  padding: 20rpx 20rpx 28rpx 20rpx
  margin: 30rpx 30rpx
  box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1)
  border-radius: 12px
.list-top
  display: flex
  align-items: center
  justify-content: space-between
.list-title
  font-weight: bold
  font-size: 36rpx
  color: #404040
  position: relative

.title-line
  position: absolute
  bottom: -10rpx
  left: 70rpx
  width: 70rpx
  height: 8rpx
  background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%)
  border-radius: 4rpx
.search-box-btn
  border-radius: 32rpx !important
  background: #3088FF !important
  margin-right: 16rpx
.reset-box-btn
  border-radius: 32rpx !important
  background: #02B44D
  color: #fff
.search-container
  padding: 20rpx 0rpx 0rpx 0rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx
.search-item
  display: flex
  align-items: center
  margin-bottom: 20rpx

.label
  width: 160rpx
  font-size: 28rpx
  color: #404040

.input,
.picker
  background: #FFFFFF
  flex: 1
  height: 72rpx
  padding: 0 20rpx
  border: 1px solid #A0A0A0
  border-radius: 8rpx
  font-size: 28rpx
  line-height: 72rpx

.picker-value
  color: #666
.list-box
  margin-top: 40rpx
.con-box
  background: #fff
  padding: 20rpx
  box-shadow: 0px 0px 6rpx 0px rgba(0,71,200,0.16)
  border-radius: 24rpx
  border: 1rpx solid #EDF5FF
  margin-top: 30rpx
.form-title
  display: flex
  align-items: center

.form-name
  font-weight: bold
  font-size: 32rpx
  color: #595959
  margin-right:16rpx
.form-type
  border-radius: 8rpx;
  border: 2rpx solid #FF7D26;
  font-size: 24rpx
  color: #F1690E
  padding: 4rpx 10rpx
.form-item
  display: flex
  align-items: center
  justify-content: space-between
  margin-top: 20rpx
.item-left
  display: flex
  align-items: center
.item-img
  width: 26rpx
  height: 26rpx
  margin-right: 10rpx
.item-label
  font-size: 26rpx
  color: #B3B3B3
.item-right
  font-size: 26rpx
  color: #737373
.form-btns
  margin-top:30rpx
.form-box-btn
  border-radius: 50rpx !important
  margin-right: 24rpx
  padding: 0rpx 40rpx
.detail-btn
  background: #EDF5FF
  border: 1px solid #3088FF
  font-size: 28rpx
  color: #3088FF
.follow-btn
  background: #EEF9F3
  border: 1px solid #00933E
  font-size: 28rpx
  color: #00933E
.recommend-btn
  background: linear-gradient(92deg, #0DCCFF 0%, #4760FF 100%)
  font-size: 28rpx
  color: #FFFFFF
.form-container 
  margin-top: 30rpx
:deep(.uni-forms-item__label)
  width: 194rpx !important
  font-size: 28rpx;
  color: #404040;
/* 统一 picker 和 textarea 样式 */
.picker-value,
.textarea {
  width: 100%;
  min-height: 60rpx;
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.textarea {
  height: 120rpx;
  resize: none;
}

.button-group {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 20rpx 20rpx;
}

.btn {
  width: 45%;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 8rpx;
}

.reset-btn {
  background-color: #D8E9FF;
  color: #1176FF;
}

.submit-btn {
  background-color: #368BFF;
  color: white;
}
:deep(.uni-steps__column-circle )
  width: 24rpx !important
  height: 24rpx !important
  background: radial-gradient(circle, 
    #00C0FA 0%, 
    #015EEA 50%, 
    #FFFFFF 51%,  
    #FFFFFF 100%) !important
  border-radius: 50%
  border: 2rpx solid #015EEA
:deep(.uni-steps__column-title)
  font-size: 28rpx !important
  color: #006CFF !important
  margin-bottom: 24rpx
:deep(.uni-steps__column-desc)
  font-size: 28rpx
  color: #898989 !important
  line-height: 1.5
:deep(.uni-steps__column-text )
  padding: 16rpx 0 !important
  border: none
:deep(.uni-steps__column-line)
  background-color: #368BFF !important
:deep(.uni-steps__column-line--before)
  background-color:rgba(0,0,0,0) !important
</style>
