<script setup>
import { reactive, ref } from 'vue'

const props = defineProps({
    salesArr:{ //销售数据
        type:Array,
        default:()=>{return []}
    },
    data:{ //正在编辑的数据
        type:Object,
        default:()=>{return {}}
    }
})

const emit = defineEmits(['modifySaller','close'])

const rules = {
    saller:[{required: true, message: '请选择所属销售', trigger: 'change' },],
}
const ruleForm = reactive({
  saller:''
})

const ruleFormRef = ref(null)
const cascaderRef = ref(null)
function handleSave(){
    ruleFormRef.value.validate((valid)=>{
        if(valid){
            const cascaderNodes = cascaderRef.value.getCheckedNodes({leafOnly:true})
            emit('modifySaller',{
                saller:Number(cascaderNodes[0]?cascaderNodes[0].value:0),
                sallerName:cascaderNodes[0]?cascaderNodes[0].label:''
            })
            initForm()
        }
    })
}

function initForm(){
    ruleForm.saller = ''
    ruleFormRef.value.resetFields();
}

function handleClose(){
    initForm()
    emit('close')
}

</script>
<template>
  <div class="modify-saller-wrap">
      <el-form 
          :model="ruleForm" 
          :rules="rules" 
          ref="ruleFormRef" 
          label-width="100px" 
          class="demo-ruleForm"
      >
          <el-form-item label="商家名称">
              <span>{{data.BusinessName||''}}</span>
          </el-form-item>
          <el-form-item label="当前销售">
              <span>{{data.SellerName||''}}</span>
          </el-form-item>
          <el-form-item label="移至销售" prop="saller">
              <el-cascader
                  ref="cascaderRef"
                  v-model="ruleForm.saller"
                  :options="salesArr"
                  :show-all-levels="false"
                  :props="{
                      expandTrigger: 'hover',
                      children: 'Child',
                      emitPath: false,
                      label:'AdminName',
                      value:'AdminId',
                  }"
                  collapse-tags
                  filterable
                  clearable
                  placeholder="请选择销售"
              />
          </el-form-item>
          <div style="text-align:center;margin:30px 0">
              <el-button type="primary" plain @click="handleClose">取消</el-button>
              <el-button type="primary" @click="handleSave">保存</el-button>
          </div>
      </el-form>
  </div>
</template>
<style scoped lang="scss">

</style>