<template>
  <div>
    <el-input :value="value.doctorName" placeholder="请选择">
      <template #suffix>
        <div style="padding-right: 20px">
          <el-button :disabled="type === 2" type="text" @click="onOpen">选择</el-button>
        </div>
      </template>
    </el-input>
    <!-- @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"></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, combineConfig } from "@/config/vxeModal";
import { getLeaderDoctorListApi } from "@/api/hospital/doctorManage/doctor";
export default {
  name: "MemberSelect",
  props: {
    value: {
      type: Object,
      default: () => null,
    },
    type: {
      type: Number,
      default: 1
    }
  },
  computed: {
    isDisableSelect: function() {
      return this.type === 2;
    }
  },
  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",
        },
        formConfig: {
          titleColon: true,
          titleAlign: "right",
          data: {},
          items: [
            {
              field: "doctorName",
              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: "doctorName",
            title: "姓名",
            width: 150,
          },
          {
            field: "cardNumber",
            title: "证件号",
            minWidth: 200,
          },
          {
            field: "phoneNumber",
            title: "手机号",
            minWidth: 200,
          },
          // {
          //   field: "operation",
          //   slots: {
          //     default: "operation_t_d"
          //   }
          // },
        ],
        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 getLeaderDoctorListApi(params);
            },
          },
        },
      },
      show: false,
      selectDoctor: null,
    };
  },
  methods: {
    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("updateLeader", this.selectDoctor);
      this.show = false;
    },
    onRadioChange({ newValue, oldValue, ...args }) {
      this.selectDoctor = newValue;
    },
  },
  mounted() {
    console.log('this.type=', this.type)
  }
};
</script>
<style lang="scss" scoped>
.footer-btn {
  display: flex;
  justify-content: center;
}
</style>
