<template>
    <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="跟进类型" prop="visitType">
                    <el-select v-model="form.visitType" placeholder="请选择跟进类型" clearable size="small">
                        <el-option
                                v-for="item in typeOptions"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                    </el-select>
                </el-form-item>
                <el-form-item label="跟进阶段" prop="customerUserStatus">
                    <el-select v-model="form.customerUserStatus" placeholder="请选择跟进阶段" clearable size="small">
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户类型" prop="customerType">
                    <el-select v-model="form.customerType" placeholder="请选择客户类型" clearable size="small">
                        <el-option
                                v-for="item in customerTypeOptions"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                    </el-select>
                </el-form-item>
                <el-form-item label="跟进内容" prop="content">
                <el-input type="textarea" :rows="2" v-model="form.content" placeholder="请输入跟进内容" />
                </el-form-item>
                <!-- <el-form-item label="跟进照片" prop="photos">
                        <el-upload
                        :file-list="photoList"
                        :action="uploadUrl"
                        class="avatar-uploader"
                        list-type="picture-card"
                        :on-success="handlePhotoSuccess"
                        :on-preview="handlePhotoPreview"
                        :on-remove="handlePhotoRemove">
                        <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :modal-append-to-body="false" :visible.sync="dialogVisible" >
                        <img width="100%" :src="dialogImageUrl" alt="" style="z-index:9999;">
                        </el-dialog>
                </el-form-item> -->
                <el-form-item label="下次联系时间" prop="nextTime">
                <el-date-picker clearable size="small" style="width: 200px"
                    v-model="form.nextTime"
                    type="datetime"
                    placeholder="选择下次联系时间">
                </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
       
    </div>
</template>
  
<script>
    import { listCustomerVisit, getCustomerVisit, delCustomerVisit, addCustomerVisit, updateCustomerVisit, exportCustomerVisit } from "@/api/crm/customerVisit";
    export default {
        name: "visit",
        data() {
            return {
                customerTypeOptions:[],
                statusOptions:[],
                dialogImageUrl: '',
                dialogVisible: false,
                photoList:[],
                images:[],
                uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
                baseUrl: process.env.VUE_APP_BASE_API,
                typeOptions:[],
                form: {
                    customerId:null,
                    content:null,
                    visitType:"1"
                },
                // 表单校验
                rules: {
                    visitType: [
                        { required: true, message: "跟进类型不能为空", trigger: "change" }
                    ],
                    customerUserStatus: [
                        { required: true, message: "跟进阶段不能为空", trigger: "change" }
                    ],
                    // content: [
                    //     { required: true, message: "跟进内容不能为空", trigger: "change" }
                    // ],
         
                }
                 
            };
        },
        created() {
            this.getDicts("crm_customer_visit_type").then((response) => {
                this.typeOptions = response.data;
            });
            this.getDicts("crm_customer_type").then((response) => {
                this.customerTypeOptions = response.data;
            });
            this.getDicts("crm_customer_user_status").then((response) => {
                this.statusOptions = response.data;
            });
            
        },
        methods: {
            handlePhotoSuccess(res, file) {
                if(res.code==200){
                    this.images.push(res.url);
                    this.form.photos=this.images.toString();
                }
                else{
                this.msgError(res.msg);
                }
                
            },
            handlePhotoRemove(file, fileList) {
                let url="";
                if(file.response!=undefined){
                    url=file.response.url;
                }
                else{
                    url=file.url;
                }
                for(var i=0;i<this.images.length;i++){
                    if(url==this.images[i]){
                        this.images.splice(i,1);
                    }
                }
                this.form.photos=this.images.toString();
            },
            handlePhotoPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            reset(customerId) {
                this.photoList= [];
                this.images= [];
                this.form.customerId=customerId;
                this.form.content=null;
                this.form.visitType="1";
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                if (valid) {
                    addCustomerVisit(this.form).then(response => {
                        if (response.code === 200) {
                            this.msgSuccess("提交成功");
                            this.$emit('closeVisit');
                        }
                    });
                }
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 20px;
        
}
.footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>


<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>




 