<template>
  <div>
    <el-card :body-style="cardBodyStyle">
      <el-form inline>
        <el-row :span="24">
          <el-col :span="5">
            <el-form-item label="物料名称" prop="">
              <el-select v-model="query.leibiemc" placeholder="请选择物料名称" filterable clearable style="width: 200px;">
                <el-option v-for="item in typeList" :key="item.itemCd" :label="item.itemNm"
                           :value="item.itemNm"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="委托编号" prop="">
              <el-input v-model="query.id" placeholder="请输入委托编号" clearable style="width: 200px;">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="委托状态" prop="">
              <el-select v-model="query.weituoztMc" placeholder="请选择委托状态" clearable style="width: 200px;">
                <el-option v-for="item in weituozt" :key="item.zhuangtaibm" :label="item.zhuangtaimc"
                           :value="item.zhuangtaimc"></el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col :span="5">
            <el-form-item label="样品类型" prop="">
              <el-select v-model="query.smpType" placeholder="请选择样品类型" clearable style="width: 200px;">
                <el-option v-for="item in smpTypeList" :key="item.bm" :label="item.wtmc"
                           :value="item.bm"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">

            <el-button type="primary" link @click="show">
              高级查询
              <el-icon v-if="showNode">
                <ArrowUp/>
              </el-icon>
              <el-icon v-else>
                <ArrowDown/>
              </el-icon>
            </el-button>
            <el-button type="primary" link @click="reset">
              重置
            </el-button>
          </el-col>
        </el-row>
        <el-row v-if="showNode">
          <el-col :span="5">
            <el-form-item label="取样编号" prop="">
              <el-input v-model="query.quyangbh" placeholder="请输入取样编号" clearable style="width: 200px;">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="创建时间" prop="">
              <el-date-picker v-model="query.chuangjiansj" type="datetimerange" align="right" unlink-panels
                              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                              style="width: 400px;" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-card>
    <el-card :body-style="cardBodyStyle">
      <el-button type="primary" plain @click="handleSearch">查询</el-button>
    </el-card>


    <el-card :body-style="cardBodyStyle">
      <el-table :data="tableData" height="230" border highlight-current-row @row-click="handleRowClick"
                @selection-change="handleSelectionChange">

        <el-table-column v-if="true" prop="id" label="委托编号" width="200" header-align="center" align="center"
                         show-overflow-tooltip fixed>
        </el-table-column>

        <el-table-column v-if="true" prop="chuangjianname" label="创建人" width="200" header-align="center"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>

        <el-table-column v-if="true" prop="quyangbh" label="取样编号" width="200" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="wulizybh" label="物理制样编号" width="200" header-align="center"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="huaxuezybh" label="化学制样编号" width="200" header-align="center"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>

        <el-table-column v-if="true" prop="weituoztMc" label="委托状态" width="200" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="chuangjiansj" label="创建时间" width="200" header-align="center"
                         align="center"
                         show-overflow-tooltip fixed="right">
        </el-table-column>
      </el-table>

    </el-card>
    <el-card :body-style="cardBodyStyle">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                     background="background" layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
  </div>
  <div>

    <el-card :body-style="cardBodyStyle">
      <el-tabs type="border-card">
        <el-tab-pane label="日志追踪">
          <el-table :data="tableData_RZ" border highlight-current-row
                    height="300">
            <el-table-column prop="weituoId" label="委托编号" width="200" header-align="center" align="center"
                             show-overflow-tooltip fixed>
            </el-table-column>
            <el-table-column prop="caozuonr" label="操作内容" width="160" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="xiugaiqnr" label="修改前内容" width="350" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="xiugaihnr" label="修改后内容" width="350" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="ipdz" label="IP地址" width="160" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="caozuorname" label="操作人" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="caozuosj" label="操作时间" width="180" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes"
                      :total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
                      @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination> -->
    </el-card>
  </div>
</template>

<script setup>
import SearchBox from '@/components/SearchBox.vue'
import ButtonBar from '@/components/ButtonBar.vue'
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance
} from 'vue'
import style from '@/tools/style.js'
import {ElMessage, ElMessageBox} from "element-plus";


onMounted(() => {
  queryWTLXType()
  queryType()
  handleSearch()
  queryWeiTuoZT()
})

const {proxy} = getCurrentInstance()
const cardBodyStyle = ref(style.card)
const dialogVisible = ref(false)


const query = ref({
  id: '',
  leibiemc: '',
  weituoztMc: '',
  quyangbh: '',
  chuangjiansj: '',
  smpType: '',
})

const showNode = ref(false)
const show = () => {
  showNode.value = !showNode.value
}


let dept = localStorage.getItem('dept')
dept = JSON.parse(dept)
let deptCode = dept[0].deptCode

// 查询委托状态
const weituozt = ref([])
const queryWeiTuoZT = () => {
  var url = 'sci/platform/queryWeiTuoZT'
  var param = {}
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      weituozt.value = response.data.data
      console.log(response.data.data)
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const smpTypeList = ref([])
// 查询委托类型
const queryWTLXType = () => {
  var url = 'sci/Weituogl/query_YLType'
  var param = {}
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      smpTypeList.value = response.data.data
      // console.log(smpTypeList.value)
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
/**
 * 重置查询条件
 */
const reset = () => {
  Object.keys(query.value).map(key => {
    query.value[key] = ''
  })
}

// 查询 物料名称
const typeList = ref([])
const queryType = () => {
  var url = 'sci/platform/queryType'
  var param = {}
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      typeList.value = response.data.data
      console.log(response.data.data)
      console.log(typeList.value)
      totalRows.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
// ==========按钮功能==========
// 搜索
const handleSearch = () => {
  currentPage.value = 1
  getTableData()
  tableData_RZ.value = []
}


const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(val)
}

// 批量编辑

// ==========查询数据===========
const tableData = ref([])
const listKey = ref([])
const getTableData = () => {
  var url = 'sci/dataModify/query'
  var param = {
    page: currentPage.value,
    rows: pageSize.value,
    params: JSON.stringify(query.value),
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      listKey.value = []
      tableData.value = response.data.data.records

      console.log(tableData.value)
      const uniqueKeysSet = tableData.value.reduce((keySet, currentObj) => {
        Object.keys(currentObj).forEach(key => keySet.add(key));
        return keySet;
      }, new Set());
      listKey.value = Array.from(uniqueKeysSet);
      listKey.value = listKey.value.filter(x => x !== 'ROW_ID');
      totalRows.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
};

// ==========查询物理数据===========
const tableData_RZ = ref([])
const getTableData_RZ = (id) => {
  var url = 'sci/rizhi/query'
  var param = {
    id: id,
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableData_RZ.value = response.data.data
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
};

/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSize = ref(5)
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
  tableData_RZ.value = []
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
  tableData_RZ.value = []
}
/**
 * 分页
 */

// 点击行时执行的操作
const top_row = ref({})
const handleRowClick = (row) => {
  console.log(row.id, "1111111111")
  getTableData_RZ(row.id)
};

</script>

<style></style>