<template>
  <div class="edit">
    <el-button 
      @click="editBtn" 
      size="mini" 
      :disabled="!isHandle"
    >编辑</el-button>
    <el-dialog
      title="编辑线索"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      append-to-body>
      <el-form :model="param" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" label-position="right">
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="param.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="param.phonenumber" size="small"></el-input>
        </el-form-item>
        <el-form-item label="省市县" prop="province">
          <el-cascader
            size="mini"
            class="width-240"
            v-model="param.province"
            :options="arealist()"
            @change="cascaderChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="param.address" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="来源" prop="cluesource">
          <el-input v-model="param.cluesource" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input type="textarea" v-model="param.notes" size="mini"></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>
export default {
  inject:['arealist'],
  name: 'add',
  data() {
    return {
      param: {
        "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:[],
      isHandle:''
    };
  },
  props:{
    updataList: {
      type:Function
    },
    getDetail: {
      type:Function
    },
    position: {
      type:String 
    },
    data: {
      type: Object
    }
  },
  computed:{
  },
  created () {
    this.isHandleFun()
  },
  methods: {
    isHandleFun () {
      let is 
      if(JSON.parse(window.sessionStorage.getItem('userInfo')).name == this.data.leadername) {
        is = true
        if(this.data.status == '待跟进' || this.data.status == '跟进中') {
          is = true
        } else {
          is = false
        }
      } else {
        is = false
      }
      this.isHandle = is
      console.log(this.isHandle);
    },
    editBtn () {
      this.dialogVisible = true
      this.param = Object.assign({},this.param,this.data)
      this.param.province = [this.data.province,this.data.city,this.data.county]
      this.areaSelectResult = this.param.province
    },
    handleClose() {
      this.dialogVisible = false
    },
    addOrdercule() {
      if(this.areaSelectResult.length > 1) {
        this.param.province = this.areaSelectResult[0]
        this.param.city = this.areaSelectResult[1]
        this.param.county = this.areaSelectResult[2]
      } else {
        this.param.content.province = this.areaSelectResult[0]
      }
      this.$refs.ruleForm.validate( async val => {
        if( !val ) return this.$notify({
          title:'提示',
          message:'请按照要求输入信息',
          type:'warning'
        })
        let res = await this.$api.requested({
          "classname": "saletool.orderclue.web.orderclue",
          "method": "edit",
          "content":this.param
        })
        this.tool.showMessage(res,() => {
          this.$refs.ruleForm.resetFields()
          this.dialogVisible = false  
          this.areaSelectResult = []
          this.$emit('onSuccess')
        })
      })
      
    },
    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;
  }
  .edit {
    display: inline-block;
  }
  .width-240 {
    width: 100%;
  }
</style>
