<template>
  <div class="business">
<!--    <div class="fileBox">-->
<!--      <p class="title">建立屈光档案</p>-->
<!--      <el-button type="primary" size="small" @click="sendFile">发送</el-button>-->
<!--    </div>-->
<!--    <div style="margin: 12px 0">-->
<!--      状态：<span class="circle">已发送</span>-->
<!--    </div>-->
<!--    <div style="margin-bottom: 60px;">-->
<!--      备注：-->
<!--      <el-input v-model="remark" auto-complete="off" style="width: 420px" />-->
<!--    </div>-->
    <div class="fileBox">
      <p class="title">预约医疗项目</p>
      <el-button type="primary" size="small" @click="sendTreat">发送</el-button>
    </div>
    <div style="margin: 12px 0">
      状态：<span class="circle">已发送</span>
    </div>
    <div style="margin-bottom: 12px">
      医疗项目：
      <el-select v-model="itemId" placeholder="" clearable style="display: inline-block;width: 220px;margin-left: 8px" >
        <el-option
          v-for="item in projectList"
          :key="item.itemId"
          :label="item.itemName"
          :value="item.itemId"
        />
      </el-select>
    </div>
    <div>
      备注：
      <el-input v-model="treatRemark" auto-complete="off" style="width: 420px" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    platform: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    patientName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      remark: '',
      projectList: [],
      itemId: '',
      treatRemark: '',
      jzNumber: ''
    }
  },
  created() {

  },
  mounted() {
    this.queryProjects()
    this.jzNumber = window.sessionStorage.getItem('jzNumber')
  },
  methods: {
    // 建立屈光档案
    async sendFile() {
      // const params = {
      //   remark: this.treatRemark,
      //   jzNumber: this.jzNumber,
      //   platform: this.platform,
      //   patientName: this.patientName,
      //   patientId: this.patientId
      // }
      // const { data: res } = await this.$http.post('/appoint/sendInfo4Appoint', params)
      // if (res.code === 0) {
      //   this.$message.success('发送成功')
      // } else {
      //   this.$message.error(res.msg)
      // }
    },
    queryProjects() {
      this.$http.get('/patient/getZlItemDict', { params: { isAppoint: 1 }}).then(data => {
        this.projectList = data.data.data || []
      })
    },
    // 发送激光治疗
    async sendTreat() {
      if (!this.itemId) return this.$message.warning('请选择医疗项目!')
      const params = {
        itemId: this.itemId,
        remark: this.treatRemark,
        jzNumber: this.jzNumber,
        platform: this.platform,
        patientName: this.patientName,
        patientId: this.patientId
      }
      const { data: res } = await this.$http.post('/appoint/sendInfo4Appoint', params)
      if (res.code === 0) {
        this.$message.success('发送成功')
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.business {
  width: 650px;
  padding: 16px;
  box-sizing: border-box;
  box-sizing: border-box;
  .fileBox{
    display: flex;
    justify-content: space-between;

    .title{
      color: rgba(0, 0, 0, 0.88);
      font-weight: 500;
      font-size: 16px;
      margin-top: 6px;
    }
  }
  .circle{
    &::before {
      content: '';
      width: 6px;
      height: 6px;
      margin:0 8px;
      display: inline-block;
      vertical-align: middle;
      background: #52C41A;
      border-radius: 50%;
    }
  }
}
</style>
