<template>
  <div class="mod-prod">
    <avue-crud
      ref="crud"
      :page="page"
      :data="dataList"
      :table-loading="dataListLoading"
      :option="tableOption"
      @search-change="searchChange"
      @selection-change="selectionChange"
      @on-load="getDataList"
      @refresh-change="refreshChange"
    >
    <template #pic="{ row }">
      <img :src="picUrl(row.pic)" alt="产品图片" style="max-width: 100px; max-height: 100px;">
    </template>
      <template slot="menuLeft">
        <!-- <el-button type="primary"
                   icon="el-icon-plus"
                   size="small"
                   v-if="isAuth('prod:prod:save')"
        @click.stop="addOrUpdateHandle()">新增</el-button>-->
      </template>
      <!-- 0:商家下架 1:正常 2:平台下架 3:待平台审核 4:审核失败 -1表示删除 -->
      <template slot-scope="scope" slot="status">
        <el-tag v-if="scope.row.status === 1" type="success" size="small">上架</el-tag>
        <el-tag v-else-if="scope.row.status === 0" size="small">商家下架</el-tag>
        <el-tag v-else-if="scope.row.status === 2" size="small" type="danger">违规下架</el-tag>
        <el-tag v-else-if="scope.row.status === 3" type="warning" size="small">待审核</el-tag>
        <el-tag v-else-if="scope.row.status === 4" type="danger" size="small">拒绝通过</el-tag>
        <el-tag v-else size="small">其他</el-tag>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isAuth('prod:prod:update')"
          @click="showProdInfo(scope.row.prodId)"
        >查看商品</el-button>
        <!-- <el-button
          type="primary"
          icon="el-icon-document-checked"
          size="small"
          v-if="isAuth('prod:prod:update') && scope.row.status > 1"
          @click="auditProdHandle(scope.row)"
        >下架管理</el-button>
        <el-button
          type="primary"
          icon="el-icon-bottom"
          size="small"
          v-if="isAuth('prod:prod:update') && scope.row.status <2"
          @click="offlineProdHandle(scope.row)"
        >
          下架商品
          <el-tooltip
            class="item"
            effect="dark"
            content="商品下架后，该商品的活动也将结束，可能会造成商家的经济损失，请谨慎操作"
            placement="right"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="small"
          v-if="isAuth('prod:prod:delete')"
          @click="deleteHandle(scope.row.prodId)"
        >删除</el-button> -->
      </template>
    </avue-crud>
    <!-- 商品审核弹窗 -->
    <!-- <ProdAudit v-if="ProdAuditVisible"
               ref="ProdAudit"
    @refreshDataList="refreshChange"></ProdAudit>-->

    <!-- 商品审核弹窗 -->
    <ProdAudit
      v-if="ProdAuditVisible"
      ref="ProdAudit"
      selectUrl="/prod/prod/getOfflineHandleEventByProdId"
      updateUrl="/prod/prod/prodAudit"
      @refreshDataList="refreshChange"
    ></ProdAudit>

    <!-- 商品详情弹窗 -->
    <el-dialog title="商品详情" :visible.sync="showProdInfoDialog" width="70%">
      <div class="prod-row">
        <span class="row-title">商品图片</span>
        <img :src="picUrl(prodInfo.pic)" alt />
      </div>
      <div class="prod-row">
        <span class="row-title">商品名称</span>
        <span>{{prodInfo.prodName}}</span>
      </div>
      <div class="prod-row">
        <span class="row-title">商品卖点</span>
        <span>{{prodInfo.brief}}</span>
      </div>
      <div class="prod-row">
        <span class="row-title">商品规格</span>
        <!-- 规格表格 -->
        <el-table :data="prodInfo.skuList" border style="width: 100%">
          <el-table-column prop="properties" label="商品属性" width="180">
            <template slot-scope="scope">
              <p v-if="scope.row.properties">{{scope.row.properties}}</p>
              <p v-else>暂无属性</p>
            </template>
          </el-table-column>
          <el-table-column prop="pic" label="商品图片" width="180">
            <template slot-scope="scope">
              <img :src="resourcesUrl + scope.row.pic" alt v-if="scope.row.pic" />
              <p v-else>暂无图片</p>
            </template>
          </el-table-column>
          <el-table-column prop="prodName" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="销售价"></el-table-column>
          <el-table-column prop="oriPrice" label="市场价"></el-table-column>
          <el-table-column prop="stocks" label="库存"></el-table-column>
          <el-table-column prop="weight" label="商品重量(kg)"></el-table-column>
          <el-table-column prop="volume" label="商品体积(m³)"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showProdInfoDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { tableOption } from '@/crud/prod/prodList'
