<!--
  @description: 商品管理
  @Modifier：杨胜国
  @routerPath:commodityManage-list
  @date：  2021/06/10-15:00
-->
<template>
  <div>
    <!-- 标题 -->
    <div class="shopmall-page-title title">
      商品管理
    </div>
    <!-- 搜索 -->
    <div class="search-content clearfix">
      <section class="fl">
        <el-form ref="aduitForm" :inline="true" :model="formitInfo">
          <el-form-item label="商品编码" prop="productCode">
            <el-input v-model="formitInfo.productCode" />
          </el-form-item>
          <el-form-item label="商品名称" prop="unit">
            <el-input v-model="formitInfo.productName" />
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select v-model="formitInfo.state" placeholder="状态">
              <el-option
                v-for="item in ground"
                :key="item.typecode"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </section>
      <div class="fr">
        <el-button type="purple" @click="onSearch">
          搜索
        </el-button>
        <el-button type="gray" @click="resetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="shopmall-page-add">
      <el-button type="purple" @click="addData">
        新增
      </el-button>
      <el-button type="purple" @click="deleteMore">
        批量删除
      </el-button>
      <el-button type="purple" @click="stateMoreChange(1)">
        批量上架
      </el-button>
      <el-button type="purple" @click="stateMoreChange(0)">
        批量下架
      </el-button>
    </div>
    <div class="shopmall-view">
      <el-table
        ref="tableData"
        v-loading="loading"
        :data="tableData"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="60px"
          align="center"
        />
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        />
        <el-table-column
          label="商品名称"
          prop="productName"
          min-width="230"
        />
        <el-table-column
          label="商品编码"
          align="center"
          prop="productCode"
          min-width="200"
        />
        <el-table-column
          prop="productClassification"
          label="分类名称"
          min-width="130"
        />
        <el-table-column
          label="状态"
          prop="state"
          align="center"
          min-width="80"
        >
          <template slot-scope="scope">
            <!-- // auditStatus 00 待审核 01 审核通过 02审核驳回 -->
            <span v-if="scope.row.auditStatus!=='01'">{{ scope.row.auditStatus==='00' ? '待审核' : '不通过' }}</span>
            <span
              v-if="scope.row.auditStatus==='01'"
              :class="{'scope_state':scope.row.state.toString()==='1'}"
            >{{ filterDictText(ground, scope.row.state.toString()) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ $Moment(scope.row.createTime).format(momentDate) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="260">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.state === 0&&scope.row.auditStatus==='01'"
              type="primary"
              @click="stateChange(scope.row,'1')"
            >
              [上架]
            </el-link>
            <el-link
              v-if="scope.row.state === 1&&scope.row.auditStatus==='01'"
              type="primary"
              @click="stateChange(scope.row,'0')"
            >
              [下架]
            </el-link>
            <el-link
              v-if="scope.row.state !== 1"
              type="primary"
              @click="editData(scope.row)"
            >
              [编辑]
            </el-link>
            <el-link
              v-if="scope.row.state !== 1&&scope.row.auditStatus==='01'"
              type="primary"
              @click="modifyStock(scope.row.id)"
            >
              [库存]
            </el-link>
            <el-link
              v-if="scope.row.state !== 1"
              type="primary"
              @click="auditBulletin(scope.row)"
            >
              [参数]
            </el-link>
            <el-link
              v-if="scope.row.state !== 1"
              type="primary"
              @click="deleteContent(scope.row)"
            >
              [删除]
            </el-link>
            <el-link
              type="primary"
              @click="seeView(scope.row)"
            >
              [查看]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-row class="pagination shopmall-pagination p16" style="clear:both;margin:20px 0">
        <div class="page-number fl">
          共{{ Math.ceil(formitInfo.total / formitInfo.pageSize) }}页
          {{ formitInfo.total }}条
        </div>
        <el-pagination
          :current-page="formitInfo.pageNo + 1"
          :total="formitInfo.total"
          :page-sizes="[10, 30, 60, 100]"
          class="fr"
          background
          layout="prev, pager, next, sizes"
          @current-change="pickHandle"
          @size-change="handleSizeChange"
        />
      </el-row>
    </div>
    <!-- 编辑 -->
    <!--  v-if="dialogData.dialog" -->
    <commodityManageDialog ref="commodityAdd" :dialog-data="dialogData" @saveSuccess="saveSuccess" />
    <!-- 查看 -->
    <commodityManageDetail ref="commodityManageDetail" />
    <!-- 参数录入弹框 -->
    <paramInputDialog :dialog-visible="paramDialogData" />
    <!-- 修改库存弹框 -->
    <modifyStockDialog ref="modifyStockRef" @saveSuccess="saveSuccess" />
  </div>
</template>

<script>
/* api*/
import { searchSupplierProduct, updateProductState, deleteProduct } from '@/api/shoppingmall/products'
/* 混合开发方法-参数字段*/
/* 公共方法*/
import { filterDictText, filterObj } from '@/assets/js/utils'
// 组件
import commodityManageDialog from './commodityManage-dialog'
import paramInputDialog from './paramInput-dialog'
import commodityManageDetail from './commodityManageDetail-dialog'
import modifyStockDialog from './modifyStock-dialog'
export default {
  name: 'CommodityAuditList',
  components: {
    commodityManageDialog,
    commodityManageDetail,
    paramInputDialog,
    modifyStockDialog
  },
  data() {
    return {
      loading: false,
      tableData: [], // 列表
      ground: [
        {
          typecode: '1',
          typename: '上架'
        },
        {
          typecode: '0',
          typename: '下架'
        },
        {
          typecode: '2',
          typename: '待提交'
        }
      ],
      // 弹框
      dialogData: {
        dialog: false,
        type: ''
      },
      // 参数弹框
      paramDialogData: {
        dialog: false,
        id: null
      },
      checkedTr: [], // 表格已选数据
      formitInfo: {
        productCode: null,
        productName: null,
        state: null,
        pageNo: 0,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    // 加载数据
    this.loadData()
  },
  methods: {
    filterDictText, // 引入字典值替换文本通用方法
    loadData() {
      this.loading = true
      const params = this.getQueryParams()// 查询条件
      searchSupplierProduct(params).then(response => {
        this.loading = false
        this.tableData = response.data.list
        this.formitInfo.total = response.data.total
        this.$forceUpdate()
      }).catch(() => {
        this.loading = false
      })
    },
    // 点击列表页码
    pickHandle(val) {
      this.formitInfo.pageNo = val - 1
      this.loadData()
    },
    // 切换页面size
    handleSizeChange(val) {
      this.formitInfo.pageSize = val
      this.loadData()
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.formitInfo)
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.formitInfo.pageNo = 0
      this.formitInfo.pageSize = 10
      this.loadData()
    },
    // 重置
    resetList() {
      this.formitInfo.productCode = null
      this.formitInfo.productName = null
      this.formitInfo.state = null
      this.formitInfo.pageNo = 0
      this.formitInfo.pageSize = 10
      this.loadData()
    },
    // 新增成功商品 重新加载列表
    saveSuccess() {
      this.loadData()
    },
    // 新增
    addData() {
      this.$refs.commodityAdd.openDialog('', 'add')
      this.dialogData.dialog = true
    },
    //  编辑
    editData(row) {
      this.$refs.commodityAdd.openDialog(row.id, 'edit')
      this.dialogData.dialog = true
    },
    // 上架下架操作
    stateChange(row, state) {
      const data = {
        ids: row.id,
        state: state
      }
      const text = state === '1' ? '上架' : '下架'
      this.$confirm(`是否确定${text}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        updateProductState(data).then(res => {
          this.$message.success('操作成功')
          this.loadData()
        })
      })
    },
    // 上架下架操作(批量多条)
    stateMoreChange(state) {
      if (this.checkedTr.length) {
        const text = state === 1 ? '上架' : '下架'
        this.$confirm(`是否确定${text}？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          const ids = this.checkedTr.map(row => row.id).join(',')
          const data = {
            ids: ids,
            state: state
          }
          updateProductState(data).then(res => {
            this.$message.success('操作成功')
            this.loadData()
          })
        })
      } else {
        this.$message({ message: '请选择一条记录!', type: 'warning' })
      }
    },
    // 表格复选框已选数据
    selectionChange(val) {
      this.checkedTr = val
    },
    // 删除多个
    deleteMore() {
      if (this.checkedTr.length) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          // 多个ID
          const ids = this.checkedTr.map(row => row.id).join(',')
          const data = {
            ids: ids
          }
          deleteProduct(data).then(res => {
            this.$message.success('操作成功')
            this.loadData()
          })
        }).catch(() => {
        })
      } else {
        this.$message({ message: '请选择一条记录!', type: 'warning' })
      }
    },
    // 查看
    seeView(row) {
      this.$refs.commodityManageDetail.openDialog(row.id)
    },
    // 删除单个
    deleteContent(row) {
      const data = {
        ids: row.id
      }
      this.$confirm(`是否删除？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteProduct(data).then(res => {
          this.$message.success('操作成功')
          this.formitInfo.pageNo = 0
          this.loadData()
        })
      })
    },
    // 参数弹框
    auditBulletin(row) {
      this.paramDialogData = {
        dialog: true,
        id: row.id
      }
    },
    // 修改库存弹框
    modifyStock(id) {
      this.$refs.modifyStockRef.openDialog(id)
    }
  }
}
</script>

<style scoped lang="less">
.title{
  font-size: 14px;
  color: #333333;
  line-height:36px;
}
.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;
}
.shopmall-page-add{
  padding: 12px 0 0 15px;
   .el-button--primary{
    background: #00AACA;
    border-color: #00AACA;
   }
}
.scope_state {
  color: #007CCC;
}
</style>
