<template>
  <el-dialog :visible.sync="dialogVisible" width="600px" @close="cancelSubmit()">
    <div slot="title" style="margin-top:10px;margin-bottom:10px">
      <span style="color:#303133;font-size:16px">设置阶梯价</span>
      <span style="color:#606266;font-size:12px">*若未设置阶梯价则以原价进行兑换，请勿随意填入0积分/现金；</span>
    </div>
    <div v-loading="loading">
      <el-tabs :value="selectTab" type="border-card" class="card-style">
        <el-tab-pane
          :name="index"
          v-for="(item, index) in list3"
          :key="index"
          :label="item.gradeName"
          :value="item.gradeId"
        >
          <el-form>
            <el-form-item label="积分">
              <el-input size="small" v-model.trim="list3[index].skuList[0].giftProSkuIntegral" style="width:180px" />
            </el-form-item>
            <el-form-item label="现金">
              <el-input size="small" v-model.trim="list3[index].skuList[0].giftProSkuCash" style="width:180px" />&nbsp;&nbsp;元
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 20px;text-align:right">
        <el-button type="primary" @click="saveLadderDetail">
          保存
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import qs from 'qs';
import request from '../service/request.js';
export default {
  props: {
    ladderPriceData: {
      type: Object,
      default () {
        return {};
      },
    },
  },
  data () {
    return {
      selectTab: 0,
      loading: false,
      dialogVisible: false,
      id: '',
      list3: [],
      integral: '',
      cash: '',
      cardCouponList: [],
      ladder: [],
    };
  },
  created () {
    this.dialogVisible = true;
    this.id = this.ladderPriceData.id;
    this.getInfo();
  },
  methods: {
    async getInfo () {
      console.log(111);
      const params = {
        integralMallProId: this.id,
      };
      this.loading = true;
      request
        .get('/api-integral-mall/get-integral-mall-pro', { params })
        .then(res => {
          if (res.data.errorCode === 0) {
            this.ladder = res.data.result.isDifferentialPricing ? ['1'] : []; // 是否设置阶梯价
            if (this.ladder.length) {
              this.isDifferentialPricing = this.ladder[0];
            }
            if (this.isDifferentialPricing && res.data.result.gradeProSkus.length > 0) {
              this.list3 = res.data.result.gradeProSkus; // 阶梯价详情
            } else {
              this.list3 = [];
            }
            if (res.data.result.cardCostList) {
              this.cardCouponList = res.data.result.cardCostList;
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
        .finally(() => (this.loading = false));
    },
    handleLadder (value) {
      value.forEach(item => {
        item.giftProSkuIntegral = this.integral ? this.integral : item.giftProSkuIntegral;
        item.giftProSkuCash = this.cash ? this.cash : item.giftProSkuCash;
      });
      this.integral = '';
      this.cash = '';
    },
    saveLadderDetail () {
      const params = {
        integralMallProId: this.id,
        differentialPricingJson: JSON.stringify(this.list3),
      };
      request.post('/api-integral-mall/set-differential-pricing', qs.stringify(params)).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res.data.result);
          this.dialogVisible = false;
          setInterval(() => {
            this.$emit('closeUpdateLadder');
          }, 10);
        }
      });
    },
    cancelSubmit () {
      this.dialogVisible = false;
      setInterval(() => {
        this.$emit('closeUpdateLadder');
      }, 10);
    },
  },
};
</script>
<style scoped>
.w-100 {
  width: 100px;
}
</style>
<style>
.card-style.el-tabs--border-card {
  box-shadow: none !important;
}
</style>
