<!--添加客户-->
<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="student_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.student_name"
                         backgroundColor="#434544" size="26" color="#fff"></fui-input>
            </view>
          </fui-form-item>

          <fui-form-item label="学员手机号" asterisk asteriskPosition="right" labelSize='26' prop="student_phone"
                         background='#434544' labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;">
              <fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.student_phone"
                         backgroundColor="#434544" size="26" color="#fff"></fui-input>
            </view>
          </fui-form-item>


          <fui-form-item label="性别" labelSize='26' asterisk asteriskPosition="right" prop="age" background='#434544'
                         labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;">
              <fui-radio-group name="radio" v-model="formData.sex" @change="changeSex">
                <view class="fui-list__item" style="display: flex;justify-content: flex-end;">
                  <fui-label>
                    <view class="fui-align__center">
                      <fui-radio value="1" checked></fui-radio>
                      <text class="fui-text">男</text>
                    </view>
                  </fui-label>
                  <fui-label :margin="['0','0','0','40rpx']">
                    <view class="fui-align__center">
                      <fui-radio value="2"></fui-radio>
                      <text class="fui-text">女</text>
                    </view>
                  </fui-label>
                </view>
              </fui-radio-group>
            </view>
          </fui-form-item>

          <fui-form-item label="年龄" labelSize='26' asterisk asteriskPosition="right" prop="age" background='#434544'
                         labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;">
              <fui-input-number signColor="#FFF" :min="1" :max="100" v-model="formData.age"></fui-input-number>
            </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.school_name"
                         backgroundColor="#434544" size="26" color="#fff"></fui-input>
            </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.grade"
                         backgroundColor="#434544" size="26" color="#fff"></fui-input>
            </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.class_name"
                         backgroundColor="#434544" size="26" color="#fff"></fui-input>
            </view>
          </fui-form-item>

          <fui-form-item label="来源渠道" asterisk asteriskPosition="right" labelSize='26' prop="" background='#434544'
                         labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;">

              <view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)"
                    v-if="result_customer_source == ''">点击选择
              </view>
              <view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>
                {{ result_customer_source }}
              </view>

            </view>
          </fui-form-item>


          <fui-form-item label="客户来源" asterisk asteriskPosition="right" labelSize='26' prop="" background='#434544'
                         labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;">

              <view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)"
                    v-if="result_customer_source == ''">点击选择
              </view>
              <view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>
                {{ result_customer_source }}
              </view>

            </view>
          </fui-form-item>

          <fui-form-item label="归属人员" asterisk asteriskPosition="right" labelSize='26' prop="" background='#434544'
                         labelColor='#fff' :bottomBorder='false'>
            <view class="input-title" style="margin-right:14rpx;">

              <view class="input-title" style="margin-right:14rpx;" @click="selectCon(2)"
                    v-if="result_add_staff_id == ''">点击选择
              </view>
              <view class="input-title" style="margin-right:14rpx;" @click="selectCon(2)" v-else>{{
                  result_add_staff_id
                }}
              </view>

            </view>
          </fui-form-item>

          <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.contact_name"
                         backgroundColor="#434544" size="26" color="#fff"></fui-input>
            </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">
          <view>
            <fui-form-item label="所在地区" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
                           background='#434544' labelColor='#fff' :bottomBorder='false'>
              <fui-input :borderBottom="false" :padding="[0]" placeholder="点击选择" backgroundColor="#434544" size="26"
                         color="#fff" @click="show_area=true" v-model="formData.full_address"></fui-input>

              <!--地区三级联动-->
              <fui-picker
                  linkage :layer="3"
                  :options="options_area"
                  :show="show_area"
                  @change="changeArea"
                  @cancel="show_area=false"
              ></fui-picker>
            </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.community_name"
                         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.customer_tags_name"
                         backgroundColor="#434544" size="26" color="#fff" @click="show_customer_tags=true"></fui-input>

              <!--下拉多选-->
              <fui-select :show="show_customer_tags" :options="options_customer_tags" title="请选择客户标签" multiple isReverse
                          checkboxColor="#FFC529" btnBackground="#FFC529" btnColor="#1A1D26" closeColor="#6D758A"
                          @confirm="onConfirmCustomerTags" @close="show_customer_tags=false"></fui-select>
            </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>
