<template>

  <div v-if="data.status === '待分配'" class="inline-16">
    <el-button size="small" :type="type" @click="onShow">编 辑</el-button>
    <el-dialog title="编辑线索" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" :rules="rule" ref="form" label-position="left" label-width="80px" size="small">
        <el-form-item label="客户姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="省市县" prop="value">
          <el-cascader
            style="width:100%"
            class="width-240"
            v-model="form.value"
            :options="arealist"
            @change="cascaderChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="来源" prop="cluesource">
          <el-input v-model="form.cluesource" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.notes" type="textarea" :rows="4" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:['data','type'],
  data () {
    return {
      dialogFormVisible:false,
      rule:{
        phonenumber:[
          { required: true, message: '请输入联系人手机号', trigger: 'blur' },
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'blur' }
        ],
        cluesource:[{ required: true, message: '请输入来源', trigger: 'blur' }],
        value:[
          { required: true, message: '请选择省市县', trigger: 'blur' },
          { required: true, message: '请选择省市县', trigger: 'change' }
        ],
      },
      form:{},
      arealist:[]
    }
  },
  methods:{
    onShow () {
      this.dialogFormVisible = true
      let arr = ['province','city','county']
      this.data.value = []
      arr.forEach(e=>{
        this.data[e] !== '' ?this.data.value.push(this.data[e]):''
      })
      this.form = Object.assign({},this.form,this.data)
    },
    async onSubmit () {
      
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;
        const res = await this.$api.requested({
          "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
          "method": "edit",
          "content":this.form
        })
        this.tool.showMessage(res,()=>{
          this.dialogFormVisible = false
          this.$emit('onSuccess')
        })
      });
    },
    async query_arealist() {
      const res = await this.$api.requested({
        "classname": "system.tools",
        "method": "query_arealist",
        "content": {
        }
      })
      this.arealist = this.tool.createMenu(res.data)
    },
    cascaderChange (val) {
      if (val.length === 1) 
        return this.form = Object.assign({},this.form,{province:val[0],city:'',county:''})
      this.form = Object.assign({},this.form,{province:val[0],city:val[1],county:val[2]})
      
    }
  },
  mounted () {
    this.query_arealist()
  }
}

</script>
<style>
</style>