<template>
  <div class="doctorBody">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>医共体名称：</span>
          <div class="input">
            <el-select
              size="mini"
              v-model="form.name"
              placeholder="请选择"
              @change="getMedSelect(form.name,0)"
            >
              <el-option
                :label="item.name"
                :value="item.pid"
                v-for="(item,index) in doctorBodyList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>医疗机构名称：</span>
          <div class="input">
            <el-select size="mini" v-model="form.medName" placeholder="请选择">
              <el-option
                :label="item.name"
                :value="item.pid"
                v-for="(item,index) in medSelectList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>科室名称：</span>
          <div class="input">
            <el-input size="mini" v-model="form.departName" placeholder="请输入" @keydown.enter.native="search()"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>查询：</span>
          <div class="input">
            <el-input size="mini" v-model="form.keyword" placeholder="支持姓名/工号" @keydown.enter.native="search()"></el-input>
          </div>
        </div>
        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
        <el-button type="primary" size="mini" @click="addData()" v-if="showAdd">新增</el-button>
        <el-button type="warning" size="mini" @click="openReset()" v-if="showReset">重置密码</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="today-data">
      <div class="today-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
          height="100%"
        >
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="username" label="姓名" align="center"></el-table-column>
          <el-table-column prop="userid" label="登录名" align="center"></el-table-column>

          <el-table-column prop="sex" label="性别" align="center"></el-table-column>

          <el-table-column prop="departmentsidSelsourceName" label="科室" align="center"></el-table-column>
          <el-table-column prop="jobnumber" label="工号" align="center"></el-table-column>
          <el-table-column prop="sititutionidSelsourceName" label="医疗机构" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center" width="80">
            <template slot-scope="scope">
              <div
                v-if="scope.row.stateSel==1"
                class="flex-center enable"
                @click="changeState(scope)"
              >停用</div>
              <div
                v-if="scope.row.stateSel==0"
                class="flex-center disable"
                @click="changeState(scope)"
              >启用</div>
            </template>
          </el-table-column>
          <el-table-column prop="role" label="角色" align="center">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.roles" :key="index">{{item.rolename}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createUserName" label="创建者" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <div class="flex-center operation">
                <!-- <div class="flex-center" style="margin-right:10px;" @click="setRight(scope)">用药权限</div> -->
                <div class="flex-center" @click="editData(scope)" v-if="showEdit">编辑</div>

                <!-- <div class="flex-center bg-yellow" @click="deleteMsg(scope)" v-if="showDel">删除</div> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="flex-vertical-center-r today-page">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>

    <popup
      distanceTop="5vh"
      :showDialog="showDialog"
      @cancle="showDialog=false"
      @confim="submit"
      title="用户管理"
      width="1104px"
    >
      <div class="flex-center" slot="body">
        <div class="form flex-vertical-between flex-wrap">
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>医共体名称：</div>
            </div>
            <div class="input">
              <el-select
                v-model="diaform.doctorBody"
                placeholder="请选择"
                @change="getMedSelect1(diaform.doctorBody,1)"
              >
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in doctorBodyList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>中医资质：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.zizhi" placeholder="请选择">
                <el-option label="有" value="0"></el-option>
                <el-option label="无" value="1"></el-option>
              </el-select>
            </div>
          </div>

          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>医疗机构：</div>
            </div>
            <div class="input">
              <el-select
                v-model="diaform.medName"
                placeholder="请选择"
                @change="getDepartSelect1(diaform.medName)"
              >
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in medSelectList1"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>资质照片：</div>
            </div>
            <div class="input flex-vertical-between">
              <div class="uploader" v-for="(item,index) in diaform.photos" :key="index">
                <uploadFile :imageUrl="item.imageUrl" @fileChange="chooseFile($event,index)" />
              </div>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>科室：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.departName" placeholder="请选择">
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in departList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>角色：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.role" multiple placeholder="请选择">
                <el-option
                  :label="item.rolename"
                  :value="item.pid"
                  v-for="(item,index) in roleList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>用户类型：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.userType" placeholder="请选择">
                <el-option label="超级管理员" value="0"></el-option>
                <el-option label="医共体管理员" value="1"></el-option>
                <el-option label="医疗机构管理员" value="2"></el-option>
                <el-option label="医生" value="3"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>工号：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.workNum"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>登录名：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.loginName" :disabled="diaform.pid!==''"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>姓名：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.name"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l" v-if="type=='add'">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>密码：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.pas" id="pas"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>性别：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.sex" placeholder="请选择">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l" v-if="type=='add'">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>确认密码：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.againPas" @blur="pasBlur" id="againPas"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>身份证号：</div>
            </div>
            <div class="input">
              <el-input
                placeholder="请输入"
                v-model="diaform.idCard"
                @blur="checkIdCard(diaform.idCard)"
                id="idCard"
              ></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>有效期：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.useTime"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>手机号码：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.phone"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>协定方共享权限：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.systemForX" multiple placeholder="请选择">
                <el-option label="个人" value="0"></el-option>
                <el-option label="二级科室" value="1"></el-option>
                <el-option label="科室" value="2"></el-option>
                <el-option label="医疗机构" value="3"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>邮箱：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.email"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>默认处方：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.defaultRecipe" multiple placeholder="请选择">
                <el-option label="中药处方" value="0"></el-option>
                <el-option label="中药制剂" value="1"></el-option>
                <el-option label="适宜技术处方" value="2"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>家庭住址：</div>
            </div>
            <div class="input">
              <el-cascader
                v-model="diaform.address"
                :options="options"
                :props="props"
                @expand-change="handleItemChange"
              ></el-cascader>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>详细地址：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform.address1"></el-input>
            </div>
          </div>
        </div>
      </div>
    </popup>
    <popup
      distanceTop="5vh"
      :showDialog="showPas"
      @confim="resetPas"
      @cancle="showPas=false"
      title="重置密码"
    >
      <div class="flex-center" slot="body">
        <div class="form">
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>密码：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform1.pas"></el-input>
            </div>
          </div>
          <div class="form-item flex-vertical-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>确认密码：</div>
            </div>
            <div class="input">
              <el-input placeholder="请输入" v-model="diaform1.pas1"></el-input>
            </div>
          </div>
        </div>
      </div>
    </popup>
    <popup
      distanceTop="5vh"
      :showDialog="showRight"
      @cancle="showRight=false"
      @confim="submitRight"
      title="用药权限配置"
      width="1104px"
    >
      <template slot="body">
        <medRight v-if="showRight"></medRight>
      </template>
    </popup>
  </div>
