<template>
  <div class="page_editStaff">
    <div class="editStaffTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
      <span class="titleName">编辑员工</span>
      <p @click="save()">保存</p>
    </div>
    <div class="editStaffTip">必填</div>
    <div class="staffBox">
      <van-field v-model="name" label="姓名" clearable placeholder="请输入姓名"/>
      <van-field v-model="tel" type="tel" label="手机号" clearable placeholder="请输入手机号" readonly/>
      <van-cell class="newCell">
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title">角色</span>
          <div style="width:76%;margin-left:3.3rem">

            <van-checkbox-group v-model="role_ids">
              <van-checkbox style="width: 30%;" :name="item.id" shape="square" v-for="(item, index) in roles"
                            :key="index"
              >{{item.name}}
              </van-checkbox
              >
            </van-checkbox-group>

          </div>
        </template>
      </van-cell>


      <van-cell class="newCell">
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title" style="width:90px">职称</span>
          <div style="display:flex;">
            <div style="margin-right:2rem;display: flex;align-items: center;" @click="show1 = true">
              <span>{{type_name}}</span>
              <van-icon name="arrow-down"/>
            </div>
            <div style="margin-right:2rem;display: flex;align-items: center;" @click="show2 = true">
              <span>{{titles_name}}</span>
              <van-icon name="arrow-down"/>
            </div>
          </div>
        </template>
      </van-cell>


      <van-cell class="newCell">
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title" style="width:90px">科室</span>
          <div style="display:flex;">
            <div style="margin-right:2rem;display: flex;align-items: center;" @click="show3 = true">
              <span>{{department_name}}</span>
              <van-icon name="arrow-down"/>
            </div>
          </div>
        </template>
      </van-cell>

    </div>
    <div class="editStaffTip">选填</div>
    <div class="staffBox">
      <van-field v-model="title" label="职位" placeholder="请填写"/>
    </div>

    <div v-if="adminInfo.status == 1  &&  isShow()" class="stop" @click="onClick(2)">禁用该员工账号</div>
    <div v-if="adminInfo.status != 1  &&  isShow()" class="stop1" @click="onClick(1)">恢复该员工账号</div>

    <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }">
      <van-picker show-toolbar :columns="user_type_name" @cancel="onCancel" @confirm="onUserTypeConfirm"/>
    </van-popup>
    <van-popup v-model="show2" position="bottom" :style="{ height: '40%' }">
      <van-picker show-toolbar :columns="user_titles_name" @cancel="onCancel" @confirm="onUserTitleConfirm"/>
    </van-popup>

    <van-popup v-model="show3" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="user_department_name"
        @cancel="onCancel"
        @confirm="onUserDepartmentConfirm"
      />
    </van-popup>
  </div>
</template>


