<template>
  <div class="list-wrap">
    <div class="section-head">Configure</div>
    <div class="list-box">
      <div class="filter-wrap">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <!--<el-form-item label="Activity reference time">
            <el-date-picker v-model="queryParams.acquisition_start_begin" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
          </el-form-item>
          <el-form-item label="Concentration reference time">
            <el-date-picker v-model="queryParams.acquisition_start_end" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
          </el-form-item>-->

          <el-form-item label="Create time">
            <el-date-picker
                v-model="dateRage"
                type="daterange"
                range-separator="至"
                start-placeholder="start"
                end-placeholder="end"
                value-format="YYYY-MM-DD"
                class="dark-date-picker"
                popper-class="dark-date-picker"
                @change="dateChange"></el-date-picker>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Select</el-button>
            <el-button type="primary" icon="document" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSave">Save</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" stripe style="width: 100%" class="dark-table">
        <el-table-column fixed type="index" label="NO" width="80"></el-table-column>
        <el-table-column prop="xe131m_conc" label="XE131M_CONC"></el-table-column>
        <el-table-column prop="xe131m_mdc" label="XE131M_MDC"></el-table-column>
        <el-table-column prop="xe133_conc" label="XE133_CONC"></el-table-column>
        <el-table-column prop="xe133_mdc" label="XE133_MDC"></el-table-column>
        <el-table-column prop="xe133m_conc" label="XE133M_CONC"></el-table-column>
        <el-table-column prop="xe133m_mdc" label="XE133M_MDC"></el-table-column>
        <el-table-column prop="xe135_conc" label="XE135M_CONC"></el-table-column>
        <el-table-column prop="xe135_mdc" label="XE135M_MDC"></el-table-column>
        <el-table-column prop="ev_type" label="TYPE">
          <template #default="scope">
            <el-input v-model="scope.row.ev_type" class="dark-input"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrap">
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size" class="dark-pagination" @pagination="onSearch" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        page: 1,
        size: 10,
        create_time_begin: '',
        create_time_end: '',
      },
      tableData: [],
      dateRage: [],
      typeData: {}
    }
  },
  created () {
    this.onSearch()
  },
  methods: {
    onSearch () {
      this.loading = true
      this.$axios.get(window.CONFIG.baseUrl + '/nuclide/query_samples', { params: this.queryParams }).then((res) => {
        this.tableData = res.data.items
        this.total = res.data.pagination.total_count
      }).finally(() => {
        this.loading = false
      })
    },
    dateChange(dates) {
      this.queryParams.create_time_begin = dates[0]
      this.queryParams.create_time_end = dates[1]
    },
    async onSave() {
      debugger
      this.typeData = {}
      this.tableData.forEach(item => {
        if (item.ev_type) {
          this.typeData[item.sample_id] = item.ev_type
        }
      })
      const res = await this.$axios.post(window.CONFIG.baseUrl + '/nuclide/batch_mark_samples', this.typeData)
      this.$message.info(res.message)
    },
  },
}
</script>

<style scoped lang="scss">
.list-wrap {
  overflow: hidden;
  color: #fff;
  .section-head {
    height: 32px;
    padding: 0 13px;
    background-color: #1c2630;
    border-left: 4px solid #be8728;
    font-family: MICROGRAMMADMEDEXT;
    font-size: 20px;
    font-weight: bold;
  }
  .list-box {
    .filter-wrap {
      margin-top: 16px;
      ::v-deep .el-form-item__label {
        font-size: 16px;
        color: #a7bacf;
      }
    }
    .dark-table {
      width: 100%;
    }
  }
  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0;
  }
}
</style>
