<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <div slot="dialog__content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <!-- <el-form-item label="定金可退：" prop="isRefundEarnestMoney">
            <el-radio v-model="ruleForm.isRefundEarnestMoney" :label="1"
              >是</el-radio
            >
            <el-radio v-model="ruleForm.isRefundEarnestMoney" :label="2"
              >否</el-radio
            >
            <span>
              选择是，用户可在付尾款前申请退定金（申请后自动退，无需审核），或付尾款时间结束后系统自动退定金
            </span>
          </el-form-item> -->
          <el-form-item v-if="isAdd" label="选择商品：">
            <el-button type="primary" @click="selectProduct"
              >点击请选择商品</el-button
            >
            <span> 备注：一次最多添加五个商品 </span>
          </el-form-item>

          <div style="padding: 0 0 0 20px; font-size: 16px; font-weight: 600">
            已选择商品
          </div>
          <div v-if="isAdd" style="padding: 20px">
            <div
              v-for="item in ruleForm.list"
              :key="item.id"
              style="border-top: 1px solid #ccc; padding: 10px 0 0 0"
            >
              <div style="font-size: 16px; margin-bottom: 20px">
                <span>商品ID:{{ item.productId }}</span>
                <span style="margin-left: 20px">商品名称:{{ item.name }}</span>
              </div>
              <el-table
                border
                ref="multipleTable"
                :data="item.pointsProductSpecList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <!-- <el-table-column align="center" label="是否兑换" width="80">
                  <template slot-scope="scope">
                    <el-checkbox
                      :true-label="1"
                      :false-label="0"
                      v-model="scope.row.isAdvanceSell"
                    ></el-checkbox>
                  </template>
                </el-table-column> -->
                <el-table-column
                  align="center"
                  label="SKU-ID"
                  prop="productSpecId"
                />
                <el-table-column
                  align="center"
                  label="规格"
                  prop="attributeValue"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.attributeValue }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="属性" prop="address">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.attributeList
                        ? scope.row.attributeList[0].attributeName
                        : "无"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="销售价"
                  prop="marketPrice"
                  width="120"
                />
                <el-table-column
                  align="center"
                  label="*兑换所需积分"
                  width="200"
                >
                  <template slot="header">
                    <span style="color: red">*兑换所需积分</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.redeemRequiredPoints"
                      :min="0"
                      :precision="0"
                      label="请输入兑换所需积分"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="*兑换库存" width="200">
                  <template slot="header">
                    <span style="color: red">*兑换库存</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.redeemInventory"
                      :min="0"
                      :precision="0"
                      :step="10"
                      label="请输入兑换库存"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="*限制兑换（输入0则不限）"
                  width="200"
                >
                  <template slot="header">
                    <span style="color: red">*限制兑换（输入0则不限）</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.redeemRestrictions"
                      :min="0"
                      :precision="0"
                      label="请输入限制兑换"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="*限制兑换类型"
                  width="200"
                >
                  <template slot="header">
                    <span style="color: red">*限制兑换类型</span>
                  </template>
                  <template slot-scope="scope">
                    <el-select
                      size="mini"
                      v-model="scope.row.redeemRestrictionsType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in [
                          { value: 1, label: '每天' },
                          { value: 2, label: '永久' },
                        ]"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-empty
              v-show="ruleForm.list?.length == 0"
              description="请选择商品"
            ></el-empty>
          </div>
          <div v-else style="padding: 20px">
            <div style="border-top: 1px solid #ccc; padding: 10px 0 0 0">
              <div style="font-size: 16px; margin-bottom: 20px">
                <span>商品ID:{{ ruleForm.id }}</span>
                <span style="margin-left: 20px"
                  >商品名称:{{ ruleForm.productName }}</span
                >
              </div>
              <el-table
                border
                ref="multipleTable"
                :data="ruleForm.pointsProductSpecList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  align="center"
                  label="SKU-ID"
                  prop="productSpecId"
                />
                <el-table-column
                  align="center"
                  label="*兑换所需积分"
                  width="200"
                >
                  <template slot="header">
                    <span style="color: red">*兑换所需积分</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.redeemRequiredPoints"
                      :min="0"
                      :precision="0"
                      label="请输入兑换所需积分"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="*兑换库存" width="200">
                  <template slot="header">
                    <span style="color: red">*兑换库存</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.redeemInventory"
                      :min="0"
                      :precision="0"
                      :step="10"
                      label="请输入兑换库存"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="*限制兑换（输入0则不限）"
                  width="200"
                >
                  <template slot="header">
                    <span style="color: red">*限制兑换（输入0则不限）</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.redeemRestrictions"
                      :min="0"
                      :precision="0"
                      label="请输入限制兑换"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="*限制兑换类型"
                  width="200"
                >
                  <template slot="header">
                    <span style="color: red">*限制兑换类型</span>
                  </template>
                  <template slot-scope="scope">
                    <el-select
                      size="mini"
                      v-model="scope.row.redeemRestrictionsType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in [
                          { value: 1, label: '每天' },
                          { value: 2, label: '永久' },
                        ]"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- <el-empty
              v-show="ruleForm.list?.length == 0"
              description="请选择商品"
            ></el-empty> -->
          </div>
        </el-form>
      </div>
      <!-- 选择商品 -->
    </obj-modal>
    <commodity @getProduct="getProduct" ref="commodity"></commodity>
  </div>
