<template>
  <div>
    <div class="tips">
      此页面数据在每日0点提交并生效;请勿频繁操作，以免影响用户体验。
    </div>
    <div class="tipsLevel">积分/成长值任务（9）</div>
    <div class="tipsLevel" v-if="storeList.length > 1">
      <el-select v-model="formInline.shopId" placeholder="请选择">
        <el-option
          v-for="item in storeList"
          :key="item.shopId"
          :label="item.shopName"
          :value="item.shopId"
        >
        </el-option>
      </el-select>
      <el-button style="margin-left: 20px" @click="getList" type="primary"
        >查询</el-button
      >
    </div>
    <el-table :data="list" :border="true" style="width: 100%">
      <el-table-column width="100" align="center" label="类型" prop="unitType">
        <template v-slot="scope">
          <span>{{ getUnitType(scope.row.unitType) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="任务名称" prop="taskName" />
      <el-table-column
        align="center"
        label="任务描述"
        prop="taskConfigDetail"
      />
      <el-table-column
        width="100"
        align="center"
        label="排序"
        prop="taskSort"
      />
      <el-table-column
        width="140"
        align="center"
        label="状态"
        prop="taskEnable"
      >
        <template v-slot="scope">
          <el-switch
            @change="changeState(scope.row)"
            v-model="scope.row.taskEnable"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="240">
        <template v-slot="scope">
          <el-button
            v-show="scope.$index != 0"
            size="mini"
            @click="addTop(scope.row)"
            type="primary"
            >置顶</el-button
          >
          <el-button size="mini" @click="addConfig(scope.row)" type="primary"
            >配置积分</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 配置积分 -->
    <addOrUpdate @getList="getList" ref="addOrUpdate"></addOrUpdate>
    <!-- 购买商品积分 -->
    <productPoints ref="productPoints" @getList="getList"></productPoints>
    <!--  分享积分 -->
    <sharePoints ref="sharePoints" @getList="getList"></sharePoints>
    <!-- 评价 -->
    <evaluate ref="evaluate" @getList="getList"></evaluate>
    <!-- 浏览 -->
    <browse ref="browse" @getList="getList"></browse>
  </div>
</template>

<script>
import browse from "./popup/browse";
import evaluate from "./popup/evaluate.vue";
import sharePoints from "./popup/share-points.vue";
import productPoints from "./popup/product-points.vue";
import addOrUpdate from "./popup/add-or-update.vue";
import { mapState } from "vuex";
export default {
  components: {
    addOrUpdate,
    productPoints,
    sharePoints,
    evaluate,
    browse,
  },
  data() {
    return {
      list: [],
      formInline: {
        unitType: "1",
        marketId: "",
        shopId: "",
      },
    };
  },
  created() {
    this.formInline = {
      unitType:
        JSON.parse(sessionStorage.getItem("userInfo")).role == "ROLE_MERCHANT"
          ? 3
          : 2,
      marketId: this.marketId,
      shopId: this.shopId,
    };
    this.getList();
  },
  methods: {
    // getData() {
    //   this.$api.mer_admin
    //     .storeList({ marketId: this.formInline.marketId })
    //     .then((res) => {
    //       this.storeList = res.data.data;
    //       this.formInline.shopId = res.data.data[0].shopId;
    //       this.$nextTick(() => {
    //         this.getList();
    //       });
    //     });
    // },
    getList() {
      this.$api.marketing.integralList(this.formInline).then((res) => {
        this.list = res.data.data;
      });
    },
    add() {},
    confirmEvent() {},
    cancelEvent() {},
    getUnitType(type) {
      if (type == 1) {
        return "市场";
      } else if (type == 2) {
        return "摊主";
      } else if (type == 3) {
        return "云店";
      }
    },
    changeState(e) {
      if (e.taskEnable) {
        this.$confirm("是否要开启此任务, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$api.marketing
              .reverseEnable({
                id: e.id,
              })
              .then((res) => {
                this.getList();
              })
              .catch(() => {
                this.getList();
              });
          })
          .catch(() => {
            this.getList();
          });
      } else {
        this.$confirm("是否要关闭此任务, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$api.marketing
              .reverseEnable({
                id: e.id,
              })
              .then((res) => {
                this.getList();
              })
              .catch((err) => {
                this.getList();
              });
          })
          .catch(() => {
            this.getList();
          });
      }
    },
    addTop(e) {
      this.$confirm("是否要置顶, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.marketing
            .integralTop({
              id: e.id,
            })
            .then((res) => {
              this.getList();
            })
            .catch(() => {
              this.getList();
            });
        })
        .catch(() => {
          this.getList();
        });
    },
    addConfig(e) {
      console.log(e);
      if (e.taskName === "每日签到") {
        this.$refs.addOrUpdate.toggle(e).add();
      } else if (e.taskName === "购买商品") {
        this.$refs.productPoints.toggle(e).add();
      } else if (e.taskName === "分享商品") {
        this.$refs.sharePoints.toggle(e).add();
      } else if (e.taskName === "评价商品") {
        this.$refs.evaluate.toggle(e).add();
      } else if (e.taskName === "浏览商品") {
        this.$refs.browse.toggle(e).add();
      }
    },
  },
  computed: {
    ...mapState("userData", [
      "isMerchant",
      "marketList",
      "storeList",
      "marketId",
      "shopId",
    ]),
  },
};
</script>

<style scoped  lang="scss" >
.tips {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 10px;
  width: 100%;
  font-size: 16px;
  background: #e5e5e5;
  color: #faa639;
}
.tipsLevel {
  margin: 20px 0;
}
</style>