<template>
	<view class="assemble">
		<view class="title">跟进任务</view>
		<view class="form-style">
			<fui-form class="input-style" ref="form" top="0" :model="formData" :show="false">
        <!--基础表单-->
        <!--下拉-->
        <fui-form-item
            asterisk
            label="跟进类型"
            asteriskPosition="right"
            labelSize='26'
            prop=""
            background='#434544'
            labelColor='#fff'
            :bottomBorder='false'
        >
          <view class="input-title" style="margin-right:14rpx;">
            <view v-if="!formData.entry_type" class="input-title" style="margin-right:14rpx;" @click="selectCon(`entry_type`)">点击选择
            </view>
            <view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`entry_type`)">
              {{ str_entry_type }}
            </view>
          </view>
        </fui-form-item>

        <!--下拉-->
        <fui-form-item
            asterisk
            label="跟进人员"
            asteriskPosition="right"
            labelSize='26'
            prop=""
            background='#434544'
            labelColor='#fff'
            :bottomBorder='false'
        >
          <view class="input-title" style="margin-right:14rpx;">
            <view v-if="!formData.follow_staff_id" class="input-title" style="margin-right:14rpx;" @click="selectCon(`follow_staff_id`)">点击选择
            </view>
            <view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`follow_staff_id`)">
              {{ str_follow_staff_id }}
            </view>
          </view>
        </fui-form-item>

        <!--下拉-->
        <fui-form-item
            asterisk
            label="跟进时间"
            asteriskPosition="right"
            labelSize='26'
            prop=""
            background='#434544'
            labelColor='#fff'
            :bottomBorder='false'
        >
          <view class="input-title" style="margin-right:14rpx;">
            <view v-if="!formData.reminder_time" class="input-title" style="margin-right:14rpx;" @click="selectCon(`reminder_time`)">点击选择
            </view>
            <view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`reminder_time`)">
              {{ formData.reminder_time }}
            </view>
          </view>
        </fui-form-item>

        <!--手写-->
        <fui-form-item
            label="备注"
            asteriskPosition="right"
            labelSize='26'
            prop=""
            background='#434544'
            labelColor='#fff'
            :bottomBorder='false'
        >
          <view class="input-title" style="margin-right:14rpx;">
            <fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.follow_content"
                       backgroundColor="#434544" size="26" color="#fff"></fui-input>
          </view>
        </fui-form-item>
			</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="5" @change="change_date" @cancel="cancel_date"></fui-date-picker>

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

	</view>
</template>

