<template>
  <div>
    <div>
      <!-- <el-switch></el-switch> -->
      <div v-loading="loading">
        <div class="tab-top">
          <div class="fl">
            <el-input :placeholder="placeholderText" v-model="search" class="mr10" clearable @keyup.enter.native="getSearchList" @clear="getSearchList">
              <el-select v-model="searchType" 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="4"></el-option>
              </el-select>
            </el-input>
            <el-select v-model="status" placeholder="礼品状态" class="w-160 mr10" clearable @change="getSearchList">
              <el-option label="显示" :value="2"></el-option>
              <el-option label="隐藏" :value="1"></el-option>
            </el-select>
          </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="height:32px;margin: 20px 20px 0px 20px;">
          <div class="spanclass">更新时间：</div>
          <el-date-picker class="mr20" v-model="timeValue" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
          <div class="spanclass">成本</div>
          <dm-input-amount precision="2" :min="0" :max="9999999.99" class="mr10 ml10 w100" v-model.trim="costValue1"></dm-input-amount>
          <div class="spanclass">-</div>
          <dm-input-amount precision="2" :min="0" :max="9999999.99" class="mr20 ml10 w100" v-model.trim="costValue2"></dm-input-amount>
          <div class="spanclass">可占库存</div>
          <dm-input-number precision="2" :min="0" :max="9999999" class="mr10 ml10 w100" v-model="remainedStock1"></dm-input-number>
          <div class="spanclass">-</div>
          <dm-input-number precision="2" :min="0" :max="9999999" class="ml10 w100" v-model="remainedStock2"></dm-input-number>
        </div>
        <div class="table-content">
          <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="360px">
              <template slot-scope="scope">
                <div class="img-text">
                  <dm-preview-img :img="scope.row.goodsImageUrl" 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 class="item" effect="dark" :content="'福利id：' + scope.row.giftId" placement="top-start">
                        <span>{{ scope.row.giftName }}</span>
                      </el-tooltip>
                      <i class="el-icon-edit-outline" @click="handleName(scope.row)"></i>
                    </p>
                    <p class="goods-code">礼品编码：{{ scope.row.giftNo }}</p>
                    <p class="goods-code">更新时间：{{ scope.row.updateName }}</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>{{ scope.row.costPrice }}</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="120px">
              <template slot-scope="scope">
                <div>
                  <p class="stock-box">
                    <span>可占库存：{{ scope.row.remainedStock }}</span>
                    <confirm-stock @confirmStock="confirmStock($event, scope.row)" :stock="scope.row.remainedStock">
                      <i class="el-icon-edit-outline"></i>
                    </confirm-stock>
                  </p>
                  <p>已占用：{{ scope.row.occupyStock }}</p>
                  <p>总库存：{{ scope.row.totalStock }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="allExchangeNumber" label="总出库量" sortable="custom" min-width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.historyTotalStock }}</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" content="隐藏后福利组件中不展示，其他应用不可增加占用数量，已占用的库存不影响使用" placement="top">
                  <span class="undeline-dash">是否隐藏</span>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-switch v-model="scope.row.hiddenFlag" :active-value="1" :inactive-value="0"  @change="changeShow"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="170px" 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">库存记录</dm-perm-button>
                  <dm-delete @confirm="deleteList(scope.row, 0)" tips="确认删除该礼品?">
                    <el-button type="text">删除</el-button>
                  </dm-delete>
                </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="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total" v-if="total != 0"> </dm-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 调整成本 -->
    <!-- <update-cost v-if="updateCostDialog" :update-cost-data="updateCostData" @closeUpdateCost="closeUpdateCost" @getTableList="getTableList"></update-cost> -->
    <update-multi-cost v-if="updateCostDialog" :update-cost-data="updateCostData" @closeUpdateCost="closeUpdateCost" @getTableList="getTableList"></update-multi-cost>
    <!-- 修改名称 -->
    <update-name :update-name-form="updateNameForm" v-if="updateNameDialog" @closeUpdateName="closeUpdateName" @getTableList="getTableList"></update-name>
    <!-- 多规格调整库存 -->
    <!-- <goods-stock :stock-data="stockData" v-if="StockDialog" @getList="getList" @closeStock="closeStock"></goods-stock> -->
    <!-- 多规格调整积分现金 -->
    <!-- <update-sku-integral :integral-date="integralDate" v-if="integralDialog" @getList="getList" @closeIntegral="closeIntegral"></update-sku-integral> -->
    <!-- <update-sku-integral :integral-date="integralDate" v-if="integralDialog" @getList="getList" @closeCost="closeCost"></update-sku-integral> -->
  </div>
