<template>
  <div class="patient-container">
    <patient-sidebar :id="patientID" defaultActive="1-6" v-on:tran-patient="onTranPatient"></patient-sidebar>
    <div class="patient-app-container advice-container app-container">
      <div style="display:flex;justify-content: space-between;align-items: center;margin-bottom: 12px;">
         <span style="font-weight:bold;">通路详情</span>
         <el-button size="medium" type="primary" @click="dialogVisible =true" style="margin-left:800px" >新增</el-button>
      </div>
      <div class="cell clearfix">
         <span>启用日期:{{getTime(start_time,"{y}-{m}-{d}")}} &nbsp; 血管通路类型:{{blood_access_part_opera_id}}</span> 
      </div>
      <el-table  :data="tableData" border style="width:100%" >
      <el-table-column  prop="start_time"   label="日期"  width="150"    align="center">
          <template  slot-scope="scope">
            <span>{{getTime(scope.row.start_time,"{y}-{m}-{d}")}}</span>
          </template>
     </el-table-column>
      <el-table-column   prop="blood_access_part_opera_id" label="项目"   align="center" width="200">
        <template slot-scope="scope">
           <span>{{scope.row.blood_project}}</span>  
        </template>
     </el-table-column>
      <el-table-column     prop="inflow_pass"    label="结果"    align="center">
         <template slot-scope="scope">
            <span>{{scope.row.blood_result}}</span>
         </template>
      </el-table-column>
      <el-table-column     prop="date"    label="处理" width="120"     align="center">
          <template slot-scope="scope">
            <span>{{scope.row.blood_dealwith}}</span>
          </template>
      </el-table-column>
      <el-table-column     prop="date"    label="评估人"      align="center">
          <template slot-scope="scope">
           {{getDoctor(scope.row.creator)}}
          </template>
      </el-table-column>
  
       <el-table-column   prop="date"  label="操作" width="140" align="center">
          <template slot-scope="scope">
             <el-tooltip class="item" effect="dark" content="编辑" placement="top">
               <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-edit-outline"
                 
                  @click="handleUpdateAdviceTemplate(scope.row.id)"
                  >
               </el-button>
             </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                 <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDeleteAdviceTemplate(scope.row.id, scope.$index)"
                  >
                 </el-button>
              </el-tooltip>
           </template>
      </el-table-column>
  </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,50,100]"
        :page-size="10"
        background
        style="margin-top:20px;"
        align="right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>

     <el-dialog
         title="新增通路评估"
         :visible.sync="dialogVisible"
         width="60%"
         center>
      <el-form label-width="120px" :model="form" ref="form" :rules="rules" >
         <el-row :gutter="24">
            <el-col :span="8">
               <el-form-item label="建立日期:" :required="true" prop="start_time">
                 <el-date-picker
                    type="datetime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.start_time"
                    style="width:150px">
                 </el-date-picker>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="评估人:" :required="true" prop="creator">
                 <el-select v-model="form.creator" placeholder="请选择"  style="width:150px">
                    <el-option
                        v-for="item in doctorList"
                        :key="item.admin_user_id"
                        :label="item.user_name"
                        :value="item.admin_user_id"
                        >
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
       
         <el-row>
            <el-col>
                <el-form-item label="项目:">
                 <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.blood_project"></el-input>
                </el-form-item>
            </el-col>  
         </el-row>
          <el-row>
            <el-col>
                <el-form-item label="结果:">
                 <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.blood_result"></el-input>
                </el-form-item>
            </el-col>  
         </el-row>
         <el-row>
            <el-col>
                <el-form-item label="处理:">
                 <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.blood_dealwith"></el-input>
                </el-form-item>
            </el-col>  
         </el-row>
      </el-form>

     <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePasswayAssessment('form')">保存</el-button>
     </span>
     </el-dialog>

     
       <el-dialog
         title="编辑通路评估"
         :visible.sync="editDialogVisible"
         width="60%"
         center>
      <el-form label-width="120px" :model="form" ref="form" :rules="rules" >
         <el-row :gutter="24">
            <el-col :span="8">
               <el-form-item label="建立日期:" :required="true" prop="start_time">
                 <el-date-picker
                    type="datetime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.start_time"
                    style="width:150px">
                 </el-date-picker>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="评估人:" :required="true" prop="creator">
                 <el-select v-model="form.creator" placeholder="请选择"  style="width:150px">
                    <el-option
                        v-for="item in doctorList"
                        :key="item.admin_user_id"
                        :label="item.user_name"
                        :value="item.admin_user_id"
                        >
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
       
         <el-row>
            <el-col>
                <el-form-item label="项目:">
                 <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.blood_project"></el-input>
                </el-form-item>
            </el-col>  
         </el-row>
          <el-row>
            <el-col>
                <el-form-item label="结果:">
                 <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.blood_result"></el-input>
                </el-form-item>
            </el-col>  
         </el-row>
         <el-row>
            <el-col>
                <el-form-item label="处理:">
                 <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.blood_dealwith"></el-input>
                </el-form-item>
            </el-col>  
         </el-row>
      </el-form>

     <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePasswayAssessment('form')">保存</el-button>
     </span>
     </el-dialog>

      

    </div>

     
  </div>
