<template>
  <div>
    <el-dialog width="60%" :visible.sync="dialogVisible" :title="query.conName">
      <div class="app-container">
        <!-- <div class="head-container">
          <el-form :model="query" inline>
            <el-form-item>
              <el-input v-model="query.conName" placeholder="耗材信息名称" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getTableData">查询</el-button>
              <el-button @click="resetHandle">重置</el-button>
            </el-form-item>
          </el-form>
        </div> -->
        <div class="head-container">
          <el-table
            ref="table"
            :data="clickseetableData.data"
            v-loading="clickseetableData.loading"
            row-key="id"
            height="50vh"
          >
            <el-table-column label="耗材名称" prop="conName" />
            <el-table-column label="变动库存" prop="amount">
              <template v-slot="scope">
                <span :class="{ red: scope.row.bizType == '-' }"
                  >{{ scope.row.bizType }}{{ scope.row.amount }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="现有库存" prop="balance" />
            <!-- <el-table-column label="业务编码" prop="bizCode" /> -->
            <el-table-column label="业务说明" prop="bizName" />
            <el-table-column label="商品名称" prop="productName" />
            <el-table-column label="订单编号" >
              <template v-slot="scope">
                <a class="cursor-pointer" @click="toOrderList(scope.row)">{{ scope.row.orderNo||'' }}</a>
              </template>
            </el-table-column>
            <!-- <el-table-column label="正负号标识" prop="bizType" /> -->
            <!-- <el-table-column label="耗材id" prop="consId" /> -->
            <el-table-column
              label="创建时间"
              prop="createTime"
            ></el-table-column>
            <!-- <el-table-column label="更新时间" prop="updateTime">
            <template v-slot="scope">
              {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column> -->
          </el-table>
        </div>
        <div class="head-container">
          <el-pagination
            :total="clickseetableData.total"
            :current-page="clickseetableData.page + 1"
            :page-size="clickseetableData.size"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="paginationChangetype"
            @size-change="
              (e) => {
                clickseetableData.size = e;
                clickseetableData.page = 0;
                getTableData();
              }
            "
          />
        </div>
      </div>
    </el-dialog>


    <order-detail ref="orderDetail"></order-detail>    
  </div>
</template>
  
  <script>
import { gettbConsInfo } from "@/api/consumable";
import orderDetail from "@/views/order_manage/components/orderDetail";
export default {
    components:{
        orderDetail
    },
  data() {
    return {
      query: {
        conName: "",
        consId:''
      },
      dialogVisible:false,
      clickseetableData: {
        data: [],
        page: 0,
        size: 10,
        loading: false,
        total: 0,
      },
    };
  },
  mounted() {
  },
  methods: {
    toOrderList(data){
      console.log(data)
      // if(data.orderId){
      //   this.$refs.orderDetail.show({id:data.orderId})
      // }
      this.$router.push({
        path:'/order_manage/order_list',
        query:{
            orderNo: data.orderNo
        }
     })
    },
    open(query){
        this.dialogVisible = true;
        this.query=query
        console.log(query)
        this.getTableData();
    },
    close(){
        this.dialogVisible = false;
    },
    lookDetail(row) {
      console.log(row);
    },
    resetHandle() {
      this.clickseetableData.page = 0;
      this.clickseetableData.size = 30;
      this.query.conName = "";
      this.query.consId = "";
      this.getTableData();
    },
    pageSizeChange(e) {
      this.clickseetableData.size = e;
      this.getTableData();
    },
    paginationChangetype(e) {
      this.clickseetableData.page = e - 1;
      this.getTableData();
    },
    // 查看查询耗材流水信息
    async getTableData() {
      try {
        this.clickseetableData.loading = true;
        const res = await gettbConsInfo({
          page: this.clickseetableData.page,
          size: this.clickseetableData.size,
           ...this.query,
          shopId: localStorage.getItem("shopId"),
        });
        this.clickseetableData.loading = false;
        this.clickseetableData.data = res.content;
        this.clickseetableData.total = res.totalElements;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
  <style scoped lang="scss">
.cursor-pointer{
  cursor: pointer;
  color: #1890ff;
  font-size: 12px;
  transition: all 0.3s;
}
.cursor-pointer:hover{
  opacity: .7;
}

</style>