<script>
  import {Dialog} from "vant";
  import {AdminInitData, EditAdmin, GetAdminUserInfo, StopAdminUser,GetDepartment} from "@/api/admin_user";
  import {checkMobile} from "@/utils/tools";

  import {setRem} from "@/libs/functionRem";

  export default {
    data() {
      return {
        result: [],
        role_ids: [],
        roles: [],
        name: "",
        tel: "",
        title: "",
        adminInfo: {
          admin: {},

        },
        user_id: 0,
        is_sub_super_admin: false,
        show1: false,
        show2: false,
        show3: false,
        type_name: "",
        department_name: "",
        titles_name: "",
        user_type: 2,
        user_title: 1,
        user_types: [
          {index: 2, name: '医生'},
          {index: 3, name: '护士'}
        ],
        user_titles: [
          {index: 1, name: '医士'},
          {index: 2, name: '医师'},
          {index: 3, name: '住院医师'},
          {index: 4, name: '主治医师'},
          {index: 5, name: '副主任医师'},
          {index: 6, name: '主任医师'},
          {index: 7, name: '护士'},
          {index: 8, name: '护师'},
          {index: 9, name: '主管护师'},
          {index: 10, name: '副主任护师'},
          {index: 11, name: '主任护师'},
          {index: 12, name: '运营专员'},
          {index: 13, name: '运营主管'}
        ],

        user_type_name: [
          '医生',
          '护士'
        ],

        user_titles_name: [
          '医士',
          '医师',
          '住院医师',
          '主治医师',
          '副主任医师',
          '主任医师',
          '护士',
          '护师',
          '主管护师',
          '副主任护师',
          '主任护师',
          '运营专员',
          '运营主管'
        ], user_department_name: [],
        departments:[],
        department_id:"",
      };
    },
    methods: {
      onUserDepartmentConfirm(value, index) {
        this.show3 = false;
        for (let i = 0; i < this.user_department_name.length; i++) {
          if (this.user_department_name[i] == value) {
            this.department_name = this.user_department_name[i]
          }
        }
        for (let i = 0; i < this.departments.length; i++){
          if(this.department_name == this.departments[i].name){
            this.department_id = this.departments[i].id
          }
        }
      },
      isShow() {
        if (this.is_sub_super_admin) {
          if (!this.adminInfo.is_sub_super_admin) {
            return true
          } else {
            return false


          }
        } else {
          if (this.adminInfo.admin.id == this.$store.getters.user.admin.id && this.$store.getters.user.admin.is_super_admin) {
            return false
          } else {
            return true
          }
        }

      },
      onUserTypeConfirm(value, index) {
        this.type_name = value
        this.show1 = false

        for (let i = 0; i < this.user_types.length; i++) {
          if (this.user_types[i].name == value) {
            this.user_type = this.user_types[i].index
            this.type_name = this.user_types[i].name
          }
        }
      },
      onUserTitleConfirm(value, index) {
        this.titles_name = value
        this.show2 = false

        for (let i = 0; i < this.user_titles.length; i++) {
          if (this.user_titles[i].name == value) {
            this.user_title = this.user_titles[i].index
            this.titles_name = this.user_titles[i].name

          }
        }
      },
      onCancel() {
        this.show1 = false
        this.show2 = false
        this.show3 = false
      },
      save() {

        if (this.name.trim().length == 0) {
          this.$toast({
            message: "姓名不能为空!"
          });
          return;
        }
        if (this.type_name.length == 0) {
          this.$toast({
            message: "职称不能为空!"
          });
          return;
        }

        if (this.department_name.length == 0) {
          this.$toast({
            message: "科室不能为空!"
          });
          return;
        }

        if (this.role_ids.length <= 0) {
          this.$toast({
            message: "至少选择一种角色"
          });
          return;
        }
        let params = {
          uid: this.$route.query.id,
          name: this.name,
          mobile: this.tel,
          role_ids: this.role_ids.join(","),
          title: this.title,
          user_type: this.user_type,
          user_title: this.user_title,
          department_name: this.department_name,
          department_id: this.department_id

        }
        EditAdmin(params).then(response => {
          if (response.data.state === 1) {
            this.$toast({message: "修改成功"});
            this.$router.go(-1)
          } else {
            this.$toast({
              message: response.data.msg
            });
          }
        });
      },
      GetAdminUserInfo(id) {
        this.user_id = id
        let params = {
          uid: id,
        }
        GetAdminUserInfo(params).then(response => {
          if (response.data.state === 1) {
            this.adminInfo = response.data.data.user_info
            this.is_sub_super_admin = response.data.data.isSubSuperAdmin

            this.name = this.adminInfo.user_name
            this.tel = this.adminInfo.admin.mobile
            this.title = this.adminInfo.user_title_name
            var roles = this.adminInfo.role_ids.split(",")
            for (let i = 0; i < roles.length; i++) {
              this.role_ids.push(parseInt(roles[i]))
            }

            for (let i = 0; i < this.user_types.length; i++) {
              if (this.user_types[i].index == this.adminInfo.user_type) {
                this.user_type = this.adminInfo.user_type
                this.type_name = this.user_types[i].name

              }

            }
            for (let i = 0; i < this.user_titles.length; i++) {
              if (this.user_titles[i].index == this.adminInfo.user_title) {
                this.user_title = this.adminInfo.user_title
                this.titles_name = this.user_titles[i].name
              }
            }

            for (let i = 0; i < this.user_department_name.length; i++) {
              if (this.user_department_name[i] == this.adminInfo.department) {
                this.department_name = this.user_department_name[i]
              }
            }

            for (let i = 0; i < this.departments.length; i++){
              if(this.department_name == this.departments[i].name){
                this.department_id = this.departments[i].id
              }
            }

            //如果当前用户是超级管理员，而且是在编辑自己的信息的时候，将子管理员角色去除
            for (let i = 0; i < this.roles.length; i++) {
              if (this.adminInfo.admin.id == this.$store.getters.user.admin.id && this.$store.getters.user.admin.is_super_admin && this.roles[i].is_system == 1 && this.roles[i].name == "子管理员") {
                this.roles.splice(i, 1)
                i = i - 1;
              }
            }

          } else {
            this.$toast({
              message: response.data.msg
            });
          }
        });

      }, StopAdminUser(status) {
        let params = {}
        params['uid'] = this.$route.query.id
        if (status == 1) {
          params['enable'] = true
        } else if (status == 2) {
          params['enable'] = false
        }

        StopAdminUser(params).then(response => {
          if (response.data.state === 1) {
            this.$router.go(-1)
          } else {
            this.$toast({
              message: response.data.msg
            });
          }
        });
      }, GetDepartment() {
        this.departments = []
        this.user_department_name = []
        GetDepartment().then(response => {
          if (response.data.state === 1) {
            for (let i = 0; i < response.data.data.departments.length; i++) {
              this.departments.push(response.data.data.departments[i])
              this.user_department_name.push(response.data.data.departments[i].name)

            }
          } else {
            this.$toast({
              message: response.data.msg
            });
          }
        });
      },

      GetAdminUserInitData() {
        AdminInitData().then(response => {
          if (response.data.state === 1) {
            for (let i = 0; i < response.data.data.roles.length; i++) {
              if (!response.data.data.roles[i].is_super_admin) {
                if (this.$store.getters.user.admin.is_super_admin) {
                  this.roles.push(response.data.data.roles[i]);
                } else {
                  if (response.data.data.roles[i].is_system != 1 && response.data.data.roles[i].name != "子管理员") {
                    this.roles.push(response.data.data.roles[i]);
                  }

                }
              }
            }

            this.GetAdminUserInfo(this.$route.query.id)

          } else {
            this.$toast({
              message: response.data.msg
            });
          }
        });

      },
      onClick(id) {
        if (id == 2) {
          Dialog.confirm({
            message: "是否确定要禁用该员工账号？"
          }).then(() => {
            this.StopAdminUser(id)

          });
        } else if (id == 1) {
          Dialog.confirm({
            message: "是否确定要恢复该员工账号？"
          }).then(() => {
            this.StopAdminUser(id)
          });
        }
      }
    }, created() {
      this.GetDepartment();
      this.GetAdminUserInitData()
      setRem()
    }
  };