import commonApi from '@/api/common.js';
import marketApi from '@/api/market.js';
import memberApi from '@/api/member.js';


const rules = [
  {
    name: "student_name",
    rule: ["required"],
    msg: ["请输入学员姓名"]
  },
  {
    name: "student_phone",
    rule: ["required", "isMobile"],
    msg: ["请输入学员手机号", "请输入正确的手机号"]
  },
  {
    name: "age",
    rule: ["required", "isNumber"],
    msg: ["请输入年龄", "请输入正确的数字"]
  },
  {
    name: "school_name",
    rule: ["required"],
    msg: ["请输入学校"]
  },
  {
    name: "grade",
    rule: ["required"],
    msg: ["请输入年级"]
  },
  {
    name: "class_name",
    rule: ["required"],
    msg: ["请输入班级"]
  },
  {
    name: "customer_source",
    rule: ["required"],
    msg: ["请选择客户来源"]
  },
  {
    name: "add_staff_id",
    rule: ["required"],
    msg: ["请选择归属人员"]
  },
  {
    name: "contact_name",
    rule: ["required"],
    msg: ["请输入联系人"]
  },
  {
    name: "full_address",
    rule: ["required"],
    msg: ["请选择所在地区"]
  },
  {
    name: "community_name",
    rule: ["required"],
    msg: ["请输入小区"]
  },
  {
    name: "customer_tags_name",
    rule: ["required"],
    msg: ["请选择客户标签"]
  }
];
export default {
  data() {
    return {
      switchChange_type: 1,
      rules,

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

      //表单
      formData: {
        sex:'1',//性别|0=保密,1=男,2=女
        student_name: '',//学员姓名*
        student_phone: '',//学员手机号*
        age: '',//年龄*
        school_name: '',//学校
        grade: '',//年级
        class_name: '',//班级
        customer_source: '',//客户来源*
        add_staff_id: '',//归属人员id*
        contact_name: '',//联系人*
        province_id: '',//所在地区-省
        city_id: '',//所在地区-市
        district_id: '',//所在地区-区
        full_address: '',//所在地区中文名
        community_name: '',//小区
        customer_tags_name: '',//选中的标签名称,多个用,号分割
        customer_tags: ['2', '3'],//客户标签

        is_follow:'1',//是否创建跟进任务 1跟进 2不跟进
        follow_up_time:'',//跟进时间*
        follow_up_content:'',//跟进内容
        staff_id:'',//跟进人员id*
        is_warn:'2',//是否提醒 1提醒 2不提醒
        reminder_method:'',//1=短信,2=邮箱,3=微信模板消息
      },



      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: '',//关键词
      //客户来源
      result_customer_source: '',//选中项的中文名称
      options_customer_source: [
        {
          'value': 1,
          'text': '渠道1'
        },
        {
          'value': 2,
          'text': '渠道2'
        }
      ],//客户来源可选值
      //归属人员(add_staff_id,添加这条数据的工作人员id)
      result_add_staff_id: '',//选中项的中文名称
      options_add_staff_id: [
        // {
        //   'value': 1,
        //   'text': '张三'
        // },
      ],//客户来源可选值

      //客户标签
      show_customer_tags: false,
      options_customer_tags: [
        // {
        //   text: '标签3',
        //   value: '3',
        //   checked: false,//是否选中
        // }
      ],//客户标签可选值

      //地区三级联动
      show_area: false,
      options_area: [],

      //登录用户信息
      userInfo:{}
    }
  },
  onShow() {
    this.init()
  },
  methods: {
    //初始化
    async init() {
      //获取登录用户信息
      this.getUserInfo()
      this.getDict_customer_source()//获取字典-客户来源
      this.getDict_customer_tags()//获取字典-客户标签
      this.getStaffList()//获取人员列表

      this.getAreaTree()//获取地区树形结构
    },

    async getUserInfo(){
      let res = await marketApi.member({})
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.userInfo = res.data

      this.formData.staff_id = res.data.staff_id
      this.result_add_staff_id = res.data.name
    },


    //获取人员列表
    async getStaffList() {
      let res = await memberApi.staffList({type: 2})
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      res.data.forEach((v,k)=>{
        this.options_add_staff_id.push({
          text: v.name,
          value: v.id,
        })
      })
    },

    //获取地区树形结构
    async getAreaTree() {
      let res = await commonApi.getAreaTree()
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.options_area = res.data
    },

    //获取字典-客户来源
    async getDict_customer_source(){
      let res = await commonApi.getDictionary('customer_source')
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

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

    //获取字典-客户标签
    async getDict_customer_tags(){
      let res = await commonApi.getDictionary('customer_tags')
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      let dictionary =  res.data.dictionary
      let arr = []
      dictionary.forEach((v,k)=>{
        arr.push({
          text: v.name,
          value: String(v.value),
          checked: false,
        })
      })
      this.options_customer_tags = arr
    },



    //表单验证
    async validatorForm(data) {
      if(!data.student_name){
        uni.showToast({
          title: '学员姓名必填',
          icon: 'none'
        })
        return false
      }
      if(!data.student_phone){
        uni.showToast({
          title: '学员手机号必填',
          icon: 'none'
        })
        return false
      }
      if(!data.age){
        uni.showToast({
          title: '年龄必填',
          icon: 'none'
        })
        return false
      }
      if(!data.customer_source){
        uni.showToast({
          title: '客户来源必填',
          icon: 'none'
        })
        return false
      }
      if(!data.staff_id){
        uni.showToast({
          title: '归属人员必填',
          icon: 'none'
        })
        return false
      }
      if(!data.contact_name){
        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(123123,validatorForm)
      if(!validatorForm){
        return
      }

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

      let res = await marketApi.setSales(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) {
      if (type == 1) {
        //客户来源
        this.options_type = 1
        this.options = this.options_customer_source
        this.show = true
        this.linkage = true
      } else if (type == 2) {
        //添加这条数据的工作人员id
        this.options_type = 2
        this.options = this.options_add_staff_id
        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 == 1) {
        //客户来源
        this.result_customer_source = e.result
        this.formData.customer_source = e.value
      } else if (this.options_type == 2) {
        //归属人员(添加这条数据的工作人员id)
        this.result_add_staff_id = e.result
        this.formData.add_staff_id = e.value
      } 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
      }
    },

    //多选客户标签-选中后回调
    onConfirmCustomerTags(e) {
      console.log('多选客户标签', e)
      this.show_customer_tags = false
      let customer_tags_name_arr = []
      let customer_tags_arr = []
      e.options.forEach((v, k) => {
        customer_tags_arr.push(v.value)
        customer_tags_name_arr.push(v.text)
        //根据v.value 设置this.options_customer_tags中对应元素的checked属性为true
        this.options_customer_tags.forEach((v, k) => {
          if (v.value == v.value) {
            v.checked = true
          }
        })
      })

      this.formData.customer_tags_name = customer_tags_name_arr.join(',')//数组转字符串
      this.formData.customer_tags = customer_tags_arr//数组转字符串
    },

    //地区选择相关
    changeArea(e) {
      this.show_area = false
      console.log('地区选择', e)
      this.formData.province_id = e.value[0]
      this.formData.city_id = e.value[1]
      this.formData.district_id = e.value[2]
      this.formData.full_address = `${e.text[0]}-${e.text[1]}-${e.text[2]}`
    },

    //关闭选择框
    cancel() {
      this.show = false
    },
    //开关选择
    switchChange(e) {
      if (e.detail.value) {
        this.switchChange_type = 1
      } else {
        this.switchChange_type = 2
      }
    },

    //性别选择器
    changeSex(e){
      this.formData.sex = e.detail.value
    },
  }
}
</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>