<template>
  <div style="padding: 20px">
    <div>
      <div class="header">
        <h3>{{ form.shareName ? form.shareName : "分享奖励设置" }}</h3>
      </div>

      <span style="color: orange">*所设置分享奖励比例只对所选商品进行设置！</span>
    </div>

    <el-form ref="form" :rules="rules" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="分享奖励(%)" style="margin-top: 30px" prop="proportion">
            <el-input-number
              v-model="form.proportion"
              style="width: 150px"
              :controls="false"
              max="100"
              min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="商品" style="margin-top: 30px">
            <el-button type="primary" size="small" @click="selectProDuct"
              >选择商品</el-button
            >
          </el-form-item>
          <div style="margin-left: 30px">
            已选{{ multipleSelection.length }}件
            <el-button size="small" style="margin-left: 10px" @click="addRemove"
              >批量移除</el-button
            >
          </div>

          <el-table
            :data="tableData"
            style="width: 100%; margin-left: 30px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="scope.row.pic"
                  :preview-src-list="[scope.row.pic]"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="商品名称"
              align="center"
              prop="spuName"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="分类" align="center" prop="categoryName" />
            <el-table-column
              label="店铺所属分类"
              align="center"
              prop="merchantClassifyName"
            />
            <el-table-column label="价格" align="center" width="120">
              <template slot-scope="scope">
                {{ scope.row.lowestPrice.toFixed(2) }}/{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="起批量" align="center">
              <template slot-scope="scope">
                {{ scope.row.lowestPurchase }}{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="预计库存" align="center">
              <template slot-scope="scope">
                {{ scope.row.totalPredictStocks ? scope.row.totalPredictStocks : 0
                }}{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="实际库存" align="center">
              <template slot-scope="scope">
                {{ scope.row.totalStocks }}{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="实际销量" align="center" prop="salesVolume">
            </el-table-column>
            <el-table-column label="销售方式" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.spuType == 0">
                  {{
                    scope.row.saleModel == 1
                      ? "普通商品"
                      : scope.row.saleModel == 2
                      ? "采集预售"
                      : scope.row.saleModel == 3
                      ? "团批秒杀"
                      : scope.row.saleModel == 4
                      ? "清库专区"
                      : scope.row.saleModel == 5
                      ? "新店福利"
                      : ""
                  }}
                </span>
                <span v-else-if="scope.row.spuType == 1">
                  {{
                    scope.row.saleModel == 1
                      ? "普通商品"
                      : scope.row.saleModel == 2
                      ? "预售"
                      : scope.row.saleModel == 3
                      ? "团购秒杀"
                      : scope.row.saleModel == 4
                      ? "特价"
                      : scope.row.saleModel == 5
                      ? "新人福利"
                      : ""
                  }}
                </span>
                <span v-eles>
                  {{ scope.row.saleModel == 7 ? "返券商品" : "" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="商品状态" align="center">
              <template slot-scope="scope">
                {{
                  scope.row.spuStatus == 2
                    ? "售罄"
                    : scope.row.spuStatus == 0
                    ? "上架"
                    : scope.row.spuStatus == 1
                    ? "下架"
                    : ""
                }}
              </template>
            </el-table-column>

            <el-table-column
              v-if="showButton"
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="100"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="remove(scope.row, scope.$index)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
        <el-col :span="24" style="text-align: center; margin-top: 20px" v-if="showButton">
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
    <productDialog
      ref="productDialog"
      @productDialogInfo="productDialogInfo"
    ></productDialog>
  </div>
</template>

<script>
import {
  shareRewardList,
  shareRewardSave,
  batchRemove,
  shareRewardEdit,
} from "@/api/manage/share";
import { getGoodsListPage } from "@/api/manage/product";
import productDialog from "./components/periodProductDialog.vue";
export default {
  components: { productDialog },
  data() {
    return {
      showButton: true,
      form: {
        proportion: null,
      },
      rules: {
        proportion: [{ required: true, message: "请输入分享奖励比例", trigger: "blur" }],
      },
      tableData: [],
      multipleSelection: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        isShare: 1,
        spuIds: null,
      },
    };
  },
  created() {
    if (this.$route.query.item) {
      this.queryParams.spuIds = this.$route.query.item.selectGoodsIds;
      this.form = this.$route.query.item;
      this.getList();
    }
  },
  mounted() {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addRemove() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请先选择要移除的商品！");
        return false;
      }
      let ids = [];
      this.multipleSelection.forEach((e) => {
        ids.push(e.id);
      });
      this.$confirm("是否移除已选商品,移除后, 该商品不可获得分享奖励", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchRemove({
            // id: this.$route.query.item.id,
            selectGoodsIds: ids.toString(),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("移除成功！");
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    remove(row, index) {
      this.$confirm("是否移除已选商品,移除后, 该商品不可使用获得分享奖励", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchRemove({
            // id: this.$route.query.item.id,
            selectGoodsIds: row.id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("移除成功！");
              this.tableData.splice(index, 1);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    productDialogInfo(list) {
      this.tableData = [...this.tableData, ...list];
      this.tableData = this.tableData.filter((item, index, self) => {
        return self.findIndex((t) => t.id === item.id) === index;
      });
    },
    selectProDuct() {
      this.$refs.productDialog.openDialog();
    },
    submitForm() {
      console.log(this.tableData);
      if (this.tableData.length < 1) {
        this.$message.error("请选择可以获得分享奖励的商品！");
        return;
      }
      let ids = [];
      this.tableData.forEach((e) => {
        ids.push(e.id);
      });
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            this.form.selectGoodsIds = ids.toString();
            shareRewardEdit(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("编辑保存成功！");
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.replace({ path: "/store/manage/shareIndex" });
                this.getList();
              }
            });
          } else {
            this.form.selectGoodsIds = ids.toString();
            shareRewardSave(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("保存成功！");
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.replace({ path: "/store/manage/shareIndex" });
                this.getList();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      getGoodsListPage(this.queryParams).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>
