<template>
  <div class="page_addStaff">
    <div class="editStaffTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
      <span class="titleName">新增员工</span>
      <p @click="save(1)">保存</p>
    </div>
    <div class="editStaffTip">必填</div>
    <div class="staffBox">
      <van-field
        v-model="name"
        label="姓名"
        clearable
        placeholder="请输入姓名"
      />
      <van-field
        v-model="tel"
        type="tel"
        maxlength="11"
        label="手机号"
        placeholder="请输入手机号"
        clearable
      />
      <van-cell class="newCell">
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title">职称</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>
    </div>
    <div class="editStaffTip">选填</div>
    <div class="staffBox">
      <van-field v-model="title" label="职位" placeholder="请填写" />
    </div>
    <div class="addnewStaff" @click="save(2)">
      <van-icon class="addIcon" name="add" />
      <p>保存并继续新增员工</p>
    </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>
  </div>
</template>

<script>
import { AdminInitData, CreateAdminUser } from "@/api/admin_user";
import { checkMobile } from "@/utils/tools";
import { setRem } from "@/libs/functionRem";

export default {
  data() {
    return {
      name: "",
      tel: "",
      role_ids: [],
      title: "",
      value1: "",
      roles: [],
      show1: false,
      show2: false,
      type_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: [
        "医士",
        "医师",
        "住院医师",
        "主治医师",
        "副主任医师",
        "主任医师",
        "护士",
        "护师",
        "主管护师",
        "副主任护师",
        "主任护师",
        "运营专员",
        "运营主管"
      ]
    };
  },
  methods: {
    onUserTypeConfirm(value, index) {
      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.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;
    },
    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) {
              this.roles.push(response.data.data.roles[i]);
            }
          }
        } else {
          this.$toast({
            message: response.data.msg
          });
        }
      });
    },
    save(type) {
      if (this.name.trim().length == 0) {
        this.$toast({
          message: "姓名不能为空!"
        });
        return;
      }
      if (!checkMobile(this.tel)) {
        this.$toast({
          message: "请填写正确的手机号码!"
        });
        return;
      }
      if (this.role_ids.length <= 0) {
        this.$toast({
          message: "至少选择一种角色"
        });
        return;
      }

      let params = {
        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
      };
      CreateAdminUser(params).then(response => {
        if (response.data.state === 1) {
          this.$toast({ message: "新增成功" });
          if (type == 1) {
            this.$router.go(-1);
          } else {
            this.name = "";
            this.mobile = "";
            this.title = "";
          }
        } else {
          this.$toast({
            message: response.data.msg
          });
        }
      });
    }
  },
  created() {
    this.GetAdminUserInitData();
    this.titles_name = this.user_titles_name[0];
    this.type_name = this.user_type_name[0];
    this.role_ids.push(this.$route.query.id);
    setRem();
  }
};
</script>

<style lang="scss" scoped>
.page_addStaff {
  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;
    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;
  }
  .custom-title {
    width: 5.625rem;
  }
  .addnewStaff {
    height: 2.8125rem;
    line-height: 2.8125rem;
    background: #fff;
    width: 100%;
    margin-top: 0.875rem;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    .addIcon {
      color: #338afb;
      font-size: 1.5rem;
      margin-right: 0.625rem;
    }
    p {
      font-size: 1rem;
    }
  }
}
</style>
<style lang="scss">
.page_editStaff {
  .van-cell__value {
    display: flex;
    align-items: center;
  }
}
</style>
