<template>
  <div>
    <el-dialog title="客户编辑" :visible.sync="dialogFormVisible" width="800px" :close-on-click-modal="false" center>
      <el-form ref="dataForm" :rules="rules" :model="userForm" status-icon label-position="right" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="userForm.customerName" size="mini" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="3">
            <div>
              <span>切换客户</span>
            </div>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户身份" prop="customerType">
              <el-select v-model="userForm.customerType" size="mini">
                <el-option v-for="type in defaultTypeOptions" :key="type.label" :label="type.value" :value="type.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="渠道" prop="channelId">
              <el-select v-model="userForm.channelId" size="mini">
                <el-option v-for="type in channels" :key="type.id" :label="type.name" :value="type.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源" prop="source">
              <el-select v-model="userForm.source" size="mini">
                <el-option v-for="type in sourceOption" :key="type.label" :label="type.value" :value="type.label" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="tel">
              <el-input v-model="userForm.tel" size="mini" :disabled="disabledTel">
                <!-- <template slot="append">
                  <div @click="handleCall(userForm.tel)">
                    <svg-icon icon-class="cc" />
                  </div>
                </template> -->
              </el-input>
            </el-form-item>
          </el-col>
<el-col :span="8" v-for="(tel,index) in fns" :key="index"> 
            <el-form-item label="联系方式" prop="tel2">
              <el-input v-model="tel.mobile" size="mini" >
              <!-- <template slot="append">
                  <div @click="handleCall(tel.mobile)">
                    <svg-icon icon-class="cc" />
                  </div>
                </template> -->
                 </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="text" @click="addTel" class="switch-btn">新增</el-button>
          </el-col>

          <!-- <el-col :span="8">
            <el-form-item label="联系方式" prop="tel2">
              <el-input v-model="userForm.tel2" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="tel3">
              <el-input v-model="userForm.tel3" size="mini" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所在城市" prop="city">
              <el-select v-model="userForm.city" size="mini">
                <el-option v-for="type in defaultCityOptions" :key="type.label" :label="type.value" :value="type.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="地址" prop="customerAddr">
              <el-input v-model="userForm.customerAddr" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUser">保存</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { read } from '@/api/customer'
import { allChannel } from '@/api/channel'
import panelApi from '@/api/panel'

const defaultTypeMap = [
 { label: 0, value: '客户' },
  { label: 1, value: '服务者' },
  { label: 2, value: '合伙人' },
  { label: 3, value: '其他' }
  ]

const defaultCityMap = [
 { label: 1, value: '上海' },
  { label: 2, value: '北京' },
  { label: 3, value: '深圳' },
  { label: 4, value: '南京' }
]

const sourceMap = [
   { label: 'xinghai', value: '星海' },
  { label: 'saasmall', value: 'saas商城' },
  { label: 'jzmall', value: '鲸致商城' },
  { label: 'hema', value: '盒马' },
  { label: 'IB', value: '进电' },
  { label: 'OB', value: '外拨' },
  { label: 'IM', value: '聊天工具' },
  { label: 'EMAILL', value: '邮件' },
  { label: 'APP', value: 'APP' },
  { label: 'H5', value: 'H5' },
  { label: 'Other', value: '其他' },
]

export default {
  name: 'CustomerEdit',
  filters: {
  },
  data() {
    return {
      channels: [],
      defaultTypeOptions: Object.assign({}, defaultTypeMap),
      defaultCityOptions: Object.assign({}, defaultCityMap),
      sourceOption: Object.assign({}, sourceMap),
      dialogFormVisible: false,
      disabledTel: true,
      userForm: {},
      fns: [{
        mobile:''
      }], // 情友号码
      genderDic: ['未知', '男', '女'],
      statusDic: ['可用', '禁用', '注销'],
      rules: {
        customerName: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
        customerType: [{ required: true, message: '客户类型不能为空', trigger: 'blur' }],
        channelId: [{ required: true, message: '渠道不能为空', trigger: 'blur' }],
        source: [{ required: true, message: '来源不能为空', trigger: 'blur' }],
        tel: [{ required: true, message: '客户联系方式不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
   
    allChannel().then(res => {
      this.channels = res.data.data
    })
  },
 
  methods: {
  
    editCustomerDia(row) {
      this.userForm = row
      this.dialogFormVisible = true

      if (!row.tel) {
        this.disabledTel = true
      }

      read(row.id).then(res => {
        console.log(res.data);
        this.userForm = res.data.data.user
        this.fns = res.data.data.fns
        // console.info(this.userForm)
      })
    },
      addTel(){
      let item={mobile:''}
      this.fns.push(item);
    },
    updateUser() {
          this.$refs['dataForm'].validate((valid) => {
          if(valid){

            console.log(this.userForm);
      let fns=[];
      this.fns.forEach(item=>{
        if(item.mobile!=''){
 fns.push(item.mobile);
        }
        
      })
      let params={
        user:{
          id:this.userForm.id,
         customerName:this.userForm.customerName,
         customerType:this.userForm.customerType,
         channelId:this.userForm.channelId,
         source:this.userForm.source,
         city:this.userForm.city,
         customerAddr:this.userForm.customerAddr,
        },
        fns:fns

      }
       panelApi.updateCustomer(params)
      .then(res => {
          console.log(res.data);
          if(res.data.errno==0){
            this.dialogFormVisible=false;
            this.$parent.getList();
          }

       

      })
      .catch((error) => {
          console.log(error)
      })



          }
        });

    },
    handleCall(mobile) {
   // alert("软电话条拨打电话");
      hollyglobal.dialoutEvent(mobile);
    }
  }
}
</script>

<style>
.el-table th.gutter {
  display: table-cell !important;
}
.dialog-footer{
    padding: 20px;
    padding-top: 10px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.el-input-group__append
{
  padding:0 10px;
  cursor:pointer
}
.el-form-item
{
  margin-bottom: 12px;
}
</style>
