<!--
  @description: 商品审核
  @Modifier：杨胜国/邸佳
  @routerPath:commodityAudit-list
  @date：  2021/06/10-15:00
-->
<template>
  <div>
    <!-- 标题 -->
    <div class="shopmall-page-title title">
      商品审核管理
    </div>
    <!-- 搜索 -->
    <div class="shopmall-page-reconciliation">
      <div class="shopmall-page-left">
        <p>
          <table>产品名称</table>
          <el-input v-model.trim="formitInfo.productName" style="width:70%;" placeholder="" />
        </p>
        <p>
          <table>审核状态</table>
          <el-select v-model.trim="formitInfo.auditStatus" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
      </div>
      <div class="shopmall-page-right">
        <el-button type="purple" @click="onSearch">
          搜索
        </el-button>
        <el-button type="gray" @click="resetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="shopmall-view">
      <el-table
        ref="tableData"
        v-loading="loading"
        :data="tableData"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        />
        <el-table-column
          label="产品名称"
          prop="productName"
          min-width="180"
        />
        <el-table-column
          prop="productClassification"
          label="分类名称"
          align="center"
          min-width="100"
        />
        <el-table-column
          label="单位"
          prop="departName"
          align="center"
          min-width="110"
        />
        <el-table-column
          label="品牌"
          prop="brandName"
          align="center"
          min-width="90"
        />
        <el-table-column
          label="市场价"
          align="center"
          min-width="90"
        >
          <template slot-scope="scope">
            <span style="color:#1f94f4">￥{{ scope.row.marketPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="价格"
          align="center"
          min-width="90"
        >
          <template slot-scope="scope">
            <span style="color:#1f94f4">￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          align="center"
          min-width="90"
        >
          <template slot-scope="scope">
            {{ scope.row.auditStatus === '01' ? '审核通过' : scope.row.auditStatus === '00' ? '待审核' : '驳回' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="90">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.auditStatus === '00'"
              type="primary"
              @click="auditBulletin(scope.row, 'examine')"
            >
              [审核]
            </el-link>
            <el-link
              v-else
              type="primary"
              @click="auditBulletin(scope.row, 'view')"
            >
              [查看]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页组件-->
    <el-row class="pagination shopmall-pagination p16" style="clear:both;margin:20px 0">
      <div class="page-number fl">
        共{{ Math.ceil(total /formitInfo.pageSize) }}页
        {{ total }}条
      </div>
      <el-pagination
        :current-page="formitInfo.pageNo + 1"
        :total="total"
        :page-sizes="[10,20,50]"
        class="fr"
        background
        layout="prev, pager, next, sizes"
        @current-change="pickHandle"
        @size-change="handleSizeChange"
      />
    </el-row>
    <!-- 审核/查看弹框 -->
    <commodityAuditDialog :dialog-data="dialogData" :product-detail="productData" @call-back="callBack" />
  </div>
</template>

<script>
/* api*/
import { getProductDetails, getProductAuditList } from '@/api/shoppingmall/products'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'
import { filterObj } from '@/assets/js/utils'
import commodityAuditDialog from './commodityAudit-dialog.vue'
export default {
  name: 'CommodityAuditList',
  components: {
    commodityAuditDialog
  },
  mixins: [ListMixin],
  props: {
  },
  data() {
    return {
      loading: false,
      tableData: [], // 列表
      formitInfo: {
        productName: null,
        auditStatus: null,
        pageNo: 0,
        pageSize: 10
      },
      // 审核状态
      options: [
        { value: '', label: '全部' },
        { value: '00', label: '待审核' },
        { value: '01', label: '审核通过' },
        { value: '02', label: '驳回' }],
      // dialog对象数据
      dialogData: {
        visible: false,
        id: null,
        // view 查看 examine 审核
        code: null
      },
      // 商品详细信息
      productData: {},
      total: 0
    }
  },
  created() {
    // 加载数据
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      const params = this.getQueryParams()// 查询条件
      getProductAuditList(params).then(response => {
        this.loading = false
        this.tableData = response.data.list
        this.total = response.data.total
        this.$forceUpdate()
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.formitInfo)
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.formitInfo.pageNo = 0
      this.formitInfo.pageSize = 10
      this.loadData()
    },
    // 重置
    resetList() {
      this.formitInfo.productName = null
      this.formitInfo.auditStatus = null
      this.formitInfo.pageNo = 0
      this.formitInfo.pageSize = 10
      this.loadData()
    },
    // 审核/查看
    auditBulletin(row, type) {
      this.dialogData.code = type
      getProductDetails(row.id).then(res => {
        if (res.header.ret === '0') {
          this.productData = res.data
          this.dialogData.visible = true
          this.dialogData.id = row.id
        }
      })
    },
    callBack() {
      this.loadData()
    },
    // 点击列表页码
    pickHandle(val) {
      this.formitInfo.pageNo = val - 1
      this.loadData()
    },
    // 切换页面size
    handleSizeChange(val) {
      this.formitInfo.pageSize = val
      this.loadData()
    }
  }
}
</script>

<style scoped lang="less">
.title{
  font-size: 14px;
  color: #333333;
  line-height:41px;
}
.shopmall-page-reconciliation{
    width: 100%;
    height: 60px;
    padding:0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom:1px solid rgba(238, 238, 238, 1);
}
.shopmall-page-left {
    display: flex;
    align-items: center;
    width: 90%;
    p{
        display: flex;
        align-items: center;
        table{
            margin-right:10px;
        }
    }
}
.shopmall-page-right{
    width: 10%;
    display: flex;
    justify-content: flex-end;
}
</style>
