<template>
  <div class="container-box">
    <div class="search-box">
      <el-form
        :inline="true"
        ref="searchForm"
        :model="searchForm"
        class="demo-form-inline"
        label-width="auto"
        size="mini"
      >
        <el-select v-model="searchForm.a" placeholder="选择品种">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="searchForm.b" placeholder="选择单个">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-form-item label="">
          <el-input v-model="searchForm.c" placeholder="请输入编号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="warning" icon="el-icon-refresh" @click="resetClick"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="list-box con">
      <div class="con">
        <div class="left">
          <el-table
            :data="tableData"
            style="width: 100%"
            size="mini"
            border
            height="504"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="a" label="标记编号"></el-table-column>
          </el-table>
        </div>
        <div class="right">
          <div style="height: 480px; width: 500px">
            <img
              src="@/assets/img/one.png"
              alt=""
              v-if="multipleSelection.length == 1"
            />
            <img
              src="@/assets/img/two.png"
              alt=""
              v-if="multipleSelection.length == 2"
            />
          </div>
          <div class="info">
            <p>
              <el-tooltip placement="top">
                <div slot="content">
                  低近交系数（0% -
                  5%）：表示个体的遗传多样性较高，近交程度较低。这些个体的基因组中<br />
                  来自近亲的比例很小，通常表示良好的遗传多样性和较低的遗传疾病风险。<br />
                  中等近交系数（5% -
                  15%）：表示个体存在一定程度的近交，遗传多样性略有下降。这些个体<br />
                  可能会有一些遗传问题的风险，但整体仍然在可接受范围内。<br />
                  高近交系数（15%
                  以上）：表示个体的近交程度较高，遗传多样性明显下降。这些个体可能面<br />
                  临更高的遗传疾病风险，且可能出现表现不稳定的情况，如生长缓慢、繁殖问题等<br />
                </div>
                <span class="el-icon-info"></span>
              </el-tooltip>
              近交系数
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        a: '',
        b: '',
        c: ''
      },
      options1: [
        {
          value: '选项1',
          label: '西门塔尔'
        },
        {
          value: '选项2',
          label: '九龙牦牛'
        },
        {
          value: '选项3',
          label: '荷斯坦牛'
        },
        {
          value: '选项4',
          label: '安格斯牛'
        }
      ],
      options2: [
        {
          value: '选项1',
          label: '单个'
        },
        {
          value: '选项2',
          label: '多个'
        }
      ],
      tableData: [
        {
          id: 1,
          a: 'CX_82010000990'
        },
        {
          id: 2,
          a: 'CX_82010000991'
        },
        {
          id: 3,
          a: 'CX_82010000992'
        },
        {
          id: 4,
          a: 'CX_82010000993'
        },
        {
          id: 5,
          a: 'CX_82010000994'
        },
        {
          id: 6,
          a: 'CX_82010000995'
        },
        {
          id: 7,
          a: 'CX_82010000996'
        },
        {
          id: 8,
          a: 'CX_82010000997'
        },
        {
          id: 9,
          a: 'CX_82010000998'
        },
        {
          id: 10,
          a: 'CX_82010000999'
        },
        {
          id: 11,
          a: 'CX_82010001000'
        },
        {
          id: 12,
          a: 'CX_82010001001'
        },
        {
          id: 13,
          a: 'CX_82010001002'
        },
        {
          id: 14,
          a: 'CX_82010001003'
        }
      ],
      form: {
        page: 1,
        pagesize: 20
      },
      total: 2,
      multipleSelection: [],
      maxSelectionCount: 2
    }
  },
  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)
    },
    handleSelectionChange(val) {
      if (val.length > this.maxSelectionCount) {
        val.splice(0, val.length - 2)
        this.$refs.multipleTable.toggleRowSelection(val[0], false) // 取消第一行的选中状态
      }
      this.multipleSelection = val
      console.log(this.multipleSelection)
    }
  }
}
</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-input--suffix .el-input__inner {
  padding-right: 30px;
  width: 150px;
  height: 28px;
  line-height: 28px;
}
/deep/ .el-input__suffix {
  height: 120%;
}
.con {
  width: 100%;
  height: 508px;
  border: #ccc solid 1px;
  padding: 15px;
  border-radius: 3px;
  display: flex;
  flex-direction: row;
}
.left {
  width: 200px;
}
.right {
  flex: 1;
  img {
    width: auto;
    height: 480px;
    margin-left: 100px;
  }
}
.info p {
  padding-right: 200px;
  float: right;
}
</style>
