<template>
  <div class="container">
    <div class="tabs">
      <div class="headerText">
        <div class="searchP">查询条件</div>
      </div>
      <div class="screen">
        <div class="task-name">
          <span class="task-name-text">产品名称：</span>
          <div class="task-input">
            <el-input
              v-model="queryCondition.firmName"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="task-name">
          <span class="task-name-text">备案编码：</span>
          <div class="task-input">
            <el-input
              v-model="queryCondition.PrescriptionContent"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="task-name">
          <span class="task-name-text">生产企业：</span>
          <div class="task-input">
            <el-input
              v-model="queryCondition.majorFunction"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="footBox">
        <el-button icon="el-icon-refresh-left">重置</el-button>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </div>
    </div>
    <div class="tabsBottom">
      <div class="foot-main">
        <div class="headerText">
          <div class="searchP">产品列表</div>
        </div>
        <div class="exportBtn">
          <el-button type="primary" icon="el-icon-edit-outline">导出</el-button>
        </div>
        <section class="table-box">
          <div class="table-item">
            <el-table
              v-loading="loading"
              :data="tableList"
              border
              :stripe="false"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column type="index" label="序号" width="55" />

              <el-table-column label="产品名称" prop="name" />
              <el-table-column label="产品类型" prop="type"> </el-table-column>

              <el-table-column label="批准文号" prop="num" />
              <el-table-column label="企业名称" prop="enterpriseName">
              </el-table-column>
              <el-table-column
                label="操作"
                class-name="small-padding fixed-width"
                width="150"
              >
                <template>
                  <el-button
                    size="mini"
                    plain
                    type="primary"
                    @click="toDetail()"
                    >详情</el-button
                  >
                  <el-button size="mini" plain type="warning">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
        <div class="pagination">
          <span class="custom">共100条，显示1条</span>
          <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-sizes="[10, 5]"
            layout=" prev, pager, next, sizes, jumper"
            :total="querydata.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 药品 国抽详情 -->
    <drugDetail ref="drugDetail"></drugDetail>
    <!-- 化妆品-->
    <samplingDetail ref="sampling"></samplingDetail>
    <!-- 药品 省抽详情 -->
    <drugProvince ref="drugProvince"></drugProvince>
    <!-- 医疗器械详情 -->
    <medical ref="medical"></medical>
  </div>
</template>
  
  <script>
import drugDetail from "../../cosmeticsFile/drugDetail";
import samplingDetail from "../../cosmeticsFile/samplingDetail";
import drugProvince from '../../cosmeticsFile/drugProvince';
import medical from '../../cosmeticsFile/medical'
export default {
  components: {},
  data() {
    return {
      drugnum: "(20)",
      activeName: "first",
      queryCondition: {
        fullTextSearch: "", // 全文检索
        firmName: "", // 企业名称
        approvalNumber: "", // 批准文号
        taskName: "", // 产品名称
        PrescriptionContent: "", // 处方内容
        majorFunction: "", // 功能主治
        startTime: "", // 开始日期
        endTime: "", // 结束日期
        checkList: [],
        checkListTwo: [],
      },
      loading: false,
      tableList: [
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "药品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "医疗器械",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
        {
          name: "辽宁护肤霜",
          type: "化妆品",
          num: "1231231231231",
          enterpriseName: "xxxx有限公司",
        },
      ],
      querydata: {
        total: 11,
      },
    };
  },
  components: {
    samplingDetail,
    drugDetail,
    drugProvince,
    medical
  },
  mounted() {},
  methods: {
    currentChange() {},
    sizeChange() {},
    toDetail() {
      this.$router.push({
        name: "化妆品详情",
        path: "/productsMsg/cosmeticsDetail",
      });
      // this.$refs.sampling.open()
      // this.$refs.drugDetail.open();
      // this.$refs.drugProvince.open();
      // this.$refs.medical.open();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
::v-deep .el-table--medium .el-table__cell {
  padding: 4px 0;
}
.container {
  height: 100%;
  box-sizing: border-box;
  background: #f2f2f2;

  .headerText {
    width: 100%;
    padding: 10px 20px;
    border-bottom: 1px solid #f2f3f5;
    color: #323233;
    font-size: 20px;
    font-weight: bold;
    .searchP {
      position: relative;
      cursor: pointer;
      &::before {
        content: "";
        width: 78px;
        height: 3px;
        background: #1349c5;
        position: absolute;
        bottom: -10px;
      }
    }
  }
  .tabs {
    height: 25%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
    border-radius: vw(10);
    padding-bottom: 20px;
    //   min-height: 90vh;
    // padding-top: 3px;
    // padding-left: 15px;
  }
  .screen {
    padding: 15px 0 26px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .task-name {
      display: flex;
      align-items: center;
      margin-right: 30px;
      .task-name-text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #6a6c6f;
        line-height: 50px;
        // margin-right: vw(10);
      }
      .task-input {
        width: 251px;
        height: 32px;
        ::v-deep .el-input {
          width: 251px;
          height: 32px;
        }
        ::v-deep .el-input__inner {
          width: 100%;
          height: 100%;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          // color: #B1B6BF;
          line-height: 50px;
          padding-left: 15px;
        }
      }
    }
    .checkbox-group-name {
      width: 695px;
    }
    .time-interval {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .interval-text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #6a6c6f;
        // line-height: 50px;
        // margin-right: vw(10);
      }
      .interval-select {
        display: flex;
        align-items: center;
        border: 1px solid #dbe0e8;
        border-radius: 4px;
        height: 32px;
        .star-time,
        .end-time {
          position: relative;
          .data_icon {
            position: absolute;
            top: 50%;
            right: 17px;
            z-index: 9;
            color: #c0c4cc;
            font-size: 14px;
            transform: translateY(-50%);
          }
          ::v-deep .el-input__prefix {
            display: none;
          }
          ::v-deep .el-input {
            width: 243px;
            height: 30px;
          }
          ::v-deep .el-input__inner {
            width: 100%;
            height: 100%;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            // color: #B1B6BF;
            line-height: 30px;
            padding-left: 15px;
            border: none;
            cursor: pointer;
          }
        }
        .symbol {
          background: rgba(219, 224, 232, 0.5);
          width: 40px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #292f38;
          line-height: 28px;
        }
      }
    }
  }
}
//===================
::v-deep .el-button--medium {
  padding: 8px;
}
.footBox {
  width: 100%;
  text-align: center;
}
.tabsBottom {
  height: 75%;
  padding-top: 10px;
  .foot-main {
    height: 100%;
    width: 100%;
    background: white;
  }
}
.exportBtn {
  padding: 10px 20px;
}
.table-box {
  padding: 0 20px;
  .table-item {
  }
}
.pagination {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  padding-top: 20px;
}
</style>
  