<template>
  <el-dialog class="client-data-dialog" title="添加小计" :visible.sync="visible" :before-close="handleClose">
    <el-form :model="ruleForm"  :rules="rules" ref="ruleForm"  label-width="120px" class="demo-ruleForm">

    <el-form-item label="姓名：" prop="clientName">
        <p>{{ this.ruleForm.clientName  }}</p>
    </el-form-item> 

     <!-- <el-form-item label="手机号：" prop="clientCell">
        <p>{{ this.ruleForm.clientCell   }}</p>
    </el-form-item>  -->

    <el-form-item label="联系时间：" prop="gmtContact">
        <el-date-picker
        v-model="ruleForm.gmtContact"
        type="datetime"
        placeholder="选择日期时间">
        </el-date-picker>
    </el-form-item> 

    <el-form-item label="客户意愿：" prop="marketersId">
        <div class="block">
        <el-cascader
            v-model="ruleForm.marketersId"
            :options="operat"
            :props="{ expandTrigger: 'hover' }"
            ></el-cascader>
        </div>
    </el-form-item>


    <el-form-item label="联系内容：" prop="contant">
        <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="ruleForm.contant"  style="width:80%">
        </el-input>
    </el-form-item>


    <el-form-item label="备注：" prop="momo">
        <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容" v-model="ruleForm.momo" style="width:80%"
        >
        </el-input>
    </el-form-item>

    <el-form-item label="跟进人：" prop="handlerName">
        <p>{{this.ruleForm.handlerName}}</p>
    </el-form-item> 


    </el-form>

    <div slot="footer" style="margin-right:30px">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">新 增</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">


  export default {
    name: 'assignAddCUstomer',
    props: {
      dialogVisible: {
        type: Boolean,
        required: true
      },
      batchNo: {
          type: String
      },
      handlerName: {
          type: String
      },
      clientName: {
          type: String
      },
      clientCell: {
          type: String
      },
      id: {
          type: Number
      },
    },
    data() {
    
      return {
        ui: {
          submitLoading: false
        },
        visible: this.$props.dialogVisible,
        operat: [],
        ruleForm: {
          batchNo: '',
          id: '',
          clientCell:'',
          status:'FOLLOWEDUP',          
          handlerName:'',
          clientName:'',
          contant:'',
          gmtContact: '',
          momo:'',
          marketersId:'',
          desireNo :'',
          desireNoSecond  :'',
        },

        rules: {
            gmtContact: [{required: true, message: '请输入联系时间', trigger: 'blur'}],
            marketersId: [{required: true, message: '请输入客户意愿', trigger: 'blur'}],
        },
    
        }
    },
    created() {
          this.ruleForm = {
              id: this.id,
              batchNo: this.batchNo,
              clientCell: this.clientCell,
              clientName: this.clientName,
              handlerName: this.handlerName,
              gmtContact: new Date(),
          }
    },
    methods: {
      /** 提交点击 */
      submitForm(formName) {
        this.$refs['ruleForm'].validate((valid) => {
          if (!valid) {
              return false
          }
          this.$$post('/market/createSubtotal', {
              batchNo : this.ruleForm.batchNo,
              clientCell: this.ruleForm.clientCell,
              clientName : this.ruleForm.clientName,
              handlerName : this.ruleForm.handlerName,
              contant : this.ruleForm.contant,
              gmtContact : this.ruleForm.gmtContact,
              marketersId : this.ruleForm.id ,
              desireNo : this.ruleForm.marketersId[0] ,
              desireNoSecond : this.ruleForm.marketersId[1] ,
              momo : this.ruleForm.momo
          })
            .then(res => {
              if (res.data.code < 1) {
                this.$message.error(res.data.msg);
                return
              }
              this.$message({message: '新增成功', type: 'success'});
              this.handleClose();
              this.$emit('my-event',true)
            })
            .catch(err => {
              alert("error!")
            })
         })
         
      },
      loadOperate() {
          this.$$post('/market/getDesire', {
              batchNo : this.ruleForm.batchNo,
          })
            .then(res => {
              if (res.data.code < 1) {
                this.$message.error(res.data.msg);
                return
              }

            var arr_data = res.data.data;
              var arr = new Array()
              arr_data.forEach(e=>{
                if(e.parentId==0){
                  var a = new Object();
                  a.value = e.desireNo;
                  a.label = e.name;
                  var arr2 = new Array();
                  arr_data.forEach(item=>{
                    if (item.parentId==e.id) {
                      var b = new Object;
                      b.value = item.desireNo;
                      b.label = item.name;
                      arr2.push(b);
                    }
                  });
                  a.children = arr2;
                  arr.push(a)
                }
              })
              this.operat  = arr;
            })
            .catch(err => {
              alert("error!")
            })
      },
    
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.ruleForm.title = item.value;
        this.ruleForm.problemDescription = item.problemDescription;
        this.ruleForm.solve = item.solve;
      },
      handleIconClick(ev) {
        console.log(ev);
      },

      /** 关闭处理 */
      handleClose() {
        this.visible = false;
        setTimeout(() => {
          this.$emit('update:dialogVisible', false)
        }, 300);
      }
    },
    mounted: function () {
      this.loadOperate();
    },
  }
</script>

<style>

</style>
