<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;margin-left:20px">*若未设置阶梯价则以原价进行兑换，请勿随意填入0积分/现金；</span>
    </div>
    <div v-loading="loading">
      <!-- <div style="margin-top:10px;margin-bottom:10px">
        <span style="color:#303133;font-size:16px">设置阶梯价</span>
        <span>*若未设置阶梯价则以原价进行兑换，请勿随意填入0积分/现金；</span>
      </div> -->
      <el-tabs :value="selectTab" type="border-card" class="card-style">
        <!-- <el-tab-pane :name="index" v-for="(item, index) in ladderMemberGrade" :key="index" :label="item.gradeName" :value="item.gradeId"> -->
        <el-tab-pane
          :name="index"
          v-for="(item, index) in list3"
          :key="index"
          :label="item.gradeName"
          :value="item.gradeId"
        >
          <div class="fr" style="margin-bottom:20px" v-if="list3.length && isTable">
            <el-input
              class="w-100"
              placeholder="请输入积分"
              v-model="integral"
              size="small"
            />
            <el-input
              class="w-100"
              placeholder="请输入金额"
              v-model="cash"
              size="small"
            />
            <el-button type="primary" size="small" @click="handleLadder(list3[index].skuList)">
              批量填充
            </el-button>
          </div>
          <el-table v-if="list3.length && isTable" :data="list3.length && isTable ? list3[index].skuList : []">
            <el-table-column v-for="(it, i) in skuHeaderList" :key="i" :label="it.proName">
              <template slot-scope="{ row }">
                {{ row.giftPropValues[i].valueName }}
              </template>
            </el-table-column>
            <el-table-column label="积分">
              <template slot-scope="{ row }">
                <el-input size="small" v-model.trim="row.giftProSkuIntegral" />
              </template>
            </el-table-column>
            <el-table-column label="现金(元)">
              <template slot-scope="{ row }">
                <el-input size="small" v-model.trim="row.giftProSkuCash" />
              </template>
            </el-table-column>
          </el-table>
          <el-form v-if="list3.length && !isTable">
            <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 request from '../../../service/request.js';
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: '',
      memberGradeList: [],
      skuList: [],
      skuHeaderList: [],
      ladderMemberGrade: [],
      list3: [],
      isTable: 1,
      gradeType: 1,
      memberGrade: '',
      integral: '',
      cash: '',
      isCorrect: true,
    };
  },
  created () {
    // console.log(this.ladderPriceData);
    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.skuHeaderList = [];
            if (res.data.result.skuJsonList) {
              for (const item of JSON.parse(res.data.result.skuJsonList[0].giftPropValues)) {
                this.skuHeaderList.push({
                  proName: item.proName,
                  proId: item.proId,
                });
              }
            }
            this.list3 = res.data.result.gradeProSkus ? res.data.result.gradeProSkus : [];
            this.list3.forEach(item => {
              item.skuList && item.skuList.forEach(it => {
                it.giftPropValues = JSON.parse(it.giftPropValuesJson);
              });
            });
            const giftProStandardJson = res.data.result.giftProStandardJson ? JSON.parse(res.data.result.giftProStandardJson) : [];
            this.isTable = giftProStandardJson.length; // giftProStandardJson存在代表有sku
            // this.gradeType = res.data.result.gradeType;
            // this.memberGrade = res.data.result.memberGrade;
            // if (this.gradeType) {
            //   this.getMemberGradeList();
            // }
          } 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 () {
      this.isCorrect = true;
      for (let i = 0; i < this.list3.length; i++) {
        const skuList = this.list3[i].skuList;
        if (this.isCorrect) {
          for (let j = 0; j < skuList.length; j++) {
            if (skuList[j].giftProSkuCash && (skuList[j].giftProSkuIntegral === '' || skuList[j].giftProSkuIntegral === null)) {
              this.isCorrect = false;
              this.$message.error('已填入现金，则必填积分');
              break;
            }
            if ((skuList[j].giftProSkuCash === '' || skuList[j].giftProSkuCash === null) && skuList[j].giftProSkuIntegral) {
              this.isCorrect = false;
              this.$message.error('已填入积分，则必填现金');
              break;
            }
            if (skuList[j].giftProSkuCash && skuList[j].giftProSkuIntegral) {
              const itemPlus = Number(skuList[j].giftProSkuCash) + Number(skuList[j].giftProSkuIntegral);
              if (!itemPlus) {
                this.isCorrect = false;
                this.$message.error('积分和现金相加不可为0');
                break;
              }
            }
          }
        } else {
          break;
        }
      }
      if (this.isCorrect) {
        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>
