<template>
  <div>
    <el-button style="width:100%" size="mini" type="primary"  block @click="onshow">分配</el-button>
    <el-dialog title="" :visible.sync="dialogForm" width="400px" append-to-body>
      <div slot="title" style="font-size: 15px">
        分配客户
      </div>
      <div>
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules"  ref="form"  size="mini" label-position="right" label-width="120px">
            <el-col :span="20">
              <el-form-item prop="userid"  label="可分配人员:" >
                <el-select v-model="form.userid" placeholder="请选择人员" style="width: 100%">
                  <el-option
                      v-for="item in poolUser"
                      :key="item.userid"
                      :label="item.name"
                      :value="item.userid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogForm = 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 {
  name: "distribution",
  props:["data"],
  data(){
    return {
      dialogForm:false,
      form:{
        userid:"",
        sa_customersid:"",
      },
      poolUser:[],
      rules:{
        userid: [
          { required: true, message: '未选择人员', trigger: 'change' },
        ],
      }
    }
  },
  methods:{
    onshow(){
      this.dialogForm = true
      console.log("分配")
      this.poolUserList()
      this.$emit("onshow")
      this.form.sa_customersid = this.data.sa_customersid
    },
    onSubmit(){
      console.log(this.form)
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": 20221014165502,
          "content": {
            "userid": this.form.userid,
            "sa_customersids": [this.form.sa_customersid]
          },
        })
        this.tool.showMessage(res, ()=>{
          this.dialogForm = false
          this.$store.dispatch('changeDetailDrawer',false)
          this.$emit("setSuccess")
        })
      })
    },
    /*获取可分配人员*/
    async poolUserList(){
      console.log("获取可分配人员")
      console.log(this.data)
      const res = await this.$api.requested({
        "id": 20221017094102,
        "content": {
          "sa_customerpoolid": this.data.sa_customerpoolid//公海池id
        },
      })
      console.log(res)
      this.poolUser = res.data
      console.log("可分配人员")
      console.log(this.poolUser)
    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>