<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>商品名称:</span>
        <el-input
          v-model="listQuery.productName"
          style="width: 180px"
          placeholder="商品名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>供应商名称:</span>
        <el-input
          v-model="listQuery.shopName"
          style="width: 180px"
          placeholder="供应商名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>商品状态:</span>
        <el-select
          v-model="listQuery.validFlag"
          placeholder="商品状态"
          clearable
          style="width: 180px"
          value=""
          @change="getList"
        >
          <el-option label="所有" value="" />
          <el-option label="已上架" value="2" />
          <el-option label="已下架" value="3" />
        </el-select>
      </div>
      <div class="filter-control">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column align="center" label="序号" width="35">
        <template slot-scope="scope">
          <span style="white-space: nowrap; text-overflow: initial">{{
            (pageNum - 1) * listQuery.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品图片" align="center" prop="mainImage">
        <template slot-scope="{ row }">
          <el-popover placement="top-start" title="" width="120" trigger="hover">
            <img :src="row.mainImage" alt="" style="width: 100px; height: 100px">
            <img
              slot="reference"
              :src="row.mainImage"
              alt=""
              style="width: 50px; height: 50px"
            >
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        align="center"
        prop="productName"
        min-width="200"
      />
      <el-table-column label="供应商" align="center" prop="shopName" min-width="110" />
      <el-table-column label="成本价" align="center">
        <template slot-scope="{ row }">
          ¥{{ row.costPrice | toThousandFloatFilter }}
        </template>
      </el-table-column>
      <el-table-column label="售价" align="center">
        <template slot-scope="{ row }">
          ¥{{ row.price | toThousandFloatFilter }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="商品状态"
        align="center"
        prop="validFlag"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.validFlag | statusFilter">{{
            row.validFlag * 1 === 2 ? "已上架" : "已下架"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="添加时间" prop="addTime">
        <template v-if="row.addTime" slot-scope="{ row }">
          <span>{{ row.addTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(row)"
          >查看详情</el-button>
          <el-button
            :type="row.validFlag * 1 === 2 ? 'warning' : 'primary'"
            size="mini"
            @click="handleSwitch(row)"
          >{{ row.validFlag * 1 === 2 ? "下架" : "上架" }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 10"
      :total="total"
      :page.sync="listQuery.index"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <PriceEdit
      ref="priceChild"
      :dialog-title="dialogTitle"
      :is-detail="false"
      :is-visible.sync="dialogFormVisible"
      :product="dialogData"
    />

    <template>
      <el-backtop style="right: 40px; bottom: 40px">
        <i class="el-icon-upload2" />
      </el-backtop>
    </template>
  </div>
</template>

<script>
import { getList, switchGoods } from '@/api/goods'
import PriceEdit from './components/price-edit'
export default {
  components: { PriceEdit },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'warning'
      }
      return statusMap[status]
    }
  },
  data: function() {
    return {
      pageNum: 0,
      activeIndex: '0',
      list: [],
      modules: null,
      listLoading: true,
      total: 0,
      listQuery: {
        index: 1,
        pageSize: 10,
        organizeId: this.$store.getters.organizeId,
        productName: '',
        shopName: '',
        validFlag: '' // '商品状态,1已上架,2已下架',
      },
      dialogData: {},
      dialogFormVisible: false,
      dialogStatus: '',
      dialogTitle: '查看详情'
    }
  },
  computed: {
    organizeId() {
      return this.$store.getters.organizeId
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      // 获取商品列表
      this.listLoading = true
      try {
        const res = await getList(this.listQuery)
        console.log('res', res)
        this.pageNum = res.data.index
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.listLoading = false
      } catch (error) {
        console.log('error', error)
      }
    },
    handleSwitch(row) {
      // 操作上下架
      if (row.validFlag === '1') {
        this.$confirm(
          '确定下架该商品吗？下架后该商品将不会再出现在联合丽格商城',
          '系统提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          this.handSwithGoods(row)
        })
      } else {
        this.$confirm('确定上架该商品吗？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handSwithGoods(row)
        })
      }
    },
    async handSwithGoods(row) {
      // 上下架接口
      try {
        const res = await switchGoods(row.productId * 1)
        this.$message.success(res.msg)
        this.getList()
      } catch (error) {
        console.log('error', error)
      }
    },
    handleEdit(row) {
      // 操作编辑商品
      this.dialogData = Object.assign({}, row)
      this.dialogFormVisible = true
      // this.$refs['priceChild'].clearValidate()
    }
  }
}
</script>

<style lang="scss" scoped>
i[type="success"] {
  color: #67c23a;
}
.goods-list .el-form-item {
  margin-bottom: 8px;
}
</style>
