<template>
  <div>
    <div class="container normal-panel normal-margin">
      <el-button type="warning" size="small" icon="el-icon-s-claim" @click="onSubmit">保 存</el-button>
    </div>
    <div class="container normal-panel normal-margin">
      <p class="normal-title normal-margin">业务员信息</p>
      <el-row>
        <el-form :model="form" inline  :rules="rules" ref="form" label-position="left" label-width="100px" size="small">
          <el-col :span="8">
            <el-form-item label="业务员姓名" prop="hrid">
              <selectMenber style="width:240px" @selectMenber="selectMenber"></selectMenber>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" style="width:340px" prop="phonenumber">
              <el-input style="width:240px" readonly v-model="form.phonenumber" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width:340px" label="汇报对象" prop="reporthrname">
              <el-input style="width:240px" readonly v-model="form.reporthrname" placeholder="汇报对象"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width:340px" label="编号" prop="hrcode">
              <el-input style="width:240px" readonly v-model="form.hrcode" placeholder="编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item style="width:340px" label="邮箱" prop="email">
              <el-input style="width:240px" readonly v-model="form.email" placeholder="邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width:340px" label="部门" prop="depname">
              <el-input style="width:240px" readonly v-model="form.depname" placeholder="部门"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item style="width:340px" label="区域" prop="areaname">
              <el-input style="width:240px" readonly v-model="form.areaname" placeholder="区域"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import selectMenber from '../../../../components/selectMenber/index.vue'

export default {
  components:{
    selectMenber
  },
  data () {
    return {
      form:{
        "sa_saleareaid":'',
        "hrid":''
      },
      rules:{
        hrid:[
          { required: true, message: '请选择业务员', trigger: 'blur' },
          { required: true, message: '请选择业务员', trigger: 'change' },
        ]
      }
    }
  },
  methods:{
    onSubmit () {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false
        this.$confirm('确定将此人设置为业务员吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$api.requested({
            "classname": "webmanage.sale.salearea.salearea",
            "method": "add_saler",
            "content": {
              "sa_saleareaid":this.$route.query.id,
              "hrid":this.form.hrid
            }
          })
          this.tool.showMessage(res)
        }).catch((err) => {
          console.log(err)
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      });
    },
    selectMenber (data) {
      console.log(data)
      this.form = Object.assign({},this.form,data)
    }
  },
  created () {
    this.form.areaname = this.$route.query.name
    // 验证是否有编辑权限,若无权限则弹出
    this.tool.checkAuth(this.$route.name,'insert')?'':this.$router.go(-1)
  }
}

</script>
<style>
</style>