</template>
<script>
import { page, formate } from '@/mixins/table.js';
// import UpdateCost from './module/update-cost.vue';
import UpdateMultiCost from './module/update-multi-cost.vue';
// import request from '../../service/request';
// import common from '../../utils/common';
import updateName from './module/update-name.vue';
// import goodsStock from '../../components/updateSkuStock';
// import updateSkuIntegral from '../../components/updateSkuIntegral';
// import { mapGetters } from 'vuex';
export default {
  components: {
    // UpdateCost,
    UpdateMultiCost,
    updateName,
    // goodsStock,
    // updateSkuIntegral,
  },
  data() {
    return {
      bread: [
        {
          breadName: '积分商城'
        },
        {
          breadName: '实物礼品'
        }
      ],
      // activeName: '0',
      mixins: [ page, formate ],
      listParams: {
        search: '',
        startTime: '',
        endTime: '',
        currentPage: 1,
        pageSize: 20,
      },
      proType: '',
      status: '',
      batchOperate: '',
      total: 0,
      sortOrder: '',
      sortColumn: '',
      // tableData: [],
      tableData: [
        {
          costPrice: '99',
          giftId: '111111',
          giftName: '测试',
          giftNo: '00000',
          hiddenFlag: 1,
          historyTotalStock: '9999',
          occupyStock: '100',
          totalStock: '800',
          remainedStock: '700',
          updateTime: '1610693597000'
        }
      ],
      selectList: [],
      // 更新成本数据
      updateCostData: {
        costPrice: '',
        id: ''
      },
      updateCostDialog: false,
      // 更新名称
      updateNameForm: {
        name: '',
        id: '',
        type: ''
      },
      updateNameDialog: false,
      // 更新库存
      stockData: {
        id: '',
        goodsStock: ''
      },
      StockDialog: false,
      // 积分费用
      integralDate: {
        id: '',
        goodsType: ''
      },
      integralDialog: false,
      loading: false,
      search: '',
      searchType: 1,
      placeholderText: '请输入礼品名称',
      isShow: false,
      timeValue: '',
      costValue1: '', // 条件筛选最低成本
      costValue2: '', // 条件筛选最高成本
      remainedStock1: '', // 条件筛选最低可占库存
      remainedStock2: '', // 条件筛选最高可占库存
    };
  },
  created() {
    // this.$emit('updateBread', this.bread);
    // this.$emit('showAside', true);
    // if (localStorage.getItem('giftObj')) {
    //   let giftObj = JSON.parse(localStorage.getItem('giftObj'));
    //   this.pageNum = giftObj.pageNum;
    //   this.pageSize = giftObj.pageSize;
    //   this.search = giftObj.search;
    //   this.proType = giftObj.proType;
    //   this.status = giftObj.status;
    //   this.sortColumn = giftObj.sortColumn;
    //   this.sortOrder = giftObj.sortOrder;
    //   // this.activeName = giftObj.activeName;
    //   localStorage.removeItem('giftObj'); // 使用完就清除缓存
    // }
    this.init();
  },
  methods: {
    init() {
      this.getTableList();
    },
    getSearchList() {
      this.pageNum = 1;
      this.getTableList();
    },
    // 列表筛选条件更改
    handleChangeType() {
      if (this.searchType === 1) {
        this.placeholderText = '请输入礼品名称';
      } else if (this.searchType === 2) {
        this.placeholderText = '请输入礼品编码';
      } else if (this.searchType === 3) {
        this.placeholderText = '条形码';
      } else if (this.searchType === 4) {
        this.placeholderText = '福利id';
      }
    },
    // 实物礼品列表
    getTableList() {
      console.log('获取列表详情');
    },
    // 排序
    sortChange(value) {
      if (value.order == 'ascending') {
        this.sortOrder = 'asc';
      } else if (value.order == 'descending') {
        this.sortOrder = 'desc';
      }
      //   if (value.prop === 'goodsIntegral') {
      //     this.sortColumn = 'goods_integral';
      //   } else if (value.prop === 'goodsPrice') {
      //     this.sortColumn = 'goods_price';
      //   } else if (value.prop === 'goodsStock') {
      //     this.sortColumn = 'goods_stock';
      //   } else if (value.prop === 'allExchangeNumber') {
      //     this.sortColumn = 'all_exchange_number';
      //   } else if (value.prop === 'createTime') {
      //     this.sortColumn = 'create_time';
      //   } else if (value.prop === 'sort') {
      //     this.sortColumn = 'sort';
      //   }
      this.getTableList();
    },
    handleSelectAll(val) {
      this.selectList = val;
    },
    // 批量操作
    handleBatch() {
      // let goodsIdArr = [];
      // for (let item of this.selectList) {
      //   goodsIdArr.push(item.goodsId);
      // }
      // let params = {
      //   goodsIds: goodsIdArr.join(','),
      //   type: 1
      // };
      //   this.$confirm('<div>已添加被删除礼品的活动将会失效，确认删除?</div>', '', {
      //     closeOnClickModal: false,
      //     showClose: false,
      //     type: 'warning',
      //     customClass: 'top-icon',
      //     dangerouslyUseHTMLString: true,
      //     confirmButtonText: '确认',
      //   })
      //     .then(() => {
      //       this.batchRequest(params);
      //     })
    },
    // batchRequest(params) {
    batchRequest() {
      console.log('批量删除');
    },
    changeShow(value){
      console.log('更改隐藏状态', value);
      this.getTableList();
    },
    // 删除
    deleteList(){
      console.log('删除数据');
    },
    // 更新名字
    handleName(item) {
      console.log('更改商品名称', item);
      // this.updateNameForm.name = item.goodsName;
      // this.updateNameForm.id = item.goodsId;
      // this.updateNameForm.type = 1; // 1、礼品 2、优惠券 3、渠道礼品
      this.updateNameDialog = true;
    },
    // 关闭弹框
    closeUpdateName() {
      // this.updateNameForm.name = '';
      // this.updateNameForm.id = '';
      this.updateNameDialog = false;
    },
    // 更新sku库存
    // updateSkuStock(item) {
    //   this.stockData.id = item.goodsId;
    //   this.stockData.goodsStock = item.goodsStock;
    //   this.StockDialog = true;
    // },
    // closeStock() {
    // this.stockData.id = '';
    // this.stockData.goodsStock = '';
    // this.StockDialog = false;
    // },
    // 虚拟礼品库存调整
    // confirmStock(obj, item) {
    //   console.log('调整库存', obj, item);
    // let stock;
    // if (obj.type === 1) {
    //   stock = obj.stock;
    // } else if (obj.type === 2) {
    //   stock = '-' + obj.stock;
    // }
    // let params = {
    //   goodsId: item.goodsId,
    //   goodsStock: stock
    // };

    // request
    //   .post('/api-integral-mall/update-integral-gift-info', params)
    //   .then(res => {
    //     if (res.data.code === '0000') {
    //       this.$message.success('修改成功');
    //       this.getTableList();
    //     } else {
    //       this.$message.error(res.data.message);
    //     }
    //   })
    //   .catch(error => {
    //     this.$message.error({
    //       duration: 1000,
    //       message: error.message
    //     });
    //   });
    // },
    // 更新成本
    updateCost(item) {
      console.log('修改成本', item);
      this.updateCostData.id = item.giftId;
      this.updateCostData.costPrice = item.costPrice;
      this.updateCostDialog = true;
    },
    closeUpdateCost() {
      console.log('关闭修改成本弹窗');
      this.integralDate.id = '';
      this.integralDate.costPrice = '';
      this.updateCostDialog = false;
    },
    // add() {
    //   console.log('新建礼品，跳转')
    // },
    // edit(item) {
    //   console.log('编辑实物礼品', item);
    // let giftObj = {
    //   pageNum: this.pageNum,
    //   pageSize: this.pageSize,
    //   search: this.search,
    //   proType: this.proType,
    //   status: this.status,
    //   sortColumn: this.sortColumn,
    //   sortOrder: this.sortOrder,
    //  // activeName: this.activeName
    // };
    // window.localStorage.setItem('giftObj', JSON.stringify(giftObj)); // 搜索条件放入缓存
    // this.$router.push({ path: '/addGift', query: { goodsType: item.proType, goodsId: item.goodsId } });
    // }
  },
  // computed: {
  //   // ...mapGetters([ 'getDefaultId' ])
  // },
  // watch: {
  // getDefaultId() {
  //   this.shopId = this.getDefaultId;
  //   if (this.shopId) {
  //     this.init();
  //   }
  // }
  // }
};
</script>
<style lang="scss" scoped>
.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%;
      margin-left: 3px;
      font-size: 13px;
      line-height: 14px;
      .goods-descript {
        color: #606266;
        line-height: 18px;
        height: 36px;
        font-size: 14px;
      }
      .goods-code {
        color: #909399;
        font-size: 12px;
        line-height: 17px;
        margin-top: 5px;
      }
    }
    & :hover .el-icon-edit-outline {
      display: inline-block;
      cursor: pointer;
    }
    .el-icon-edit-outline:hover {
      color: #2f54ed;
    }
  }
  .stock-box {
    &: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;
}
</style>
<style>
.damolish .el-tooltip__popper{
  width: 240px;
}
</style>