<template>
  <div>
    <div class="input-content">
      <el-input :value="value.userName" placeholder="请选择">
        <template #suffix>
          <div style="padding-right: 20px">
            <el-button type="text" @click="onOpen">选择</el-button>
          </div>
        </template>
      </el-input>
      <div class="btn-content">
        <i v-if="index >= users.length - 1 && users.length < 9" class="el-icon-circle-plus" @click="onAdd"></i>
        <i v-if="users.length > 1" class="el-icon-remove" @click="onDel"></i>
      </div>
    </div>
    <!-- @close="onClose"  -->
    <vxe-modal
      v-if="show"
      type="modal"
      v-model="show"
      v-bind="modalConfig"
      title="选择团队成员"
      :before-hide-method="onBeforeClose"
    >
      <template #default>
        <vxe-grid ref="gridRef" v-bind="gridConfig" @radio-change="onRadioChange">
          <template #operation_t_d="{ row }">
            <vxe-button type="text" status="info" v-if="isSelect(row)">已选择</vxe-button>
            <vxe-button type="text" status="primary" v-else>未选择</vxe-button>
          </template>
        </vxe-grid>
      </template>
      <template #footer>
        <div class="footer-btn">
          <vxe-button style="margin-right: 10px" @click="onClose">取消</vxe-button>
          <vxe-button status="primary" @click="onConfirm">保存</vxe-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>
<script>
import { commonGridConfig1 } from "@/config/vxeGrid";
import { modalConfigMap } from "@/config/vxeModal";
import { getTrustDoctorListApi } from "@/api/hospital/doctorManage/doctor";
export default {
  name: "MemberSelect",
  props: {
    value: {
      type: Object,
      default: () => null,
    },
    index: {
      type: Number,
      default: 0,
    },
    users: {
      type: Array,
      default: () => [],
    },
    leader: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      modalConfig: {
        ...modalConfigMap.get("default"),
        position: {
          top: 50,
        },
      },
      gridConfig: {
        ...commonGridConfig1,
        maxHeight: 600,
        keepSource: true,
        rowConfig: {
          keyField: "userId",
          isCurrent: true,
          isHover: true,
        },
        radioConfig: {
          strict: true,
          reserve: true,
          trigger: "row",
          checkMethod: ({ row }) => {
            return (
              (this.users.findIndex((item) => row.userId === item.userId) < 0 && this.leader.userId !== row.userId) ||
              this.value?.userId === row.userId
            );
          },
        },
        formConfig: {
          titleColon: true,
          titleAlign: "right",
          data: {},
          items: [
            {
              field: "name",
              title: "",
              itemRender: {
                name: "VxeInput",
                props: {
                  placeholder: "请输入员工姓名",
                },
              },
            },
            {
              itemRender: {
                name: "VxeButtonGroup",
                options: [
                  {
                    type: "submit",
                    content: "搜索",
                    status: "primary",
                  },
                  {
                    type: "reset",
                    content: "重置",
                  },
                ],
              },
            },
          ],
        },
        columns: [
          {
            type: "radio",
            width: 100,
          },
          {
            type: "seq",
            title: "序号",
            width: 100,
          },
          {
            field: "userName",
            title: "姓名",
            width: 150,
          },
          {
            field: "userIdcardNum",
            title: "证件号",
            minWidth: 180,
          },
          {
            field: "userPhone",
            title: "手机号",
            minWidth: 160,
          },
          {
            field: "operation",
            title: "状态",
            slots: {
              default: "operation_t_d",
            },
            width: 80,
            fixed: "right",
          },
        ],
        proxyConfig: {
          form: true,
          autoLoad: false,
          response: {
            result: "data.list",
            total: "data.page.total",
          },
          ajax: {
            query: ({ page, form }) => {
              const { currentPage: pageNum, pageSize } = page;
              console.log("page=", page);
              console.log("form=", form);
              const params = {
                pageNum,
                pageSize,
                ...form
              };
              return getTrustDoctorListApi(params);
            },
          },
        },
      },
      show: false,
      selectDoctor: null,
    };
  },
  methods: {
    isSelect(row) {
      //
      return this.users.filter(item => {
        if (item.userId === this.value.userId) {
          if (this.value.userId !== this.selectDoctor?.userId) {
            return false
          } else {
            return true
          }
        }
        return true
      }).findIndex(item => row.userId === item.userId) >= 0 || row.userId === this.selectDoctor?.userId || this.leader.userId === row.userId

    },
    onOpen() {
      this.show = true;
      this.$nextTick(() => {
        console.log("打开=");
        this.$refs.gridRef.commitProxy("query");
        this.selectDoctor = this.value ? { ...this.value } : null;
        this.$refs.gridRef.setRadioRow(this.selectDoctor);
      });

      console.log("this.selectDoctor=", this.selectDoctor);
    },
    onBeforeClose() {
      console.log("关闭前");
      this.selectDoctor = null;
      this.$refs.gridRef.clearRadioRow();
      this.$refs.gridRef.clearRadioReserve();
      this.show = false;
    },
    onClose() {
      console.log("close=");
      this.$nextTick(() => {
        this.selectDoctor = null;
        this.$refs.gridRef.clearRadioRow();
        this.$refs.gridRef.clearRadioReserve();
        this.show = false;
      });
    },
    onConfirm() {
      if (!this.selectDoctor) {
        return this.$message.warning("请选择团队成员");
      }
      this.$emit("updateUsers", this.selectDoctor, this.index);
      this.show = false;
    },
    onRadioChange({ newValue, oldValue, ...args }) {
      this.selectDoctor = newValue;
    },
    onAdd() {
      this.$emit('memberAdd', this.index)
    },
    onDel() {
      this.$emit('memberDel', this.index)
    }
  },
};
</script>
<style lang="scss" scoped>
.input-content {
  display: flex;
  align-items: center;
  .btn-content {
    display: flex;
    align-items: center;
    padding-left: 10px;
    width: 80px;
    i {
      font-size: 28px;
      cursor: pointer;
    }
    i.el-icon-circle-plus {
      margin-right: 6px;
      color: #1890ff;
    }
    i.el-icon-remove {
      color: red;
    }
  }
}
.footer-btn {
  display: flex;
  justify-content: center;
}
</style>
