<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">
      <!-- <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">
        <!-- <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>
            <el-input class="w-100" placeholder="请输入金额" v-model="cash" size="small"></el-input>
            <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"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="现金(元)">
              <template slot-scope="{ row }">
                <el-input size="small" v-model.trim="row.giftProSkuCash"></el-input>
              </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-input>
            </el-form-item>
            <el-form-item label="现金"> <el-input size="small" v-model.trim="list3[index].skuList[0].giftProSkuCash" style="width:180px"></el-input>&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: ''
    };
  },
  created() {
    // console.log(this.ladderPriceData);
    this.dialogVisible = true;
    this.id = this.ladderPriceData.id;
    this.getInfo();
  },
  methods: {
    async getInfo() {
      console.log(111);
      let 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 (let 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.forEach(it => {
                it.giftPropValues = JSON.parse(it.giftPropValuesJson);
              });
            });
            let 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));
    },
    // getMemberGradeList() {
    //   console.log(111);
    //   request.post('/api-integral-mall/load-grade').then(res => {
    //     if (res.data.errorCode === 0) {
    //       if (res.data.result) {
    //         this.cliqueStatus = res.data.result.cliqueGrade ? true : false;
    //         if (this.gradeType === 1) {
    //           //品牌卡
    //           this.memberGradeList = res.data.result.enterpriseGrade || [];
    //         } else if (this.gradeType === 2) {
    //           this.memberGradeList = res.data.result.cliqueGrade || [];
    //         }
    //         // if (this.$route.query.proReferId !== '-1') {
    //         let list = this.memberGradeList.filter(item => {
    //           return this.memberGrade.indexOf(item.gradeId) != -1;
    //         });
    //         list.forEach(item => {
    //           this.ladderMemberGrade.push({
    //             gradeId: item.gradeId,
    //             gradeName: item.gradeName
    //           });
    //         });
    //         console.log(this.ladderMemberGrade);
    //         // }
    //       } else {
    //         this.memberGradeList = [];
    //       }
    //     } else {
    //       this.$message.error(res.data.message);
    //     }
    //   });
    // },
    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() {
      let 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>
