<!--
 * @Descripttion : 当前组件信息
 * @Author       : 无尘
 * @Date         : 2020-02-13 16:13:59
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-08 15:23:25
 * @FilePath     :\haoban-4\src\components\company\add-member.vue
 -->
<!--

  <add-member :member-obj="memberObj" @refreshData="refreshData" @changeObj="changeObj"></add-member>
  import addMember from '@/components/company/add-member.vue';
  -->

<template>
  <el-dialog width="600px" :title="partForm.staffId ? '成员详情' : '新增成员'" :visible.sync="memberVisible" append-to-body :before-close="handleClose">
    <!-- <div class="add-title m-b-20 font-14 color-303133 font-w-500">基本信息</div> -->
    <el-form :model="partForm" :rules="rules" ref="form" label-width="100px" class="dialog-form">
      <el-form-item label="姓名" prop="">
        {{ partForm.staffName || '--' }}
      </el-form-item>
      <el-form-item label="昵称">
        {{ partForm.nickName || '--' }}
      </el-form-item>
      <el-form-item label="账号">
        {{ partForm.wxUserId || '--' }}
      </el-form-item>
      <el-form-item label="性别" prop="">
        {{ partForm.sex == 1 ? '男' : partForm.sex == 2 ? '女' : '--' }}
      </el-form-item>
      <el-form-item label="手机号码" prop=""> {{ partForm.nationCode }}-{{ partForm.phoneNumber }} </el-form-item>
      <el-form-item label="部门" prop="">
        <ul>
          <li class=" depart-cell color-2f54eb cursor-pointer" v-for="(item, index) in partForm.departmentInfo" :key="index + 'part'" @click="changeDepart(item)">
            <span>{{ item.chainName }} / {{ item.departmentName }} {{ partForm.departmentInfo.length > 1 ? ';' : ';' }}</span>
          </li>
        </ul>
      </el-form-item>
      <el-form-item label="职务" prop="">
        {{ partForm.postion || '--' }}
      </el-form-item>
      <!--<el-form-item v-if="partForm.staffId && !partForm.activeFlag" label="激活状态"> <span class="span-dot"></span><span>未激活</span><el-button @click="postInvite(memberObj)" type="text" class="m-l-30">邀请</el-button> </el-form-item>
      -->
      <!-- <div class="m-b-20 font-14 color-303133 font-w-500">对外信息</div>
      <el-form-item label="职务" prop="extendPostionDefine">
        <el-radio-group :disabled="partForm.staffId ? true : false" v-model="partForm.syncPostionFlag" @change="changeExtendPostion">
          <div style="line-height: 32px;">
            <el-radio :label="1">同步公司内职务</el-radio>
          </div>
          <div><el-radio :label="2" class="m-r-10">自定义</el-radio><limitInput v-if="partForm.syncPostionFlag == 2" :inputWidth="285" :inputValue.sync="partForm.extendPostionDefine" :getByType="'char'" :holder="'请输入职务'" :maxLength="12"> </limitInput></div>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
  </el-dialog>
