<template>
  <div class="app-container">
    <div>
      <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">
        <el-table-column label="耗材名称" prop="conName" />
        <el-table-column label="现有库存">
          <template v-slot="scope">
            <span :class="[computedClass(scope.row.balance)]"> {{ scope.row.balance }}</span>
          </template>
        </el-table-column>
        <el-table-column label="耗材消耗" prop="conConsume" align="center" />
        <el-table-column label="耗材入库" prop="conIn" align="center" />
        <el-table-column label="耗材出库" prop="conOut" align="center" />
        <el-table-column label="耗材反还" prop="conReturn" align="center" />

        <!-- <el-table-column label="业务编码" prop="bizCode" /> -->
        <!-- <el-table-column label="业务说明" prop="bizName" /> -->
        <!-- <el-table-column label="商品名称" prop="productName" /> -->
        <!-- <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="所属商品" width="320" align="center">
          <template v-slot="scope">
            <div class="goodslang">
              <div class="goods-list">
                <el-button v-for="(item) in scope.row.product" @click="toGoods(item.productId)" :key="item.productId"
                  type="text">{{
                    item.productName }}</el-button>
              </div>
              <el-dropdown trigger="click" v-if="scope.row.product.length > 1" @command="toGoods">
                <span class="el-dropdown-link" style="color: blue;">
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item class="clearfix" v-for="(item) in scope.row.product" :key="item.productId"
                    :command="item.productId">
                    {{ item.productName }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>

        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="text" @click="lookDetail(scope.row)">查看详情</el-button>
          </template>
        </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>

    <cons-record-detail ref="recodeDetail"></cons-record-detail>
  </div>
</template>

<script>
import { gettbConsInfo } from "@/api/consumable";
import consRecordDetail from "../components/cons_record_detail";

export default {
  components: {
    consRecordDetail
  },
  data() {
    return {
      query: {
        conName: ""
      },
      clickseetableData: {
        data: [],
        page: 0,
        size: 30,
        loading: false,
        total: 0
      }
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    toGoods(productId) {
      this.$router.push({
        path: '/product/product',
        query: {
          productId: productId
        }
      })
    },
    computedClass(num) {
      if (num > 0) {
        return 'green'
      } else {
        return 'red'
      }
    },
    lookDetail(row) {
      this.$refs.recodeDetail.open({
        "consId": row.consId,
        "conName": row.conName
      })
    },
    resetHandle() {
      this.clickseetableData.page = 0;
      this.clickseetableData.size = 30;
      this.query.conName = "";
      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"),
          sort: 'createTime,desc'
        });
        this.clickseetableData.loading = false;
        this.clickseetableData.data = res.content.map(v => {
          const productIds = v.productId ? v.productId.split(',') : []
          return {
            ...v,
            product: productIds.map((str, index) => {
              const startIndex = str.indexOf('_')
              const productId = str.slice(0, startIndex)
              const productName = str.slice(startIndex + 1, str.length)
              return {
                productId,
                productName: productName + `${(index == productIds.length - 1) ? '' : ','}`
              }
            })
          }
        });
        console.log(this.clickseetableData.data)
        this.clickseetableData.total = res.totalElements;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.goodslang {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .goods-list {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
  ::v-deep .goods-list .el-button--text span {
    display: block;
    text-align: left;
  }

  ::v-deep .goods-list .el-button--text {
    white-space: break-spaces;
  }
}

.green {
  color: #13ce66;
  font-weight: bold;
}

.red {
  color: #ff4949;
  font-weight: bold;

}

::v-deep .el-table .cell {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

::v-deep .el-table th.el-table__cell>.cell {
  text-align: center;
}

.box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 90px 20px 90px;

  .boxitem {
    min-width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
    background: rgba(244, 249, 255, 0.5);
    border-radius: 10px;

    .boxitem_s {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      .boxitem_ses {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .es {
          border-left: 2px solid #DDDFE6;
          padding: 0 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .e {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 12px;
            color: #666666;
          }

          .s {
            margin-left: 10px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 15px;
            color: #3F9EFF;
          }
        }

        .es:nth-child(1) {
          margin-top: 0;
          border-left: none;
        }
      }

      .boxitem_ses:nth-child(1) {
        margin-top: 0;
      }
    }
  }
}
</style>