</template>
<script>
import commodity from "./commodity.vue";
import { debounce, cloneDeep } from "lodash";
export default {
  components: { commodity },
  props: {
    marketId: {
      type: String,
      default: "",
    },
    shopId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "库存预警设置",
        show: false,
        width: "1200px",
        fullscreen: true,
      },
      modalData: {},
      ruleForm: {
        productList: [],
        isRefundEarnestMoney: 1, //定金可退 1是 0
      },
      tableData: [],
      rules: {},
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.ruleForm.resetFields();
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: () => {
          this.ruleForm = {
            marketId: this.marketId,
            shopId: this.shopId,
            unitType:
              JSON.parse(sessionStorage.getItem("userInfo")).role ==
              "ROLE_MERCHANT"
                ? 3
                : 2,
            list: [],
          };
          this.modalConfig.title = "添加积分兑换商品";
          this.isAdd = true;
        },
        update: () => {
          this.modalConfig.title = "编辑积分商品";
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.ruleForm = row;

      // this.ruleForm = row;
    },
    selectProduct() {
      console.log("选择商品", this.marketId, this.shopId);
      this.$nextTick(() => {
        this.$refs.commodity.toggle().add({
          marketId: this.marketId,
          shopId: this.shopId,
        });
      });
    },
    handleSelectionChange(e) {
      console.log(e);
    },
    getProduct(row) {
      this.ruleForm.list = row.map((item) => {
        let data = item.productSpecificationList.map((i) => {
          return {
            productSpecId: i.id,
            redeemRequiredPoints: 0,
            redeemInventory: 0,
            redeemRestrictions: 0,
            redeemRestrictionsType: 1,
            attributeValue: i.attributeValue,
            attributeList: i.attributeList,
            marketPrice: i.marketPrice,
          };
        });
        return {
          productId: item.id,
          name: item.name,
          redeemEnable: false,
          pointsProductSpecList: data,
        };
      });

      console.log("获取商品");
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          // submit: true,
          handle: () => {
            if (this.isAdd) {
              this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                  console.log(valid);
                  this.$api.marketing
                    .batchAddPointsProduct(this.ruleForm)
                    .then((res) => {
                      this.$emit("queryList");
                      this.toggle();
                    });
                }
              });
            } else {
              this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                  console.log(valid);
                  this.$api.marketing
                    .updatePointsProductSave(this.ruleForm)
                    .then((res) => {
                      this.$emit("queryList");
                      this.toggle();
                    });
                }
              });
            }
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>
