<template>
  <div>
    <div>
      <div>
        <div>
          <div class="tab-top">
            <div class="fl">
              <el-input :placeholder="placeholderText" v-model="query.key" class="mr10 w360" clearable @change="getSearchList" @clear="getSearchList2">
                <el-select v-model="query.type" slot="prepend" placeholder="礼品名称" style="width:140px;" @change="handleChangeType">
                  <el-option label="礼品名称" :value="1"></el-option>
                  <el-option label="礼品编码" :value="2"></el-option>
                  <el-option label="条形码" :value="3"></el-option>
                  <el-option label="福利id" :value="0"></el-option>
                </el-select>
              </el-input>
              <el-select v-model="query.hiddenFlag" placeholder="所有礼品状态" class="w-160 mr10" clearable @change="getSearchList">
                <el-option label="显示" :value="0"></el-option>
                <el-option label="隐藏" :value="1"></el-option>
              </el-select>
              <el-button v-if="!unfoldStatus" type="text" @click="handleUnfold" >展开<i class="el-icon-arrow-down"></i></el-button>
              <el-button v-if="unfoldStatus" type="text" @click="handleUnfold" >收起<i class="el-icon-arrow-up"></i></el-button>
            </div>
            <div class="fr">
              <!-- <el-select v-model="batchOperate" placeholder="批量操作" class="w-160 mr10 more-select" :disabled="selectList.length < 1" @change="handleBatch"> -->
              <el-select placeholder="批量操作" class="w-160 mr10 more-select" @change="handleBatch">
                <el-option label="批量隐藏" :value="0"></el-option>
                <el-option label="批量取消隐藏" :value="1"></el-option>
                <el-option label="批量禁用" :value="2"></el-option>
                <el-option label="批量启用" :value="3"></el-option>
              </el-select>
              <el-button type="primary" @click="add">新建礼品</el-button>
            </div>
          </div>
          <div style="margin: 20px 20px 0px 20px;background: #F7F8FA;height:124px;padding-top:20px" v-if="unfoldStatus">
            <div style="height:32px">
              <div class="spanclass" style="margin-left:20px;color:#303133">福利成本：</div>
              <dm-input-amount precision="2" :min="0" :max="9999999.99" class="mr10 ml10" v-model.trim="query.startCostPrice" @change="getSearchList"></dm-input-amount>
              <div class="spanclass" style="color:#303133">至</div>
              <dm-input-amount precision="2" :min="0" :max="9999999.99" class="mr40 ml10" v-model.trim="query.endCostPrice" @change="getSearchList"></dm-input-amount>
              <div class="spanclass" style="margin-right:28px;color:#303133">更新时间：</div>
              <el-select v-model="sortData" placeholder="由近及远" clearable class="w-160 mr10 more-select" @change="handleSort">
                <el-option label="由近及远" :value="0"></el-option>
                <el-option label="由远及近" :value="1"></el-option>
              </el-select>
            </div>
            <div class="mt20" style="height:32px;">
              <div class="spanclass" style="margin-left:20px;color:#303133">可占库存：</div>
              <dm-input-number precision="0" :min="0" :max="9999999" class="mr10 ml10 w140" v-model="query.startStock" placeholder="请输入" @change="getSearchList"></dm-input-number>
              <div class="spanclass" style="color:#303133">至</div>
              <dm-input-number precision="0" :min="0" :max="9999999" class="ml10 mr40 w140" v-model="query.endStock" placeholder="请输入" @change="getSearchList"></dm-input-number>
              <div class="spanclass" style="color:#303133">更新时间范围：</div>
              <el-date-picker v-model="timeValue" @change="changeTime" type="datetimerange" class="w350" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
            </div>
          </div>
        </div>
        <div class="table-content" v-loading="loading">
          <el-table :data="tableData" ref="multipleTable" style="width: 100%" @sort-change="sortChange" @selection-change="handleSelectAll">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="礼品信息" width="350px">
              <template slot-scope="scope">
                <div class="img-text">
                  <dm-preview-img :img="scope.row.giftImgUrl" style="display:inline-block;border: 1px solid #dcdfe6;padding:4px;border-radius:2px;" width="50" height="50"></dm-preview-img>
                  <div class="text">
                    <div style="display:flex;flex-direction:column;justify-content:center;margin-top:8px">
                      <p class="goods-descript">
                        <el-popover open-delay="200" trigger="hover" class="item" placement="top">
                          <div>{{ scope.row.giftName }}</div>
                          <span class="inline-block hidden-data" slot="reference">{{ scope.row.giftName || '--' }}</span>
                        </el-popover>
                        <el-popover placement="top" trigger="click" :value="scope.row.visible" @show="getName(scope.row)" v-if="scope.row.edit==1">
                          <div>
                             <el-input show-word-limit style="width:260px" type="text" v-model="changeName"   :maxlength="30" />
                          </div>
                          <div class="popver-button" style="margin-top:18px;text-align:right">
                            <el-button class="cancle-button" type="dafault" style="line-height:22px;padding:0 5px;min-width: auto!important" size="small" @click="onCancel(scope.row)">取消</el-button>
                            <el-button type="primary" style="line-height:22px;padding:0 5px;min-width: auto!important" size="small" class="ml10 ml10" @click="handleName(scope.row)">确认</el-button>
                          </div>
                          <i class="el-icon-edit-outline inline-block ml5" slot="reference"></i>
                        </el-popover>
                      </p>
                      <p class="goods-code">
                        <el-popover trigger="hover" open-delay="200" placement="top">
                          <div>
                            <p>福利id：{{ scope.row.giftId }}</p>
                            <div>更新时间：<p class="inline-block" v-html="formatDateTimeByType(scope.row.updateTime)"></p></div>
                          </div>
                          <i class="el-icon-question inline-block mr4" slot="reference"></i>
                        </el-popover>
                        礼品编码：{{ scope.row.giftNo || '--' }}
                      </p>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="costPrice" label="成本" sortable="custom" min-width="100px">
              <template slot-scope="scope">
                <p class="stock-box">
                  <span v-if="scope.row.minCostPrice == scope.row.maxCostPrice">{{ scope.row.minCostPrice.toFixed(2) }}</span>
                  <span v-else>{{ scope.row.minCostPrice.toFixed(2) }}-{{ scope.row.maxCostPrice.toFixed(2) }}</span>
                  <i class="el-icon-edit-outline inline-block ml5" @click="updateCost(scope.row)" v-if="scope.row.edit==1"></i>
                </p>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" label="可占用库存" min-width="150px" prop="stock">
              <template slot="header">
                <el-tooltip open-delay="200" effect="dark" style="width:250px" placement="top" >
                  <span class="undeline-dash">可占用库存</span>
                  <span slot="content" style="width:240px">
                    可占库存：福利可以被直接使用和被应用占用的数量；<br>
                    已占用：福利已经被应用通过”固定库存“方式占用的数量；<br>
                    总库存：福利实际未产生履约单，还可以被出库的数量；<br>
                    总出库量：福利从创建到现在已生成履约单的数量；
                  </span>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div>
                  <p class="stock-box">
                    <el-popover open-delay="200" trigger="hover" placement="top">
                      <div>
                        <p class="goods-code">已占用：{{ scope.row.occupyStock }}</p>
                        <p class="goods-code">总库存：{{ scope.row.totalStock }}</p>
                      </div>
                      <i class="el-icon-question inline-block mr4" slot="reference" style="color:#909399"></i>
                    </el-popover>
                    <span>可占库存：{{ scope.row.remainedStock }}</span>
                    <i class="el-icon-edit-outline inline-block ml5" @click="updateStock(scope.row)" v-if="scope.row.edit==1"></i>
                  </p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="totalStock" label="总出库量" min-width="100px">
              <template slot="header">
                <el-tooltip open-delay="200" effect="dark" style="width:250px" placement="top">
                  <span class="undeline-dash">总出库量</span>
                  <span slot="content" style="width:240px">
                    可占库存：福利可以被直接使用和被应用占用的数量；<br>
                    已占用：福利已经被应用通过”固定库存“方式占用的数量；<br>
                    总库存：福利实际未产生履约单，还可以被出库的数量；<br>
                    总出库量：福利从创建到现在已生成履约单的数量；
                  </span>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.totalOutStock || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="hiddenFlag" label="是否隐藏" min-width="100px">
              <template slot="header">
                <el-tooltip open-delay="200" effect="dark" style="width:250px" placement="top">
                  <span class="undeline-dash">是否隐藏</span>
                  <span slot="content" style="width:240px">
                    隐藏后福利组件中不展示，其他应用不可增加占用数量，已占用的库存不影响使用
                  </span>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-switch v-model="scope.row.hiddenFlag" :disabled="scope.row.statusFlag === 0 && scope.row.hiddenFlag === 1 && scope.row.edit==1" :active-value="1" :inactive-value="0"  @change="changeShow(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="170px" fixed="right">
              <template slot-scope="scope">
                <div style="font-size:0px">
                  <el-button type="text" @click="edit(scope.row, 2)" v-if="scope.row.edit==1">编辑</el-button>
                  <el-button type="text" @click="$router.push('/gift-manage/real-stock-list?id=' + scope.row.giftId)">库存记录</el-button>
                  <!-- <dm-perm-button type="text" @click="edit(scope.row, 2)">编辑</dm-perm-button>
                  <dm-perm-button type="text" @click="$router.push('/gift-manage/real-stock-list?id=' + scope.row.giftId)">库存记录</dm-perm-button> -->
                  <dm-delete v-if="scope.row.statusFlag === 0 && scope.row.edit==1" @confirm="changeStatus(scope.row)" tips="是否启用？">
                    <el-button type="text">启用</el-button>
                  </dm-delete>
                  <el-button type="text" v-if="scope.row.statusFlag === 1 && scope.row.edit==1" @click="changeStatus(scope.row)">禁用</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-conteiner" style="background:#fff;" v-show="total > 0">
            <div class="pagination">
              <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="query.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next" :total="total" v-if="total != 0"> </dm-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 调整成本 -->
    <update-real-cost v-if="updateCostDialog" :update-cost-data="updateCostData" @closeUpdateCost="closeUpdateCost" @getTableList="getTableList"></update-real-cost>
    <!-- 调整库存 -->
    <update-real-stock :stock-data="stockData" v-if="StockDialog" @getTableList="getTableList" @closeUpdateStock="closeUpdateStock"></update-real-stock>
  </div>
