<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.in_charge_person')" prop="in_charge_person">
                        <div class="block">
                            <el-select class="filter-item" style="width:100%;"
                                v-model="addInfoFeedback.in_charge_person">
                                <el-option v-for="item in consultants" :key="item.id" :label="item.name"
                                    :value="item.username">
                                </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="editInfoBasic">
                        {{$t('table.confirm')}}
                    </el-button>
                </div>
            </el-col>
        </el-row>
    </el-form>
    </div>
  </template>
  <script>
    import waves from '@/directive/waves' // 水波纹指令
    import { getSourceChannel, findInfoBasic, updateInfoBasic, getAllInfoState } from '@/api/customers'
    import { getBranches } from '@/api/article'// seachList,
    import { getJlAdminUsers } from '@/api/dc'
    import { getPackageSelect } from '@/api/couponapi'
    import regex from '@/utils/regex'
    import { regionData } from 'element-china-area-data'

    export default {
      name: 'infobasicedit1',
      directives: {
        waves
      },
      data() {
        return {
          tableKey: 0,
          sourceChannels: [],
          consultants: [],
          branches: [],
          packages: [],
          buttonloading: 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
          },
          customerInfoStates: [],
          rules: {
            fb_customer_phone: [{ required: true, message: '请输入手机号码！', trigger: 'blur' },
              { pattern: regex.REPHONE, message: '手机号格式错误！', trigger: 'blur' }]
          },
          downloadLoading: false,
          id: null,
          pregnancyWays: [
            { way: '顺产' },
            { way: '抛宫产' },
            { way: '选项3' }
          ],
          areaOptions: regionData,
          view: {
            name: undefined,
            path: undefined,
            title: undefined
          }
        }
      },
      destroyed() {
        this.view.name = 'infobasicedit'
        this.view.path = '/customers/infobasicedit'
        this.view.title = 'infobasicedit'
        this.$store.dispatch('delVisitedViews', this.view)
      },
      created() {
        getSourceChannel().then(response => {
          this.sourceChannels = response.data
        })
        getBranches().then(response => {
          this.branches = response.data
        })
        getJlAdminUsers().then(response => {
          this.jlAdminUsers = response.data
        })
        getPackageSelect().then(response => {
          this.packages = response.data
        })
        getAllInfoState().then(response => {
          this.customerInfoStates = response.data
        })
        this.addInfoFeedback.id = this.$route.params.ib_id
        this.getInfoFeedbackById()
      },
      methods: {
        editInfoBasic() {
          this.$refs['addForm'].validate((valid) => {
            if (typeof (this.addInfoFeedback.addressBasicList) !== 'undefined' && 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
            }
            if (valid) {
              updateInfoBasic(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.getInfoFeedbackById()
                  this.$notify({
                    title: '成功',
                    message: '保存成功！',
                    type: 'success',
                    duration: 2000
                  })
                }
              })
            }
          })
        },
        getInfoFeedbackById() {
          const query = { id: this.addInfoFeedback.id }
          findInfoBasic(query).then(response => {
            this.addInfoFeedback = response.data
            if (response.data.address_basic !== null) {
              this.addInfoFeedback.addressBasicList = response.data.address_basic.split(',')
            }
          })
        },
        areaChange(value) {
          console.log(value)
        }
      }
    }
  </script>