<template>
<div style="padding-bottom:20px;">
  <el-row :gutter="5">
    <el-col :span="8">


      <el-card class="box-card">
        <div slot="header" class="clearfix">

           <el-row :gutter="10" style="font-size:20px;font-weight:bold">
              <el-col :span="8">
                <span style="float:right">牛号：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span>{{cowcodeCard.calf_code}}</span>
              </el-col>
          </el-row>
           
        </div>

        <div>
       
            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">耳标：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.ear_number}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">栏舍：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.barn_name}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">犊牛类型：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.calf_category_name}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">出生日期：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.birth_date_format}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">性别：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct" v-if="cowcodeCard.genders == 1">公</span>
                <span class="cust-card-ct" v-if="cowcodeCard.genders == 2">母</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">日龄：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.daily_age }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">体重(KG)：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.current_weight }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">日均增重(KG)：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.daily_weight_gain }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">母号：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.mother_code }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">建档日期：</span>
              </el-col>
              <el-col :span="16"class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.created_at_format }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">断奶出栏日期：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.leave_barn_date_format }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">备注：</span>
              </el-col>
              <el-col :span="16" class="g-txt-l">
                <span class="cust-card-ct">{{cowcodeCard.remark }}</span>
              </el-col>
            </el-row>
   
        </div>
        <!-- <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div> -->
      </el-card>
 
    </el-col>
    <el-col :span="16">

      <el-card class="box-card">

       


       <!-- 搜索区域 -->
       <div class="search-bx1">
           <el-select v-model="searchData.event_kind" filterable placeholder="事件类型" class="g-mr20" style="width: 180px;" clearable>
                 <el-option v-for="item in eventNameList" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
 
           
           <el-date-picker v-model="searchData.inputDatetime1" class="g-mr20" type="daterange" range-separator="至" start-placeholder="操作日期" end-placeholder="操作日期" style="width: 250px;" />
 
 
           <el-button type="primary"   @click="form_search">搜索</el-button>
           <el-button type="primary"   @click="form_clear">重置</el-button>
     
            <!-- <el-button type="primary"   @click="form_export">导出</el-button> -->
       </div>
 
  
       <!-- 表格 -->
       <el-table   key="0"  :data="tableList"  v-loading="tableLoading" element-loading-text="给我一点时间"    border fit>
           <el-table-column label="序号"  width="50px" align="center">
             <template slot-scope="scope">
               <span>{{ scope.row.id }}</span>
             </template>
           </el-table-column>
           <el-table-column label="日期" min-width="120px" align="center" show-overflow-tooltip>
             <template slot-scope="scope">
               <span>{{ scope.row.calf_code  }}</span>
             </template>
           </el-table-column>
            
           <el-table-column label="事件类型" min-width="120px" align="center" show-overflow-tooltip>
             <template slot-scope="scope">
               <span v-if="scope.row.event_kind == 1">称重</span>
               <span v-if="scope.row.event_kind == 2">饲喂</span>
               <span v-if="scope.row.event_kind == 3">粪便情况</span>
               <span v-if="scope.row.event_kind == 4">测量体温</span>
               <span v-if="scope.row.event_kind == 5">测量心跳</span>
               <span v-if="scope.row.event_kind == 6">测量呼吸</span>
               <span v-if="scope.row.event_kind == 7">疾病</span>
               <span v-if="scope.row.event_kind == 8">病愈</span>
               <span v-if="scope.row.event_kind == 9">去角</span>
               <span v-if="scope.row.event_kind == 10">去副乳</span>
               <span v-if="scope.row.event_kind == 11">转栏</span>
               <span v-if="scope.row.event_kind == 12">出栏</span>
               <span v-if="scope.row.event_kind == 13">死亡</span>
 
             </template>
           </el-table-column>
           <!-- <el-table-column label="事件描述" min-width="120px" align="center" show-overflow-tooltip>
             <template slot-scope="scope">
               <span>{{ scope.row.description  }}</span>
             </template>
           </el-table-column> -->
          
          
           <el-table-column label="操作人" min-width="120px" align="center" show-overflow-tooltip>
             <template slot-scope="scope">
               <span>{{ scope.row.operation_user  }}</span>
             </template>
           </el-table-column>
 
            
          
   
 
         <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width" fixed="right">
           <template slot-scope="scope">
              <el-button type="primary"  size="mini" icon="el-icon-edit" @click="form_edit(scope.row)">详情查看</el-button>
            
           </template>
         </el-table-column>
       </el-table>
 
       <!-- 分页区域 -->
       <el-pagination  @size-change="change_size_page"  @current-change="change_current_page"  :current-page="searchData.page" :page-sizes="[1,5,10,20,30,50]"  :page-size="searchData.page_size" layout="total, prev, pager, next" :total="searchData.total"/>
     </el-card>



 
      

    </el-col>
  </el-row>


  <!-- 弹窗 新增or修改 -->
  <el-dialog   title="事件" :visible.sync="addFormShow" @close="add_dialog_close" width="50%">
       <div class="">
         <el-form  ref="addFormRef"  :rules="addFormRules"  :model="addForm"  label-position="right" label-width="170px"  style="width:50%;margin:0 auto 50px">
              
 
             <el-row>
                 

                 <el-form-item label="牛号：" prop="calf_code">
                   <el-input ref="calf_code" v-model="addForm.calf_code"    disabled />
                 </el-form-item> 
             
                 <el-form-item label="犊牛类型：" prop="calf_category_name">
                   <el-input ref="calf_category_name" v-model="addForm.calf_category_name"    disabled />
                 </el-form-item> 


                 <el-form-item label="事件类型：" prop="event_kind">
                   <el-input ref="event_kind" v-if="addForm.event_kind == 1" value="称重"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 2" value="饲喂"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 3" value="粪便情况"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 4" value="测量体温"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 5" value="测量心跳"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 6" value="测量呼吸"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 7" value="疾病"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 8" value="病愈"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 9" value="去角"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 10" value="去副乳"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 11" value="称重"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 12" value="转栏"    disabled />
                   <el-input ref="event_kind" v-if="addForm.event_kind == 13" value="死亡"    disabled />
                 </el-form-item> 

 
  

            
    
             </el-row>
 
              <!-- 1 称重 2 饲喂 3 粪便情况 4 测量体温 5 测量心跳 6 测量呼吸 7 疾病 8 病愈 9 去角 10 去副乳 11 转栏 12 出栏 13 死亡 -->
              <!-- 称重 -->
             <el-row   v-if="addForm.event_kind == 1" >
                <el-form-item label="体重：" prop="weight">
                   <el-input ref="weight" v-model="addForm.weight"  disabled />
                 </el-form-item> 
             </el-row>
             <!-- 饲喂 -->
             <el-row   v-if="addForm.event_kind == 2">
                 <el-form-item label="一班进食量：" prop="first_class_food_number"  >
                   <el-input ref="first_class_food_number" v-model="addForm.first_class_food_number"  disabled />
                 </el-form-item> 
                 <el-form-item label="二班进食量：" prop="second_class_food_number" v-if="class_num == 2 || class_num == 3 || class_num == 4">
                   <el-input ref="second_class_food_number" v-model="addForm.second_class_food_number"   disabled/>
                 </el-form-item> 
                 <el-form-item label="三班进食量：" prop="third_class_food_number" v-if="class_num == 3 || class_num == 4 ">
                   <el-input ref="third_class_food_number" v-model="addForm.third_class_food_number"  disabled/>
                 </el-form-item> 
                 <el-form-item label="四班进食量：" prop="fourth_class_food_number" v-if="class_num == 4">
                   <el-input ref="fourth_class_food_number" v-model="addForm.fourth_class_food_number" disabled />
                 </el-form-item> 
             </el-row>
             <!-- 粪便情况 -->
             <el-row   v-if="addForm.event_kind == 3">
                
                 <el-form-item label="粪便评分：" prop="fecal_score">
                   <el-input ref="fecal_score" v-if="addForm.event_kind == 1" value="1分"    disabled />
                   <el-input ref="fecal_score" v-if="addForm.event_kind == 2" value="2分"    disabled />
                   <el-input ref="fecal_score" v-if="addForm.event_kind == 3" value="3分"    disabled />
                   <el-input ref="fecal_score" v-if="addForm.event_kind == 4" value="4分"    disabled />
                   <el-input ref="fecal_score" v-if="addForm.event_kind == 5" value="5分"    disabled />
                    
                 </el-form-item> 
             </el-row>
             <!-- 测量体温 -->
             <el-row   v-if="addForm.event_kind == 4" >
                <el-form-item label="体温(℃)：" prop="temp">
                   <el-input ref="temp" v-model="addForm.temp" disabled  />
                 </el-form-item> 
             </el-row>
             <!-- 测量心跳 -->
             <el-row   v-if="addForm.event_kind == 5" >
                <el-form-item label="心跳频率(次/分钟)：" prop="heartbeat">
                   <el-input ref="heartbeat" v-model="addForm.heartbeat"   disabled/>
                 </el-form-item> 
             </el-row>
             <!-- 测量呼吸 -->
             <el-row   v-if="addForm.event_kind == 6" >
                <el-form-item label="呼吸频率(次/分钟)：" prop="breathe">
                   <el-input ref="breathe" v-model="addForm.breathe" disabled  />
                 </el-form-item> 
             </el-row>
             <!-- 疾病 -->
             <el-row   v-if="addForm.event_kind == 7" >
                <el-form-item label="疾病名称：" prop="diseased_type">
                   <el-select ref="diseased_type" v-model="addForm.diseased_type" filterable placeholder="请选择"  style="width: 100%;" disabled >
                     <el-option v-for="item in diseaseNameList" :key="item.id" :label="item.name" :value="item.id" />
                   </el-select>
                 </el-form-item>
                 <el-form-item label="用药：" prop="medication">
                   <el-input ref="medication" v-model="addForm.medication"   disabled/>
                 </el-form-item> 
             </el-row>
             <!-- 转投栏舍 -->
             <el-row   v-if="addForm.event_kind == 11" >
                 <el-form-item label="原栏舍：" prop="original_barn_name">
                   <el-input ref="original_barn_name" v-model="addForm.original_barn_name"   disabled/>
                 </el-form-item> 
                 <el-form-item label="转投栏舍：" prop="new_barn_id">
                   <el-select ref="new_barn_id" v-model="addForm.new_barn_id" filterable placeholder="请选择"  style="width: 100%;" disabled>
                     <el-option v-for="item in cowshedList" :key="item.id" :label="item.name" :value="item.id" />
                   </el-select>
                 </el-form-item>
             </el-row>
             <!-- 死亡 -->
             <el-row   v-if="addForm.event_kind == 13" >
                <el-form-item label="死亡原因：" prop="reason">
                   <el-input ref="reason" v-model="addForm.reason" disabled   />
                 </el-form-item> 
             </el-row>
 
             <el-row  >
                 <el-form-item label="备注：" prop="remark">
                   <el-input ref="remark" v-model="addForm.remark"  disabled />
                 </el-form-item>
             </el-row>
 
  
            
             
         </el-form>
         <div slot="footer" class="dialog-footer">
      
           <el-button @click="addFormShow = false">关闭</el-button>
         </div>
       </div>
  </el-dialog>



