<template>
  <div>
    <el-button type="primary" size="mini" @click="onShow(dialogVisible = true)">新 增</el-button>
    <el-dialog title="创建经销商" :visible.sync="dialogVisible">
      <div>
        <p class="normal-title normal-margin">业务员信息</p>
        <el-row>
          <el-form :model="form"  :rules="rules" ref="form" label-position="left" label-width="100px" size="small">
            <el-col :span="12">
              <el-form-item label="业务员姓名" prop="hrid">
                <selectMenber style="width:240px" @selectMenber="selectMenber"></selectMenber>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <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="12">
              <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="12">
              <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="12">
              <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="12">
              <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="12">
              <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 class="dialog-footer">
        <el-button size="small" @click="dialogVisible = 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>
import selectMenber from '@/components/selectMenber/index.vue'
import {mapGetters} from 'vuex'
export default {
  components:{
    selectMenber
  },
  data () {
    return {
      dialogVisible:false,
      form:{
        "sa_saleareaid":'',
        "hrid":''
      },
      rules:{
        hrid:[
          { required: true, message: '请选择业务员', trigger: 'blur' },
          { required: true, message: '请选择业务员', trigger: 'change' },
        ]
      }
    }
  },
  computed:{
    ...mapGetters({
      dataToForm:'dataToForm'
    })
  },
  methods:{
    onShow () {
      this.form.areaname = this.dataToForm.label
    },
    onSubmit () {
      console.log(this.dataToForm)
      this.$refs['form'].validate((valid) => {
        if (!valid) return false
        this.$confirm('确定将此人设置为业务员吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$api.requested({
            "id":20221011144703,
            "content": {
              "sa_saleareaid":this.dataToForm.sa_saleareaid,
              "hrid":this.form.hrid
            }
          })
          this.tool.showMessage(res,()=>{
            this.dialogVisible = false
            
            this.$emit('onSuccess')
            this.form = {
              "sa_saleareaid":'',
              "hrid":''
            }
          })
        }).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
  }
}

</script>
<style>
</style>