<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"
      >
        <div class="common-title">
          <h4>档案信息</h4>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-form-item>
              <el-button type="success" @click="uploadialogVisible = true"
                >上传</el-button
              >
              <el-button type="success">修改</el-button
              ><el-button type="success">删除</el-button>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="获取数据">
              <el-select
                value="searchForm.status"
                v-model="searchForm.status"
                placeholder="请选择数据类型"
                class="topselect"
                @change="change"
              >
                <el-option label="基本信息" :value="0"></el-option>
                <el-option label="系谱信息" :value="1"></el-option>
                <el-option label="育种分析" :value="2"></el-option>
                <el-option label="进化分析" :value="3"></el-option>
                <el-option label="遗传病风险" :value="4"></el-option>
                <el-option label="综合育种报告" :value="5"></el-option>
                <el-option label="基因组信息" :value="6"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="标记编号">
              <el-input
                v-model="searchForm.number"
                placeholder="请输入标记编号"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="success" icon="el-icon-search">搜索</el-button>
              <el-button
                type="warning"
                icon="el-icon-refresh"
                @click="resetClick"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="list-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        border
        :header-cell-style="{ textAlign: 'center', color: '#606266' }"
        :cell-style="cellStyle"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="yzc" label="养殖场"></el-table-column>
        <el-table-column prop="bjbh" label="标记编号"></el-table-column>
        <el-table-column prop="jbxx" label="基本信息"></el-table-column>
        <el-table-column prop="xpxx" label="系谱信息"></el-table-column>
        <el-table-column prop="yzfx" label="育种分析"></el-table-column>
        <el-table-column prop="jhfx" label="进化分析"></el-table-column>
        <el-table-column prop="ycbfx" label="遗传病风险"></el-table-column>
        <el-table-column prop="jyzxx" label="基因组信息"></el-table-column>
        <el-table-column prop="zhyzbg" label="综合育种报告"></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>
    <el-dialog :visible.sync="uploadialogVisible" width="40%">
      <el-form
        :model="searchForm"
        status-icon
        ref="searchForm"
        label-width="110px"
        class="demo-ruleForm"
        style="padding-left: 20px; box-sizing: border-box"
      >
        <div style="height: 40px"></div>
        <el-form-item label="名称" prop="pic1">
          <el-input
            type="text"
            v-model="searchForm.pic1"
            placeholder="请输入名称"
          />
        </el-form-item>
        <el-form-item label="检测平台" prop="title">
          <el-input
            type="text"
            v-model="searchForm.title"
            placeholder="请输入检测平台"
          />
        </el-form-item>
        <el-form-item label="描述" prop="address">
          <el-input
            type="text"
            v-model="searchForm.address"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="选择上传" prop="address">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="基本信息"></el-checkbox>
            <el-checkbox label="系谱信息"></el-checkbox>
            <el-checkbox label="育种分析"></el-checkbox>
            <el-checkbox label="进化分析"></el-checkbox>
            <el-checkbox label="遗传病风险"></el-checkbox>
            <el-checkbox label="基因组信息"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="导入文件名称" prop="address">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3"
          >
            <el-button size="small" type="success">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadialogVisible = false" size="mini"
          >关闭</el-button
        >
        <el-button
          type="success"
          size="mini"
          @click="uploadialogVisible = false"
          >确认</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" width="40%">
      <div
        style="
          color: black;
          font-weight: bold;
          font-size: 20px;
          padding-left: 2%;
          border-bottom: 2px solid #f1f1f1;
          padding-bottom: 18px;
          margin-bottom: 20px;
        "
      >
        平台认证
      </div>
      <el-form
        :model="searchForm"
        status-icon
        ref="searchForm"
        label-width="80px"
        class="demo-ruleForm"
        style="padding-left: 20px; box-sizing: border-box"
      >
        <el-form-item v-if="evalue == 0 || evalue == 1" label="平台" prop="pic">
          <el-input
            type="text"
            v-model="searchForm.pic"
            placeholder="请输入平台名称（爱农智慧牧场）"
          />
        </el-form-item>
        <el-form-item
          v-if="evalue == 0 || evalue == 1"
          label="手机号"
          prop="title"
        >
          <el-input
            type="text"
            v-model="searchForm.title"
            placeholder="请输入手机号（爱农智慧牧场）"
          />
        </el-form-item>
        <el-form-item
          v-if="evalue == 0 || evalue == 1"
          label="密码"
          prop="address"
        >
          <el-input
            type="password"
            v-model="searchForm.address"
            placeholder="请输入密码（爱农智慧牧场）"
          />
        </el-form-item>
        <el-form-item
          v-if="
            evalue == 2 ||
            evalue == 3 ||
            evalue == 4 ||
            evalue == 5 ||
            evalue == 6
          "
          label="获取编码"
          prop="address"
        >
          <el-input
            type="text"
            v-model="searchForm.address1"
            placeholder="请输入获取数据唯一编码"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">关闭</el-button>
        <el-button type="success" size="mini" @click="dialogVisible = false"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: [],
      // 上传
      uploadialogVisible: false,
      dialogVisible: false,
      searchForm: {
        farm: '',
        number: '',
        pic: '爱农智慧牧场'
      },
      evalue: '',
      tableData: [
        {
          yzc: '若尔盖',
          bjbh: '99715011920',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '未上传',
          jhfx: '未上传',
          ycbfx: '未上传',
          jyzxx: '未上传',
          zhyzbg: '已上传'
        },
        {
          yzc: '若尔盖',
          bjbh: '99715011921',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '已上传',
          jhfx: '已上传',
          ycbfx: '已上传',
          jyzxx: '已上传',
          zhyzbg: '已上传'
        },
        {
          yzc: '若尔盖',
          bjbh: '99715011922',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '已上传',
          jhfx: '已上传',
          ycbfx: '已上传',
          jyzxx: '已上传',
          zhyzbg: '已上传'
        },
        {
          yzc: '若尔盖',
          bjbh: '99715011923',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '已上传',
          jhfx: '已上传',
          ycbfx: '已上传',
          jyzxx: '已上传',
          zhyzbg: '已上传'
        },
        {
          yzc: '若尔盖',
          bjbh: '99715011924',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '已上传',
          jhfx: '已上传',
          ycbfx: '已上传',
          jyzxx: '已上传',
          zhyzbg: '已上传'
        },
        {
          yzc: '若尔盖',
          bjbh: '99715011925',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '已上传',
          jhfx: '已上传',
          ycbfx: '已上传',
          jyzxx: '已上传',
          zhyzbg: '已上传'
        },
        {
          yzc: '若尔盖',
          bjbh: '99715011926',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '已上传',
          jhfx: '已上传',
          ycbfx: '已上传',
          jyzxx: '已上传',
          zhyzbg: '已上传'
        },
        {
          yzc: '若尔盖',
          bjbh: '99715011927',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '已上传',
          jhfx: '已上传',
          ycbfx: '已上传',
          jyzxx: '已上传',
          zhyzbg: '已上传'
        },
        {
          yzc: '若尔盖',
          bjbh: '99715011928',
          jbxx: '已上传',
          xpxx: '已上传',
          yzfx: '已上传',
          jhfx: '已上传',
          ycbfx: '已上传',
          jyzxx: '已上传',
          zhyzbg: '已上传'
        }
      ],
      form: {
        page: 1,
        pagesize: 20
      },
      total: 9
    }
  },
  methods: {
    change(e) {
      this.evalue = e
      this.dialogVisible = true
    },
    // 上传
    upload() {},
    // 搜索
    searchClick() {},
    // 重置
    resetClick() {
      this.searchForm.status = this.searchForm.number = ''
    },
    // 条
    handleSizeChange(val) {
      this.form.pagesize = parseInt(val)
    },
    // 页
    handleCurrentChange(val) {
      this.form.page = parseInt(val)
    },
    // 当监测结果为 已携带 的状态，加上背景色,字体颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 注意，这里返回的是一个对象
      if (row.result == '携带' && column.label == '监测结果') {
        return 'background:#d9001b;textAlign: center;color:#fff;'
      } else {
        return 'textAlign: center'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container-box {
  min-height: calc(100vh - 84px);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .common-title {
    height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 25px;
    letter-spacing: 2px;
  }
  .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-form-item__content {
  margin-bottom: 20px;
}
/deep/.el-dialog__body {
  padding: 0px 10px 10px 10px;
}
</style>