</template>
<script>
import fetch from '@/api/contact.js';
const { getStaffDetail } = fetch;
// import showMsg from '@/common/js/showmsg';
import PhoneNumber from 'awesome-phonenumber';
export default {
  name: 'AddMember',
  components: {
  },
  props: {
    memberObj: {
      type: [ Object, Array ],
      default() {
        return {};
      }
    },
    defaultDepart: {
      type: [ Object, Array ],
      default() {
        return [];
      }
    }
  },
  data() {
    let checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else {
        let pn = new PhoneNumber('+' + this.partForm.nationCode + value);
        if (!pn.isValid() || !pn.isMobile()) {
          callback(new Error('手机号格式不正确'));
        } else {
          callback();
        }
      }
    };
    let checkExposition = (rule, value, callback) => {
      if (value === '' && this.partForm.syncPostionFlag == 2) {
        callback(new Error('请输入对外职务名称'));
      } else {
        callback();
      }
    };

    return {
      memberVisible: true,
      rules: {
        staffName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        extendPostionDefine: [
          {
            required: true,
            validator: checkExposition,
            trigger: 'blur'
          }
        ],
        phoneNumber: [
          {
            required: true,
            validator: checkPhone,
            trigger: 'blur'
          }
        ],
        departmentInfo: [
          {
            type: 'array',
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }
        ]
      },
      partForm: {
        staffId: '',
        staffName: '',
        nickName: '',
        nationCode: '86',
        phoneNumber: '',
        postion: '',
        activeFlag: false,
        departmentInfo: [],
        departmentIds: '',
        sex: 1,
        syncPostionFlag: 1,
        extendPostion: '',
        extendPostionDefine: ''
      }
    };
  },
  mounted() {
    const that = this;
    if (Object.keys(that.memberObj).length) {
      that.partForm = that.memberObj;
      that.partForm.departmentInfo = [];
      that.getData();
    } else {
      that.partForm.departmentInfo = that.defaultDepart || [];
    }
  },
  methods: {
    /**
     * @description: 选择部门
     * @param {Object} obj
     * @author: 无尘
     */
    changeDepart(obj) {
      const that = this;
      that.$emit('changeObj', obj);
    },
    /**
     * @description: 选择部门
     * @param {Object} nodes
     * @author: 无尘
     */
    checkGroupIds: function(nodes) {
      const that = this;
      that.partForm.departmentInfo = nodes;
    },
    /**
     * @description: 改变对外职务
     * @param {String} e
     * @author: 无尘
     */
    changeExtendPostion(e) {
      const that = this;
      if (e == 1) {
        that.partForm.extendPostion = that.partForm.postion;
      } else {
        // that.partForm.extendPostionDefine = '';
        that.partForm.extendPostion = '';
      }
    },
    /**
     * @description: 关闭弹窗
     * @param {Function} done
     * @author: 无尘
     */
    handleClose(done) {
      const that = this;
      that.$refs['form'].resetFields();
      done();
      that.$emit('refreshData', 'close');
    },
    cancel() {
      const that = this;
      that.$refs['form'].resetFields();
      that.$emit('refreshData', 'close');
    },

    /**
     * @description: 确定保存
     * @param {String} form
     * @author: 无尘
     */
    submitForm(form) {
      const that = this;
      if (that.partForm.syncPostionFlag == 1) {
        that.partForm.extendPostion = that.partForm.postion;
      }
      if (that.partForm.syncPostionFlag == 2) {
        that.partForm.extendPostion = that.partForm.extendPostionDefine;
      }
    },

    /**
     * @description: 获取数据
     * @author: 无尘
     */
    getData() {
      const that = this;
      let params = {
        staffId: that.partForm.staffId
      };
      getStaffDetail(params)
        .then(res => {
          res.result.activeFlag = res.result.activeFlag == 0 ? false : true;
          if (res.result.syncPostionFlag == 2) {
            res.result.extendPostionDefine = res.result.extendPostion;
          }
          if (!!res.result.departmentInfo && !!res.result.departmentInfo.length) {
            res.result.departmentInfo.forEach(ele => {
              ele.chainName = ele.chainName.replace(/\//gi, ' / ');
            });
          }
          that.partForm = res.result;
        })
        .catch(function(error) {

        });
    }
  },
  watch: {
    memberObj(newData, oldData) {
      const that = this;
      if (Object.keys(newData).length) {
        that.partForm = newData;
        that.partForm.departmentInfo = [];
        that.getData();
      } else {
        that.partForm.departmentInfo = that.defaultDepart || [];
      }
    }
  }
};
</script>
<style lang="less" scoped>
.span-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  background: rgba(217, 217, 217, 1);
  border-radius: 50%;
}

.m-l-30 {
  margin-left: 30px;
}
.depart-cell {
  &:hover {
    span {
      padding-bottom: 4px;
      border-bottom: 1px dashed #2f54eb;
    }
  }
}
</style>
