<template>
  <div class="page_container">
    <div class="report_container">
      <div class="table_title">报表数据</div>
      <div>
        <vxe-input
          class="search-input"
          v-model="keyWord"
          prefix-icon="vxe-icon-search"
          placeholder="搜索"
          @blur="queryTableList"></vxe-input>
      </div>
      <div class="table_container">
        <vxe-table :data="tableData" :columns="columns" stripe height="380px">
          <vxe-column
            v-for="col of columns"
            :field="col.field"
            :title="col.title"
            :min-width="col.width"></vxe-column>
          <vxe-column title="操作" width="260">
            <template #default="{ row }">
              <div class="operate-container">
                <span @click="goDetail(row)">查看详情</span>
                <span @click="delitem(row)" class="del">删除</span>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="foot_btn">
        <div class="exit">
          <CommonButton
            class="back_btn"
            size="default"
            type="info"
            msg="返回"
            @click="router.push('/home')" />
        </div>
      </div>
    </div>
  </div>
  <ResetConfirm
    msg="确定删除吗？"
    :visibile="del"
    @confirm="delUserCor"
    @cancel="del = false" />
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getExperimentListApi,delExperimentApi } from '@/api/equipment';
import { notify } from '@/utils/message.js';
const router = useRouter();
let keyWord = ref('');
const del = ref(false);
const delId = ref('');
let tableData = ref([{}]);
let columns = [
  { field: 'name', title: '样品名称', width: 300 },
  { field: 'specimen_code', title: '样品编号', width: 150 },
  { field: 'experiment_times', title: '试验次数', width: 150 },
  { field: 'min_ignition_temp', title: '最低着火温度', width: 300 }
  // { field: 'created_time', title: '试验时间', width: 300 },
  // { field: 'result', title: '实验人', width: 300 }
];
// 获取列表
const queryTableList = async () => {
  const p = {
    page_no: 1,
    page_size: 10000,
    name: keyWord.value
  };
  let res = await getExperimentListApi(p);
  let { code, message } = res.data;
  if (!code) {
    return notify(message, 'danger');
  } else {
    // tableData.value = res.data.data;
    tableData.value = res.data.data.map((item) => {
      if(item.min_ignition_temp){
        item.min_ignition_temp =(item.min_ignition_temp*1).toFixed(2);
      }
      return item;
    });
  }
};
queryTableList();

const goDetail = (row) => {
  router.push({
    path: '/report/detail',
    query: {
      experiment_id: row.specimen_id
    }
  });
};
const delUserCor = async () => {
  console.log(delId.value.specimen_id,'90909');
  let res = await delExperimentApi({id: delId.value});
  let { code, desc } = res.data;
  if (!code) {
    return notify(desc, 'danger');
  } else {
    del.value =false
    notify(desc, 'success');
    queryTableList();
  }
}
const delitem=(row)=>{
  del.value=true
  delId.value=row.specimen_id
  console.log(delId.value,'9090');

}
</script>
<style lang="less" scoped>
@SIZE: 48px;
.page_container {
  overflow: auto;
}

.report_container {
  width: 100%;
  //height: 100%;
  background: #f6f6f6;
  box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #cccccc;
  padding: 52px 40px 35px 40px;

  .table_title {
    font-weight: bold;
    font-size: @SIZE;
    color: #3a3a3a;
    margin-bottom: 30px;
  }

  .table_container {
    //height: 550px;
    //margin-bottom: 60px;
  }

  .operate-container {
    display: flex;
    justify-content: space-evenly;
    color: #208be9;
    .del{
      color: red;
    }
  }

  .foot_btn {
    width: 100%;
    background: #ffffff;
    align-items: center;
    position: fixed;
    padding: 19px 41px 40px 40px;
    bottom: 0;
    left: 0;
    .back_btn {
      margin-right: 180px;
    }
  }
}

:deep(.vxe-header--column) {
  text-align: center !important;
}
.search-input {
  width: 1760px;
  height: 100px;
  font-size: 40px;
  margin-bottom: 20px;
  // margin-left: 40px;
}
.exit {
  width: 200px;
}
</style>
