<template>
  <div class="app-container">
    <div class="header-title">医生推荐配置</div>
    <div class="recommend-container">
      <draggable v-model="recommendList" ghost-class="ghost">
        <div class="recommend-item" v-for="(item, index) in recommendList" :key="item.nId">
          <div class="recommend-item-label ghost">
            <span>推荐位{{ index + 1 }}：</span>
          </div>
          <div class="recommend-item-content" @click="onSelectRecommend(item)">
            <div class="recommend-item-input" v-if="item.doctorId">{{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{ item.deptName }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{ item.title }}</div>
            <div v-else class="recommend-item-placeholder">请选择推荐位医生</div>
          </div>
          <div class="op-content">
            <i class="el-icon-remove-outline" v-if="recommendList.length > 1" @click="onDelete(index)"></i>
            <i class="el-icon-circle-plus-outline" v-if="recommendList.length < 5" @click="onAdd(index)"></i>
          </div>
        </div>
      </draggable>
    </div>
    <div class="footer-container">
      <el-button type="primary" @click="handleSubmit" :disabled="isSubmitting">保存</el-button>
    </div>
    <select-recommend ref="selectRecommend" :list="recommendList" @onOk="onOk"></select-recommend>
  </div>
</template>
<script>

import { getRecommendDoctorListApi, saveRecommendDoctorApi } from '@/api/admin/operationManage/recommend'
import SelectRecommend from './components/selectRecommend/index.vue'
import draggable from 'vuedraggable'
import { nanoid } from 'nanoid'
import { getClientId } from '@/utils/auth'
export default {
  name: 'RecommendDoctorConfig',
  components: {
    draggable,
    SelectRecommend
   },
  data() {
    return {
      isSubmitting: false,
      recommendList: [
        {
          nId: nanoid(),
          clientId: null,
          userId: null,
          doctorId: null,
          name: null,
          title: null,
          deptId: null,
          deptName: null,
        }
      ],
      // 当前选中要切换的添加医生
      currentRecommend: null
    }
  },
  methods: {
    async loadData() {
      const { data } = await getRecommendDoctorListApi()
      if (!data || data.length <= 0) {
        return
      }
      this.recommendList = data.map((item, index) => {
        return {
          ...item,
          nId: nanoid()
        }
      })
    },
    onAdd(index) {
      this.recommendList.splice(index + 1, 0, {
        nId: nanoid(),
        clientId: null,
        userId: null,
        doctorId: null,
        name: null,
        title: null,
        deptId: null,
        deptName: null,
      })
    },
    onDelete(index) {
      this.recommendList.splice(index, 1)
    },
    onSelectRecommend(item, index) {
      this.currentRecommend = item
      this.$nextTick(() => {
        this.$refs.selectRecommend.openDialog(item)
      })
    },
    onOk(doctor) {
      console.log('doctor', doctor)
      const { userId, id: doctorId, doctorName: name, title,deptId,deptName  } = doctor
      const newRecommend = {
        nId: this.currentRecommend.nId,
        clientId: null,
        userId,
        doctorId,
        name,
        title,
        deptId,
        deptName
      }
      Object.assign(this.currentRecommend, newRecommend)
    },
    async handleSubmit() {
      const params = this.recommendList.filter(item => !!item.doctorId).map((item, index) => {
        const { doctorId, userId, name, title } = item
        return {
          clientId: getClientId(),
          doctorId,
          userId,
          name,
          title,
          sort: index + 1
        }
      })
      try {
        this.isSubmitting = true
        await saveRecommendDoctorApi(params);
        this.$message.success("操作成功");
        this.loadData()
      } catch(err) {
        console.log(err)
      } finally {
        this.isSubmitting = false
      }
    }
  },
  created() {
    this.loadData()
  },
  activated() {
    this.loadData()
  }
}
</script>
<style lang="scss" scoped>
.header-title {
  position: relative;
  padding-left: 8px;
  font-weight: 600;
}
.header-title::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 4px;
  height: 80%;
  background-color: #5DA0FD;
  border-radius: 2px;
}
.recommend-container {
  padding-top: 40px;
  padding-left: 20px;
  .recommend-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .recommend-item-label {
      flex-basis: 80px;
    }
    .recommend-item-content {
      box-sizing: border-box;
      width: 400px;
      height: 36px;
      padding-left: 15px;
      margin-right: 8px;
      border: 1px solid #DCDFE6;
      border-radius: 2px;
      line-height: 36px;
      cursor: pointer;
    }
    .recommend-item-content:hover {
      transition: all 0.5s;
      border-color: rgb(64, 158, 255);
    }
    .recommend-item-input {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgb(64, 158, 255);
    }
    .recommend-item-placeholder {
      color: #C0C4CC;
    }
    i {
      cursor: pointer;
      font-size: 24px;
    }
    i.el-icon-remove-outline {
      margin-right: 5px;
      color: red;
    }
    i.el-icon-circle-plus-outline {
      color: #5DA0FD;
    }
  }
}
.footer-container {
  display: flex;
  justify-content: center;
  width: 600px;
  padding-top: 40px;
}
</style>
