<template>
  <el-dialog
    :title="编辑积分费用或现金费用"
    :visible.sync="dialogVisible"
    width="650px"
    @close="close"
  >
    <div class="dialog-body">
      <el-table :data="cardCostList" style="width: 100%" v-if="cardCostList.length > 1">
        <el-table-column prop="proRefName" label="卡券名称" />
        <el-table-column prop="integralCost" label="积分">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.integralCost"
              :precision="0"
              :min="0"
              controls-position="right"
              @blur="handleIntegralCostTotal"
              @change="handleIntegralCostTotal"
            />
          </template>
        </el-table-column>
        <el-table-column prop="cashCost" label="现金">
          <template slot-scope="scope">
            <el-popover
              popper-class="noClass"
                v-if="jifenquanxian == true"
                placement="bottom"
                trigger="hover"
                content="无积分购现金权限">
                <el-input-number
                slot="reference"
                  :disabled="jifenquanxian"
                    v-model="scope.row.cashCost"
                    :precision="2"
                    :min="0"
                    controls-position="right"
                    @blur="handleIntegralCostTotal"
                    @change="handleIntegralCostTotal"
                  />
              </el-popover>
              <el-input-number
                v-else
                v-model="scope.row.cashCost"
                :precision="2"
                :min="0"
                controls-position="right"
                @blur="handleIntegralCostTotal"
                @change="handleIntegralCostTotal"
              />
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="tableData" style="width: 100%;margin-top:20PX">
        <el-table-column prop="proName" label="券包名称" />
        <el-table-column prop="integralCost" label="积分">
          <template slot-scope="scope">
            <el-input-number
              :disabled="cardCostList.length > 1"
              v-model="scope.row.integralCost"
              :precision="0"
              :min="0"
              controls-position="right"
            />
          </template>
        </el-table-column>
        <el-table-column prop="cashCost" label="现金">
          <template slot-scope="scope">
            <el-popover
              popper-class="noClass"
                v-if="jifenquanxian == true"
                placement="bottom"
                trigger="hover"
                content="无积分购现金权限">
                <el-input-number
                slot="reference"
              :disabled="jifenquanxian"
              v-model="scope.row.cashCost"
              :precision="2"
              :min="0"
              controls-position="right"
            />
              </el-popover>
              <el-input-number
              v-else
              :disabled="cardCostList.length > 1"
              v-model="scope.row.cashCost"
              :precision="2"
              :min="0"
              controls-position="right"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">
        取 消
      </el-button>
      <el-button @click="submit">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import qs from 'qs';
import request from '../service/request.js';
export default {
  props: {
    packageData: {
      type: Object,
      default () {
        return {};
      },
    },
  },
  data () {
    return {
      jifenquanxian: '',
      dialogVisible: true,
      cardCostList: [],
      tableData: [],
    };
  },
  created () {
    this.jifenquanxian = localStorage.getItem('limitCodeType') == 'true';
    this.getList();
  },
  methods: {
    getList () {
      const params = {
        integralMallProId: this.packageData.integralMallProId,
      };
      this.loading = true;
      request.post('/api-integral-mall/coupon-package-show', qs.stringify(params)).then(res => {
        if (res.data.errorCode === 0) {
          this.cardCostList = res.data.result.cardCostList || [];
          this.tableData = [];
          this.tableData.push({
            proRefId: this.packageData.integralMallProId,
            integralCost: res.data.result.integralCost,
            cashCost: res.data.result.cashCost,
            proName: res.data.result.proName,
          });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 券包积分计算
    handleIntegralCostTotal () {
      let total = 0;
      let totalCash = 0;
      for (const item of this.cardCostList) {
        if (item.integralCost) {
          total = total + Number(item.integralCost);
        } else {
          total = total + 0;
        }
        if (item.cashCost) {
          totalCash = totalCash + Number(item.cashCost);
        } else {
          totalCash = totalCash + 0;
        }
      }
      this.tableData[0].integralCost = total;
      this.tableData[0].cashCost = totalCash;
    },
    submit () {
      if (this.cardCostList.length > 1) {
        for (const item of this.cardCostList) {
          if (item.cashCost === undefined || item.integralCost === undefined) {
            this.$message.error('卡券积分或现金不能为空');
            return false;
          }
        }
      }
      if (this.tableData[0].integralCost === undefined || this.tableData[0].cashCost === undefined) {
        this.$message.error('卡券积分或现金不能为空');
        return false;
      }
      const params = {
        integralMallProId: this.packageData.integralMallProId,
        cardCostList: this.cardCostList,
        proName: this.tableData[0].proName,
        integralCost: this.tableData[0].integralCost,
        cashCost: this.tableData[0].cashCost,
      };
      request.post('/api-integral-mall/update-coupon-package-price', params).then(res => {
        if (res.data.errorCode === 0) {
          this.$emit('getList');
          this.$emit('closePackage');
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    close () {
      this.$emit('closePackage');
    },
  },
};
</script>
<style scoped>
.slot-num {
  float: right;
  margin-top: -20px;
  font-size: 13px;
}
</style>
