<template>
  <el-dialog :title="`${type === 1 ? '同步' : '返还'}卡券`" :visible.sync="visible" width="500px" @close="close">
    <div class="ct" v-loading="loading">
        <!-- 同步 -->
        <i class="el-icon-info blue"></i>
        <p class="inline-block" v-if="type === 1">卡券同步至福利中心后，可提供其它应用使用卡券的能力；同步后可在福利中心或同步记录页面返还以同步库存。<el-button type="text" v-if="showLink && synFlag" @click="toSyncList">查看同步记录</el-button></p>
        <p class="inline-block" v-if="type === 2">使用返还功能将福利中心卡券库存返还至卡券</p>
        <div class="gray01 fz14 mt25">
          {{ type === 1 ? '当前剩余库存' : '福利中心可返还库存' }}
          <span class="fz16 ml8">{{ stock }}</span>
        </div>
        <div class="mt20">
          {{ type === 1 ? '同步库存' : '返还库存' }}：
          <el-input-number class="ml15 w300" controls-position="right" :precision="0" :min="0" :max="stock"  v-model="count" />
          <p class="tips">{{ type === 1 ? '同步最大库存不能超过当前剩余库存' : '福利中心已被占用的库存无法返还' }}</p>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" :disabled="loading && count" @click="submit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 卡券同步
import api from '@/api/card-package';
const { syncStock, getWelfareStock, getCouponStockInfo, returnStock } = api;
export default {
  name: 'SyncStock',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    showLink: {
      type: Boolean,
      default: true
    },
    type: {
      // 类型：1同步 2返还
      type: Number,
      default: 1
    },
    couponId: {
      type: String,
    },
  },
  data() {
    return {
      loading: false,
      synFlag: false, // 是否同步过 没通不过不显示link
      stock: 0, // 可操作库存
      count: '', // 返还/同步的数量
    };
  },
  methods: {
    close() {
      this.count = 0;
      this.synFlag = false;
      this.stock = 0;
      this.$emit('update:visible', false);
    },
    submit() {
      const { type, couponId, count } = this;
      if (type === 1) {
        // 同步库存
        this.loading = true;
        syncStock({ couponId, count }).then(res => {
          this.loading = false;
          this.$tips({ message: '同步成功', type: 'success' });
          this.$emit('update:visible', false);
          this.$emit('syncSuccess');
        }).finally(() => {
          this.loading = false;
        });
      } else {
        // 返还
        returnStock({ couponId, count }).then(res => {
          this.loading = false;
          this.$tips({ message: '返还成功', type: 'success' });
          this.$emit('update:visible', false);
          this.$emit('syncSuccess');
        }).finally(() => {
          this.loading = false;
        });
      }
    },
    getCouponStockInfo() {
      this.loading = true;
      getCouponStockInfo({ couponId: this.couponId }).then(res => {
        this.loading = false;
        this.synFlag = res.result.synFlag || false;
        this.stock = res.result.remainedStock || 0;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 获取福利剩余库存
    getWelfareStock() {
      this.loading = true;
      getWelfareStock({ couponId: this.couponId }).then(res => {
        this.loading = false;
        this.stock = res.result || 0;
      }).finally(() => {
        this.loading = false;
      });
    },
    toSyncList() {
      this.visible = false;
      this.$router.push(`/gic-card/sync-stock/list?couponId=${this.couponId}`);
    }
  },
  watch: {
    visible(val) {
      if(val) {
        if(this.type === 1) {
          this.getCouponStockInfo();
        } else {
          this.getWelfareStock();
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.ct {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  i {
    position: absolute;
    left: 0px;
    top: 3px;
  }
  p {
    font-size:13px;
    font-weight:400;
    color:$gray02;
    line-height:22px;
  }
  .tips {
    &::before {
      content: '*';
      color: #FF943E;
      margin-right: 3px;
    }
    font-size: 13px;
    line-height: 1;
    color: $gray02;
    margin-left: 90px;
    margin-top: 8px;
  }
}
</style>