<template>
	<view class="assemble">
    <view class="search_box">
      <view class="input_box">
        <input type="text" v-model="keyword" placeholder="请输入客户名称">
      </view>
      <view class="btn">查重</view>
    </view>
		<view class="form-style">
			<fui-form ref="form" top="0" :model="formData" :show="false">
				
				<view class="title" style="margin-top: 20rpx;">基础信息</view>
        <view class="input-style">
          <fui-form-item label="学员姓名" asterisk asteriskPosition="right" labelSize='26' prop="name" background='#434544' labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;" >
              <fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
                         backgroundColor="#434544" size="26" color="#fff"></fui-input>
            </view>
          </fui-form-item>

          <fui-form-item label="年龄" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
                         background='#434544' labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)"
                  v-if="result_date == ''">点击选择
            </view>
            <view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>{{ result_date }}
            </view>
          </fui-form-item>

          <fui-form-item label="上传录音" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
                         background='#434544' labelColor='#fff'
                         :bottomBorder='false'>
            <fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
                       backgroundColor="#434544" size="26" color="#fff"></fui-input>
          </fui-form-item>

          <fui-form-item label="学员名称" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
                         background='#434544' labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)"
                  v-if="result_student == ''">点击选择
            </view>
            <view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)" v-else>{{ result_student }}
            </view>
          </fui-form-item>

          <fui-form-item label="客户状态" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
                         background='#434544' labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)"
                  v-if="result_status == ''">点击选择
            </view>
            <view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)" v-else>{{ result_status }}
            </view>
          </fui-form-item>

          <fui-form-item label="签单意向联系人" labelWidth="230" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
                         background='#434544' labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)"
                  v-if="result_intention == ''">点击选择
            </view>
            <view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)" v-else>{{ result_intention }}
            </view>
          </fui-form-item>
        </view>
				
					
				<view class="input-style" style="margin-top: 50rpx;">
					<view class="input-style">
						<fui-form-item label="客户状态" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
							background='#434544' labelColor='#fff' :bottomBorder='false'>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)"
								v-if="result_status == ''">点击选择</view>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)" v-else>{{ result_status }}
							</view>
						</fui-form-item>
						<fui-form-item label="签单意向联系人" labelWidth="230" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
							background='#434544' labelColor='#fff' :bottomBorder='false'>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)"
								v-if="result_intention == ''">点击选择</view>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)" v-else>{{ result_intention }}
							</view>
						</fui-form-item>
					</view>
					<view>
						<fui-form-item label="跟进内容" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
							background='#434544' labelColor='#fff' :bottomBorder='false'>
						</fui-form-item>
						<view style="width: 100%;background: #434544;">
							<view style="margin: auto;width: 92%;padding: 20rpx 0 50rpx;">
								<fui-textarea :padding="[0]" v-model="formData.mobile"
								backgroundColor="#434544" size="26" color="#fff" :textareaBorder="true"></fui-textarea>
							</view>
						</view>
					</view>
				</view>
				
				<view class="title" style="margin-top: 20rpx;">附加信息</view>
				<view class="input-style">
					<fui-form-item label="创建下次跟进任务" labelWidth="250" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
							background='#434544' labelColor='#fff' :bottomBorder='false'>
							<fui-switch @change="switchChange" checked></fui-switch>
					</fui-form-item>
					<view v-if="switchChange_type == 1">
						
						<fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
							background='#434544' labelColor='#fff' :bottomBorder='false'>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(6)"
								v-if="result_dates == ''">点击选择</view>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(6)" v-else>{{ result_dates }}
							</view>
						</fui-form-item>
						<fui-form-item label="跟进内容" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
							:bottomBorder='false'>
							<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
								backgroundColor="#434544" size="26" color="#fff"></fui-input>
						</fui-form-item>
						<fui-form-item label="跟进人员" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
							background='#434544' labelColor='#fff' :bottomBorder='false'>
							<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
								backgroundColor="#434544" size="26" color="#fff"></fui-input>
						</fui-form-item>
						<fui-form-item label="任务提醒" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
							:bottomBorder='false'>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(7)"
								v-if="result_renwu == ''">点击选择</view>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(7)" v-else>{{ result_renwu }}
							</view>
						</fui-form-item>
						<fui-form-item label="提醒方式" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
							:bottomBorder='false'>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(8)"
								v-if="result_fangshi == ''">点击选择</view>
							<view class="input-title" style="margin-right:14rpx;" @click="selectCon(8)" v-else>{{ result_fangshi }}
							</view>
						</fui-form-item>
						
						
					</view>
				</view>
			</fui-form>
		</view>
		<view class="fui-btn__box">
			<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">保存</fui-button>
		</view>

		<!-- 年月日-选择时间 -->
		<fui-date-picker :show="show_date" type="3" @change="change_date" @cancel="cancel_date"></fui-date-picker>

		<!-- 选择器 -->
		<fui-picker :linkage='linkage' :options="options" :layer="1" :show="show" @change="change" @cancel="cancel"></fui-picker>

	</view>
</template>

