<template>
  <div>
    <el-button type="primary" size="small" @click="onShow(dialogVisible = true)">新 建</el-button>
    <el-drawer
        title="创建业务员"
        :visible.sync="dialogVisible"
        size="30%"
        direction="rtl"
        append-to-body
        :show-close="false"
        @close="dialogVisible = false">
      <div class="drawer__panel">
        <el-row>
          <el-form :model="form"  :rules="rules" ref="form" label-position="right" label-width="75px" size="small">
            <el-col :span="12">
              <el-form-item label="业务员:" prop="hrid">
                <selectMenber ref="selectMenber"  @selectMenber="selectMenber"></selectMenber>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号:"  prop="phonenumber">
                <el-input   v-model="form.phonenumber" placeholder="手机号" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="汇报对象:" prop="reporthrname">
                <el-input   v-model="form.reporthrname" placeholder="汇报对象" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="编号:" prop="hrcode">
                <el-input   v-model="form.hrcode" placeholder="编号" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="邮箱:" prop="email">
                <el-input   v-model="form.email" placeholder="邮箱" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="部门:" prop="depname">
                <el-input   v-model="form.depname" placeholder="部门" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="区域:" prop="areaname">
                <el-input  v-model="form.areaname" placeholder="区域" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item  label="最低授权折扣(%):" prop="discountrate" label-width="132px">
                <el-input  v-model="form.discountrate" placeholder="请输入最低授权折扣" @change="discountrateChange(form.discountrate)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  prop="discountrate" label-width="132px">
                <!-- <el-input  v-model="form.discountrate" placeholder="请输入最低授权折扣" @change="discountrateChange(form.discountrate)"></el-input> -->
                <el-checkbox :true-label="1" :false-label="0" v-model="form.iseditprice">是否可编辑订单价格</el-checkbox>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
<!--        <el-button size="small"  @click="onClose" class="normal-btn-width">取 消</el-button>-->
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
<!--    <el-dialog title="创建经销商" append-to-body :visible.sync="dialogVisible">        <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>

      <div>
        <p class="normal-title normal-margin">业务员信息</p>

      </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":'',
        "discountrate":''
      },
      rules:{
        hrid:[
          { required: true, message: '请选择业务员', trigger: 'blur' },
          { required: true, message: '请选择业务员', trigger: 'change' },
        ],
        discountrate:[
          { required: true, message: '请输入最低授权折扣', trigger: 'blur' },
        ]
      }
    }
  },
  computed:{
    ...mapGetters({
      dataToForm:'dataToForm'
    })
  },
  methods:{
    onShow () {
      this.form.areaname = this.dataToForm.label
    },
    onSubmit () {
      console.log(this.dataToForm)
      
      console.log(this.form)
      this.$refs['form'].validate((valid) => {
        if (!valid) return false
        this.$confirm('确定将此人设置为业务员吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.form.sa_saleareaid = this.dataToForm.sa_saleareaid
        this.form.discountrate = (this.form.discountrate /100).toFixed(4)
          const res = await this.$api.requested({
            "id":20221011144703,
            "content": this.form
          })
          this.tool.showMessage(res,()=>{
            this.dialogVisible = false
            this.$refs.selectMenber.value.name = ''
            this.$refs.selectMenber.value.hrid = ''
            this.$emit('onSuccess')
            this.form = {
              "sa_saleareaid":'',
              "hrid":'',
              "discountrate":''
            }
          })
        }).catch((err) => {
          console.log(err)
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      });
    },
    selectMenber (data) {
      console.log(data)
      this.form = Object.assign({},this.form,data)
    },
    onClose(){
      this.dialogVisible = false
      this.form = {
        "sa_saleareaid":'',
        "hrid":'',
        "discountrate":''
      }
    },
    discountrateChange(val){
      if (val < 0){
        this.form.discountrate = 1
      }else if(val > 100){
        this.form.discountrate = 100
      }else {
        this.form.discountrate = Math.round(val * 100)/100
      }
    }
  },
  created () {
    this.form.areaname = this.$route.query.name
  }
}

</script>
<style>
</style>