<template>
  <div class="add">
    <el-button type="primary" @click="dialogVisible=true" size="small">新建</el-button>
    <el-dialog
      title="新建线索"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="param.content" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" label-position="left">
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="param.content.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="param.content.phonenumber" size="small"></el-input>
        </el-form-item>
        <el-form-item label="省市县" prop="province">
          <el-cascader
            class="width-240"
            v-model="param.content.province"
            :options="_arealist"
            @change="cascaderChange"
            ref="cascader">
          </el-cascader>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="param.content.address" size="small"></el-input>
        </el-form-item>
        <el-form-item label="来源" prop="cluesource">
          <el-input v-model="param.content.cluesource" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input type="textarea" v-model="param.content.notes" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addOrdercule" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: 'add',
  data() {
    return {
      param: {
        "classname": "saletool.orderclue.web.orderclue",
        "method": "edit",
        "content": {
            "sat_orderclueid": 0,
            "name": "",
            "phonenumber": "",
            "province": "",
            "city": "",
            "county": "",
            "address": "",
            "notes": "",
            "cluesource": ""
        }
      },
      dialogVisible:false,
      rules: {
        phonenumber:[
          {required:true,message:'请输入手机号',trigger:'blur'},
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'blur' }
        ],
        province:[
          {required:true,message:'内容不能为空',trigger:'blur'},
        ],
        cluesource:[
          {required:true,message:'内容不能为空',trigger:'blur'},
          { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
        ],
      },
      areaSelectResult:''
    };
  },
  props:{
    updataList: {
      type:Function
    }
  },
  inject:['arealist'],
  computed:{
    _arealist() {
      return this.arealist()
    }
  },
  watch:{
  },
  created() {
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    addOrdercule() {
      this.$refs.ruleForm.validate( async val => {
          if( !val ) return this.$notify({
            title:'提示',
            message:'请按照要求填写信息',
            type:'warning'
          })
          if(this.areaSelectResult && this.areaSelectResult.length > 1) {
            this.param.content.province = this.areaSelectResult[0]
            this.param.content.city = this.areaSelectResult[1]
            this.param.content.county = this.areaSelectResult[2]
          } else if (this.areaSelectResult.length == 1) {
            this.param.content.province = this.areaSelectResult[0]
          }
          let res = await this.$api.requested(this.param)
          this.tool.showMessage(res,() => {
            this.$refs.ruleForm.resetFields()
            this.dialogVisible = false  
            this.areaSelectResult = []
            this.$emit('updataList')
          })
      })
      
    },
    cascaderChange(result) {
      this.areaSelectResult = result
    }
  },
};
</script>

<style scoped>
  /deep/.el-dialog__body {
    padding-bottom: 0;
  }
  /deep/.el-dialog__footer {
    display: flex;
    justify-content: space-around;
    padding-top: 0;
  }
  .width-240 {
    width: 100%;
  }
</style>
