<template>
    <div class="app-container calendar-list-container">
        <el-form :rules="rules" ref="addForm" :model="addInfoFeedback" label-position="left" label-width="120px"
            style='margin-left:20px'>
            <el-row :gutter="24">
                <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.source_information')" prop="source_information">
                            <div class="block">
                                <el-select v-model="source_information" placeholder="请选择" filterable clearable remote
                                    remote v-el-select-loadmore="loadmore" :remote-method="selectedRemoteMethod"
                                    :loading="selectedLoading" @change="selectedChange" @clear="clearUser" @focus="selectFocus">
                                    <el-option v-for="item in options" :key="item.id"
                                        :label="item.fb_customer_name + ' ' + item.fb_customer_phone"
                                        :value="item">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.branche_name')" prop="branche_name">
                            <div class="block">
                                <el-select class="filter-item" style="width:100%;"
                                    v-model="addInfoFeedback.branche_name">
                                    <el-option v-for="item in branches" :key="item.id" :label="item.branche_name"
                                        :value="item.branche_name">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.fb_customer_name')" prop="fb_customer_name"
                            style="width: 310px;">
                            <div class="block">
                                <el-input v-model="addInfoFeedback.fb_customer_name"> </el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.fb_customer_phone')" prop="fb_customer_phone"
                            style="width: 310px;">
                            <div class="block">
                                <el-input v-model="addInfoFeedback.fb_customer_phone"> </el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.package_name')" prop="p_code">
                            <div class="block">
                                <el-select class="filter-item" v-model="addInfoFeedback.p_code" style="width: 100%;">
                                    <el-option v-for="item in packages" :key="item.p_code" :label="item.p_name"
                                        :value="item.p_name">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.fb_wechat_number')" prop="fb_wechat_number"
                            style="width: 310px;">
                            <div class="block">
                                <el-input v-model="addInfoFeedback.fb_wechat_number"> </el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.source_channel')" prop="source_channel">
                            <div class="block">
                                <el-select class="filter-item" style="width:100%;"
                                    v-model="addInfoFeedback.source_channel">
                                    <el-option v-for="item in sourceChannels" :key="item.id"
                                        :label="item.source_channel" :value="item.source_channel">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.customer_state')" prop="customer_state">
                            <div class="block">
                                <el-select v-model="addInfoFeedback.customer_state" style="width: 100%;">
                                    <el-option v-for="item in customerInfoStates" :key="item.customer_state"
                                        :label="item.customer_state" :value="item.customer_state">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :xs="22" :sm="22" :md="10" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.edc_date')" prop="edc_date">
                            <div class="block">
                                <el-date-picker v-model="addInfoFeedback.edc_date" value-format="yyyy-MM-dd"
                                    align="right" type="date" placeholder="年-月-日" style="width:100%;">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="22" :sm="22" :md="10" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.pregnancy_way')" prop="pregnancy_way">
                            <div class="block">
                                <el-select class="filter-item" style="width:100%;"
                                    v-model="addInfoFeedback.pregnancy_way">
                                    <el-option v-for="item in pregnancyWays" :key="item.way" :label="item.way"
                                        :value="item.way">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :xs="22" :sm="22" :md="15" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.address_basic')" prop="address_basic">
                            <div id="app">
                                <el-cascader size="large" :options="areaOptions"
                                    v-model="addInfoFeedback.addressBasicList" @change="areaChange">
                                </el-cascader>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="22" :sm="22" :md="10" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.address_detail')" prop="address_detail">
                            <div class="block">
                                <el-input v-model="addInfoFeedback.address_detail"> </el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :xs="22" :sm="22" :md="10" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.fb_remarks')" prop="fb_remarks" style="width: 310px;">
                            <div class="block">
                                <el-input v-model="addInfoFeedback.fb_remarks"> </el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="22" :sm="22" :md="10" :lg="8" :xl="8">
                    <el-form-item :label="$t('customers.entry_date')" prop="entry_date" style="width: 310px;">
                        {{addInfoFeedback.entry_date}}
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row :gutter="24" style="margin-top: 15px; width:100%;">
            <el-col :span="24" style="margin-top:10px;">&nbsp;<span style="color:red;font-size:16px;">{{tips}}</span>
            </el-col>
          </el-row> -->
            <el-row :gutter="24" style="margin-top: 15px; width:100%;">
                <el-col :span="24" style="text-align: center;">
                    <div>
                        <el-button type="primary" :loading="buttonloading" @click="AddInfoFeedback">
                            {{$t('table.confirm')}}
                        </el-button>
                        <el-button @click="resetForm('addForm')">{{$t('navbar.reset')}}</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import { getSourceChannel, getAllInfoState, addInfoBasic, getInfoFeedback } from '@/api/customers'
    import { getBranches } from '@/api/article'
    import { getConsultants } from '@/api/dc'
    import { getPackageSelect } from '@/api/couponapi'
    import regex from '@/utils/regex'
    import { parseTime } from '@/utils/index'
    import { regionData } from 'element-china-area-data'

    export default {
      name: 'infobasicadd',
      directives: {
        'el-select-loadmore': {

          bind(el, binding) {
            // 获取element-ui定义好的scroll盒子
            const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
            SELECTWRAP_DOM.addEventListener('scroll', function() {
            /**
            * scrollHeight 获取元素内容高度(只读)
            * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
            * clientHeight 读取元素的可见高度(只读)
            * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
            * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
            */
              const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
              if (condition) {
                binding.value()
              }
            })
          }

        }
      },
      data() {
        return {
          tableKey: 0,
          sourceChannels: [],
          consultants: [],
          branches: [],
          packages: [],
          customerInfoStates: [],
          buttonloading: false,
          selectedLoading: false,
          addInfoFeedback: {
            fb_date: null,
            source_channel: null,
            fb_customer_phone: null,
            fb_customer_name: null,
            branche_name: null,
            fb_type: null,
            create_person: null,
            in_charge_person: null,
            customer_manager: null,
            entry_date: null,
            p_code: null,
            edc_date: null,
            fb_wechat_number: null,
            fb_remarks: null,
            customer_state: null,
            pregnancy_way: null,
            addressBasicList: [],
            address_basic: null,
            address_detail: null
          },
          rules: {
            fb_customer_phone: [{ required: true, message: '请输入手机号码！', trigger: 'blur' },
              { pattern: regex.REPHONE, message: '手机号格式错误！', trigger: 'blur' }]
          },
          pregnancyWays: [
            { way: '顺产' },
            { way: '抛宫产' },
            { way: '选项3' }
          ],
          downloadLoading: false,
          areaOptions: regionData,
          options: [],
          formData: {
            page: 1,
            limit: 10,
            selectedPage: ''
          },
          source_information: ''
        }
      },
      created() {
        this.addInfoFeedback.entry_date = parseTime(new Date())
        getSourceChannel().then(response => {
          this.sourceChannels = response.data
        })
        getConsultants().then(response => {
          this.consultants = response.data
        })
        getBranches().then(response => {
          this.branches = response.data
        })
        getPackageSelect().then(response => {
          this.packages = response.data
        })
        getAllInfoState().then(response => {
          this.customerInfoStates = response.data
        })
      },
      mounted() {
        this.getSelectList(this.formData)
      },
      methods: {
        areaChange(value) {
          console.log(value)
        },
        AddInfoFeedback() {
          if (this.addInfoFeedback.addressBasicList.length > 0) {
            let addTemp = ''
            for (var abl = 0, abll = this.addInfoFeedback.addressBasicList.length; abl < abll; abl++) {
              addTemp = addTemp + this.addInfoFeedback.addressBasicList[abl] + ','
            }
            addTemp = addTemp.substring(0, addTemp.lastIndexOf(','))
            this.addInfoFeedback.address_basic = addTemp
          }
          // this.buttonloading = true
          this.$refs['addForm'].validate((valid) => {
            if (valid) {
              addInfoBasic(this.addInfoFeedback).then(response => {
                this.buttonloading = false
                if (response.data === 0) {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: '失败',
                    message: '保存失败！',
                    type: 'error',
                    duration: 2000
                  })
                } else {
                  this.dialogFormVisible = false
                  this.resetForm('addForm')
                  this.$notify({
                    title: '成功',
                    message: '保存成功！',
                    type: 'success',
                    duration: 2000
                  })
                }
              })
            }
          })
        },
        resetForm(formName) {
          console.log(formName)
          this.$refs[formName].resetFields()
        },
        loadmore() {
          this.formData.page++
          this.getSelectList(this.formData)
        },
        getSelectList(formData) {
        // 这里是接口请求数据, 带分页条件
          getInfoFeedback(formData).then(response => {
            this.options.push.apply(this.options, response.data.items)
          })
        },
        selectedRemoteMethod(query) {
          if (query !== '') {
            this.selectedLoading = true
            setTimeout(() => {
              this.selectedLoading = false
              this.formData.page = 1
              this.formData.fb_customer_phone = query
              this.options = []
              this.getSelectList(this.formData)
            }, 200)
          }
        },
        selectFocus() {
          this.formData.page = 1
          this.formData.fb_customer_phone = null
          this.options = []
          this.getSelectList(this.formData)
        },
        selectedChange(data) {
          this.source_information = data.fb_customer_name + ' ' + data.fb_customer_phone
          this.addInfoFeedback.branche_name = data.branche_name
          this.addInfoFeedback.fb_customer_name = data.fb_customer_name
          this.addInfoFeedback.fb_customer_phone = data.fb_customer_phone
          this.addInfoFeedback.fb_date = data.fb_date
        },
        clearUser() {
          this.source_information = ''
          this.addInfoFeedback.branche_name = null
          this.addInfoFeedback.fb_customer_name = null
          this.addInfoFeedback.fb_customer_phone = null
          this.addInfoFeedback.fb_date = null
        }
      }
    }
</script>