<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
      <el-form-item label="部门" prop="depid">
           <el-cascader
              v-model="ruleForm.depid"
              :options="depData"
              :props="props"
              @change="handleSalesMan"
              placeholder="请选择部门"
              class="form_select"
              clearable
              style="width:199px"
              filterable
              change-on-select
            />
      </el-form-item>
      <el-form-item label="新销售负责人" prop="F_Name">
        <el-select v-model="ruleForm.F_Name" clearable placeholder="请选择销售负责人">
          <el-option
            v-for="item in salesMan"
            :key="item.F_UserCode"
            :label="item.F_UserName"
            :value="item.F_UserCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getDepartmentTreeList} from '@/api/commonAPI';
import { formatterContent } from '@/utils'
import { getTransfer,getSalesmanData} from '@/api/memberManagement/memberList'
export default {
  name: "AddOrEdit",
  props: {
    rowid: {
      type: Array,
      default: []
    },
    callid: {
      type: Number,
      default: 0
    },
    layerid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      ruleForm: {
        F_Name: "" ,//客户姓名
        depid: [] //部门id
      },
      rules: {
        F_Name: [
          {
            required: true,
            trigger: "blur",
            message: "请输入新负责人姓名"
          }
        ],
        depid: [
          {
            required: true,
            trigger: "blur",
            message: "请选择部门"
          }
        ],
      },
      props: {
        // 自定义部门下拉数据的key值
        value: "id",
        label: "text",
        children:'children'
      },
      depData:[],//部门数据
      salesMan:[],//销售负责人数据
      loading: false
    };
  },
  created() {
    if (this.callid) {
      this.ruleForm.unique_id = this.callid;
    }
    Promise.all([]).then(() => {
      if (this.rowid) {
        this.getDepartment()
      }
    });
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true;
          return new Promise(resolve => {
            // const params ={
            //   ids:this.rowid,
            //   toperson: this.ruleForm.F_Name
            // }
            // console.log(params)
            // 添加
            if (this.rowid) {
              getTransfer(this.rowid,this.ruleForm.F_Name)
                .then(response => {
                  this.loading = false;
                  if (response.state.toLowerCase() === "success") {
                    this.$parent.$layer.close(this.layerid);
                    this.$parent.getList(); // 重新加载父级数据
                    this.$message.success("恭喜你，转移成功!");
                  }
                })
                .catch(() => {
                  this.loading = false;
                });
            }
          });
        } else {
          this.$message.error("请输入有效的必填项信息!");
          return false;
        }
      });
    },
    //获取部门信息
    getDepartment(){
       getDepartmentTreeList().then(response=>{
        if(response.state.toLowerCase()=='success'){
          this.depData=response.data
        }
      })
    },
    //获取销售负责人数据
    handleSalesMan(){
      this.ruleForm.F_Name=''
      return new Promise(resolve=>{
        const params={
          deptid:this.ruleForm.depid&&this.ruleForm.depid[this.ruleForm.depid.length-1]
        }
        getSalesmanData(params).then(response=>{
          if(response.state.toLowerCase()=='success'){
            this.salesMan=response.data
          }
        }).catch(result=>{
          console.log(result)
        })
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.order_form {
  .form_select {
    width: 100%;
  }
  .form_date {
    width: 100%;
  }
  .col_select_text {
    text-align: right;
    padding-right: 15px;
  }
}
</style>