<template>
  <div class="dialog">
    <el-dialog :width="dialogWidth" :title="titleDialog" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item v-if="parentId" label="选择上级部门" :label-width="formLabelWidth">
          <el-button @click="innerBtn()">{{nameTitle}}</el-button>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName" :label-width="formLabelWidth">
          <el-input v-model="form.deptName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-input v-model="form.leader" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮件" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" :label-width="formLabelWidth">
          <el-input v-model.number="form.sortNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='createClient.vue'?createData('form'):updateData('form')">确 定</el-button>
      </div>

      <el-dialog
        width="30%"
        title="选择上级部门"
        :visible.sync="innerVisible"
        append-to-body>
        <el-tree
          node-key="id"
          :data="deptData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          accordion
        ></el-tree>
        <p v-if="handleTree" class="tree-span">选中的上级部门：
          <span>{{checkName}}</span>
        </p>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCheck">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import { addDept,getDeptInfo,updateDept,getDeptTreeData} from '@/api/system/department.js'
  import { getMenuTree } from '@/utils/getTable.js'

  const form={
    deptName:'',
    parentId:'',
    sortNum:'',
    leader:'',
    phone:'',
    email:'',
  }

  export default {
    name: 'serviceDialog',
    data() {
      return {
        dialogStatusProps:this.dialogStatus,
        nameTitle: '',
        handleTree: false,
        checkName: '',
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        deptData: [],
        innerVisible: false,
        dialogFormVisible: this.dialogVisible,
        title: this.titleDialog,
        form: Object.assign({},form),
        formLabelWidth: '80px',
        dialogWidth: '600px',
        checkData: {},
        // parentId:0,

        rules: {
          deptName: [
            {required: true, message: '请输入部门名称', trigger: 'change'}
          ],
        }

      }
    },
    props: {
      dialogVisible: {
        type: Boolean
      },
      titleDialog: {
        type: String
      },
      parentId: [String, Number],
      dialogStatus:[String]

    },
    mounted() {
      // this.getInfo()
    },
    methods: {
      //创建部门
      createData(formName){
        const _that = this;
        // console.log('form', _that.form)
        this.$refs[formName].validate((valid) => {
          if(valid){
            var data = {
              'dept': JSON.stringify(_that.form)
            }
            addDept(data).then(response => {

              _that.dialogFormVisible = false
              _that.$message({
                message: '增加成功',
                type: 'success'
              });

              _that.$emit('tableRefresh',"");

            })
          }
        })

      },
      //修改部门信息
      updateData(formName) {
        const _that = this
        // console.log('form', _that.form)
        this.$refs[formName].validate((valid) => {
          if(valid){
            var data = {
              'dept': JSON.stringify(_that.form)
            }
            // console.log('data', data)
            updateDept(data).then(response => {

              _that.dialogFormVisible = false
              _that.$message({
                message: '修改成功',
                type: 'success'
              });

              _that.$emit('tableRefresh',"");

            })
          }

        })


      },
      //增加部门
      createInfoAdd(){
        const _that = this;
        _that.dialogFormVisible = true;
        _that.form = Object.assign({},form);
        _that.form.parentId = 0
        _that.parentId = 0

      },
      //增加子部门
      createInfo(row){
        const _that = this;
        _that.dialogFormVisible = true;
        _that.form = Object.assign({},form);
        // console.log('row',row);
        _that.nameTitle = row.deptName;

      },
      //获取部门信息
      getInfo(menuId) {
        const _that = this;
        _that.dialogFormVisible = true;

        var data = {
          'deptId': menuId
        }
        // console.log('data', data)
        getDeptInfo(data).then(response => {
          const data = response.data
          // console.log('data', data)

          _that.form = {
            id:data.id,
            deptName:data.deptName,
            parentId:data.parentId,
            sortNum:data.sortNum,
            leader:data.leader,
            phone:data.phone,
            email:data.email,
          }
          if (!data.parentName) {
            _that.nameTitle = data.menuName
          } else {
            _that.nameTitle = data.parentName
          }
        })

      },

      handleCheck() {
        //确定选中上级部门
        const _that = this
        // console.log('checkData', _that.checkData)
        _that.form.parentId = _that.checkData.id
        _that.nameTitle = _that.checkData.name
        _that.innerVisible = false
      },
      handleNodeClick(data) {
        const _that = this
        _that.handleTree = true
        _that.checkName = data.name
        _that.checkData = data
      },
      //选择部门弹窗
      innerBtn() {
        const _that = this
        _that.deptData = []
        _that.handleTree = false
        _that.checkName = '',
          getDeptTreeData().then(response => {
            const data = response.data
            // console.log('data',data)
            const deptData = _that.getDeptTree(data)
            // console.log('deptData', deptData);
            _that.deptData = deptData
            _that.innerVisible = true

          })
      },
      getDeptTree(data){

        data.forEach((item,index)=>{
          if(item.pId != 0){
            data.splice(index,1)
          }
        })
        return data;
      }

    },
    watch: {
      dialogVisible() {
        this.dialogFormVisible = this.dialogVisible
      },
      titleDialog() {
        this.title = this.titleDialog
      },
      dialogStatus() {
        this.dialogStatusProps = this.dialogStatus
      }
    }
  }
</script>


<style scoped>
  .dialog {


  }

  .tree-span {
    padding-left: 15px;
  }

  .tree-span span {
    color: #E6A23C;
  }


</style>