<script>
import marketApi from '@/api/market.js';
import memberApi from '@/api/member.js';

	const rules = [{
		name: "mobile",
		rule: ["required", "isMobile"],
		msg: ["请输入手机号", "请输入正确的手机号"]
	}];
	export default {
		data() {
			return {
				rules,

        is_submit: true,//是否提交(防止重复提交)|true=可提交,false=不可提交

        //表单数据
        formData:{
          //##### 基础表单 #####
          entry_type:'',//跟进类型(1=市场人员录入的,2=销售人员录入)
          follow_staff_id:'',//跟进人员
          reminder_time:'',//跟进时间
          follow_content:'',//备注
        },

        //下拉选择器组件
        options_type: undefined,//选择器标识
        show: false,//是否显示下拉选择器
        linkage: true,//是否联动选择
        options: [
          // {
          //   'value': 1,
          //   'text': '类型1'
          // }
        ],//下拉选择器可选值列表

        //时间选择器相关
        show_date: false,//是否显示时间选择器|true=是,false=否

        //跟进类型-相关
        //字典-跟进类型
        options_entry_type:[
          {
            value: 1,
            text: '市场人员'
          },
          {
            value: 2,
            text: '销售人员'
          },
        ],
        //文本展示-跟进类型
        str_entry_type:'',

        //跟进人员-相关
        //字典-跟进人员
        options_follow_staff_id_sc:[],//(市场-跟进人员)
        options_follow_staff_id_xs:[],//(销售-跟进人员)
        //文本展示-跟进人员
        str_follow_staff_id:'',


			}
		},
    onShow() {
      this.init()
    },
		methods: {

      //初始化
      async init() {
        this.getUserInfo()
        //获取字典-跟进人员(市场)
        this.getDic_staff_id('5')
        //获取字典-跟进人员(销售)
        this.getDic_staff_id('6')
      },

      //获取当前登陆用户信息
      async getUserInfo(){
        let res = await marketApi.member({})
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        console.log(111,res.data)
        this.formData.staff_id = res.data.staff_id//基础表单->跟进人员
        this.str_staff_id = res.data.name//基础表单->跟进人员名字
      },

      //获取字典-跟进人员(全部)
      //获取人员列表 role_id|5=市场,6=销售
      async getDic_staff_id(role_id){
        let res = await memberApi.staffList({
          type: 2,
          role_id:role_id
        })
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        let arr = []
        res.data.forEach((v,k)=>{
          arr.push({
            text: v.name,
            value: v.id,
          })
        })

        if(role_id == 5){
          this.options_follow_staff_id_sc = arr
          console.log('市场',arr)
        }else if(role_id == 6){
          this.options_follow_staff_id_xs = arr
          console.log('销售',arr)
        }else{
          //全部
          this.options_staff_id = arr
          console.log('全部',arr)
        }
      },

      //表单验证
      async validatorForm(data) {
        //跟进类型
        if(!data.entry_type){
          uni.showToast({
            title: '跟进类型必填',
            icon: 'none'
          })
          return false
        }
        //跟进人员
        if(!data.follow_staff_id){
          uni.showToast({
            title: '跟进人员必填',
            icon: 'none'
          })
          return false
        }
        //跟进时间
        if(!data.reminder_time){
          uni.showToast({
            title: '跟进时间必填',
            icon: 'none'
          })
          return false
        }
        return true
      },
      //提交
      async submit() {
        console.log('提交',this.formData)
        let data = {...this.formData}
        //表单验证
        let validatorForm = await this.validatorForm(data)
        console.log('验证结果',validatorForm)
        if(!validatorForm){
          return
        }

        //防止重复提交
        if (!this.is_submit) {
          return
        }
        this.is_submit = false

        let res = await marketApi.createTask(data)//转移跟进任务

        this.is_submit = true

        if(res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        uni.showToast({
          title: res.msg,
          icon: 'success'
        })
        //延迟1s执行
        setTimeout(() => {
          //跳转页面-线索列表
          uni.navigateTo({
            url: `/pages/market/clue/index`
          })
        }, 1000)
      },
      //选择弹窗
      selectCon(type) {
        this.options_type = type
        switch (type) {
            //跟进类型
          case 'entry_type':
            this.options = this.options_entry_type
            this.show = true
            this.linkage = true
            //清空跟进任务->跟进人员
            this.formData.follow_staff_id = ''
            break;
            //跟进任务->跟进人员
          case 'follow_staff_id':
            if(!this.formData.entry_type){
              uni.showToast({
                title: '请先选择跟进类型',
                icon: 'none'
              })
              return
            }

            if(this.formData.entry_type == 1){
              //市场人员列表
              this.options = this.options_follow_staff_id_sc
            }else{
              //销售人员列表
              this.options = this.options_follow_staff_id_xs
            }

            this.show = true
            this.linkage = true
            break;
            //跟进时间
          case 'reminder_time':
            this.show_date = true
            break;
        }
      },
      //监听-下拉选择框
      changeOptions(e) {
        console.log('选择器选中',e)
        this.show = false
        let type = this.options_type
        switch (type) {
            //跟进类型
          case 'entry_type':
            this.str_entry_type = e.text//选中的text值
            this.formData.entry_type = e.value//选中value值
            break;
            //跟进人员
          case 'follow_staff_id':
            this.str_follow_staff_id = e.text//选中的text值
            this.formData.follow_staff_id = e.value//选中value值
            break;
        }
      },

      //关闭选择框
      cancel() {
        this.show = false
      },

      //监听-时间选择器
      change_date(e) {

        this.show_date = false
        //跟进时间
        let type = this.options_type
        console.log('时间选择器',type,e)
        let val = (e.result ?? '')
        if(val){
          val = val + ':00'
        }

        switch (type) {
            //跟进任务->跟进时间
          case 'reminder_time':
            this.formData.reminder_time = val
            break;
        }
      },
      //关闭时间选择器
      cancel_date() {
        this.show_date = false
      },
		}
	}
</script>

<style lang="less" scoped>
	.assemble {
		width: 100%;
		height: 100vh;
		background: #292929;
	}

	.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: 20rpx auto;
		width: 92%;

	}
</style>