<template>
  <el-drawer
    title="活动商品"
    size="1000px"
    :visible.sync="visible"
    :wrapperClosable="false"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="100px"
      style="padding: 0 20px 64px 0; position: relative;"
    >
      <el-form-item label="活动价" prop="priceType">
        <el-radio-group v-model="dataForm.priceType">
          <el-radio :label="0">固定折扣</el-radio>
          <el-radio :label="1">固定减价 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="dataForm.priceType == 0"
        prop="discount"
        :rules="[
          { required: true, message: '固定折扣不能为空', trigger: 'blur' },
        ]"
      >
        <el-col :span="4">
          <el-input-number
            v-model="dataForm.discount"
            :min="0"
            :precision="1"
            :controls="false"
            :max="10"
          ></el-input-number>
        </el-col>
        <el-col :span="12" :offset="2">
          <span style="margin: 0 10px">折</span>
          <span>
            <el-button type="primary" @click="goSet">设置</el-button>
          </span>
        </el-col>
      </el-form-item>
      <el-form-item
        v-if="dataForm.priceType == 1"
        prop="fixPrice"
        :rules="[
          { required: true, message: '固定减价不能为空', trigger: 'blur' },
        ]"
      >
        <el-col :span="4">
          <el-input-number
            v-model="dataForm.fixPrice"
            :min="0"
            :precision="2"
            :controls="false"
            :max="100000"
          ></el-input-number>
        </el-col>
        <el-col :span="12" :offset="2">
          <span>元</span>
          <span>
            <el-button type="primary" @click="setFixPrice">设置</el-button>
          </span>
        </el-col>
      </el-form-item>

      <div style="padding: 0 20px">
        <el-table
          :data="dataList"
          row-key="Id"
          border
          style="width: 100%; margin-top: 30px"
        >
          <el-table-column prop="skuSetName" align="center" label="规格">
          </el-table-column>
          <el-table-column prop="costPrice" align="center" label="成本价">
          </el-table-column>
          <el-table-column prop="originalSalePrice" align="center" label="原价">
          </el-table-column>
          <el-table-column prop="salePrice" align="center" label="价格">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.salePrice"
                :min="0"
                :precision="2"
                :controls="false"
                :max="1000000000"
                style="width: 100%"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="originalStock" align="center" label="库存" v-if="showInventory">
          </el-table-column>
          <el-table-column prop="stock" align="center" label="投放数量">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.stock"
                :min="0"
                :precision="0"
                :controls="false"
                style="width: 100%"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-form-item label="限购" prop="limitBuyNum" class="mt30">
        <el-col :span="4">
          <el-input-number
            v-model="dataForm.limitBuyNum"
            :min="0"
            :precision="0"
            :controls="false"
            :max="100000"
          ></el-input-number>
        </el-col>
        <el-col :span="12" :offset="2"
          >件 每个用户允许购买的最大数量（输入0不限购）</el-col
        >
      </el-form-item>
      <!-- <el-form-item label="可售数量" prop="realStockTotal">
        <el-col :span="4">
          <el-input-number
            v-model="dataForm.realStockTotal"
            :min="0"
            :precision="0"
            :controls="false"
            :max="10000000"
          ></el-input-number>
        </el-col>
      </el-form-item> -->
      <el-form-item label="初始销量" prop="initSaleNum">
        <el-col :span="4">
          <el-input-number
            v-model="dataForm.initSaleNum"
            :min="0"
            :precision="0"
            :controls="false"
            :max="10000000"
          ></el-input-number>
        </el-col>
      </el-form-item>
      <el-form-item label="商品排序" prop="sort">
        <el-input-number
          v-model="dataForm.sort"
          :min="0"
          :precision="0"
          :controls="false"
          :max="10000000"
        ></el-input-number>
      </el-form-item>
      <div class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" :loading="loading" @click="dataFormSubmit()"
          >确定</el-button
        >
      </div>
    </el-form>
  </el-drawer>
</template>

<script>
import {
  seckillActivityProductAdd_api,
  seckillActivityProductInfo_api,
} from "@/api/marketing/seckill";

export default {
  props: {
    showInventory: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      visible: false,
      dataForm: {
        productId: undefined, // 商品id
        seckillId: undefined, // 秒杀活动id
        priceType: 0, // 价格类型（0：固定折扣，1：固定减价）
        limitBuyNum: 0, // 限购数量
        realStockTotal: 0, // 可售数量
        initSaleNum: 0, // 初始销量
        sort: 1, // 排序
      },
      dataList: [], // SKU
      dataRule: {
        priceType: [
          {
            required: true,
            message: "活动价不能为空",
            trigger: "change",
          },
        ],
        limitBuyNum: [
          {
            required: true,
            message: "限购不能为空",
            trigger: "blur",
          },
        ],
        realStockTotal: [
          {
            required: true,
            message: "可售数量不能为空",
            trigger: "blur",
          },
        ],
        initSaleNum: [
          {
            required: true,
            message: "初始销量不能为空",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "商品排序不能为空",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },

  methods: {
    init(id, seckillId, productId, skuList = []) {
      this.dataForm.id = id || null;
      this.dataForm.productId = productId;
      this.dataForm.seckillId = seckillId;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
      });
      // 查询商品所有规格
      if (id) {
        seckillActivityProductInfo_api(id).then((res) => {
          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.dataList = res.data.productSkuSetList || [];
          }
        });
        return;
      }
      this.dataList = skuList;
    },
    // 设置折扣
    goSet() {
      if (this.dataForm.discount != "") {
        this.dataList.map((v, i) => {
          v.salePrice = Number(
            v.originalSalePrice * (this.dataForm.discount / 10)
          ).toFixed(2);
        });
      } else {
        this.$message.error("请输入折扣");
      }
    },
    setFixPrice() {
      if (this.dataForm.fixPrice != "") {
        if (
          this.dataList.some(
            (val) => val.originalSalePrice <= this.dataForm.fixPrice
          )
        ) {
          this.$message.error("减价金额不得超过商品原价");
          return false;
        }
        this.dataList.map((v, i) => {
          v.salePrice = Number(v.salePrice - this.dataForm.fixPrice).toFixed(2);
        });
      } else {
        this.$message.error("请输入减价");
      }
    },
    // 提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.dataForm.productSkuSetList = this.dataList.map((v) => {
            if(!v.stock){
              v.stock = 0;
            }
            return v;
          });
          seckillActivityProductAdd_api(this.dataForm)
            .then((res) => {
              this.loading = false;
              if (res && res.code == 200) {
                this.$message.success(
                  this.dataForm.id ? "修改成功" : "添加成功"
                );
                this.visible = false;
                this.$emit("updataList", 1);
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    // 取消
    cancel() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.mt30 {
  margin-top: 30px;
}

::v-deep .el-drawer__body {
  position: relative !important;
}

.dialog-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #ffffff;
  width: 1000px;
  padding: 0 0 20px 40px;
  box-sizing: border-box;
}
</style>