</template>
<script>
import { page, formate } from '@/mixins/table.js';
import { formatDateTimeByType, listTime } from '@/utils/index.js';
import UpdateRealCost from './module/update-real-cost.vue';
import updateRealStock from './module/update-real-stock.vue';
import api from '@/api/gift.js';
const { giftPage, batchUpdate, updateName } = api;
export default {
  components: {
    UpdateRealCost,
    updateRealStock,
  },
  data() {
    return {
      bread: [
        {
          breadName: '福利中心'
        },
        {
          breadName: '礼品管理'
        },
        {
          breadName: '实物礼品'
        }
      ],
      mixins: [ page, formate ],
      formatDateTimeByType,
      listTime,
      unfoldStatus: false,
      sortData: 0,
      query: {
        // giftName: '',
        // giftNo: '',
        // giftId: '',
        // giftBarNo: '',
        hiddenFlag: '',
        startTime: '',
        endTime: '',
        startCostPrice: '',
        endCostPrice: '',
        startStock: undefined,
        endStock: undefined,
        sortColumn: '',
        sortOrder: '',
        currentPage: 1,
        pageSize: 20,
        type: 1,
        key: ''
      },
      batchOperate: '',
      total: 0,
      tableData: [],
      selectList: [],
      // 更新成本数据
      updateCostData: {
        costPrice: '',
        id: '',
        textarea: ''
      },
      updateCostDialog: false,
      // 更新名称
      updateNameForm: {
        name: '',
        id: '',
        type: ''
      },
      updateNameDialog: false,
      // 更新库存
      stockData: {
        id: '',
        remainedStock: '',
        textarea: '',
      },
      StockDialog: false,
      integralDialog: false,
      loading: false,
      search: '',
      searchType: 1,
      placeholderText: '请输入礼品名称',
      isShow: false,
      timeValue: '',
      changeName: ''
    };
  },
  created() {
    this.$emit('updateBread', this.bread);
    this.$emit('showAside', true);
    this.init();
  },
  methods: {
    init() {
      // this.searchType = 1;
      this.getTableList();
    },
    getSearchList() {
      this.query.currentPage = 1;
      this.getTableList();
    },
    getSearchList2() {
      this.query.type = 1;
      this.query.currentPage = 1;
      this.getTableList();
      this.handleChangeType();
    },
    onCancel(row) {
      row.visible = false;
    },
    // 列表筛选条件更改
    handleChangeType() {
      if (this.query.type === 1) {
        this.placeholderText = '请输入礼品名称';
      } else if (this.query.type === 2) {
        this.placeholderText = '请输入礼品编码';
      } else if (this.query.type === 3) {
        this.placeholderText = '请输入条形码';
      } else if (this.query.type === 0) {
        this.placeholderText = '请输入福利id';
      }
      // console.log(this.searchType);
    },
    // 实物礼品列表
    getTableList() {
      this.loading = true;
      console.log('获取列表详情');
      let params = {
        ...this.query,
        giftType: 1
      };
      giftPage(params).then(res =>{
        this.tableData = res.result.result;
        this.tableData.forEach(item =>{
          this.$set(item, 'visible', false);
        });
      }).finally(() => this.loading = false);
    },
    handleSizeChange(value){
      this.query.pageSize = value;
      this.getTableList();
    },
    handleCurrentChange(value){
      this.query.currentPage = value;
      this.query.pageSize = 1;
      this.getTableList();
    },
    // 展开与收起
    handleUnfold(){
      this.unfoldStatus = !this.unfoldStatus;
    },
    // 由近及远，由远及近
    handleSort(value){
      if(value == 0){
        this.query.sortOrder = 'desc';
      }else{
        this.query.sortOrder = 'asc';
      }
      this.query.sortColumn = 'update_time';
      this.getTableList();
    },
    // 排序
    sortChange(value) {
      if (value.order == 'ascending') {
        this.query.sortOrder = 'asc';
      } else if (value.order == 'descending') {
        this.query.sortOrder = 'desc';
      }
      if (value.prop === 'updateTime') {
        this.query.sortColumn = 'update_time';
      } else if (value.prop === 'costPrice' && value.order == 'ascending') {
        this.query.sortColumn = 'min_cost_price';
      } else if (value.prop === 'costPrice' && value.order == 'descending') {
        this.query.sortColumn = 'min_cost_price';
      } else if (value.prop === 'stock') {
        this.query.sortColumn = 'remained_stock';
      }
      this.getTableList();
      // min_cost_price asc 成本价
      // max_cost_price desc
    },
    changeTime(){
      if(this.timeValue){
        this.query.startTime = this.formatDateTimeByType(this.timeValue[0], 'yyyy-MM-dd-HH-mm-ss');
        this.query.endTime = this.formatDateTimeByType(this.timeValue[1], 'yyyy-MM-dd-HH-mm-ss');
      }else{
        this.query.startTime = '';
        this.query.endTime = '';
      };
      this.query.currentPage = 1;
      this.query.pageSize = 20;
      this.getTableList();
    },
    handleSelectAll(val) {
      this.selectList = val;
    },
    // 批量操作
    handleBatch(value) {
      console.log(value);
      if(this.selectList.length == 0) {
        return this.$message.warning('请选择礼品');
      }
      let goodsIdArr = [];
      for (let item of this.selectList) {
        goodsIdArr.push(item.giftId);
      }
      let params = {
        giftIdList: goodsIdArr,
        type: value
      };
      if(value == 2){
        this.$confirm('<div>确认禁用该礼品吗？</div><div>禁用礼品将在福利组件不展示，并且该礼品参加的活动将全部失效。', '', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '批量禁用',
        })
          .then(() => {
            this.batchRequest(params);
            console.log('批量禁用');
          });
      }else if(value == 0){
        this.$confirm('<div>确认批量隐藏?</div>', '', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '批量隐藏',
        })
          .then(() => {
            this.batchRequest(params);
            console.log('批量隐藏');
          });
      }else if(value == 1){
        this.$confirm('<div>确认批量取消隐藏?</div>', '', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确认',
        })
          .then(() => {
            this.batchRequest(params);
            console.log('批量取消隐藏');
          });
      }else if(value == 3){
        this.$confirm('<div>确认批量启用?</div>', '', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '批量启用',
        })
          .then(() => {
            this.batchRequest(params);
            console.log('批量启用');
          });
      }
    },
    batchRequest(params) {
    // batchRequest() {
      batchUpdate(params).then(res => {
        if(res.code === '0000'){
          this.$message.success('操作成功');
          this.getTableList();
        }else{
          this.$message.error(res.message);
        }
      });
      console.log('批量操作');
    },
    // 显示与隐藏
    changeShow(item){
      console.log(item.statusFlag, item.hiddenFlag);
      // if(item.statusFlag == 0 && item.hiddenFlag == 0){
      //   this.$confirm('<div>该礼品已禁用，不可关闭隐藏状态?</div>', '提示', {
      //     closeOnClickModal: false,
      //     showClose: false,
      //     type: 'warning',
      //     customClass: 'show-title',
      //     dangerouslyUseHTMLString: true,
      //     confirmButtonText: '确认',
      //   }).then(() =>{
      //     item.hiddenFlag = 1;
      //   });
      // }else
      if(item.statusFlag == 1 && item.hiddenFlag == 1){
        this.$confirm('<div>确认隐藏?</div>', '提示', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '隐藏',
        }).then(() =>{
          let params = {
            giftIdList: [ item.giftId ],
            type: 0
          };
          this.batchRequest(params);
        }).catch(() =>{
          item.hiddenFlag = 0;
        });
      }else if(item.statusFlag == 1 && item.hiddenFlag == 0){
        this.$confirm('<div>确认取消隐藏?</div>', '提示', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '取消隐藏',
        }).then(() =>{
          let params = {
            giftIdList: [ item.giftId ],
            type: 1
          };
          this.batchRequest(params);
        }).catch(() =>{
          item.hiddenFlag = 1;
        });
      }else if(item.statusFlag == 0 && item.hiddenFlag == 1){
        this.$confirm('<div>确认隐藏?</div>', '提示', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '隐藏',
          showCancelButton: false
        }).then(() =>{
          let params = {
            giftIdList: [ item.giftId ],
            type: 0
          };
          this.batchRequest(params);
        }).catch(() =>{
          item.hiddenFlag = 0;
        });
      }
    },
    // 启用与禁用
    changeStatus(item){
      if(item.statusFlag == 0){
        let params = {
          giftIdList: [ item.giftId ],
          type: 3
        };
        this.batchRequest(params);
      }else{
        this.$confirm('<div>确认禁用该礼品吗？</div><div>禁用礼品将在福利组件不展示，并且该礼品参加的活动将全部失效。</div>', '', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          // customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '禁用',
        }).then(() => {
          let params = {
            giftIdList: [ item.giftId ],
            type: 2
          };
          this.batchRequest(params);
        });
      }
    },
    // 更新名字
    handleName(item) {
      let params = {
        giftId: item.giftId,
        name: this.changeName
      };
      updateName(params).then(res => {
        if(res.code === '0000'){;
          this.$message.success('修改成功');
          this.getTableList();
          item.visible = true;
        }else{
          this.$message.error(res.message);
        }
      });
    },
    getName(val){
      this.changeName = val.giftName;
      val.visible = true;
    },
    // 更新库存
    updateStock(item) {
      this.stockData.id = item.giftId;
      this.stockData.remainedStock = item.remainedStock;
      this.stockData.textarea = item.textarea;
      this.StockDialog = true;
    },
    closeUpdateStock() {
      this.stockData.remainedStock = '';
      this.stockData.textarea = '';
      this.StockDialog = false;
      this.getTableList();
    },
    // 更新成本
    updateCost(item) {
      this.updateCostData.id = item.giftId;
      this.updateCostDialog = true;
    },
    closeUpdateCost() {
      this.updateCostDialog = false;
      this.getTableList();
    },
    add() {
      this.$router.push({ path: '/gift-manage/real-gift-detail', query: { giftId: '' } });
    },
    edit(item) {
      this.$router.push({ path: '/gift-manage/real-gift-detail', query: { giftId: item.giftId } });
    }
  },
};
</script>
<style lang="scss" scoped>
.w360{
  width: 360px;
}
.w-160{
  width: 160px;
}
.w140{
  width: 140px;
}
.w350{
  width: 350px;
}
.mr4{
  margin-right: 4px;
}
.tab-top {
  height: 32px;
  margin: 20px 20px 0px 20px;
  display: flex;
  justify-content: space-between;
  .fl{
    display: flex;
    justify-content: space-between;
  }
}
.table-content {
  margin: 20px;
  padding-bottom: 20px;
  .img-text {
    height: 60px;
    img {
      width: 60px;
      height: 60px;
      border: 1px solid #dcdfe6;
      padding: 4px;
      border-radius: 2px;
    }
    .text {
      display: inline-block;
      vertical-align: top;
      width: 74%;
      height: 60px;
      margin-left: 10px;
      font-size: 13px;
      line-height: 14px;
      position: relative;
      .goods-descript {
        display: flex;
        color: #303133;
        line-height: 22px;
        font-size: 14px;
        // margin-bottom: 25px;
      }
      .goods-code {
        color: #909399;
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 2px;
        // position: absolute;
        // bottom: 2px;
      }
    }
    .el-icon-edit-outline {
      display: none;
      cursor: pointer;
    }
    & :hover .el-icon-edit-outline {
      display: inline-block;
      cursor: pointer;
    }
    .el-icon-edit-outline:hover {
      color: #2f54ed;
    }
  }
  .stock-box {
    .el-icon-edit-outline {
      display: none;
      cursor: pointer;
    }
    &:hover .el-icon-edit-outline {
      display: inline-block;
      cursor: pointer;
    }
  }
}
.el-icon-edit-outline:hover {
  color: #2f54ed;
}
.undeline-dash{
  border-bottom: 1px dashed #2F54EB;
  font-weight:500;
}
.spanclass{
  display: inline-block;
  line-height: 32px;
}
.hidden-data{
  max-width: 220px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
<style>
/* .damolish .el-tooltip__popper{
  width: 240px;
} */
.stock-box .el-tooltip__popper{
  width: 150px;
}
.popver-button .cancle-button:hover{
  color: #2f54eb;
  border-color: #2f54eb;
  background-color: #fff;
}
</style>