<template>
  <!-- 多级套餐商品列表 -->
  <div class="app-main-height">
    <div>
      <el-row>
        <el-col :span="18">
          <div class="left-panel">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="" class="number">
                <span>商品总计：{{ count }}个</span>
              </el-form-item>
              <el-form-item label="">
                <el-select
                  v-model="formInline.state"
                  placeholder="请选择商品状态"
                  size="small"
                >
                  <el-option label="全部状态" value="-2" />
                  <el-option label="待审核" value="0" />
                  <el-option label="已上架" value="1" />
                  <el-option label="已下架" value="2" />
                  <el-option label="审核失败" value="3" />
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model.trim="formInline.goodsName"
                  placeholder="请输入商品名称"
                  size="small"
                  :clearable="false"
                />
              </el-form-item>
              <el-form-item>
                <el-button-group>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    size="small"
                    @click="handSearch"
                  >
                    搜索
                  </el-button>
                </el-button-group>
              </el-form-item>
              <el-form-item>
                <el-button-group>
                  <el-button type="primary" size="small" @click="handleEmpty">
                    清空
                  </el-button>
                </el-button-group>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="right-panel">
            <el-form>
              <el-form-item>
                <el-button-group>
                  <router-link
                    :to="{
                      name: 'MoreLevelEditlist',
                      query: { name: 'create' },
                    }"
                  >
                    <el-button icon="el-icon-plus" type="primary" size="small">
                      新增商品
                    </el-button>
                  </router-link>
                </el-button-group>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <template slot="empty">
          <p>{{ dataText }}</p>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="goodsID"
          label="ID"
          width="130"
          fixed
        />
        <el-table-column
          show-overflow-tooltip
          prop="goodsName"
          label="商品名称"
        />
        <el-table-column show-overflow-tooltip prop="cityName" label="产地">
          <template slot-scope="scope">
            {{ scope.row.cityName }}{{ scope.row.countyName }}
          </template>
        </el-table-column>

        <el-table-column
          prop="goodsClassificationName"
          label="所属分类"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          prop="goodsPrice"
          label="价格 (元)"
          show-overflow-tooltip
          width="100"
        />
        <!-- <el-table-column
          prop="providerName"
          label="供应商名称"
          show-overflow-tooltip
          width='150'
        /> -->
        <el-table-column
          prop="state"
          label="状态"
          show-overflow-tooltip
          width="100"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.state | statusFilter">
              {{ scope.row.state | textFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          width="180"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          show-overflow-tooltip
          width="180"
        />
        <el-table-column label="操作" fixed="right" width="250">
          <template slot-scope="{ row }">
            <router-link
              to=""
              @click.native.prevent="handleEditlist(row.goodsID, row.state)"
              style="padding-right: 20px"
            >
              <el-button type="text" size="mini"> 编辑 </el-button>
            </router-link>
            <el-button
              type="text"
              size="mini"
              @click="copyGoodS(row)"
              style="padding-right:10px;"
            >复制</el-button>
            <el-button
              v-if="row.state == 0"
              type="text"
              size="mini"
              @click="handleCancel(row.goodsID)"
              style="padding-right: 20px"
            >取消申请</el-button>
            <el-button
              v-if="row.state == 1"
              type="text"
              size="mini"
              @click="handleOut(row.goodsID)"
              style="padding-right: 20px"
            >下架</el-button>
            <el-button
              v-if="row.state == 2 || row.state == 3 || row.state == -1"
              type="text"
              size="mini"
              @click="handleDelete(row.goodsID)"
              style="padding-right: 20px"
            >删除</el-button>
            <el-button
              v-if="row.state == 3 || row.state == 2 || row.state == -1"
              type="text"
              size="mini"
              style="padding-right: 20px; margin-left: 0px"
              @click="handleSubmit(row.goodsID)"
            >提交审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :layout="layout"
        :total="count"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "Brand ",
        1: "success",
        2: "danger",
        3: "danger",
        4: "danger",
        "-1": "danger",
      };
      return statusMap[status];
    },
    textFilter(status) {
      const statusMap = {
        0: "待审核",
        1: "已上架",
        2: "已下架",
        3: "审核失败",
        "-1": "已下架",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      params: {},
      frame: {},
      count: 0, // 商品总计
      listLoading: false,
      goodsDetails: {}, //商品详情 用于复制
      dataText: "暂无数据",
      layout: "total, prev, pager, next, jumper",
      queryForm: {
        pageNo: 1,
        pageSize: 10,
      },
      formInline: {
        goodsName: "",
        state: "",
      },
      tableData: [],
    };
  },
  computed: {
    ...mapGetters(["merchantsId"]),
  },
  created() {
    let params = localStorage.getItem("formInline")
      ? JSON.parse(localStorage.getItem("formInline"))
      : "";
    if (params) {
      this.formInline.state = params.data.state;
      this.formInline.goodsName = params.data.goodsName;
      this.queryForm.pageNo = params.data.pageNum;
    }
    this.fetchData(); // 获取商品列表
  },
  methods: {
    // 复制商品
    copyGoodS(event) {
      this.listLoading = true;
      this.getGoodsDetails(event);
    },
    // 获取商品详情
    getGoodsDetails(event) {
      const params = {
        type: "getGoodsDetails",
        data: {
          goodsID: event.goodsID,
        },
      };
      this.$http.post(this.$api.getGoodsDetails, params).then((res) => {
        this.goodsDetails = res;
        this.addGoods();
      });
    },
    // 执行新增 伪复制
    addGoods() {
      this.goodsDetails.goodsID = "";
      this.goodsDetails.goodsName = "副本-" + this.goodsDetails.goodsName;
      const params = {
        type: "addGoods",
        data: this.goodsDetails,
      };
      this.$http.post(this.$api.addGoods, params).then((res) => {
        if (res) {
          this.listLoading = false;
          this.$message.success("复制成功");
          this.fetchData(); 
        }
      });
    },
    // 获取商品列表
    fetchData() {
      this.listLoading = true;
      let params = {
        type: "getGoodsList",
        data: {
          merchantsID: this.merchantsId,
          state: this.formInline.state,
          goodsName: this.formInline.goodsName,
          pageNum: this.queryForm.pageNo,
        },
      };
      this.params = params;
      this.$http.post(this.$api.getGoodsList, params).then((res) => {
        setInterval(() => {
          this.listLoading = false;
        }, 1000);

        if (res) {
          this.count = res.count;
          this.tableData = res.goodsList;
        } else {
          this.count = "";
          this.tableData = [];
        }
      });
    },
    // 分页
    handleCurrentChange(e) {
      this.queryForm.pageNo = e;
      this.fetchData();
    },
    // 搜索
    handSearch() {
      this.queryForm.pageNo = 1;
      this.fetchData();
    },
    // 清空
    handleEmpty() {
      const formInline = this.formInline;
      for (const key in formInline) {
        formInline[key] = "";
      }
      this.formInline = formInline;
      localStorage.removeItem("formInline");
      this.fetchData();
    },
    // 删除
    handleDelete(goodsID) {
      this.$baseConfirm(
        "此操作将永久删除该商品，删除后不可恢复?",
        null,
        async () => {
          // 删除接口
          this.updateState(goodsID, "删除成功", "4");
        }
      );
    },
    // 取消申请
    handleCancel(goodsID) {
      this.$baseConfirm(
        "此商品正在审核中，取消申请后商品恢复已下架状态！",
        null,
        async () => {
          // 取消申请
          this.updateState(goodsID, "取消成功", "-1");
        }
      );
    },
    // 下架
    handleOut(goodsID) {
      this.$baseConfirm(
        "此商品已上架，操作下架后商品将不在商城显示并进入已下架状态！",
        null,
        async () => {
          // 下架接口
          this.updateState(goodsID, "下架成功", "2");
        }
      );
    },
    // 提交审核
    handleSubmit(goodsID) {
      this.$baseConfirm(
        "提交审核后商品将进入待审核状态，请确认是否继续操作",
        null,
        async () => {
          this.updateState(goodsID, "提交成功", "0");
        }
      );
    },
    updateState(goodsID, text, b) {
      const params = {
        type: "updateState",
        data: {
          state: b,
          goodsID: goodsID,
        },
      };
      this.$http.post(this.$api.updateState, params).then((res) => {
        this.fetchData();
        if (b === "0") {
          if (res) {
            this.$nextTick(() => {
              this.$baseMessage(res.resultMsg, "error");
            });
          } else {
            this.$nextTick(() => {
              this.$baseMessage(text, "success");
            });
          }
        } else {
          this.$nextTick(() => {
            this.$baseMessage(text, "success");
          });
        }
      });
    },
    //多级商品编辑
    handleEditlist(goodsID, goodstate) {
      localStorage.setItem("formInline", JSON.stringify(this.params));
      this.$store
        .dispatch("goods/Editlist", { goodsID: goodsID, goodstate: goodstate })
        .then((response) => {
          this.$router.push({
            name: "MoreLevelEditlist",
            query: { name: "update" },
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.number {
  margin-right: 50px;
}
</style>