</script>

<style lang="scss" scoped>
  .page_editStaff {
    height: 100%;
    overflow: hidden;
    background: #fafafa;

  .editStaffTitle {
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.125rem;
    background: #fff;

  p {
    font-size: 1rem;
  }

  }

  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 1.25rem;
  }

  .titleName {
    font-size: 1.125rem !important;
    font-weight: 600;
  }

  .editStaffTip {
    height: 1.875rem;
    line-height: 1.875rem;
    font-size: 0.75rem;
    padding-left: 0.875rem;
    color: #989898;
  }

  .staffBox {

  .van-cell {
    font-size: 1rem;
  }

  .newCell {
    padding-right: 0;
  }

  }
  .van-cell__title {
    display: flex;
  }

  .van-checkbox-group {
    display: flex;
    flex-wrap: wrap;
  }

  .van-checkbox {
    margin-bottom: 0.625rem;
  }

  .stop {
    height: 2.8125rem;
    line-height: 2.8125rem;
    text-align: center;
    background: #fff;
    width: 100%;
    margin-top: 0.875rem;
    font-size: 1rem;
  }

  .stop1 {
    height: 2.8125rem;
    line-height: 2.8125rem;
    text-align: center;
    background: #fff;
    width: 100%;
    margin-top: 0.875rem;
    color: #5b98ff;
    font-size: 1rem;
  }

  }
</style>
<style lang="scss">
  .page_editStaff {

  .van-cell__value {
    display: flex;
    align-items: center;
  }

  }
</style>