</template>
<script>
  const moment = require('moment')
  import PatientSidebar from './components/PatientSidebar'
  import {getVascularAccessByDetail,savePasswayAssessment,getAllPassWayAssessmentList,getPassWayAssessmentById,updatePasswayAssessment,DeletePassWayAssessMent} from '@/api/patient'
  import { uParseTime } from '@/utils/tools'
  import { getDataConfig } from '@/utils/data'
 
  export default {
    name: 'doctorAdvice',
    components: {
      PatientSidebar,
    },
    data() {
      return {
        tableData: [],
        nowtime: moment(new Date()).format('YYYY-MM-DD'),
        page: 1,
        limit: 10,
        total: 0,
        rules: {
          start_time: [{ required: true, message: '请输入建立日期' }],
          creator: [{ required: true, message: '请选择评估人' }],
        },
        dialogVisible:false,
        editDialogVisible:false,
        form:{
         id:0,
         start_time:moment(new Date()).format('YYYY-MM-DD'),
         creator:this.$store.getters.xt_user.user.id,
         blood_project:"",
         blood_result:"",
         blood_dealwith:"",
        },
        doctorList:[],
        start_time:"",
        blood_access_part_opera_id:"",
        parent_id:"",
        patientID:""
      }
    },
    methods: {
     clickuseradvicecell(row, column, cell, event) {
      },
      onTranPatient: function(tranPatient) {
        this.currentPatient = tranPatient
      },
      handleSizeChange(limit) {
        this.limit = limit
        this.getlist()
      },
      handleCurrentChange(page) {
        this.page = page
      
        this.getlist()
      },
   
    
    
     getTime(value, temp) {
        if (value != undefined) {
            return uParseTime(value, temp);
        }
        return "";
     },

 
     getVascularAccessByDetail(id){
        getVascularAccessByDetail(id).then(response=>{
           if(response.data.state ==1){
             var accessDetail =  response.data.data.accessDetail
             console.log("accessDetail",accessDetail)
             this.start_time = accessDetail.start_time
             this.blood_access_part_opera_id = accessDetail.blood_access_part_opera_id
             var doctor = response.data.data.doctor
             console.log("意思",doctor)
             this.doctorList = doctor
           }
        }) 
     },
     getDoctor(id){
       var name = ""
       for(let i=0;i<this.doctorList.length;i++){
          if(id == this.doctorList[i].admin_user_id){
             name = this.doctorList[i].user_name
          }
       }
       return name
     },
     handleDeleteAdviceTemplate(id,index){
       this.$confirm("确认删除吗?", "删除", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning"
      })
        .then(() => {
          DeletePassWayAssessMent(id).then(response => {
            if(response.data.state == 1){
              var msg = response.data.data.msg
              this.tableData.splice(index, 1);
              this.$message.success("删除成功!")
            }
             
            
          });
        })
        .catch(() => {});
     },
    savePasswayAssessment(formName){
       this.$refs[formName].validate((valid)=>{
          if(valid){
              var params = {
                start_time:this.form.start_time,
                creator:this.form.creator,
                blood_project:this.form.blood_project,
                blood_result:this.form.blood_result,
                blood_dealwith:this.form.blood_dealwith,
                patient_id:this.patientID,
                parent_id:this.parent_id,
              }
              console.log("parasm",params)
            savePasswayAssessment(params).then(response=>{
               if(response.data.state == 1){
                 var assessment =  response.data.data.assessment
                 console.log("assessment",assessment)
                 this.form.blood_project = ""
                 this.form.blood_result = ""
                 this.form.blood_dealwith = ""
                 this.dialogVisible = false
                 this.$message.success("保存成功")
                 this.getlist()
               }
            })
          }
       })
    },
    getlist(){
        const params = {
          parent_id:this.parent_id,
          patient_id:this.patientID, 
          page:this.page,
          limit:this.limit,
        }
       getAllPassWayAssessmentList(params).then(response=>{
          if(response.data.state == 1){
             var list =  response.data.data.list
             console.log("列表",list)
             this.tableData = list
             var total =  response.data.data.total
             console.log("total",total)
             this.total = total
           }
       }) 
    },

    handleUpdateAdviceTemplate(id){
      console.log("id2222222",id)
       getPassWayAssessmentById(id).then(response=>{
           if(response.data.state == 1){
              var assessment =  response.data.data.assessment
              console.log("assesment",assessment)
              this.editDialogVisible = true
              this.form.id = assessment.id
              this.form.start_time = this.getTime(assessment.start_time,"{y}-{m}-{d}")
              this.form.creator = assessment.creator
              this.form.blood_dealwith = assessment.blood_dealwith
              this.form.blood_project = assessment.blood_project
              this.form.blood_result = assessment.blood_result
           }
       })
    },

    updatePasswayAssessment(formName){
       this.$refs[formName].validate((valid)=>{
         if(valid){
              var params = {
                start_time:this.form.start_time,
                creator:this.form.creator,
                blood_project:this.form.blood_project,
                blood_result:this.form.blood_result,
                blood_dealwith:this.form.blood_dealwith,
                id:this.form.id
              }
              console.log("parasm",params)  
            updatePasswayAssessment(params).then(response=>{
               if(response.data.state == 1){
                  var assesment = response.data.data.assessment
                  this.$message.success("保存成功")
                  this.editDialogVisible = false
                  this.getlist()
               }
            })
         }
       })
    }
   
    },
    created() {
      const id = this.$route.params && this.$route.params.mid
      this.patientID = parseInt(id)
      const pid = this.$route.params&& this.$route.params.pid 
      this.parent_id = parseInt(pid)
      this.getVascularAccessByDetail(pid) 
      this.getlist()
    }
  }
</script>

<style>
  #oictable ::-webkit-scrollbar {
    height: 15px;
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
   

</style>

