<template>
  <Popup ref="popup" title="新增员工" :isCrud="false" @closed="dialogClosed" width="900px">
    <el-card>
      <el-form ref="form" inline>
        <el-form-item label="" prop="keyword" style="margin: 0">
          <el-input
            style="width: 300px"
            v-model="keyword"
            placeholder="请输入员工姓名"
            @keyup.enter.native="handleQuery"
          ></el-input>
        </el-form-item>
        <el-form-item class="ml10" style="margin: 0; margin-left: 10px">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="table" v-loading="loading">
      <el-table :data="tableList" border class="mt20" row-key="uniqueid">
        <el-table-column
          align="center"
          width="50"
          type="index"
          :index="(index) => (pageNum - 1) * pageSize + index + 1"
          label="序号"
        />

        <el-table-column align="center" property="userName" label="姓名" />
        <el-table-column align="center" property="userIdcardNum" label="证件号" />
        <el-table-column align="center" property="userPhone" label="手机号" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div v-if="addedIds.includes(scope.row.userId)">
              <el-button size="mini" type="text" disabled>
                已添加
              </el-button>
            </div>
            <el-button
              v-else-if="getCheckedStatus(scope.row)"
              @click="handleCheckedChange(scope.row)"
              style="color: #e6a23c"
              size="mini"
              type="text"
            >
              取消添加
            </el-button>
            <el-button v-else @click="handleCheckedChange(scope.row)" size="mini" type="text">
              添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </div>
    <template slot="footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleNextStep">下一步</el-button>
    </template>
    <CrudPopup ref="crud" />
  </Popup>
</template>

<script>
import Popup from "@/components/Popup";
import CrudPopup from "../CrudPopup";
import { getTrustDoctorInfos, batchAddStaff, getAllDoctorIdForClient } from "@/api/admin";
export default {
  components: {
    Popup,
    CrudPopup,
  },
  data() {
    return {
      loading: false,
      pageNum: 1,
      pageSize: 10,
      keyword: "",
      tableList: [],
      selectIds: [],
      addedIds: [], // 已添加的医生id
      total: 0,
    };
  },
  methods: {
    getList() {
      this.loading = true;
      getTrustDoctorInfos({
        name: this.keyword,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          const { data: { list, page } } = res
          this.tableList = list || [];
          this.total = page?.total || 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.pageNum = 1;
      this.keyword = "";
      this.handleQuery();
    },
    loadAddedIds() {
      this.loading = true;
      getAllDoctorIdForClient()
        .then((res) => {
          this.addedIds = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    open() {
      this.selectIds = [];
      this.pageNum = 1;
      this.pageSize = 10;
      this.keyword = "";
      this.getList();
      this.loadAddedIds();
      this.$refs.popup.open();
      this.promise = {
        resolve: null,
        reject: null,
      };
      return new Promise((resolve, reject) => {
        this.promise.resolve = resolve;
        this.promise.reject = reject;
      });
    },
    // 取消
    handleCancel() {
      this.$refs.popup.close();
    },
    // 下一步
    handleNextStep() {
      if (this.selectIds.length === 0) {
        this.$message.error("至少选择一个员工");
        return;
      }
      this.$refs.crud
        .open({
          api: (form) => {
            return batchAddStaff({
              ...form,
              userIds: this.selectIds,
            });
          },
        })
        .then(() => {
          this.$message.success("新增成功");
          this.promise.resolve();
          this.$refs.popup.close();
        });
    },
    dialogClosed() {
      // this.promise.reject();
    },
    getCheckedStatus(row) {
      return this.selectIds.some((id) => id === row.userId);
    },
    handleCheckedChange(row) {
      const checked = this.getCheckedStatus(row);
      if (!checked) {
        this.selectIds.push(row.userId);
      } else {
        const index = this.selectIds.findIndex((id) => id === row.userId);
        if (index > -1) {
          this.selectIds.splice(index, 1);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-menus {
  border: 1px solid #dfe4ed;
  height: 200px;
  border-radius: 4px;
  overflow-y: auto;
}
</style>