<script>
	const rules = [{
		name: "mobile",
		rule: ["required", "isMobile"],
		msg: ["请输入手机号", "请输入正确的手机号"]
	}];
	export default {
		data() {
			return {
				switchChange_type: 1,
				rules,
				formData: {},
				show_date: false,
				result_date: '',
				result_leixing: '',
				result_student: '',
				result_status: '',
				result_intention: '',
				
				result_dates: '',
				result_renwu: '',
				result_fangshi: '',
				
				show: false,
				options: [],
				linkage: true,
				options_type : undefined,
				options_leixing: [{
					'value': 1,
					'text': '类型1'
				}, {
					'value': 2,
					'text': '类型2'
				}, {
					'value': 3,
					'text': '类型3'
				}],
				options_student: [{
					'value': 1,
					'text': '张三'
				}, {
					'value': 2,
					'text': '李四'
				}, {
					'value': 3,
					'text': '王五'
				}],
				options_status: [{
					'value': 1,
					'text': '状态1'
				}, {
					'value': 2,
					'text': '状态2'
				}, {
					'value': 3,
					'text': '状态3'
				}],
				options_intention: [{
					'value': 1,
					'text': '张三1'
				}, {
					'value': 2,
					'text': '李四2'
				}, {
					'value': 3,
					'text': '王五3'
				}],
				options_kehu: [{
					'value': 1,
					'text': '张三'
				}, {
					'value': 2,
					'text': '李四'
				}, {
					'value': 3,
					'text': '王五'
				}],
				options_renwu: [{
					'value': 1,
					'text': '是'
				}, {
					'value': 2,
					'text': '否'
				}],
				options_fangshi: [{
					'value': 1,
					'text': '短信'
				}, {
					'value': 2,
					'text': '微信'
				}],



        keyword:'',//关键词
			}
		},
		methods: {
			submit() {
				console.log(this.formData)
				this.$refs.form.validator(null, null, true).then(res => {
					console.log(res)
					if (res.isPassed) {
						console.log('校验通过！')
					} else {
						console.log('向上滑动页面查看错误提示！')
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//选择弹窗
			selectCon(type) {
				if (type == 1) {
					//选择跟进时间
					this.options_date_type = 1
					this.show_date = true
				} else if (type == 2) {
					this.options_type = 2
					this.options = this.options_leixing
					this.show = true
					this.linkage = true
				} else if (type == 3) {
					this.options_type = 3
					this.options = this.options_student
					this.show = true
					this.linkage = true
				} else if (type == 4) {
					this.options_type = 4
					this.options = this.options_status
					this.show = true
					this.linkage = true
				} else if (type == 5) {
					this.options_type = 5
					this.options = this.options_intention
					this.show = true
					this.linkage = true
				}else if (type == 6) {
					//选择跟进时间
					this.options_date_type = 6
					this.show_date = true
				} else if (type == 7) {
					//选择任务提醒
					this.options_type = 7
					this.options = this.options_renwu
					this.show = true
					this.linkage = true
				} else if (type == 8) {
					//选择提醒方式
					this.options_type = 8
					this.options = this.options_fangshi
					this.show = true
					this.linkage = true
				}
			},
			//选择跟进时间
			change_date(e) {
				if(this.options_date_type == 1){
					this.show_date = false
					this.result_date = e.result ?? ''
				}else if(this.options_date_type == 6){
					this.show_date = false
					this.result_dates = e.result ?? ''
				}
			},
			//关闭选择跟进时间
			cancel_date() {
				this.show_date = false
			},
			//选择框
			change(e) {
				this.show = false
				console.log(e)
				if(this.options_type == 2){
					this.result_leixing = e.result
				} else if (this.options_type == 3) {
					this.result_student = e.result
				} else if (this.options_type == 4) {
					this.result_status = e.result
				} else if (this.options_type == 5) {
					this.result_intention = e.result
				} else if(this.options_type == 7){
					this.result_renwu = e.result
				} else if(this.options_type == 8){
					this.result_fangshi = e.result
				}
			},
			//关闭选择框
			cancel() {
				this.show = false
			},
			//开关选择
			switchChange(e){
				if(e.detail.value){
					this.switchChange_type = 1
				}else{
					this.switchChange_type = 2
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.search_box{
  padding: 20rpx 40rpx;
  border-bottom: 1px solid #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .input_box{
    width: 70%;
    input{
      width: 100%;
      height: 60rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }
  .btn{
    font-size: 28rpx;
    color: #24BA9F;
  }
}

	.assemble {
		width: 100%;
		height: 100vh;
		background: #292929;
		overflow: auto;
	}

	.title {
		font-size: 26rpx;
		color: #fff;
		padding: 26rpx 0 26rpx 32rpx;
	}

	.input-title {
		font-size: 26rpx;
		color: #fff;
	}

	.form-style {
		width: 100%;
		// background: #434544;
	}

	.form-style-vid {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12rpx 0;
	}

	.input-style {
		text-align: right !important;
	}

	.fui-btn__box {
		margin: 50rpx auto 120rpx;
		width: 92%;
	}
</style>