<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.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.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.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.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-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_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="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.fb_date')" prop="fb_date">
              <div class="block">
                <el-date-picker v-model="addInfoFeedback.fb_date" align="right" type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="年-月-日 时:分:秒" style="width:100%;">
                </el-date-picker>
              </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">
          <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">
        <el-col :xs="22" :sm="22" :md="10" :lg="8" :xl="8">
          <el-form-item :label="$t('customers.store')" prop="store">
            <div class="block">
              <el-select class="filter-item" style="width:100%;" v-model="addInfoFeedback.store">
                <el-option v-for="item in stores" :key="item.store" :label="item.store"
                  :value="item.store">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </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_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-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 waves from '@/directive/waves' // 水波纹指令
  import { getSourceChannel, addInfoFeedbackReq } 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'

  export default {
    name: 'infofeedbackadd',
    directive: {
      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
        },
        rules: {
          fb_customer_phone: [{ required: true, message: '请输入手机号码！', trigger: 'blur' },
            { pattern: regex.REPHONE, message: '手机号格式错误！', trigger: 'blur' }]
        },
        downloadLoading: false,
        stores: [
          { store: '海兴店' },
          { store: '莘庄店' },
          { store: '浦东店' },
          { store: '团结湖店' },
          { store: '海淀妇幼店' },
          { store: '苏州中心店' },
          { store: '苏州吴江店' }
        ]
      }
    },
    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
      })
    },
    methods: {
      AddInfoFeedback() {
        // this.buttonloading = true
        this.$refs['addForm'].validate((valid) => {
          if (valid) {
            addInfoFeedbackReq(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()
      }
    }
  }
</script>