<template>
  <section class="order_management">
    <ai-list isTabs>
      <template slot="content">
        <ai-search-bar bottomBorder>
          <template slot="left">
            <el-select
              size="small"
              v-model="searchObj.shopId"
              placeholder="请选择店铺"
              clearable
              @change="(page.current = 1), getList()">
              <el-option
                v-for="(item, i) in shopList"
                :key="i"
                :label="item.shopName"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select
              size="small"
              v-model="searchObj.merchandiseType"
              placeholder="请选择商品类型"
              clearable
              @change="(page.current = 1), getList()">
              <el-option
                v-for="(item, i) in dict.getDict('integralMerchandiseType')"
                :key="i"
                :label="item.dictName"
                :value="item.dictValue">
              </el-option>
            </el-select>
            <el-select
              size="small"
              v-model="searchObj.status"
              placeholder="请选择状态"
              clearable
              @change="(page.current = 1), getList()">
              <el-option
                v-for="(item, i) in dict.getDict('integralMerchandiseStatus')"
                :key="i"
                :label="item.dictName"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </template>
          <template slot="right">
            <el-input
              v-model="searchObj.merchandiseName"
              size="small"
              placeholder="商品名"
              @keyup.enter.native="(page.current = 1), getList()"
              @clear="(page.current = 1), searchObj.merchandiseName = '', getList()"
              clearable
              suffix-icon="iconfont iconSearch" />
          </template>
        </ai-search-bar>
        <ai-search-bar class="mt10">
          <template slot="left">
            <el-button
              type="primary"
              icon="iconfont iconAdd"
              @click="add()"
              v-if="$permissions('app_appvillagerintegralmerchandise_edit')">
              添加
            </el-button>
            <ai-download
              :instance="instance"
              :fileName="'商品列表'"
              url="/app/appvillagerintegralmerchandise/export"
              v-if="$permissions('app_appvillagerintegralmerchandise_export')"
              :params="{ ...searchObj, areaId: areaId }">
            </ai-download>
          </template>
          <template slot="right"> </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="page.total"
          :current.sync="page.current"
          :size.sync="page.size"
          @getList="getList">
          <el-table-column
            label="商品图"
            slot="photo"
            align="center"
            width="150">
            <template v-slot="{ row }">
              <ai-uploader
                :disabled="true"
                :instance="instance"
                v-model="row.photo"
                :limit="9">
              </ai-uploader>
            </template>
          </el-table-column>
          <el-table-column label="操作" slot="options" align="center" width="200" fixed="right">
            <template v-slot="{ row }">
              <div class="table-options">
                <el-button
                  type="text"
                  title="编辑"
                  :disabled="!$permissions('app_appvillagerintegralmerchandise_edit') || row.enable != 1"
                  @click="edit(row)">
                  编辑
                </el-button>
                <el-button
                  type="text"
                  title="详情"
                  :disabled="!$permissions('app_appvillagerintegralmerchandise_detail') || row.enable != 1"
                  @click="goDetail(row)">
                  详情
                </el-button>
                <el-button
                  type="text"
                  title="上架"
                  :disabled="row.status != 0 || !$permissions('app_appvillagerintegralmerchandise_edit') || row.enable != 1"
                  @click="changeStatus(row)">
                  上架
                </el-button>
                <el-button
                  type="text"
                  title="下架"
                  :disabled="row.status != 1 || !$permissions('app_appvillagerintegralmerchandise_edit') || row.enable != 1"
                  @click="changeStatus(row)">
                  下架
                </el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </section>
</template>

<script>
export default {
  name: "goodsManagement",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    areaId: String,
  },
  data() {
    return {
      searchObj: {
        shopId: "",
        status: "",
        merchandiseName: "",
        merchandiseType: "",
      },
      page: {
        size: 10,
        current: 1,
        total: 0,
      },
      tableData: [],
      shopList: [],
    };
  },
  computed: {
    colConfigs() {
      let _ = this;
      return [
        {
          prop: "shopId",
          label: "店铺名称",
        },
        {
          slot: "photo",
          prop: "photo",
          align: "center",
          label: "商品图",
        },
        {
          prop: "merchandiseName",
          align: "left",
          label: "商品名",
          width: 180,
          "show-overflow-tooltip": false,
        },
        {
          prop: "costIntegral",
          align: "center",
          label: "单价",
          width: 100,
        },
        {
          prop: "inventoryNumber",
          align: "center",
          label: "库存",
        },
        {
          prop: "saleNumber",
          align: "center",
          label: "销量",
        },
        {
          prop: "status",
          align: "center",
          label: "状态",
          render(h, { row }) {
            return h(
              "span",
              {
                style: {
                  color: _.$dict.getColor(
                    "integralMerchandiseStatus",
                    row.status
                  ),
                },
              },
              _.$dict.getLabel("integralMerchandiseStatus", row.status)
            );
          },
        },
      ];
    },
  },
  created() {
    this.dict.load("integralMerchandiseType", "integralMerchandiseStatus");
    this.getShopList().then(() => {
      this.getList();
    });
  },
  methods: {
    getList() {
      this.instance
        .post(`/app/appvillagerintegralmerchandise/list`, null, {
          params: {
            ...this.searchObj,
            ...this.page,
            areaId: this.areaId,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.records;
            this.tableData.map((e, index) => {
              let i = this.shopList.findIndex((item) => item.id == e.shopId);
              if (i > -1) {
                e.shopId = this.shopList[i].shopName;
              }
              if (e.photo) {
                e.allPhoto = [...JSON.parse(e.photo)];
                e.photo = [{ ...e.allPhoto[0] }];
              } else {
                e.photo = [];
              }
            });
            this.page.total = res.data.total;
          }
        });
    },
    updateList() {
      this.getShopList().then(() => {
        this.getList();
      });
    },
    reset() {
      Object.keys(this.searchObj).forEach((e) => {
        this.searchObj[e] = "";
      });
      this.getList();
    },
    add() {
      this.$emit("showDetail", { isAdd: true });
    },
    edit(row) {
      this.$emit("showDetail", { isAdd: true, ...row });
    },
    goDetail(row) {
      this.$emit("showDetail", { isAdd: false, ...row });
    },
    changeStatus(row) {
      let status =
        row.status == 0
          ? `上架 ${row.shopId}-${row.merchandiseName}`
          : `下架 ${row.shopId}-${row.merchandiseName}`;
      this.$confirm(
        `<p>是否要<span style='color:#2266FF;'>${status}</span>？</p>`,
        {
          type: "error",
        }
      )
        .then(() => {
          this.instance
            .post("/app/appvillagerintegralmerchandise/enableOrDisable", null, {
              params: { id: row.id },
            })
            .then((res) => {
              if (res?.code == 0) {
                this.$message.success("操作成功!");
                this.getList();
              }
            });
        })
        .catch(() => {});
    },
    getShopList() {
      return new Promise((reslove) => {
        this.instance
          .post(`/app/appvillagerintegralshop/list`, null, {
            params: {
              size: 100000,
              areaId: this.areaId,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              this.shopList = res.data.records;
              reslove();
            }
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order_management {
  background: #f3f6f9;
  height: 100%;
  overflow: auto;
  .iconShow {
    padding: 0 8px;
  }
  .iconfont {
    cursor: pointer;
  }
}
</style>