</div> 
</template>
<script>
 

import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
import { parseTime, json2excel } from '@/utils/index.js'

export default {
  name: 'CowcodeDetail',
  props: {
    cowcodeData: {
      type: Object,
      required: true
    } 
  },
  data() {
    return {

       
      

      cowcodeCard: {
          // "address":"1","createrId":"3072707379235128328","createrName":"管理员","createtime":"2022-05-11","customeLevelName":"2级","customeStatusName":"欠款客户","customerName":"测试12","directorId":24,"directorName":"康亮","enable":1,"groupId":207,"groupName":"星连星牧业","id":1425,"province":"1","rangeName":"西北区域","remark":"","scode":"123456789012345678" 
      }, 
      
      //接口 - 获取 - 表格
      url_get_table:'/api/v1/ops/calf/event/list',

      //获取 - 表格数据 - 参数
      searchData:{
         calf_code: "",
         event_kind: undefined,
         inputDatetime1:"",
         start_time:"",
         end_time:"",
 
         page: 1,  //页码
         page_size: 10,   //每页数量
         total:0,  //总页数
         pastureId: ""
       },
       tableLoading: false,
       //表格内容
       tableList:[
         //  { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123',roleList:[2,3] },
         // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123',roleList:[] },
         // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
         // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
         // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
         // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
         // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
         // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
         // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
         // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
         // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
         // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
       ],
 
 
       
       //  下拉框 - 事件类型 
       eventNameList: [
         {id: 1, name: "称重"}, 
         {id: 2, name: "饲喂"}, 
         {id: 3, name: "粪便情况"},
         {id: 4, name: "测量体温"},
         {id: 5, name: "测量心跳"},
         {id: 6, name: "测量呼吸"},
         {id: 7, name: "疾病"},
         {id: 8, name: "痊愈"},
         {id: 9, name: "去角"},
         {id: 10, name: "去副乳"},
         {id: 11, name: "转投栏舍"},
         {id: 12, name: "出栏"},
         {id: 13, name: "死亡"},
       ], 
 
       addFormShow:false,
       addFormStatus: '',
       addFormTxt: {  edit: '修改',  create: '新增' },
       addForm:{
         calf_code:'',id:'' ,event_kind:undefined
       },
 
       addFormRules:{
          
 
       },

       class_num:4,
     //  下拉框 - 栏舍
     cowshedList: [
         // {id: "栏舍组1", name: "栏舍组1"}, 
         // {id: "栏舍组2", name: "栏舍组2"}, 
         // {id: "栏舍组3", name: "栏舍组3"}
       ], 
       //  下拉框 - 疾病 
       diseaseNameList: [
         // {id: 1, name: "腹泻"}, 
         // {id: 2, name: "便秘"}, 
         // {id: 3, name: "下痢"},
         // {id: 4, name: "脐炎"},
         // {id: 5, name: "肺炎"},
         // {id: 6, name: "软瘫衰弱"}
       ], 
      
    }
  },
 watch: {
    cowcodeData: {
      deep: true,
      handler: function (item) {
        console.log("父组件：", item)

      //   this.form_clear() 

           this.searchData.calf_code = item.calf_code 
          this.get_table_data()
       
       }
    },
 
  },
  mounted() {
     
  },


  created() {

    console.log("this.cowcodeData",this.cowcodeData)
    var me = this

    me.cowcodeCard =  Object.assign({}, me.cowcodeData)  

    console.log("this.cowcodeCard",me.cowcodeCard )

    this.searchData.calf_code = me.cowcodeData.calf_code 
    this.get_table_data()



         ajaxDataPost('/api/v1/ops/barn/list?page=1&page_size=1000', {name:"",barn_group_name:"",status:undefined}).then(e => {
             console.log("栏舍：",e)
 
             //打印请求成功结果
             if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
               me.cowshedList = []
             } else {
               me.cowshedList = e.data.list
             }
 
         })




        // 班次数量下拉框
        ajaxDataGet('/api/v1/ops/calf_feed/enum/list').then(e => {
         console.log(e)
         if(e.code === 200){
           var class_num = e.data.class_list.length
         } else {
           var class_num = 4
         }
         console.log("class_num========",class_num)
         me.class_num = class_num
       })

       ajaxDataPost('/api/v1/ops/base_setting/category_table/list?page=1&page_size=10000', {category_type:3}).then(e => {
           console.log("疾病下拉框：",e)
 
           if(e.code == 200 ){
             me.diseaseNameList = e.data.list
            
           } else {
             me.diseaseNameList = []
           }
         })



 
  },
  beforeDestroy() {
    
  },
  methods: {
     
    //获取 表格
     get_table_data() {
  
      var me = this
 
      me.tableLoading = true
      console.log("searchData======>", me.searchData)
 
   
      
       if( me.searchData.event_kind == ""){
         me.searchData.event_kind = undefined
       }
 
       var send_url = me.url_get_table + '?page=' + me.searchData.page +  '&page_size=' + me.searchData.page_size
 
       ajaxDataPost(send_url,  me.searchData).then(e => {
         console.log("表格请求结果：",e)
           //打印请求成功结果
           if(e.code == 200 ){
             me.tableList = e.data.list
             me.searchData.total = e.data.total;	// 总数
             me.searchData.page = e.data.page;	//页码
             me.searchData.page_size = e.data.page_size;	//每页数量
            
           } else {
             me.$message({ type: 'error', message: '请求表格列表失败！' + e.msg, duration: 2000 })
           }
 
           setTimeout(() => {
             me.tableLoading = false
           }, 100)
   
         })
 
        
     },
     //搜索 查询表格
     form_search(){
       var me = this
       console.log('请求表格列表searchData',me.searchData)
       if (me.searchData.inputDatetime1 !== '' && me.searchData.inputDatetime1 !== null) {
           me.searchData.start_time = parseTime(me.searchData.inputDatetime1[0], '{y}-{m}-{d}')
           me.searchData.end_time = parseTime(me.searchData.inputDatetime1[1], '{y}-{m}-{d}')
         } else {
           me.searchData.inputDatetime1 = ''
           me.searchData.start_time = ''
           me.searchData.end_time = ''
         }
       me.get_table_data()
 
     },
 
     //重置 表格
     form_clear(){
       var me = this
 
       me.searchData.inputDatetime1 = ""
       me.searchData.end_time = ""
       me.searchData.start_time = ""
       me.searchData.event_kind = undefined
       me.searchData.page = 1
       me.searchData.page_size = 10
 
     
 
       me.get_table_data()
     },
 
     //监听 page_size 改变的事件
     change_size_page(item){
       console.log(item)
      // this.searchData.page_size = item
       //  this.getUserList()
     },
 
     //监听 page 改变的事件
     change_current_page(item){
       console.log(item)
        this.searchData.page = item
        this.get_table_data()
     },
     

     form_edit(row) {
       console.log('行内容row=========', row)
       if(row.message && row.message !== ""){
         var messageTxt = JSON.parse(row.message)
         //编辑行内容赋值
         this.addForm  = Object.assign({}, row ,messageTxt)  
       } else {
         this.addForm  = Object.assign({}, row)  
       }
  
       
 
     
 
       console.log("this.addForm=========",this.addForm)
       this.addFormStatus = 'edit'
       this.addFormShow = true
       this.$nextTick(() => {
         this.$refs['addFormRef'].clearValidate()
       })
     },
    
 
      //新增关闭
      add_dialog_close(){
        //内容重置
        this.$refs['addFormRef'].resetFields()
     },
 

     
  }
}
</script>
