<template>
  <div class="container-box">
    <div class="top-box">
      <i
        class="el-icon-arrow-left"
        style="font-size: 24px"
        @click="backClick"
      ></i>
      <div class="top-title">猪</div>
    </div>
    <div class="list-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        border
        stripe
        :header-cell-style="{ textAlign: 'center', color: '#606266' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="number" label="品种登记号"></el-table-column>
        <el-table-column prop="cate" label="畜种名称"></el-table-column>
        <el-table-column prop="varieties" label="品种名称"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="detailClick(scope.row)"
              icon="el-icon-view"
              class="detail-btn"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
      <el-descriptions :column="2" border>
        <el-descriptions-item
          label="品种登记号"
          label-class-name="my-label"
          content-class-name="my-content"
          >X-01-01-001-01</el-descriptions-item
        >
        <el-descriptions-item
          label="畜种名称"
          label-class-name="my-label"
          content-class-name="my-content"
          >猪</el-descriptions-item
        >
        <el-descriptions-item
          label="品种来源"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          地方</el-descriptions-item
        >
        <el-descriptions-item
          label="品种名称"
          content-class-name="my-content"
          label-class-name="my-label"
        >
          民猪</el-descriptions-item
        >
        <el-descriptions-item
          label="品种英文名"
          label-class-name="my-label"
          content-class-name="my-content"
        ></el-descriptions-item>
        <el-descriptions-item
          label="品种别名"
          label-class-name="my-label"
          content-class-name="my-content"
          >东北民猪</el-descriptions-item
        >
        <el-descriptions-item
          label="类群名称"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="类群别名"
          content-class-name="my-content"
          label-class-name="my-label"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="图片(公)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          <el-image
            style="width: 80px; height: 50px; overflow: hidden"
            :src="boarImage"
            fit="contain"
            :preview-src-list="[boarImage]"
          >
            <div
              slot="error"
              class="image-slot"
              style="
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f0f0f0;
              "
            >
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item
          label="图片(母)"
          content-class-name="my-content"
          label-class-name="my-label"
        >
          <el-image
            style="width: 80px; height: 50px; overflow: hidden"
            :src="sowImage"
            fit="contain"
            :preview-src-list="[sowImage]"
          >
            <div
              slot="error"
              class="image-slot"
              style="
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f0f0f0;
              "
            >
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item
          label="影像(公)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="影像(母)"
          content-class-name="my-content"
          label-class-name="my-label"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="图像(公)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="图像(母)"
          content-class-name="my-content"
          label-class-name="my-label"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="照片(群体)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="图像(群体)"
          content-class-name="my-content"
          label-class-name="my-label"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="影像(群体)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="引进国家"
          content-class-name="my-content"
          label-class-name="my-label"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="信息来源"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          国家品种志
        </el-descriptions-item>
        <el-descriptions-item
          label="中心产区"
          content-class-name="my-content"
          label-class-name="my-label"
        >
          辽宁省岫岩、建昌、复县、海城、昌图、朝阳；吉林省九站、桦甸、永吉、靖宇、通化；黑龙江省绥滨、富锦、集贤、北安、德都、双城、兰西；河北省迁西、遵化、兴隆、丰宁等。
        </el-descriptions-item>
        <el-descriptions-item
          label="主要分布区"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          东北和华北部分地区
        </el-descriptions-item>
        <el-descriptions-item
          label="最高海拔"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="最低海拔"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="气候类型"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          温带大陆性季风半温润气候地型
        </el-descriptions-item>
        <el-descriptions-item
          label="地型"
          label-class-name="my-label"
          content-class-name="my-content"
          >以丘陵为主
        </el-descriptions-item>
        <el-descriptions-item
          label="年均温度"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          8
        </el-descriptions-item>
        <el-descriptions-item
          label="年最高温度"
          label-class-name="my-label"
          content-class-name="my-content"
          >25
        </el-descriptions-item>
        <el-descriptions-item
          label="年最低温度"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          -14
        </el-descriptions-item>
        <el-descriptions-item
          label="相对湿度"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="年均降水量"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          647
        </el-descriptions-item>
        <el-descriptions-item
          label="无霜期"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="土壤类型"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <!-- ----------- -->
        <el-descriptions-item
          label="作物种类"
          label-class-name="my-label"
          content-class-name="my-content"
          >高粱、玉米、大豆、谷子、棉花、芝麻、向日葵、甜菜等
        </el-descriptions-item>
        <el-descriptions-item
          label="生态适应性"
          label-class-name="my-label"
          content-class-name="my-content"
          >适应性强
        </el-descriptions-item>
        <el-descriptions-item
          label="抗病能力"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="独特性状"
          label-class-name="my-label"
          content-class-name="my-content"
          >抗寒能力强
        </el-descriptions-item>
        <el-descriptions-item
          label="典型生态影像"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="填报人"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="填报单位"
          label-class-name="my-label"
          content-class-name="my-content"
          >中国农业科学院畜牧研究所
        </el-descriptions-item>
        <el-descriptions-item
          label="更新日期 "
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="采集日期"
          label-class-name="my-label"
          content-class-name="my-content"
          >01/01/1982
        </el-descriptions-item>
        <el-descriptions-item
          label="群体总数"
          label-class-name="my-label"
          content-class-name="my-content"
          >850
        </el-descriptions-item>
        <el-descriptions-item
          label="公畜数量"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="配种公畜数量"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="母畜数量"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="繁殖母畜数量"
          label-class-name="my-label"
          content-class-name="my-content"
          >2
        </el-descriptions-item>
        <el-descriptions-item
          label="品种杂交比例"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="人工授精公畜"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="人工授精母畜"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="保护等级"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="保护方法"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="濒危状态"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="濒危依据及说明"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="体貌概述"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          头中等大，面直，耳大下垂，体躯扁平，背腰窄狭，臀部斜。四肢粗壮。全身被毛黑色，毛密而长，猪鬃较多，冬季密生绒毛，起防寒保温作用。
        </el-descriptions-item>
        <el-descriptions-item
          label="体型"
          label-class-name="my-label"
          content-class-name="my-content"
          >体躯扁平，背腰窄狭，臀部倾斜。四肢粗壮。
        </el-descriptions-item>
        <el-descriptions-item
          label="毛色"
          label-class-name="my-label"
          content-class-name="my-content"
          >全身被毛黑色，毛密而长。
        </el-descriptions-item>
        <el-descriptions-item
          label="肤色"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="头型"
          label-class-name="my-label"
          content-class-name="my-content"
          >头中等大，面直长
        </el-descriptions-item>
        <el-descriptions-item
          label="角型"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="耳型"
          label-class-name="my-label"
          content-class-name="my-content"
          >耳大下垂
        </el-descriptions-item>
        <el-descriptions-item
          label="乳头个数"
          label-class-name="my-label"
          content-class-name="my-content"
          >14
        </el-descriptions-item>
        <el-descriptions-item
          label="体高(公)"
          label-class-name="my-label"
          content-class-name="my-content"
          >86
        </el-descriptions-item>
        <el-descriptions-item
          label="体斜长(公)"
          label-class-name="my-label"
          content-class-name="my-content"
          >148
        </el-descriptions-item>
        <el-descriptions-item
          label="胸围(公)"
          label-class-name="my-label"
          content-class-name="my-content"
          >139
        </el-descriptions-item>
        <el-descriptions-item
          label="体重(公)"
          label-class-name="my-label"
          content-class-name="my-content"
          >195
        </el-descriptions-item>
        <el-descriptions-item
          label="体高(母)"
          label-class-name="my-label"
          content-class-name="my-content"
          >82
        </el-descriptions-item>
        <el-descriptions-item
          label="体斜长(母)"
          label-class-name="my-label"
          content-class-name="my-content"
          >141
        </el-descriptions-item>
        <el-descriptions-item
          label="胸围(母)"
          label-class-name="my-label"
          content-class-name="my-content"
          >132
        </el-descriptions-item>
        <el-descriptions-item
          label="体重(母)"
          label-class-name="my-label"
          content-class-name="my-content"
          >151
        </el-descriptions-item>
        <el-descriptions-item
          label="独特特征"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="性成熟日龄(公)"
          label-class-name="my-label"
          content-class-name="my-content"
          >90
        </el-descriptions-item>
        <el-descriptions-item
          label="配种日龄(公)"
          label-class-name="my-label"
          content-class-name="my-content"
          >270
        </el-descriptions-item>
        <el-descriptions-item
          label="性成熟日龄(母)"
          label-class-name="my-label"
          content-class-name="my-content"
          >120
        </el-descriptions-item>
        <el-descriptions-item
          label="配种日龄(母)"
          label-class-name="my-label"
          content-class-name="my-content"
          >240
        </el-descriptions-item>
        <el-descriptions-item
          label="发情月份"
          label-class-name="my-label"
          content-class-name="my-content"
          >全年多次发情
        </el-descriptions-item>
        <el-descriptions-item
          label="发情周期"
          label-class-name="my-label"
          content-class-name="my-content"
          >21
        </el-descriptions-item>
        <el-descriptions-item
          label="怀孕期"
          label-class-name="my-label"
          content-class-name="my-content"
          >114
        </el-descriptions-item>
        <el-descriptions-item
          label="初产仔数"
          label-class-name="my-label"
          content-class-name="my-content"
          >11
        </el-descriptions-item>
        <el-descriptions-item
          label="经产仔数"
          label-class-name="my-label"
          content-class-name="my-content"
          >12
        </el-descriptions-item>
        <el-descriptions-item
          label="初生重(公)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="初生重(母)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="断奶日龄"
          label-class-name="my-label"
          content-class-name="my-content"
          >60
        </el-descriptions-item>
        <el-descriptions-item
          label="断奶重"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="断奶窝重"
          label-class-name="my-label"
          content-class-name="my-content"
          >120
        </el-descriptions-item>
        <el-descriptions-item
          label="断奶活仔数"
          label-class-name="my-label"
          content-class-name="my-content"
          >9.7
        </el-descriptions-item>
        <el-descriptions-item
          label="空怀天数"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="繁殖率"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="繁殖成活率"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="主要用途"
          label-class-name="my-label"
          content-class-name="my-content"
          >肉脂兼用
        </el-descriptions-item>
        <el-descriptions-item
          label="产奶量"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="乳脂率"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="料肉比"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="屠宰活重"
          label-class-name="my-label"
          content-class-name="my-content"
          >90
        </el-descriptions-item>
        <el-descriptions-item
          label="屠宰日龄"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="胴体重"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="屠宰率"
          label-class-name="my-label"
          content-class-name="my-content"
          >72
        </el-descriptions-item>
        <el-descriptions-item
          label="净肉率"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="瘦肉率"
          label-class-name="my-label"
          content-class-name="my-content"
          >46
        </el-descriptions-item>
        <el-descriptions-item
          label="肉色评分"
          label-class-name="my-label"
          content-class-name="my-content"
          >3
        </el-descriptions-item>
        <el-descriptions-item
          label="肉ph1"
          label-class-name="my-label"
          content-class-name="my-content"
          >6.3
        </el-descriptions-item>
        <el-descriptions-item
          label="肉ph2"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="肉系水力"
          label-class-name="my-label"
          content-class-name="my-content"
          >76.3
        </el-descriptions-item>
        <el-descriptions-item
          label="大理石纹评分"
          label-class-name="my-label"
          content-class-name="my-content"
          >4
        </el-descriptions-item>
        <el-descriptions-item
          label="肉嫩度"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="肉风味"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="毛绒类型"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="毛绒产量(公)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="毛绒产量(母)"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="毛绒纤维细度"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="毛绒纤维长度"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="净毛绒率"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="挽力"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="速率"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="饲养类型"
          label-class-name="my-label"
          content-class-name="my-content"
          >舍饲和放牧
        </el-descriptions-item>
        <el-descriptions-item
          label="补饲状况"
          label-class-name="my-label"
          content-class-name="my-content"
          >精料及农副产品
        </el-descriptions-item>
        <el-descriptions-item
          label="管理容易否"
          label-class-name="my-label"
          content-class-name="my-content"
          >易管理
        </el-descriptions-item>
        <el-descriptions-item
          label="遗传检测"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="检测单位"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="检测人"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="基因组文库"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="文件存放单位"
          label-class-name="my-label"
          content-class-name="my-content"
        >
        </el-descriptions-item>
        <el-descriptions-item
          label="品种评价及开发利用"
          label-class-name="my-label"
          content-class-name="my-content"
        >
          民猪具有抗寒能力强，体质强健，产仔较多，脂肪沉积能力强和肉质好的特点，适于放牧和较粗放的管理，与约克夏、巴克夏、苏白、克米洛夫和长白猪杂交，培育成哈白猪、新金猪、东北花猪和三江白猪。这些新品种猪大都保留了民猪抗寒性强的特点，繁殖力高和肉质好的特点，但胴体脂肪率高，皮较厚，后腿肌肉不发达，增重较慢，今后应继续加强本品种选育，提高胴体的瘦肉率。
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: '1',
          number: 'X-01-01-001-01',
          cate: '猪',
          varieties: '民猪'
        },
        {
          id: '2',
          number: 'X-01-01-002-01',
          cate: '猪',
          varieties: '八眉猪'
        },
        {
          id: '3',
          number: 'X-01-01-003-01',
          cate: '猪',
          varieties: '黄淮海黑猪'
        },
        {
          id: '4',
          number: 'X-01-01-003-02',
          cate: '猪',
          varieties: '黄淮海黑猪'
        },
        {
          id: '5',
          number: 'X-01-01-003-03',
          cate: '猪',
          varieties: '黄淮海黑猪'
        },
        {
          id: '6',
          number: 'X-01-01-003-04',
          cate: '猪',
          varieties: '黄淮海黑猪'
        },
        {
          id: '7',
          number: 'X-01-01-003-05',
          cate: '猪',
          varieties: '黄淮海黑猪'
        },
        {
          id: '8',
          number: 'X-01-01-004-01',
          cate: '猪',
          varieties: '汉江黑猪'
        },
        {
          id: '9',
          number: 'X-01-01-005-01',
          cate: '猪',
          varieties: '沂蒙黑猪'
        },
        {
          id: '10',
          number: 'X-01-01-006-01',
          cate: '猪',
          varieties: '两广小花猪'
        },
        {
          id: '11',
          number: 'X-01-01-007-01',
          cate: '猪',
          varieties: '粤东黑猪'
        }
      ],
      dialogVisible: false,
      boarImage: require('../../assets/img/gongzhu.png'),
      sowImage: require('../../assets/img/muzhu.png')
    }
  },
  methods: {
    // 返回
    backClick() {
      window.history.go(-1)
    },
    detailClick() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.container-box {
  min-height: calc(100vh - 84px);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  .top-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .top-title {
      background-color: #5aad00;
      color: #fff;
      padding: 10px 20px;
      border-radius: 5px;
      width: 80px;
      text-align: center;
    }
  }
}
// 弹层--header
/deep/.el-dialog__header {
  font-weight: bold;
  box-shadow: 0 0.2px 1px rgba(0, 0, 0, 0.12), 0 0 4px rgba(0, 0, 0, 0.04);
}

/deep/ .my-label {
  background: #f0f8ff;
  width: 120px;
  text-align: right !important;
  // display: flex;
  // align-items: center;
  // align-items: center;
}
/deep/ .my-content {
  width: 425px;
}
</style>
