<template>
  <div class="app-container calendar-list-container">
    <el-row :gutter="20">
      <el-col :span="6">
          <label>&nbsp;&nbsp;基础信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        </el-col> 
    </el-row>
    <br/><br/>
    <el-row :gutter="10">
      <el-col :span="6">&nbsp;</el-col>
    </el-row>
    <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.create_person')" prop="create_person">
              <div class="block">
                <el-input v-model="addInfoFeedback.create_person" :disabled=disabled>
                </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.in_charge_person')" prop="in_charge_person">
              <div class="block">
                <el-input v-model="addInfoFeedback.in_charge_person" :disabled=disabled>
                </el-input>
              </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"
                  :disabled=disabled>
                  <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"
                  :disabled=disabled>
                  <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%;" :disabled=disabled>
                  <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" :disabled=disabled> </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" :disabled=disabled> </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" :disabled=disabled> </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%;" :disabled=disabled>
                </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%;" :disabled=disabled>
                </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" :disabled=disabled>
                <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" :disabled=disabled> </el-input>
              </div>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.it_on')" prop="it_on" style="width: 310px;">
              <div class="block">
                {{addInfoFeedback.it_on}}
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.convenient_time')" prop="convenient_time" style="width: 310px;">
              <div class="block">
                <el-date-picker v-model="addInfoFeedback.convenient_time" align="right" type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="年-月-日 时:分:秒" style="width:100%;" :disabled=disabled>
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.communication_content')" prop="communication_content"
              style="width: 310px;">
              <div class="block">
                <el-input v-model="addInfoFeedback.communication_content" :disabled=disabled> </el-input>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.user_feedback')" prop="user_feedback" style="width: 310px;">
              <div class="block">
                <el-select class="filter-item" style="width:100%;" v-model="addInfoFeedback.user_feedback"
                  :disabled=disabled>
                  <el-option v-for="item in userFeedbacks" :key="item.user_feedback" :label="item.user_feedback"
                    :value="item.user_feedback">
                  </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.fb_remarks')" prop="fb_remarks" style="width: 310px;">
              <div class="block">
                <el-select class="filter-item" style="width:100%;" v-model="addInfoFeedback.fb_type" :disabled=disabled>
                  <el-option v-for="item in fbTypes" :key="item.fb_type" :label="item.fb_type" :value="item.fb_type">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <label>操作日志</label>
    <br />
    <br />
    <center>
      <el-table :data="listlog" element-loading-text="加载中......" border fit
        highlight-current-row style="width: 77%">
        <el-table-column type="index" align="center" :label="$t('table.seq')" width="70">
        </el-table-column>
        <el-table-column align="center" :label="$t('userlog.username')" width="190">
          <template slot-scope="scope">
            <span>{{scope.row.sl_username}}</span>
          </template>
        </el-table-column>
        <!--edit line-->
        <el-table-column align="center" :label="$t('userlog.date')" width="247" value-format="yyyy-MM-dd HH:mm:ss">
          <template slot-scope="scope">
            <span>{{scope.row.sl_createdate}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="300px" align="center" :label="$t('userlog.type')" width="190">
          <template slot-scope="scope">
            <span>{{scope.row.sl_type}}</span>
          </template>
        </el-table-column>
      </el-table>
    </center>
  </div>
</template>
<script>
  import waves from '@/directive/waves' // 水波纹指令
  import { getSourceChannel, findInfoFeedback, updateInfoFeedback, listCustomerInfoServiceLog } from '@/api/customers'
  import { getBranches } from '@/api/article'// seachList,
  import { getJlAdminUsers } from '@/api/dc'
  import { getPackageSelect } from '@/api/couponapi'
  import regex from '@/utils/regex'

  export default {
    name: 'infofeedbackshow1',
    directive: {
      waves
    },
    data() {
      return {
        listlog: null,
        disabled: true,
        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,
          entry_date: null,
          p_code: null,
          edc_date: null,
          fb_wechat_number: null,
          fb_remarks: null,
          it_on: null,
          convenient_time: null,
          communication_content: null,
          user_feedback: null,
          store: null
        },
        rules: {
          fb_customer_phone: [{ required: true, message: '请输入手机号码！', trigger: 'blur' },
            { pattern: regex.REPHONE, message: '手机号格式错误！', trigger: 'blur' }]
        },
        fbTypes: [
          { fb_type: '待确认' },
          { fb_type: '确认中' },
          { fb_type: '月嫂' },
          { fb_type: '产后恢复' },
          { fb_type: '育儿嫂' },
          { fb_type: '应聘' },
          { fb_type: '异业合作' },
          { fb_type: '无效信息' }
        ],
        userFeedbacks: [
          { user_feedback: '不需要服务' },
          { user_feedback: '随便看看' },
          { user_feedback: '不在上海待产' },
          { user_feedback: '已有月嫂' },
          { user_feedback: '已选其他公司' },
          { user_feedback: '拒绝配合' },
          { user_feedback: '其他' },
          { user_feedback: '跟进五次未接' }
        ],
        downloadLoading: false,
        id: null,
        stores: [
          { store: '海兴店' },
          { store: '莘庄店' },
          { store: '浦东店' },
          { store: '团结湖店' },
          { store: '海淀妇幼店' },
          { store: '苏州中心店' },
          { store: '苏州吴江店' }
        ],
        query: { id: null },
        view: {
          name: undefined,
          path: undefined,
          title: undefined
        }
      }
    },
    destroyed() {
      this.view.name = 'infofeedbackshow'
      this.view.path = '/customers/infofeedbackshow'
      this.view.title = 'infofeedbackshow'
      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
      })
      this.query.id = this.$route.params.fb_id
      this.addInfoFeedback.id = this.$route.params.fb_id
      this.getInfoFeedbackById()
    },
    methods: {
      editInfoFeedback() {
        this.$refs['addForm'].validate((valid) => {
          if (valid) {
            updateInfoFeedback(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() {
        findInfoFeedback(this.query).then(response => {
          this.addInfoFeedback = response.data
        })
        listCustomerInfoServiceLog(this.query).then(response => {
          this.listlog = response.data
        })
      }
    }
  }
</script>