<template>
  <div class="hrecord">
    <el-container>
      <el-header>
        <div class="rect" style="padding-bottom: 10px">
          <el-form
              :inline="true"
              :model="searchForm"
              size="mini">
            <el-form-item style="width: 200px">
              <el-input placeholder="耳标" style="width: 200px" v-model="searchForm.earTag"></el-input>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.sympotomName" placeholder="症状">
                <el-option v-for="item in symptomList" :key="item.id" :label="item.sympotomName" :value="item.sympotomName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.causeName" placeholder="病因">
                <el-option v-for="item in causeList" :key="item.id" :label="item.causeName" :value="item.causeName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.diseaseName" placeholder="疾病名称">
                <el-option v-for="item in illnesList" :key="item.id" :label="item.idseaseName" :value="item.idseaseName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.doctor" placeholder="医生">
                <el-option v-for="item in manList" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.treatmentPlan" placeholder="治疗方案">
                <el-option v-for="item in tmentplanList" :key="item.id" :label="item.medicantName" :value="item.medicantName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" @click="search">查 询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <div class="rect" style="margin-top: 20px">
          <el-table
            id="select"
            height="530"
            :data="tableData"
            v-loading="dataListLoading"
            style="width: 100%"
            ref="table"
            stripe
            border
            :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}"
            :cell-style="{color: '#888',fontSize: '13px'}"
            size="mini">
            <el-table-column
              prop="pigId"
              header-align="center"
              align="center"
              label="猪只耳标"
              width="100">
            </el-table-column>
            <el-table-column
                prop="diseaseName"
                header-align="center"
                align="center"
                width="140"
                label="疾病名称">
            </el-table-column>
            <el-table-column
                prop="diseaseTime"
                header-align="center"
                align="center"
                width="160"
                label="发病时间">
            </el-table-column>
            <el-table-column
                prop="symptomName"
                header-align="center"
                align="center"
                label="症 状">
            </el-table-column>
            <el-table-column
                prop="causeName"
                header-align="center"
                align="center"
                label="病 因">
            </el-table-column>
            <el-table-column
                prop="diagnosisTime"
                header-align="center"
                align="center"
                width="140"
                label="诊断时间">
            </el-table-column>
            <el-table-column
                prop="doctor"
                header-align="center"
                align="center"
                width="140"
                label="兽医姓名">
            </el-table-column>
            <el-table-column
                prop="treatmentPlan"
                header-align="center"
                align="center"
                label="治疗方案">
            </el-table-column>
            <el-table-column
                header-align="center"
                align="center"
                label="治疗结果"
                width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.result === 1">康 复</span>
                <span v-else-if="scope.row.result === 2">死 亡</span>
                <span v-else-if="scope.row.result === 3">无害化处理</span>
              </template>
            </el-table-column>
            <el-table-column
                header-align="center"
                align="center"
                label="隔离状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isolationStatus === 1">未隔离</span>
                <span v-else-if="scope.row.isolationStatus === 2">隔 离</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="offTime"
                header-align="center"
                align="center"
                label="出栏时间">
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                    type="text"
                    size="medium"
                    @click="look(scope.row)"
                    style="color: rgb(24,144,255)">
                  查看温度曲线
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="limit"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-main>
      <el-dialog
          :title="'温度曲线'"
          :close-on-click-modal="false"
          :visible.sync="visible"
          width="650px">
        <div style="width: 100%; height: 600px">
          <chartTemp :eartag="eartag"></chartTemp>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import TableFooter from '../../../components/TableFooter'
import chartTemp from './chart/chartTemp'
import {mapActions, mapState} from 'vuex'
export default {
  name: 'hrecord',
  data () {
    return {
      searchForm: {
        earTag: '',
        causeName: '',
        diseaseName: '',
        doctor: '',
        treatmentPlan: ''
      },
      dataListLoading: false,
      page: 1,
      limit: 20,
      tableData: [],
      total: 0,
      visible: false,
      selectList: [],
      dataForm: {
        id: '',
        pigId: '',
        isolationStatus: '',
        doctorId: '',
        doctor: '',
        diseaseName: '',
        diseaseTime: '',
        diagnosisTime: '',
        treatmentPlan: '',
        causeName: '',
        sympotomName: '',
        result: 1,
        offTime: ''
      },
      options: [
        {
          id: 1,
          name: '康复'
        },
        {
          id: 2,
          name: '死亡'
        },
        {
          id: 3,
          name: '无害化处理'
        }
      ],
      options1: [
        {
          id: 1,
          name: '未隔离'
        },
        {
          id: 2,
          name: '隔离'
        }
      ],
      dataRule: {},
      eartag: ''
    }
  },
  components: {
    TableFooter,
    chartTemp
  },
  computed: {
    ...mapState(['manList', 'causeList', 'illnesList', 'symptomList', 'tmentplanList'])
  },
  methods: {
    ...mapActions(['getManList', 'getTmentplan', 'getSymptom', 'getCause', 'getIllnes']),
    search () {
      this.init()
    },
    init () {
      let params = {
        page: this.page,
        limit: this.limit,
        eartag: this.searchForm.earTag,
        diseaseName: this.searchForm.diseaseName,
        causeName: this.searchForm.causeName,
        doctor: this.searchForm.doctor,
        treatmentPlan: this.searchForm.treatmentPlan
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/management/healthmedicalrecord/list'),
        method: 'get',
        params: this.$http.adornParams(params)
      })
          .then(res => {
            if (res.data.code === 0) {
              this.tableData = res.data.page.list
              this.total = res.data.page.totalCount
            }
          }).finally(() => {
            this.dataListLoading = false
          })
    },
    // 修改size
    sizeChange (val) {
      this.limit = val
      this.init()
    },
    // 修改页数
    pageChange (val) {
      this.page = val
      this.init()
    },
    look (row) {
      this.visible = true
      this.eartag = row.pigId
    }
  },
  created () {
    this.getIllnes()
    this.getManList()
    this.getTmentplan()
    this.getSymptom()
    this.getCause()
  },
  activated () {
    this.init()
  }
}
</script>

<style scoped>
.rect {
  background-color: #fff;
  padding: 30px 15px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
}
/deep/ .el-table--mini td, .el-table--mini th {
  padding: 3px 0 !important;
  height: 20px !important;
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
  color: rgb(24,144,255);
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__inner:hover {
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: rgb(24,144,255);
}
/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
</style>
