<template>
  <div class="container-box">
    <div class="search-box">
      <el-radio-group v-model="activeName" style="margin: 20px 10px">
        <el-radio-button label="ABLUP"></el-radio-button>
        <el-radio-button label="GBLUP"></el-radio-button>
        <el-radio-button label="ssGBLUP"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="list-box">
      <el-form
        :inline="true"
        ref="searchForm"
        :model="searchForm"
        class="demo-form-inline"
        label-width="auto"
        size="mini"
        style="margin: 15px 0 25px"
      >
        <el-form-item label="养殖场">
          <el-input
            v-model="searchForm.a"
            placeholder="请输入养殖场"
          ></el-input>
        </el-form-item>
        <el-form-item label="标记编号">
          <el-input
            v-model="searchForm.b"
            placeholder="请输入标记编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="searchClick"
            >搜索</el-button
          >
          <el-button type="warning" icon="el-icon-refresh" @click="resetClick"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableDataABLUP"
        style="width: 100%"
        size="mini"
        border
        v-if="activeName == 'ABLUP'"
      >
        <el-table-column prop="a" label="养殖场"></el-table-column>
        <el-table-column prop="b" label="标记编号"></el-table-column>
        <el-table-column prop="c" label="性别"></el-table-column>
        <el-table-column prop="d" label="外貌评分"></el-table-column>
        <el-table-column prop="e" label="18月龄体高(cm)"></el-table-column>
        <el-table-column prop="f" label="18月龄体长(cm)"></el-table-column>
        <el-table-column prop="g" label="18月龄胸围(cm)"></el-table-column>
        <el-table-column prop="h" label="18月龄官维(cm)"></el-table-column>
        <el-table-column prop="i" label="18月龄体重(kg)"></el-table-column>
        <el-table-column prop="j" label="18月龄背膘厚度(mm)"></el-table-column>
        <el-table-column prop="k" label="18月龄眼肌面积(mm)"></el-table-column>
        <el-table-column prop="l" label="平均产奶量(kg)"></el-table-column>
        <el-table-column prop="m" label="平均乳脂率(%)"></el-table-column>
        <el-table-column prop="n" label="平均乳蛋白率(%)"></el-table-column>
        <el-table-column
          prop="o"
          label="综合育种指数"
          sortable
        ></el-table-column>

        <el-table-column label="详情">
          <!-- <template slot-scope="scope"> -->
          <el-button size="mini" type="text" class="detail-btn"
            ><a
              target="_blank"
              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000945ABLUP%E8%82%B2%E7%A7%8D%E6%8A%A5%E5%91%8A.pdf"
              >预览</a
            ></el-button
          >
          <!-- </template> -->
        </el-table-column>
      </el-table>
      <el-table
        :data="tableDataGBLUP"
        style="width: 100%"
        size="mini"
        border
        v-if="activeName == 'GBLUP'"
      >
        <el-table-column prop="a" label="养殖场"></el-table-column>
        <el-table-column prop="b" label="标记编号"></el-table-column>
        <el-table-column prop="c" label="性别"></el-table-column>
        <el-table-column prop="d" label="月龄"></el-table-column>
        <el-table-column prop="e" label="样本"></el-table-column>
        <el-table-column
          prop="f"
          label="综合育种指数"
          sortable
        ></el-table-column>
        <el-table-column label="详情">
          <el-button size="mini" type="text" class="detail-btn">
            <a
              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000923GBLUP%E8%82%B2%E7%A7%8D%E6%8A%A5%E5%91%8A.pdf"
              target="_blank"
            >
              预览
            </a>
          </el-button>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableDatassGBLUP"
        style="width: 100%"
        size="mini"
        border
        v-if="activeName == 'ssGBLUP'"
      >
        <el-table-column prop="a" label="养殖场"></el-table-column>
        <el-table-column prop="b" label="标记编号"></el-table-column>
        <el-table-column prop="c" label="性别"></el-table-column>
        <el-table-column prop="d" label="月龄"></el-table-column>
        <el-table-column prop="e" label="样本"></el-table-column>
        <el-table-column
          prop="f"
          label="综合育种指数"
          sortable
        ></el-table-column>
        <el-table-column label="详情">
          <el-button size="mini" type="text" class="detail-btn">
            <a
              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000995ssGBLUP%E8%82%B2%E7%A7%8D%E6%8A%A5%E5%91%8A.pdf"
              target="_blank"
              >预览</a
            ></el-button
          >
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="form.page"
          :page-size="form.pagesize"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'ABLUP',
      searchForm: {
        a: '',
        b: ''
      },
      tableDataABLUP: [
        {
          id: 0,
          a: '若尔盖',
          b: '82010000990',
          c: '雌',
          d: '93',
          e: '132',
          f: '161',
          g: '198',
          h: '18',
          i: '577',
          j: '10.9',
          k: '42.92',
          l: '4500',
          m: '4.1',
          n: '3.4',
          o: '255.85'
        },
        {
          id: 1,
          a: '若尔盖',
          b: '82010000991',
          c: '雌',
          d: '86',
          e: '133',
          f: '160',
          g: '196',
          h: '20',
          i: '569',
          j: '10.3',
          k: '41.36',
          l: '4560',
          m: '4',
          n: '3.2',
          o: '252.16'
        },
        {
          id: 2,
          a: '若尔盖',
          b: '82010000992',
          c: '雌',
          d: '95',
          e: '130',
          f: '155',
          g: '199',
          h: '21',
          i: '587',
          j: '10.5',
          k: '43.69',
          l: '4578',
          m: '4.2',
          n: '3.3',
          o: '259.69'
        },
        {
          id: 3,
          a: '若尔盖',
          b: '82010000993',
          c: '雌',
          d: '84',
          e: '128',
          f: '154',
          g: '200',
          h: '19',
          i: '566',
          j: '10.8',
          k: '41.58',
          l: '4589',
          m: '4',
          n: '3.5',
          o: '250.76'
        },
        {
          id: 4,
          a: '若尔盖',
          b: '82010000994',
          c: '雌',
          d: '89',
          e: '129',
          f: '159',
          g: '197',
          h: '18',
          i: '599',
          j: '11',
          k: '41.36',
          l: '4578',
          m: '4.3',
          n: '3.4',
          o: '264.34'
        },
        {
          id: 5,
          a: '若尔盖',
          b: '82010000995',
          c: '雌',
          d: '96',
          e: '126',
          f: '156',
          g: '192',
          h: '20',
          i: '578',
          j: '9.9',
          k: '40.86',
          l: '4600',
          m: '4',
          n: '3.2',
          o: '255.24'
        },
        {
          id: 6,
          a: '若尔盖',
          b: '82010000996',
          c: '雌',
          d: '84',
          e: '130',
          f: '155',
          g: '193',
          h: '22',
          i: '589',
          j: '10.3',
          k: '42.59',
          l: '4523',
          m: '4.2',
          n: '3.4',
          o: '260.27'
        },
        {
          id: 7,
          a: '若尔盖',
          b: '82010000997',
          c: '雌',
          d: '87',
          e: '129',
          f: '160',
          g: '195',
          h: '24',
          i: '598',
          j: '10.5',
          k: '44.25',
          l: '4538',
          m: '4',
          n: '3.2',
          o: '238.70'
        }
      ],
      tableDataGBLUP: [
        {
          a: '若尔盖',
          b: '82010000990',
          c: '雌',
          d: '6',
          e: '血液',
          f: '-10'
        },
        {
          a: '若尔盖',
          b: '82010000991',
          c: '雌',
          d: '6',
          e: '血液',
          f: '50'
        },
        {
          a: '若尔盖',
          b: '82010000992',
          c: '雌',
          d: '6',
          e: '血液',
          f: '-10'
        },
        {
          a: '若尔盖',
          b: '82010000993',
          c: '雌',
          d: '6',
          e: '血液',
          f: '40'
        },
        {
          a: '若尔盖',
          b: '82010000994',
          c: '雌',
          d: '6',
          e: '血液',
          f: '77'
        },
        {
          a: '若尔盖',
          b: '82010000995',
          c: '雌',
          d: '6',
          e: '血液',
          f: '-10'
        },
        {
          a: '若尔盖',
          b: '82010000996',
          c: '雌',
          d: '6',
          e: '血液',
          f: '20'
        },
        {
          a: '若尔盖',
          b: '82010000997',
          c: '雌',
          d: '6',
          e: '血液',
          f: '-10'
        }
      ],
      tableDatassGBLUP: [
        {
          a: '若尔盖',
          b: '82010000990',
          c: '雌',
          d: '6',
          e: '血液',
          f: '80'
        },
        {
          a: '若尔盖',
          b: '82010000991',
          c: '雌',
          d: '6',
          e: '血液',
          f: '0'
        },
        {
          a: '若尔盖',
          b: '82010000992',
          c: '雌',
          d: '6',
          e: '血液',
          f: '20'
        },
        {
          a: '若尔盖',
          b: '82010000993',
          c: '雌',
          d: '6',
          e: '血液',
          f: '76'
        },
        {
          a: '若尔盖',
          b: '82010000994',
          c: '雌',
          d: '6',
          e: '血液',
          f: '-10'
        },
        {
          a: '若尔盖',
          b: '82010000995',
          c: '雌',
          d: '6',
          e: '血液',
          f: '30'
        },
        {
          a: '若尔盖',
          b: '82010000996',
          c: '雌',
          d: '6',
          e: '血液',
          f: '-1'
        },
        {
          a: '若尔盖',
          b: '82010000997',
          c: '雌',
          d: '6',
          e: '血液',
          f: '60'
        }
      ],
      form: {
        page: 1,
        pagesize: 20
      },
      total: 8
    }
  },
  methods: {
    // 搜索
    searchClick() {},
    // 重置
    resetClick() {
      for (const key in this.searchForm) {
        this.searchForm[key] = ''
      }
    },
    // 条
    handleSizeChange(val) {
      this.form.pagesize = parseInt(val)
    },
    // 页
    handleCurrentChange(val) {
      this.form.page = parseInt(val)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>
.container-box {
  min-height: calc(100vh - 84px);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .search-box {
    background: #fff;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 25px;
  }
  .list-box {
    flex: 1;
    background: #fff;
    border-radius: 6px;
    padding: 10px 15px;
    .detail-btn {
      color: #67c23a;
    }
    .page-box {
      margin-top: 10px;
    }
  }
}
.el-form-item {
  margin-bottom: 0px;
  margin-right: 20px;
}
// table
/deep/.el-table th.el-table__cell {
  background-color: #f5f7fa;
}
/deep/ .cell {
  font-weight: normal;
}

/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #67c23a;
  border-color: #67c23a;
}
/deep/ .el-radio-button__inner:hover {
  color: #67c23a;
}
</style>
