<template>
  <div class="info-doctor">
    <a-table :columns="columns" :data-source="dataList" :scroll="{ x: 'max-content' }" :pagination="false">
      <template slot="specialtyList" slot-scope="text, record">
        <span>{{ filterSpecialty(record.specialtyList) }}</span>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a-button type="link" @click.stop="editEvt(record)">修改</a-button>
        <a-button type="link" class="danger" @click.stop="delRecord(index)">删除</a-button>
      </template>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pagination" @pageChange="getDoctorList" />
    <a-modal title="编辑" :visible="dialogShow" width="60%" :maskClosable="false"
      okText="确定" cancelText="取消"
      @ok="handleEditOK" @cancel="dialogShow = false">
      <a-form-model ref="editForm" :model="editFormObj" :rules="editRules">
        <a-row :gutter="30">
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="工号" prop="doctorCode">
              <a-input type="number" :min="0" v-model.trim="editFormObj.doctorCode" placeholder="工号" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="医生姓名" prop="doctorDesc">
              <a-input v-model.trim="editFormObj.doctorDesc" placeholder="医生姓名" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="医生英文名" prop="doctorDescLang1">
              <a-input v-model.trim="editFormObj.doctorDescLang1" placeholder="医生英文名" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="国家/区域" prop="country">
              <a-select v-model="editFormObj.country" placeholder="请选择" showSearch allowClear>
                <a-select-option v-for="(item) in countyList" :value="item.descCh" :key="item.id">{{item.descCh}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="语言" prop="language">
              <a-select v-model="editFormObj.language" placeholder="请选择" mode="multiple" showSearch allowClear>
                <a-select-option v-for="(item) in languageList" :value="item.descCh" :key="item.id">{{item.descCh}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="科室" prop="specialtyList">
              <a-select v-model="editFormObj.specialtyList" placeholder="请选择" mode="multiple" showSearch allowClear>
                <a-select-option :value="item.id" v-for="item in specialtyList" :key="item.id">{{ item.specialtyDesc }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
const columns = [
  { title: "序号", dataIndex: "id", ellipsis: true, width: 150 },
  { title: "工号", dataIndex: "doctorCode", ellipsis: true, width: 95 },
  { title: "医生姓名", dataIndex: "doctorDesc", ellipsis: true, width: 125 },
  { title: "医生英文名", dataIndex: "doctorDescLang1", ellipsis: true, width: 135,},
  { title: "科室", dataIndex: "specialtyList", ellipsis: true, scopedSlots: { customRender: "specialtyList" }, width: 155,},
  { title: "国家/区域", dataIndex: "country", ellipsis: true, width: 110, },
  { title: "语言", dataIndex: "language", ellipsis: true, width: 120 },
  { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" }, fixed: "right", width: "200px", align: "center", },
];
export default{
  props: {
    detailObj: {
      default: {}
    }
  },
  data(){
    return {
      dialogShow: false,
      columns,
      dataList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      specialtyList: [], //科室列表
      specialtyObj: {}, //科室对象
      countyList: [],
      languageList: [],
      editFormObj: {
        id: "",
        doctorCode: '',
        doctorDesc: '',
        doctorDescLang1: '',
        country: '',
        language: [],
        specialtyList: [],
      },
      editRules: {
        specialtyList: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
    }
  },
  components: {
    BurtPagination,
  },
  async created() {
    this.getSpecialtyList();
    this.getDoctorList();
    this.getRefcdByRefgrp();
  },
  methods: {
    filterSpecialty(val) {
      let txt = (val || []).map((item) => {
        return this.specialtyObj[item] || "";
      });
      return txt.join(",");
    },
    //获取科室
    getSpecialtyList() {
      this.$apis.GETSPECIALTYLIST().then((res) => {
        if (res.returnCode == "0000") {
          this.specialtyList = res.content || [];
          (res.content || []).forEach((item) => {
            this.specialtyObj[item.id] = item.specialtyDesc;
          });
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    getRefcdByRefgrp() {
      // 获取国家列表
      this.$apis.GETREFCDBYREFGRP({
        modid: "CI",
        refgrp: "COUNTRY_MAPPING"
      }).then((res) => {
        this.countyList = res.content || [];
      });
      // 获取语言列表
      this.$apis.GETREFCDBYREFGRP({
        modid: "CI",
        refgrp: "LANGUAGE_TYPE"
      }).then((res) => {
        this.languageList = res.content || [];
      });
    },
    //获取医生列表
    getDoctorList() {
      this.$apis
        .DOCTORLIST({
          providerId: this.detailObj.id,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
        })
        .then((res) => {
          if (res.returnCode == "0000") {
            let content = res.content || {};
            this.pagination.total = content.total || 0;
            this.dataList = (content.list || []).map((item) => {
              let specialtyList = (item.specialtyList || []).map(
                (innerItem) => {
                  return innerItem.specialtyId;
                }
              );
              return {
                ...item,
                specialtyList: specialtyList || [],
              };
            });
          } else {
            this.$message.error(res.returnMsg);
          }
        });
    },
    editEvt(record) {
      this.editFormObj = {
        id: record.id || "",
        doctorCode: record.doctorCode || "",
        doctorDesc: record.doctorDesc || "",
        doctorDescLang1: record.doctorDescLang1 || "",
        country: record.country || "",
        language: record.language? record.language.split(','): [],
        specialtyList: record.specialtyList || [],
      };
      this.dialogShow = true;
    },
    //编辑保存
    handleEditOK() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$apis
            .DOCTORUPDATE({
              ...this.editFormObj,
              language: this.editFormObj.language.join(','),
              specialtyList: this.editFormObj.specialtyList.map((item) => {
                return {
                  specialtyId: item,
                };
              }),
            })
            .then((res) => {
              if (res.returnCode == "0000") {
                this.$message.success("编辑成功");
                this.dialogShow = false;
                this.getDoctorList();
              } else {
                this.$message.error(res.returnMsg);
              }
            });
        }
      });
    },
    //删除医生
    delRecord(index) {
      this.$modal.confirm({
        title: "删除",
        content: "确定删除该条记录？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          this.$apis
            .DOCTORDELETE({
              id: this.dataList[index].id,
            })
            .then((res) => {
              if (res.returnCode == "0000") {
                this.$message.success("删除成功");
                this.dataList.splice(index, 1);
              } else {
                this.$message.error(res.returnMsg);
              }
            });
        },
      });
    },
    
  }
}
</script>

<style lang="less" scoped>

</style>