</template>
<script>
import {
  getDoctorBodySelect,
  getMedSelect,
  getDepartSelect,
  getRoleSelect,
  getUserList,
  addUserMsg,
  getUserDetail,
  editUserMsg,
  deleteUserMsg,
  resetPasInUser,
  getUserBR,
  checkIdCard
} from "@/api/system.js";
import { fileUpload } from "@/api/upload.js";
import { getProver, getArea } from "@/api/city.js";
import popup from "@/components/Propup.vue";
import uploadFile from "@/components/UploadFile.vue";
import medRight from "./components/medRight.vue";
let id = 1;
export default {
  components: {
    popup,
    uploadFile,
    medRight
  },
  data() {
    return {
      showAdd: true,
      showEdit: true,
      showDel: true,
      showReset: true,
      showState: true,

      showDialog: false,
      showPas: false,
      showRight: false,
      imageUrl: "",
      form: {
        keyword: "",
        name: "",
        departName: "",
        medName: ""
      },
      resetids: [],
      // 重置密码
      diaform1: {
        pas: "",
        pas1: ""
      },
      diaform: {
        pid: "",
        doctorBody: "", // 医共体名称
        medName: "", // 医疗结构名称
        departName: "", // 科室名称
        zizhi: "", // 中医资质
        photos: [
          {
            imageUrl: ""
          },
          {
            imageUrl: ""
          },
          {
            imageUrl: ""
          },
          {
            imageUrl: ""
          }
        ], //资质照片
        workNum: "", // 工号
        loginName: "", // 登录名
        name: "", // 姓名
        pas: "", // 密码
        againPas: "", // 确认密码
        sex: "", // 性别
        idCard: "", //
        useTime: "", // 有效期
        phone: "", // 手机号
        systemForX: [], // 协定方共享权限
        email: "", // 邮箱
        defaultRecipe: [], // 默认处方
        address: "", // 家庭住址
        address1: "", // 详细地址
        role: [], //角色
        userType: "" // 用户类型
      },
      tableData: [],
      props: {
        value: "code",
        label: "name"
      },
      options: [],
      doctorBodyList: [], // 医共体数据
      medSelectList: [], // 医疗机构 选择器 数据
      medSelectList1: [],
      departList: [], // 上级科室选择器
      provinceList: [],
      cityList: [],
      areaList: [],
      roleList: [], // 角色选择器列表

      page: 1,
      limit: 10,
      total: 0,
      type: "add",
      trueId: true // 身份证校验是否通过
    };
  },
  created() {
    this.getUserBR();
    this.getDoctorBodySelect();
    this.getMedSelect("", 0);

    this.getProver();
    this.getRoleSelect();

    this.getUserList();
  },
  methods: {
    // 设置用药权限
    setRight(scope) {
      this.showRight = true;
    },
    pasBlur() {
      if (this.diaform.againPas !== this.diaform.pas) {
        this.$message({
          type: "error",
          message: "两次密码输入不一致",
          showClose: true
        });

        document.getElementById("pas").style.borderColor = "red";
        document.getElementById("againPas").style.borderColor = "red";
      } else {
        document.getElementById("pas").style.borderColor = "#5386F6";
        document.getElementById("againPas").style.borderColor = "#5386F6";
      }
    },
    openReset() {
      if (this.resetids.length == 0) {
        this.$message({
          type: "error",
          message: "请先选择一个用户",
          showClose: true
        });
        return;
      }
      this.showPas = true;
      this.diaform1.pas = "";
      this.diaform1.pas1 = "";
    },
    // 重置密码保存
    resetPas() {
      if (this.diaform1.pas == "") {
        this.$message({
          type: "error",
          message: "请输入密码",
          showClose: true
        });
        return;
      }
      if (this.diaform1.pas1 == "") {
        this.$message({
          type: "error",
          message: "请确认密码",
          showClose: true
        });
        return;
      }
      if (this.diaform1.pas !== this.diaform1.pas1) {
        this.$message({
          type: "error",
          message: "两次密码输入不一致",
          showClose: true
        });
        return;
      }

      this.resetPasInUser();
    },
    handleSelectionChange(e) {
      // console.log(e, '呃呃呃');
      if (e.length == 0) this.resetids = [];

      e.forEach(item => {
        this.resetids.push(item.pid);
      });

      return;
    },
    // 删除数据
    deleteMsg(scope) {
      let id = scope.row.pid;
      this.$confirm("确定要删除当前数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteUserMsg(id);
        })
        .catch(() => {});
    },
    // 修改状态
    changeState(scope) {
      if (!this.showState) return;
      let state = scope.row.stateSel;
      let pid = scope.row.pid;

      this.$confirm("确定要修改当前状态吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.getUserDetail(scope.row.userid, scope.row);
          setTimeout(() => {
            this.editUserMsg(pid, state == 0 ? "1" : "0");
          }, 500);
        })
        .catch(() => {});
    },
    // 编辑数据
    editData(scope) {
      this.type = "edit";
      this.getUserDetail(scope.row.userid, scope.row);
      this.diaform.pid = scope.row.pid;
      this.showDialog = true;
    },
    // 添加数据
    addData() {
      this.type = "add";
      this.diaform = {
        pid: "",
        doctorBody: "", // 医共体名称
        medName: "", // 医疗结构名称
        departName: "", // 科室名称
        zizhi: "", // 中医资质
        photos: [
          {
            imageUrl: "",
            uploadUrl: ""
          },
          {
            imageUrl: "",
            uploadUrl: ""
          },
          {
            imageUrl: "",
            uploadUrl: ""
          },
          {
            imageUrl: "",
            uploadUrl: ""
          }
        ], //资质照片
        workNum: "", // 工号
        loginName: "", // 登录名
        name: "", // 姓名
        pas: "", // 密码
        againPas: "", // 确认密码
        sex: "", // 性别
        idCard: "", //
        useTime: "", // 有效期
        phone: "", // 手机号
        systemForX: [], // 协定方共享权限
        email: "", // 邮箱
        defaultRecipe: [], // 默认处方
        address: "", // 家庭住址
        role: [], //角色
        userType: ""
      };
      this.showDialog = true;
    },
    // 提交数据
    submit() {
      if (this.diaform.doctorBody == "") {
        this.$message({
          type: "error",
          message: "请选择医共体",
          showClose: true
        });
        return;
      }
      if (this.diaform.medName == "") {
        this.$message({
          type: "error",
          message: "请选择医疗机构",
          showClose: true
        });
        return;
      }

      if (this.diaform.role == "" || this.diaform.role.length == 0) {
        this.$message({
          type: "error",
          message: "请选择角色",
          showClose: true
        });
        return;
      }
      if (this.diaform.userType == "") {
        this.$message({
          type: "error",
          message: "请选择用户类型",
          showClose: true
        });
        return;
      }
      if (this.diaform.loginName == "") {
        this.$message({
          type: "error",
          message: "请输入登录名",
          showClose: true
        });
        return;
      }
      if (this.diaform.name == "") {
        this.$message({
          type: "error",
          message: "请输入姓名",
          showClose: true
        });
        return;
      }
      if (this.diaform.pas == "" && this.type == "add") {
        this.$message({
          type: "error",
          message: "请输入密码",
          showClose: true
        });
        return;
      }
      if (this.diaform.againPas == "" && this.type == "add") {
        this.$message({
          type: "error",
          message: "请确认密码",
          showClose: true
        });
        return;
      }
      if (this.diaform.againPas !== this.diaform.pas && this.type == "add") {
        this.$message({
          type: "error",
          message: "两次密码输入不一致",
          showClose: true
        });
        return;
      }
      if (this.diaform.sex == "") {
        this.$message({
          type: "error",
          message: "请选择性别",
          showClose: true
        });
        return;
      }
      if (this.diaform.idCard == "") {
        this.$message({
          type: "error",
          message: "请输入身份证号",
          showClose: true
        });
        return;
      }
      if (!this.trueId) {
        this.$message({
          type: "error",
          message: "身份证号输入不合法",
          showClose: true
        });
        return;
      }
      if (this.diaform.phone == "") {
        this.$message({
          type: "error",
          message: "请输入手机号",
          showClose: true
        });
        return;
      }

      if (
        this.diaform.systemForX == "" ||
        this.diaform.systemForX.length == 0
      ) {
        this.$message({
          type: "error",
          message: "请选择协定方权限",
          showClose: true
        });
        return;
      }
      // if (this.diaform.email == '') {
      //     this.$message({
      //         type: 'error',
      //         message: '请输入邮箱',
      //         showClose: true,
      //     })
      //     return
      // }
      if (
        this.diaform.defaultRecipe == "" ||
        this.diaform.defaultRecipe.length == 0
      ) {
        this.$message({
          type: "error",
          message: "请选择默认处方",
          showClose: true
        });
        return;
      }

      if (this.type == "add") {
        this.addUserMsg();
      } else if (this.type == "edit") {
        this.editUserMsg(this.diaform.pid);
      }
    },
    submitRight() {
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
        this.showRight = false;
      }, 2000);
    },
    search() {
      this.page = 1;
      this.getUserList();
    },
    clearFilter() {
      this.form = {
        name: "",
        keyword: "",
        departName: "",
        medName: ""
      };
      this.search();
    },
    sizeC(e) {
      this.page = e;
      this.getUserList();
    },
    // 选择文件
    chooseFile(e, index) {
      // console.log(e);
      // console.log(index);
      let files = e.target.files[0];
      if (files.type.indexOf("image") == -1) {
        this.$message({
          type: "error",
          message: "文件格式选择有误",
          showClose: true
        });
        return;
      }

      let formData = new FormData();
      formData.append("file", files);
      this.fileUpload(formData, index);
    },
    getDepartSelect1(id) {
      this.diaform.departName = "";
      this.getDepartSelect(id);
    },
    getMedSelect1(id) {
      this.diaform.medName = "";
      this.diaform.departName = "";
      this.getMedSelect(id, 1);
    },
    // 获取医共体选择器数据
    async getDoctorBodySelect() {
      let res = await getDoctorBodySelect();
      if (res.ResultCode == 0) {
        this.doctorBodyList = res.Data;
      }
    },
    // 获取医疗机构选择器
    async getMedSelect(id, type) {
      let params = {
        organizationId: id
      };
      let res = await getMedSelect(params);
      if (res.ResultCode == 0) {
        if (type == 0) {
          this.medSelectList = res.Data;
        } else {
          this.medSelectList1 = res.Data;
          // this.diaform.medName = ''
          this.doctorBodyList.forEach(item => {
            if (item.pid == id) {
              this.diaform.code = item.code;
            }
          });
        }
      }
    },
    // 获取医疗机构下的科室
    async getDepartSelect(id) {
      let res = await getDepartSelect({
        institutionId: id
      });
      if (res.ResultCode == 0) {
        // this.diaform.departName = ''
        this.departList = res.Data;
      }
    },
    // 获取省数据
    async getProver() {
      let res = await getProver();
      if (res.ResultCode == 0) {
        this.provinceList = res.Data;
        this.provinceList.filter(item => {
          return (item.children = []);
        });
        this.options = this.provinceList;
      }
    },
    // 选择省市区 地址
    handleItemChange(value) {
      console.log(value, "value");
      if (value.length == 1) {
        this.getArea(value[0], 1);
      } else {
        this.getArea(value[1], 2);
      }
    },
    // 获取市数据
    async getArea(code, type) {
      let res = await getArea(code);
      if (res.ResultCode == 0) {
        if (type == 1) {
          this.cityList = res.Data;
          this.cityList.filter(item => {
            return (item.children = []);
          });
          this.options.forEach((item, index) => {
            if (item.code == code) {
              item.children = this.cityList;
              this.$set(this.options[index], "children", this.cityList);
              this.$set(this.options, index, item);
            }
          });
        } else {
          this.areaList = res.Data;

          this.options.forEach((item, index) => {
            item.children.forEach((item1, index1) => {
              // city
              if (item1.code == code) {
                item1.children = this.areaList;
                this.$set(
                  this.options[index].children[index1],
                  "children",
                  this.areaList
                );
                this.$set(this.options[index], index1, item1);
                this.$set(this.options, index, item);
              }
            });
          });
        }
      }
    },
    // 上传图片
    async fileUpload(data, index) {
      let res = await fileUpload(data);
      if (res.ResultCode == 0) {
        this.$message({
          type: "success",
          message: "上传成功",
          showClose: true
        });

        this.diaform.photos[index].imageUrl =
          process.env.VUE_APP_UPLOAD + "file/" + res.ResultInfo;
        this.diaform.photos[index].uploadUrl = res.ResultInfo;
      }
    },
    // 获取角色选择器
    async getRoleSelect() {
      let res = await getRoleSelect();
      if (res.ResultCode == 0) {
        this.roleList = res.Data;
      }
    },
    // 获取用户列表
    async getUserList() {
      let params = {
        page: this.page,
        limit: this.limit,
        key: this.form.keyword,
        departmentsidSelsourceName: this.form.departName,
        organizationid: this.form.name,
        sititutionid: this.form.medName
      };
      let res = await getUserList(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;
        this.tableData.filter((item, index) => {
          if (this.page > 1) {
            if (index == 9) {
              return (item.id = this.page + String(0));
            }
            return (item.id = this.page - 1 + String(index + 1));
          } else {
            return (item.id = index + 1);
          }
        });

        this.showEdit = res.Data.ButtonRight.indexOf("edit") != -1;
        this.showState = res.Data.ButtonRight.indexOf("setState") != -1;
        this.showDel = res.Data.ButtonRight.indexOf("del") != -1;
      }
    },

    // 添加用户信息
    async addUserMsg() {
      let zizhiP = [];
      this.diaform.photos.forEach(item => {
        if (item.uploadUrl) {
          zizhiP.push(item.uploadUrl);
        }
      });

      let params = {
        cardid: this.diaform.idCard, // 身份证
        ableprescription: this.diaform.defaultRecipe.join(","), // 默认处方
        email: this.diaform.email, // 邮箱
        departmentsId: this.diaform.departName, // 科室
        jobnumber: this.diaform.workNum, // 工号
        mobile: this.diaform.phone, // 手机号
        organizationid: this.diaform.doctorBody, // 医共体
        prescriptionSharePerm: this.diaform.systemForX.join(","), // 协定方权限
        qualification: this.diaform.zizhi, // 资质
        qualificationImageupload: zizhiP.join(","), // 资质照片
        roleIds: this.diaform.role.join(","), // 角色
        sex: this.diaform.sex == "0" ? "男" : "女", // 性别
        sititutionid: this.diaform.medName, // 医疗机构
        stateSel: "0", // 状态
        time: this.diaform.useTime, // 有效期
        userid: this.diaform.loginName, // 登录名
        username: this.diaform.name, // 用户名
        province:
          this.diaform.address.length == 3 ? this.diaform.address[0] : "",
        city: this.diaform.address.length == 3 ? this.diaform.address[1] : "",
        district:
          this.diaform.address.length == 3 ? this.diaform.address[2] : "",
        adress: this.diaform.address1,
        password: this.diaform.pas,
        usertypeSel: this.diaform.userType
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await addUserMsg(params).catch(err => {
        loading.close();
      });

      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          message: "提交成功",
          showClose: true
        });

        this.page = 1;
        this.showDialog = false;
        this.getUserList();
      }
    },
    // 获取用户详细信息
    async getUserDetail(id, row) {
      if (!row) row = {}
      let res = await getUserDetail(id, row.pid);
      if (res.ResultCode == 0) {
        this.diaform = {
          pid: res.Data.pid,
          doctorBody: res.Data.organizationid, // 医共体名称
          medName: res.Data.sititutionid, // 医疗结构名称
          departName: res.Data.departmentsId, // 科室名称
          zizhi: res.Data.qualification, // 中医资质
          photos: [
            {
              imageUrl: ""
            },
            {
              imageUrl: ""
            },
            {
              imageUrl: ""
            },
            {
              imageUrl: ""
            }
          ], //资质照片
          workNum: res.Data.jobnumber, // 工号
          loginName: res.Data.userid, // 登录名
          name: res.Data.username, // 姓名
          pas: res.Data.password, // 密码
          againPas: res.Data.password, // 确认密码
          sex: res.Data.sex, // 性别
          idCard: res.Data.cardid, //
          useTime: res.Data.time, // 有效期
          phone: res.Data.mobile, // 手机号
          systemForX: res.Data.prescriptionSharePerm.split(","), // 协定方共享权限
          email: res.Data.email, // 邮箱
          defaultRecipe: res.Data.ableprescription.split(","), // 默认处方
          address: [res.Data.province, res.Data.city, res.Data.district], // 家庭住址
          address1: res.Data.adress, // 详细地址
          role: res.Data.roleIds.split(","), //角色
          userType: res.Data.usertypeSel
        };

        this.getArea(res.Data.province, 1);
        this.getArea(res.Data.city, 2);

        this.getMedSelect(res.Data.organizationid, 1);
        this.getDepartSelect(res.Data.sititutionid);

        res.Data.qualificationImageupload = res.Data.qualificationImageupload.split(
          ","
        );

        res.Data.qualificationImageupload.forEach((item, index) => {
          let obj = {
            imageUrl: process.env.VUE_APP_UPLOAD + "file/" + item,
            uploadUrl: item
          };
          this.diaform.photos[index] = obj;
        });
        // this.diaform.photos = zizhiP
      }
    },
    // 修改用户信息
    async editUserMsg(id, stateSel = "") {
      let zizhiP = [];
      this.diaform.photos.forEach(item => {
        if (item.uploadUrl) {
          zizhiP.push(item.uploadUrl);
        }
      });
      let params = {
        cardid: this.diaform.idCard, // 身份证
        ableprescription: this.diaform.defaultRecipe.join(","), // 默认处方
        email: this.diaform.email, // 邮箱
        departmentsId: this.diaform.departName, // 科室
        jobnumber: this.diaform.workNum, // 工号
        mobile: this.diaform.phone, // 手机号
        organizationid: this.diaform.doctorBody, // 医共体
        prescriptionSharePerm: this.diaform.systemForX.join(","), // 协定方权限
        qualification: this.diaform.zizhi, // 资质
        qualificationImageupload: zizhiP.join(","), // 资质照片
        roleIds: this.diaform.role.join(","), // 角色
        sex: this.diaform.sex == "0" ? "男" : "女", // 性别
        sititutionid: this.diaform.medName, // 医疗机构
        stateSel: stateSel ? stateSel : "0", // 状态
        time: this.diaform.useTime, // 有效期
        userid: this.diaform.loginName, // 登录名
        username: this.diaform.name, // 用户名
        province:
          this.diaform.address.length == 3 ? this.diaform.address[0] : "",
        city: this.diaform.address.length == 3 ? this.diaform.address[1] : "",
        district:
          this.diaform.address.length == 3 ? this.diaform.address[2] : "",
        adress: this.diaform.address1,
        // password: this.diaform.pas,
        pid: id,
        usertypeSel: this.diaform.userType
      };
      const loading = this.$loading({
        lock: true,
        text: "正在修改",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await editUserMsg(params).catch(err => {
        loading.close();
      });

      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          message: "修改成功",
          showClose: true
        });

        // this.page = 1
        this.showDialog = false;
        this.getUserList();
      }
    },

    // 删除 用户信息\
    async deleteUserMsg(id) {
      let arr = [];

      arr.push(id);

      let params = {
        ids: arr.length == 1 ? arr[0] + "," : arr.join(",")
      };
      const loading = this.$loading({
        lock: true,
        text: "正在删除...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await deleteUserMsg(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();

        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success"
        });

        this.getUserList();
        this.showDialog = false;
      }
    },
    // 重置密码
    async resetPasInUser() {
      let params = {
        newPassword: this.diaform1.pas1,
        password: this.diaform1.pas,
        userPid: this.resetids.join(",")
      };
      const loading = this.$loading({
        lock: true,
        text: "正在重置密码",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      let res = await resetPasInUser(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          message: "重置成功",
          showClose: true
        });

        this.showPas = false;
        this.$refs.multipleTable.clearSelection(); // 取消选择
      }
    },
    // 获取用户按钮权限
    async getUserBR() {
      let res = await getUserBR();
      if (res.ResultCode == 0) {
        this.showAdd = res.Data.indexOf("add") != -1;
        this.showReset = res.Data.indexOf("UpdatePassWord") != -1;
      }
    },
    // 焦点校验身份证
    async checkIdCard(data) {
      if (!data) return;
      let res = await checkIdCard(data).catch(err => {
        this.trueId = false;
        document.getElementById("idCard").style.borderColor = "red";
      });

      if (res.ResultCode == 0) {
        this.trueId = true;
        document.getElementById("idCard").style.borderColor = "#5386F6";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.doctorBody {
  .form {
    padding: 0 50px;
  }

  .form-item {
    margin-bottom: 20px;

    margin-right: 50px;

    span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ff3a3a;
      display: inline-block;
      width: 8px;
    }

    .name {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333;
      width: 144px;
      text-align: right;
    }

    .input {
      width: 260px;
    }

    .input1 {
      width: 84px;
    }

    .uploader {
    }
  }
}

.today-data {
  margin-top: 5px;
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;
  height: 71vh;

  .add {
    width: 74px;
    height: 36px;
    background: #5386f6;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .today-table {
    height: 89%;

    .enable,
    .disable {
      width: 60px;
      height: 24px;
      background: #ff6245;
      border-radius: 2px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin: 0 auto;
    }

    .disable {
      background: #68a8ff !important;
    }

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .bg-yellow {
        background: #ffae45;
        margin-left: 15px;
      }

      .bg-default {
        width: 80px;
        margin-left: 15px;
      }
    }
  }
}

.table::v-deep .el-table .cell {
  text-align: center;
}

.input ::v-deep .el-select {
  width: 100%;
}

.input1::v-deep .el-select .el-input__inner {
  padding: 0 20px 0 10px;
}

.avatar-uploader::v-deep .el-upload {
  width: 58px;
  height: 58px;
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.icon {
  width: 24px;
}

.text {
  font-size: 12px !important;
  font-family: PingFang SC;
  font-weight: 400;
  color: #b1b1b1 !important;
  margin-top: 5px;
  width: 56px !important;
}

.avatar-uploader::v-deep .el-upload:hover {
  border-color: #5386f6;
}

.input ::v-deep .el-cascader {
  width: 100%;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .today-data {
    height: 82vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .today-data {
    height: 81vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 20px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .today-data {
    height: 73vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 10px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 14px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .today-data {
    height: 73vh;
    padding: 5px;
    // background: red;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>