<template>
<!-- 新增申请 提示弹窗 弹窗 -->
  <div class="move-dialog">
    <el-dialog
      :visible.sync="isMoveShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="title"
      @close="handleMove(false)"
      width="530px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="移动到">
            <el-cascader
              v-model="value"
              placeholder="请选择用户"
              style="width:200px;margin-right:10px;margin-bottom:8px;"
              :options="salesArr"
              :props="defaultSalesProps"
              :show-all-levels="false"
              :key="modifySales"
              collapse-tags
              clearable
              filterable
              @change="changeSales">
            </el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot-container">
        <el-button @click="handleMove(false)">取 消</el-button>
        <el-button type="primary" @click="handleMove">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {titleMap} from "../config"
export default {
  props:{
    isMoveShow:{//弹窗显示
      type:Boolean,
      default:false
    },
    moveInfo:{//申请信息 
      type:Object,
      default:()=>{
        return {
          type:1,//1 移动 2 批量移动
          salesArr:[],//销售列表
          selectArr:[]//申请列表
        }
      }
    }
  },
  computed:{
  },
  watch:{
    isMoveShow(val){
      if(val){

        this.modifySales++
        this.title = titleMap[this.moveInfo.type]
        this.salesArr = this.moveInfo.salesArr
        this.value = ''
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
          this.$refs.form.resetFields();
        })
      }
    }
  },
  data() {
    return {
      title:'',
      value:'',
      defaultSalesProps:{
				label:'RealName',
				children:'ChildrenList',
				value:'AdminId'
			},//级联配置
      modifySales:0,//用于重新渲染选择销售级联选择窗
    };
  },
  methods: {
    handleMove(isConfirm) {
      const data = {
        value:this.value,
        type: this.moveInfo.type,
        selectArr:this.moveInfo.selectArr
      }
      if(isConfirm){
        this.$emit('moveConfirm', data)
      }else{
        this.$emit('closeMove')
      }
    }
  },
};
</script>

<style lang="scss">
.move-dialog{
  .dialog-container{
    .el-input--suffix {
      width: 100%;
    }
  }
}

</style>
<style scoped lang="scss">
.move-dialog{
  .dialog-container{
    margin-top: 40px;
  }
  .foot-container{
    text-align: center;
    padding-bottom: 40px;
    margin-top: 60px;
  }
}
</style>