import ProdAudit from '@/components/offline-audit'
export default {
  data () {
    return {
      dataForm: {
        prodName: ''
      },
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      searchForm: {},
      dataListSelections: [],
      dataListLoading: false,
      tableOption: tableOption,
      resourcesUrl: window.SITE_CONFIG.resourcesUrl,
      showProdInfoDialog: false,
      ProdAuditVisible: false,
      prodInfo: {},
      skuList: []
    }
  },
  components: {
    ProdAudit
  },
  methods: {
    picUrl(url) {
      if(!url) return
      if(url.indexOf('http') === -1) {
        return this.resourcesUrl + url.split(',')[0]
      }else {
        return url.split(',')[0]
      }
    },
    // 获取数据列表
    getDataList (page) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/prod/prod/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            this.searchForm
          )
        )
      }).then(({ data }) => {
        this.dataList = data.records
        for (const key in this.dataList) {
          if (this.dataList.hasOwnProperty(key)) {
            const element = this.dataList[key]
            element.imgs = element.imgs.split(',')[0]
          }
        }
        this.page.total = data.total
        this.dataListLoading = false
      })
    },
    // 获取商品详情
    showProdInfo (id) {
      this.showProdInfoDialog = true
      this.$http({
        url: this.$http.adornUrl(`/prod/prod/info/${id}`),
        method: 'GET'
      })
        .then(res => {
          this.prodInfo = res.data
          this.skuList = res.data.skuList
        })
        .catch()
    },
    // 删除
    deleteHandle (id) {
      this.$confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/prod/prod/${id}`),
            method: 'delete',
            data: this.$http.adornData({})
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList(this.page)
              }
            })
          })
        })
        .catch(() => { })
    },
    offlineProdHandle (row) {
      this.$prompt('确定对商品[' + row.prodName + ']进行下架操作？请填写下架理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then((obj) => {
        if (!obj.value) {
          this.$message.error('下架原因不能为空')
          return
        }
        this.$http({
          url: this.$http.adornUrl(`/prod/prod/offline`),
          method: 'post',
          data: this.$http.adornData({
            handleId: row.prodId,
            offlineReason: obj.value || null
          })
        }).then(({ data }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList(this.page)
            }
          })
        })
      })
    },
    // 条件查询
    searchChange (params) {
      console.log('params', params)
      this.searchForm = params
      this.getDataList(this.page)
    },
    // 多选变化
    selectionChange (val) {
      this.dataListSelections = val
    },
    // 商品商品审核
    auditProdHandle (row) {
      this.ProdAuditVisible = true
      this.$nextTick(() => {
        this.$refs.ProdAudit.init(row.prodId)
      })
    },
    // 刷新商品
    refreshChange () {
      this.getDataList()
    }
  }
}
</script>
<style  scoped>
.prod-row {
  margin: 20px 50px;
}
.prod-row img {
  width: 150px;
  height: 150px;
}
.prod-row .row-title {
  padding-right: 20px;
}
.el-table-column {
  text-align: center;
}
.operate-btn {
  margin-left: 5px !important;
}
</style>
