<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="24">
          <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
            <div v-if="title != '详情'">
            <el-form-item label="所属部门" prop="deptId">
              <el-select v-model="editForm.deptId" placeholder="请选择" @change="seletChange" filterable>
                <el-option
                  v-for="item in deptsArr"
                  :key="item.id"
                  :label="item.fullName==null?'':item.fullName"
                  :value="item.id.toString()"
                ></el-option>
              </el-select>
            </el-form-item>
            </div>
            <div v-else>
              <el-form-item label="单位部门" prop="deptId">
                <el-input type="text" v-model="editForm.deptName"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="姓名" prop="personalName">
              <el-input type="text" v-model="editForm.personalName"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="editForm.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="专家" prop="expert">
              <el-input type="text" v-model="editForm.expert"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input type="text" v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="mobilePhone">
              <el-input type="text" v-model="editForm.mobilePhone"></el-input>
            </el-form-item>
            <el-form-item label="座机" prop="phone">
              <el-input type="text" v-model="editForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input type="textarea" v-model="editForm.remarks"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun('editForm')" v-if="title != '详情'">提交</el-button>
        <el-button @click="$emit('dialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss">
.w100 .el-dialog {
  width: 80%;
  .flcolum {
    > div {
      border-radius: 3px;
    }
  }
  .yatit {
    background: #4273bd;
    color: #ffffff;
    line-height: 2;
    height: 2em;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 2px;
  }
  .el-transfer-panel {
    width: calc((100% - 116px) / 2);
  }
  .el-transfer__buttons {
    width: 56px;
  }
  .el-transfer__button {
    margin-left: 0;
    display: block;
  }
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import METHOD from "@/utils/methods";
@Component({
  components: {}
})
export default class MembersMgEdit extends Vue {
  @Prop(Boolean) dialogVisible!: Boolean;
  @Prop(String) title!: String;
  @Prop(String) id!: String;
  @Prop(String) deptId!: String;

  @Provide() editForm: any = {
    id: "",
    deptId: "",
    sex: "",
    expert: ""
  };

  @Provide() rules: any = {
    personalName: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    mobilePhone: [{ required: true, trigger: "blur", message: "该项为必填项！" }]
  };

  @Provide() deptsArr: any = [];

  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this;
    console.log(that.editForm);
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        (that as any).$axios
          .post("/addressBook/addOrEditAddressBook", that.editForm)
          .then(() => {
            (that as any).$message({
              message: "操作成功！",
              type: "success"
            });
            (that as any).$emit("dialogFun");
            that.$emit("refreshTableData"); //刷新表格
          });
      } else {
        return false;
      }
    });
  }
  //detail
  getDetailData() {
    let that = this;
    (that as any).$axios
            .get(`/addressBook/getAddressBookById/${that.id}`)
            .then((res: any) => {
              that.editForm = res;
    });
  }
  //部门
  getDeptTreeData() {
    let that = this;
    (that as any).$axios
      .get(
        `/dept/getSysDeptList?page=1&size=10000`
      )
      .then((res: any) => {
        that.deptsArr = res.pageData;
      });
  }
  seletChange(id: any) {
    let that = this,
      arr;
    arr = that.deptsArr.filter((ele: any) => id == ele.id);
    that.editForm.deptName = arr[0].fullName;
  }
  created() {
      let that = this;
      that.editForm.id = that.id;
      that.getDeptTreeData();
      if(that.id){//编辑
        that.getDetailData();
      }
  }
  mounted() {}
}
</script>