<template>
  <div>
    <div>
      <div>
        <div>
          <div class="tab-top">
            <div class="fl">
              <el-input :placeholder="placeholderText" v-model="query.key" class="mr10 w360" clearable @keyup.enter.native="getSearchList" @clear="getSearchList">
                <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-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;" v-if="unfoldStatus">
            <div style="height:32px;">
              <div class="spanclass">福利成本：</div>
              <dm-input-amount precision="2" :min="0" :max="9999999.99" class="mr10 ml10" v-model.trim="query.startCostPrice" @keyup.enter.native="getSearchList"></dm-input-amount>
              <div class="spanclass">-</div>
              <dm-input-amount precision="2" :min="0" :max="9999999.99" class="mr40 ml10" v-model.trim="query.endCostPrice" @keyup.enter.native="getSearchList"></dm-input-amount>
              <div class="spanclass" style="margin-right:28px">更新时间：</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">可占库存：</div>
              <dm-input-number precision="0" :min="0" :max="9999999" class="mr10 ml10 w140" v-model="query.startStock" placeholder="请输入" @keyup.enter.native="getSearchList"></dm-input-number>
              <div class="spanclass">-</div>
              <dm-input-number precision="0" :min="0" :max="9999999" class="ml10 w140 mr40" v-model="query.endStock" placeholder="请输入" @keyup.enter.native="getSearchList"></dm-input-number>
              <div class="spanclass">更新时间范围：</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="300px">
              <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">
                    <p class="goods-descript">
                      <el-tooltip open-delay="200" class="item" effect="dark" :content="scope.row.giftName" placement="top">
                        <span class="inline-block hidden-data">{{ scope.row.giftName || '--' }}</span>
                      </el-tooltip>
                      <el-popover placement="top" trigger="click" @show="getName(scope.row.giftName)">
                        <div>
                          <dm-input style="width:260px" type="text" v-model="changeName" :byte-type="1" :maxlength="30"> </dm-input>
                        </div>
                        <div class="popver-button" style="margin-top:18px;text-align:right">
                          <el-button type="dafault" size="small">取消</el-button>
                          <el-button type="primary" size="small" class="ml10 ml10" @click="handleName(scope.row)">确认</el-button>
                        </div>
                        <i class="el-icon-edit-outline inline-block ml5" style="margin-top:-5px" slot="reference"></i>
                      </el-popover>
                    </p>
                    <p class="goods-code">
                      <el-tooltip open-delay="200" effect="dark" placement="top">
                        <div slot="content">
                          <p class="goods-code">福利id：{{ scope.row.giftId }}</p>
                          <div>更新时间：<p class="inline-block" v-html="formatDateTimeByType(scope.row.updateTime)"></p></div>
                        </div>
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                      礼品编码：{{ scope.row.giftNo || '--' }}
                    </p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="costPrice" label="成本" sortable="custom" min-width="150px">
              <template slot-scope="scope">
                <p class="stock-box">
                  <span v-if="scope.row.minCostPrice == scope.row.maxCostPrice">{{ scope.row.minCostPrice }}</span>
                  <span v-else>{{ scope.row.minCostPrice }}-{{ scope.row.maxCostPrice }}</span>
                  <i class="el-icon-edit-outline" @click="updateCost(scope.row)"></i>
                </p>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" label="库存" min-width="150px">
              <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-tooltip open-delay="200" effect="dark" placement="top">
                      <div slot="content">
                        <p class="goods-code">已占用：{{ scope.row.occupyStock }}</p>
                        <p class="goods-code">总库存：{{ scope.row.totalStock }}</p>
                      </div>
                      <i class="el-icon-question inline-block mr5" style="color:#909399"></i>
                    </el-tooltip>
                    <span>可占库存：{{ scope.row.remainedStock }}</span>
                    <i class="el-icon-edit-outline inline-block ml5" @click="updateStock(scope.row)"></i>
                  </p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="allExchangeNumber" label="总出库量" sortable="custom" 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" :active-value="1" :inactive-value="0"  @change="changeShow(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="210px" fixed="right">
              <template slot-scope="scope">
                <div style="font-size:0px">
                  <dm-perm-button type="text" @click="edit(scope.row, 2)">编辑</dm-perm-button>
                  <dm-perm-button type="text" @click="$router.push('/gift-manage/virtual-stock-list?id=' + scope.row.giftId)">库存记录</dm-perm-button>
                  <el-dropdown style="margin-left:20px;" @command="command => handleCommand(command, scope.row)" placement="bottom-start">
                    <span class="el-dropdown-link" style="color:#2f54ed;cursor: pointer;"> <i class="el-icon-more"></i> </span>
                    <el-dropdown-menu slot="dropdown" style="width:110px;">
                      <el-dropdown-item command="1">查看内容</el-dropdown-item>
                      <el-dropdown-item command="2" v-if="scope.row.statusFlag === 0">启用</el-dropdown-item>
                      <el-dropdown-item command="3" v-if="scope.row.statusFlag === 1">禁用</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </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>
    <el-dialog :title="forbiddenTitle" :visible.sync="forbiddenDialog" width="30%">
      <div style="display:flex">
        <i class="el-icon-warning inline-block" style="font-size:24px;color:#e6a23c"></i>
        <span class="inline-block ml10" style="font-size:16px;line-height:20px">禁用礼品将在福利组件不展示，并且该礼品参加的活动将全部失效，确认禁用?</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="forbiddenDialog = false">取消</el-button>
        <el-button type="primary" @click="forbiddenDialog = false">禁用</el-button>
      </span>
    </el-dialog>
    <!-- 调整成本 -->
    <update-virtual-cost v-if="updateCostDialog" :update-cost-data="updateCostData" @closeUpdateCost="closeUpdateCost" @getTableList="getTableList"></update-virtual-cost>
    <!-- 调整库存 -->
    <update-virtual-stock :stock-data="stockData" v-if="StockDialog" @getTableList="getTableList" @closeUpdateStock="closeUpdateStock"></update-virtual-stock>
    <!-- 查看内容 -->
    <check-upload-detail v-if="dialogVisible" :dialog-id="dialogId" :is-edit="false"></check-upload-detail>
  </div>
</template>
<script>
import { page, formate } from '@/mixins/table.js';
import UpdateVirtualCost from './module/update-virtual-cost.vue';
import updateVirtualStock from './module/update-virtual-stock.vue';
import checkUploadDetail from './module/check-upload-detail';
import { formatDateTimeByType, listTime } from '@/utils/index.js';
import api from '@/api/gift.js';
const { giftPage, batchUpdate, updateName } = api;
export default {
  components: {
    UpdateVirtualCost,
    updateVirtualStock,
    checkUploadDetail,
  },
  data() {
    return {
      bread: [
        {
          breadName: '福利中心'
        },
        {
          breadName: '礼品管理'
        },
        {
          breadName: '虚拟礼品'
        }
      ],
      // activeName: '0',
      mixins: [ page, formate ],
      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,
      sortOrder: '',
      sortColumn: '',
      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: '',
      dialogVisible: false,
      dialogId: '',
      forbiddenDialog: false,
      forbiddenTitle: '禁用',
      changeName: ''
    };
  },
  created() {
    this.$emit('updateBread', this.bread);
    this.$emit('showAside', true);
    this.query.giftId = this.$route.query.giftId;
    this.init();
  },
  methods: {
    formatDateTimeByType,
    listTime,
    init() {
      this.getTableList();
    },
    getSearchList() {
      this.currentPage = 1;
      this.getTableList();
    },
    // 列表筛选条件更改
    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';
      }
    },
    // 实物礼品列表
    getTableList() {
      this.loading = true;
      let params = {
        ...this.query,
        giftType: 2
      };
      giftPage(params).then(res =>{
        this.tableData = res.result.result;
      }).finally(() => this.loading = false);
    },
    handleSizeChange(value){
      this.query.pageSize = value;
      this.getTableList();
    },
    handleCurrentChange(value){
      this.query.currentPage = value;
      this.query.pageSize = 1;
      this.getTableList();
    },
    closeUploadDetail(){
      this.dialogVisible = false;
    },
    handleCommand(command, item){
      // let value;
      if(command == 1){
        this.dialogVisible = true;
        this.dialogId = item.giftId;
      }else if(command == 3){
        let params = {
          giftIdList: [ item.giftId ],
          type: 2
        };
        this.$confirm('<div>已添加被禁用礼品的活动将会失效，确认禁用?</div>', '提示', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '禁用',
          showCancelButton: false
        }).then(() =>{
          this.batchRequest(params);
        }).catch(() => {
          return;
        });
        // this.forbiddenDialog = true;
      }else if(command == 2){
        // this.forbiddenDialog = true;
        let params = {
          giftIdList: [ item.giftId ],
          type: 3
        };
        this.$confirm('<div>确认启用?</div>', '提示', {
          closeOnClickModal: false,
          showClose: false,
          type: 'warning',
          customClass: 'show-title',
          dangerouslyUseHTMLString: true,
          confirmButtonText: '启用',
          showCancelButton: false
        }).then(() =>{
          this.batchRequest(params);
        }).catch(() => {
          return;
        });
      }
    },
    // 展开与收起
    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') {
        this.query.sortColumn = 'cost_price';
      } else if (value.prop === 'stock') {
        this.query.sortColumn = 'stock';
      }
      this.getTableList();
    },
    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;
      // console.log(this.selectList);
    },
    // 批量操作
    handleBatch(value) {
      console.log(value);
      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>', '批量禁用', {
          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: '确认',
      //     showCancelButton: false
      //   }).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: '隐藏',
          showCancelButton: false
        }).then(() =>{
          let params = {
            giftIdList: [ item.giftId ],
            type: 0
          };
          this.batchRequest(params);
        }).catch(() =>{
          return;
        });
      }else if(item.statusFlag == 1 && item.hiddenFlag == 0){
        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: 1
          };
          this.batchRequest(params);
        }).catch(() =>{
          return;
        });
      }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(() =>{
          return;
        });
      }
    },
    // 启用与禁用
    changeStatus(item){
      if(item.statusFlag == 0){
        let params = {
          giftIdList: [ item.giftId ],
          type: 3
        };
        this.batchRequest(params);
      }else{
        this.$confirm('<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();
        }else{
          this.$message.error(res.message);
        }
      });
    },
    getName(val){
      this.changeName = val;
    },
    // 更新库存
    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.updateCostData.maxCostPrice = item.costPrice;
      this.updateCostDialog = true;
    },
    closeUpdateCost() {
      this.updateCostDialog = false;
      this.getTableList();
    },
    add() {
      this.$router.push({ path: '/gift-manage/virtual-gift-detail', query: { giftId: '' } });
    },
    edit(item) {
      this.$router.push({ path: '/gift-manage/virtual-gift-detail', query: { giftId: item.giftId } });
    }
  },
};
</script>
<style lang="scss" scoped>
.w360{
  width: 360px;
}
.w-160{
  width: 160px;
}
.w140{
  width: 140px;
}
.w350{
  width: 350px;
}
.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: 75%;
      height: 60px;
      margin-left: 3px;
      font-size: 13px;
      line-height: 14px;
      position: relative;
      .goods-descript {
        display: flex;
        color: #606266;
        line-height: 18px;
        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: 180px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
<style>
/* .damolish .el-tooltip__popper{
  width: 240px;
} */
.stock-box .el-tooltip__popper{
  width: 150px;
}
</style>