<template>
  <div>
    <div v-if="show" class="main-container-text">
      <div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
      <div class="header">
        <el-input v-model="value" clearable placeholder="请输入内容" />
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <!--      <div class="kws-title">最近搜索</div>-->
      <!--      <el-divider />-->
      <!--      <div class="kws">-->
      <!--        <span v-for="(item,index) in searchKWs" :key="index" class="kw">{{ item }}</span>-->
      <!--      </div>-->
      <div class="kws-title">搜索结果</div>
      <el-divider />
      <div
        v-loading="loading"
        class="search-item-container"
        element-loading-text="拼命加载中"
      >
        <div v-for="item in searchItem" :key="item.code" class="search-item" @click="handleInfo(item)">
          <div class="search-img">
            <img v-if="$route.fullPath.indexOf('msds') !== -1" src="@/assets/11-化学品数据库/MSDS.png" alt="">
            <img v-else src="@/assets/11-化学品数据库/危化品.png" alt="">
          </div>
          <div class="content">
            <div class="name">{{ item.name }}</div>
            <div class="code">{{ item.cas_number }}</div>
          </div>
        </div>
      </div>
      <div class="my-pagination" style="text-align: center">
        <el-pagination
          background
          :disabled="loading"
          layout="prev, pager, next"
          :current-page.sync="page"
          :total="total"
          :page-size.sync="page_size"
          @current-change="pageChange"
        />
      </div>
    </div>
    <div v-else class="main-container-text">
      <div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
      <div class="header">
        <el-button @click="handleBack">返回上级</el-button>
        <div class="title-sub">{{ currentItem.name }}</div>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="英文名称">{{ currentItem.english_name }}</el-descriptions-item>
        <el-descriptions-item label="CAS码">{{ currentItem.cas_number }}</el-descriptions-item>
        <el-descriptions-item label="分子式">{{ currentItem.molecular_formula }}</el-descriptions-item>
        <el-descriptions-item label="分子量">{{ currentItem.molecular_weight }}</el-descriptions-item>
        <el-descriptions-item label="物理数据">{{ currentItem.physical_data }}</el-descriptions-item>
        <el-descriptions-item label="毒理数据">{{ currentItem.toxicity_data }}</el-descriptions-item>
        <el-descriptions-item label="用途">{{ currentItem.use }}</el-descriptions-item>
        <el-descriptions-item label="稳定性">{{ currentItem.stability }}</el-descriptions-item>
        <el-descriptions-item label="生态性">{{ currentItem.ecological }}</el-descriptions-item>
        <el-descriptions-item label="注意事项">{{ currentItem.precautions }}</el-descriptions-item>
        <el-descriptions-item :style="{'hight':'80px'}" />
        <el-descriptions-item v-if="$route.path.indexOf('msds') === -1" :label-style="{'background': '#ffcc99'}" label="试剂属性">{{ currentItem.drug_attribute }}</el-descriptions-item>
        <el-descriptions-item v-if="$route.path.indexOf('msds') === -1" :label-style="{'background': '#ffcc99'}">
          <template slot="label">
            存储禁忌 <i class="el-icon-warning-outline" />
          </template>
          {{ currentItem.storage_taboo }}
        </el-descriptions-item>
        <el-descriptions-item :label-style="{'background': '#ffcc99','width':'120px'}" label="储存方法">{{ currentItem.storage_method }}</el-descriptions-item>
        <el-descriptions-item :label-style="{'background': '#ffcc99'}" label="柜体储存要求">{{ currentItem.client_storage_require }}</el-descriptions-item>
        <el-descriptions-item :label-style="{'background': '#ffcc99'}" label="领用归还规定">{{ currentItem.provision }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { msds_db_list, dangerous_db_list } from '@/api/reagent/database'
import stringify from '@/utils/stringify'
export default {
  name: 'Database',
  data() {
    return {
      searchItem: [
      ],
      total: 0,
      value: '',
      currentItem: {},
      show: true,
      page: 1,
      page_size: 15,
      loading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleInfo(item) {
      this.currentItem = item
      this.show = false
    },
    handleBack() {
      this.show = true
    },
    handleSearch() {
      this.getList()
    },
    getList() {
      const data = {
        seach_word: this.value,
        page: this.page,
        page_size: this.page_size
      }
      this.loading = true
      if (this.$route.fullPath.indexOf('msds') !== -1) {
        msds_db_list(stringify(data)).then(res => {
          this.searchItem = res.data.data_list
          this.total = res.data.total_cout
        }).finally(() => { this.loading = false })
      } else {
        dangerous_db_list(stringify(data)).then(res => {
          this.searchItem = res.data.data_list
          this.total = res.data.total_cout
        }).finally(() => { this.loading = false })
      }
    },
    pageChange(page) {
      this.page = page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.main-container-text{
  min-height:calc(100vh - 110px) ;
  padding: 1rem;
  margin: 1rem;
  background: white;
  .title{
    font-size: 20px;
    font-weight: bold;
    color: #000000;
  }
  .header{
    .title-sub{
      text-align: center;
      font-size: 1.25rem;
      font-weight: 400;
      color: #303133;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }
    margin: 1rem 0 1rem 0;
    .el-input{
      width: 18.75rem;
      margin-right: 1rem;
    }
  }
  .kws{
    margin-bottom: 2rem;
      .kw{
        line-height: 3rem;
        width: 670px;
        height: 48px;
        background: #F0F0F0;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        font-size: 14px;
        font-weight: 400;
        color: #303133;
        margin-right: 1rem;
        padding: 1rem;
      }
  }
  .search-item-container{
    overflow-y: scroll;
    height: 60vh;
    .search-item{
      display: flex;
      align-items: center;
      margin-bottom: 2rem;
      .search-img img{
        width: 56px;
      }
      .content{
        margin-left: 1rem;
        .name{
          font-size: 1.125rem;
          font-weight: bold;
          color: #303133;
        }
        .code{
          margin-top: 1rem;
          font-size: 1rem;
          font-weight: 400;
          color: #909399;
        }
      }
    }
  }
}
</style>
<style>
.my-lable{
  background: #ffcc99
}
</style>
