<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="22" :sm="22" :md="10" :lg="8" :xl="8">
                    <el-form-item :label="$t('customers.create_person')" prop="create_person" style="width: 310px;">
                        {{addInfoFeedback.create_person}}
                    </el-form-item>
                </el-col>
                <el-col :xs="22" :sm="22" :md="10" :lg="8" :xl="8">
                    <el-form-item :label="$t('customers.create_date')" prop="create_date" style="width: 310px;">
                        {{addInfoFeedback.create_date}}
                    </el-form-item>
                </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="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.follow_mehtod')" prop="follow_mehtod">
                            <div class="block">
                                <el-select class="filter-item" v-model="addInfoFeedback.follow_mehtod" style="width: 100%;">
                                    <el-option v-for="item in followMethods" :key="item.follow_mehtod" :label="item.follow_mehtod"
                                        :value="item.follow_mehtod">
                                    </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 :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.fb_date')" prop="fb_date"
                            style="width: 310px;">
                            {{addInfoFeedback.fb_date}}
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.source_channel')" prop="source_channel"
                            style="width: 310px;">
                            {{addInfoFeedback.source_channel}}
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.edc_date')" prop="edc_date"
                            style="width: 310px;">
                            {{addInfoFeedback.edc_date}}
                        </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.follow_state')" prop="follow_state">
                            <div class="block">
                                <el-select class="filter-item" v-model="addInfoFeedback.follow_state" style="width: 100%;">
                                    <el-option v-for="item in followStates" :key="item.follow_state" :label="item.follow_state"
                                        :value="item.follow_state">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.address')" prop="address" style="width: 310px;">
                            <div class="block">
                                <el-input v-model="addInfoFeedback.address"> </el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.follow_desc')" prop="follow_desc" style="width: 310px;">
                            <div class="block">
                                <el-input v-model="addInfoFeedback.follow_desc"> </el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item :label="$t('customers.photos')" prop="photos">
                    <el-upload  :action="UploadUrl()" :on-success="uploadSuccess" :on-remove="uploadRemove" :file-list='fileList'
                      :before-upload="beforePhotosUpload" :disabled="uploadDisabled"   list-type="picture-card" :on-preview="handlePictureCardPreview">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    </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.next_follow_date')" prop="next_follow_date">
                        <div class="block">
                          <el-date-picker v-model="addInfoFeedback.next_follow_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-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 waves from '@/directive/waves' // 水波纹指令
    import { updateInfoFollow, getSourceChannel, getInfoFollow } from '@/api/customers'
    import { getUserMkt, 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 config from '@/utils/config'

    export default {
      name: 'infofollowedit1',
      directive: {
        waves
      },
      data() {
        return {
          tableKey: 0,
          sourceChannels: [],
          consultants: [],
          branches: [],
          packages: [],
          buttonloading: false,
          addInfoFeedback: {
            id: null,
            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,
            create_date: null,
            p_code: null,
            edc_date: null,
            fb_wechat_number: null,
            fb_remarks: null,
            photos: null
          },
          rules: {
            fb_customer_phone: [{ required: true, message: '请输入手机号码！', trigger: 'blur' },
              { pattern: regex.REPHONE, message: '手机号格式错误！', trigger: 'blur' }]
          },
          downloadLoading: false,

          followMethods: [
            { follow_mehtod: '电话跟进' },
            { follow_mehtod: '上门拜访' },
            { follow_mehtod: '微信沟通' },
            { follow_mehtod: '到店咨询' }
          ],
          followStates: [
            { follow_state: '跟进中' },
            { follow_state: '邀约中' },
            { follow_state: '成功邀约' },
            { follow_state: '终止邀约' }
          ],
          url: config.BASE_URL + '/CustomerInfoFollow/uploadImg',
          uploadDisabled: false,
          dialogImageUrl: undefined,
          dialogVisible: false,
          fileList: [],
          view: {
            name: undefined,
            path: undefined,
            title: undefined
          }
        }
      },
      destroyed() {
        this.view.name = 'infofollowedit'
        this.view.path = '/customers/infofollowedit'
        this.view.title = 'infofollowedit'
        this.$store.dispatch('delVisitedViews', this.view)
      },
      created() {
        getUserMkt().then(response => {
          this.addInfoFeedback.create_person = response.data.name
        })

        this.addInfoFeedback.create_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
        })
        this.addInfoFeedback.id = this.$route.params.if_id
        this.getInfoFeedbackById()
      },
      methods: {
        AddInfoFeedback() {
          // this.buttonloading = true
          this.$refs['addForm'].validate((valid) => {
            if (valid) {
              updateInfoFollow(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
                  })
                }
              })
            }
          })
        },
        resetForm(formName) {
          console.log(formName)
          this.$refs[formName].resetFields()
        },
        getInfoFeedbackById() {
          const query = { id: this.addInfoFeedback.id }
          getInfoFollow(query).then(response => {
            this.fileList = []
            this.addInfoFeedback = response.data
            if (this.addInfoFeedback.photos === null) {
              return
            }
            var urlArr = this.addInfoFeedback.photos.split(',')
            if (urlArr.length > 0 && urlArr[0] !== '') {
              for (var v of urlArr) {
                this.fileList.push({ url: v })
              }
            }
          })
        },
        UploadUrl() {
          return this.url
        },
        uploadSuccess(response, file, fileList) {
          if (this.addInfoFeedback.photos === '') {
            this.addInfoFeedback.photos = response.url
          } else {
            this.addInfoFeedback.photos += ',' + response.url
          }
          this.$message({ message: '上传成功!', type: 'success' })
        },
        uploadRemove(file, fileList) {
          this.addInfoFeedback.photos = this.addInfoFeedback.photos.replace(file.response.url + ',', '')
          this.addInfoFeedback.photos = this.addInfoFeedback.photos.replace(file.response.url, '')
        },
        beforePhotosUpload(file) {
          this.uploadDisabled = true
          const isLt2M = file.size / 1024 / 1024 < 2
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
            this.uploadDisabled = false
            return false
          }
          this.uploadDisabled = false
          return true
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        }
      }
    }
</script>