<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">

      <el-input v-model="listQuery.goodsSn" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品sn" />
      <el-input v-model="listQuery.goodName" clearable class="filter-item" style="width: 200px;"
        placeholder="请输入商品名称" />
      <el-select v-model="listQuery.auditStatus" style="width: 160px" class="filter-item" placeholder="请选择审核状态"
        clearable>
        <el-option label="待审核" value="1" />
        <el-option label="审核通过" value="2" />
        <el-option label="审核不通过" value="3" />
      </el-select>
      <el-button v-permission="['GET /admin/goods/auditList']" class="filter-item" type="primary" icon="el-icon-search"
        @click="handleFilter">查找</el-button>
        <p style="color:red;">请点击第一列展开查看sku价格信息</p>


    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column type="expand">
        <template slot-scope="props">
          <!-- <el-form label-position="left" class="table-expand">
            <el-form-item label="商品编号">
              <span>{{ props.row.goods.goodsSn }}</span>
            </el-form-item>
            <el-form-item label="宣传画廊">
              <img v-for="pic in props.row.goods.gallery" :key="pic" :src="pic" class="gallery">
            </el-form-item>
            <el-form-item label="商品介绍">
              <span>{{ props.row.goods.brief }}</span>
            </el-form-item>
            <el-form-item label="商品单位">
              <span>{{ props.row.goods.unit }}</span>
            </el-form-item>
            <el-form-item label="类目ID">
              <span>{{ props.row.goods.categoryId }}</span>
            </el-form-item>
           
            <el-form-item label="服务时长">
              <span>{{ props.row.goods.serviceDuration }}</span>
            </el-form-item>
            <el-form-item label="服务次数">
              <span>{{ props.row.goods.serviceTimes }}</span>
            </el-form-item>

          </el-form> -->
          <el-table :data="props.row.productList">
           <el-table-column property="value" label="货品规格">
          <template slot-scope="scope1">
    
            <el-tag >
              {{ scope1.row.specifications[0] }}
            </el-tag>
          </template>
        </el-table-column>
         <el-table-column property="price" width="100" label="实际售卖价" />
        <el-table-column property="counterPrice" width="100" label="市场售价" />
        <el-table-column property="number" width="100" label="货品数量" />

        <el-table-column property="disType" label="奖励方式">
          <template slot-scope="scope1">
            <el-tag>{{ scope1.row.disType | disTypeFilter }}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column property="disPercent" label="金额百分比" />
         <el-table-column property="disAmount" label="固定金额" />
        <el-table-column property="salesNumber" label="已售库存" />
        <el-table-column property="serviceTimes" label="服务次数" />
        <el-table-column property="serviceDuration" label="服务时长" />
        <el-table-column property="timeRange" label="服务时段"  width="130px">
          <template slot-scope="scope1">
            <div v-for="(item,index) in scope1.row.timeRange" :key="index">
              {{ item}}</div>
          </template>
        </el-table-column>
        <el-table-column property="url" width="100" label="货品图片">
          <template slot-scope="scope1">
            <img v-if="scope1.row.url" :src="scope1.row.url" width="40">
          </template>
        </el-table-column>
              <el-table-column property="disType" label="是否显示">
          <template slot-scope="scope1">
            <el-tag>{{ scope1.row.deleted?'否':'是'}}</el-tag>
          </template>
        </el-table-column>  
          </el-table>
        </template>
      </el-table-column>

      <el-table-column align="center" label="商品id" prop="goodsId" />

      <el-table-column align="center" min-width="100" label="商品名称" prop="goodsName" />
      <el-table-column align="center" min-width="100" label="服务分类" prop="goodsName">
        <template slot-scope="scope">
          {{ scope.row.type | typeFilter }}
        </template>
      </el-table-column> 
      <!-- <el-table-column align="center" property="goodsName" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.goods.picUrl" width="40">
        </template>
      </el-table-column> 
      <el-table-column align="center" property="comment" label="分享图">
        <template slot-scope="scope">
          <img  src="scope.row.goods.shareUrl" width="40">
        </template>
      </el-table-column>-->
      <el-table-column align="center" label="所属渠道"   prop="goods.channel">
        <template slot-scope="scope">
          <el-tag type="success">
            {{channelsFilter(scope.row.goods.channel)}}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="市场售价" prop="goods.counterPrice" />

      <el-table-column align="center" label="当前价格" prop="goods.retailPrice" /> -->

      <!-- <el-table-column align="center" label="会员价格" prop="goods.memberPrice" /> -->
      <!-- <el-table-column align="center" label="库存" prop="goods.stock" /> -->
      <!-- <el-table-column align="center" label="当前排序" prop="goods.sortOrder" /> -->

      <el-table-column align="center" label="商品状态" width="220">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.goods.isOnSale" active-text="上架" inactive-text="下架" disabled />
          <el-switch v-model="scope.row.goods.isHot" active-text="热卖" inactive-text="非热卖" disabled />
          <el-switch v-model="scope.row.goods.isNew" active-text="新客专享" inactive-text="非新客专享" disabled />
          <el-switch v-model="scope.row.goods.isHide" active-text="隐藏" inactive-text="可见" disabled />
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态" prop="auditStatus" width="120">
        <template slot-scope="scope">
          <el-tag :type="typeTag[scope.row.auditStatus]">{{ auditStatusMap[scope.row.auditStatus] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核拒绝原因" prop="comment" width="180">
      </el-table-column>
      <el-table-column align="center" label="审核人" prop="auditName" />
      <el-table-column align="center" label="审核时间" prop="createTime" width="160">
        <template slot-scope="scope">
          {{ formatTime(scope.row.auditTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" width="160">
        <template slot-scope="scope">
          {{ formatTime(scope.row.createTime) }}
        </template>
      </el-table-column>


      <el-table-column align="center" label="操作" width="160" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.auditStatus === 1" v-permission="['GET /admin/goods/audit']" type="success"
            size="mini" @click="handlePassConfirm(scope.row)">通过</el-button>
          <el-button v-if="scope.row.auditStatus === 1" v-permission="['GET /admin/goods/audit']" type="danger"
            size="mini" @click="handleRejectBtn(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <el-dialog :visible.sync="rejectDialogVisible" title="拒绝原因" width="600px">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;">
        <el-form-item label="拒绝原因" prop="confirmMemo">
          <el-input v-model="dataForm.confirmMemo" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleRejectConfirm()">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="viewDialogVisible" title="提现失败原因" width="400">
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">支付时间</el-col>
          <el-col :span="18" class="table-cell-title">失败原因</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{ wx_pay.paytime }}</el-col>
          <el-col :span="18" class="table-cell">{{ wx_pay.reason }}</el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {
  auditList,
  goodsAudit
} from "@/api/goods";
import { formatDate } from "@/utils/date";
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import _ from 'lodash'
import { allChannel } from "@/api/channel";

const statusMap = {
  0: '未处理',
  1: '审核通过待发放',
  2: '驳回',
  3: '提现已完成',
  4: '提现处理中',
  5: '提现失败'
}

export default {
  name: 'apply',
  components: { BackToTop, Pagination },
  filters: {
    detailStatusFilter(status) {
      return statusMap[status]
    },
    typeFilter(type) {
      if (type == 1) return "保洁";
      if (type == 2) return "品类";
      if (type == 3) return "周期";
      if (type == 4) return "保姆钟点工";
      if (type == 5) return "收纳";
      if (type == 6) return "其他";
    },
  },
  data() {
    return {
      channels:[],
      list: [],
      total: 0,
      blance: 0,
      listLoading: true,
      dataForm: {},
      listQuery: {
        page: 1,
        limit: 20,
        goodsSn: '',
        goodName: '',
        auditStatus: '',
        sort: 'id',
        order: 'desc'
      },
      auditStatusMap: {
        1: '待审核',
        2: '审核通过',
        3: '审核不通过'
      },
      // 审核状态 1待审核 2审核通过 3审核不通过
      typeTag: [
        '',
        '',
        'success',
        'danger',


      ],
      downloadLoading: false,
      rejectDialogVisible: false,
      rules: {
        confirmMemo: [{ required: true, message: '拒绝原因不能为空', trigger: 'blur' }]
      },
      viewDialogVisible: false,
      wx_pay: {
        paytime: null,
        reason: ''
      }
    }
  },
  created() {
    allChannel().then((res) => {
      this.channels = res.data.data;
    });
    this.getList(); 
  },
  methods: {
    getList() {
      this.listLoading = true
      auditList(this.listQuery)
        .then(response => {
          this.list = response.data.data.items.list
          this.total = response.data.data.items.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    handleViewBtn(row) {
      this.viewDialogVisible = true
      this.wx_pay.reason = row.payStatusDesc
      this.wx_pay.paytime = row.payTime
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handlePassConfirm(row) {
      this.$confirm('确定【通过】审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handlePass({
          goodsId: row.goodsId,
          auditStatus: 2
        })
      })
    },
    handlePass(params) {
      goodsAudit(params)
        .then(res => {
          this.$notify.success({
            title: '成功',
            message: '审核通过操作成功'
          })
          this.getList()
        })
        .catch((res) => {
          this.$notify.error({
            title: '失败',
            message: res.data.errmsg
          })
        })
    },
    handleRejectBtn(row) {
      this.dataForm = row
      this.rejectDialogVisible = true
    },
    handleRejectConfirm() {
      console.log(this.dataForm);
      // this.$confirm('确定【拒绝】审核?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      this.handleReject()
      // });
    },
    handleReject() {
      goodsAudit({

        auditStatus: 3,
        goodsId: this.dataForm.goodsId, auditReason: this.dataForm.confirmMemo
      })
        .then(res => {
          console.log(res)
          this.rejectDialogVisible = false
          this.$notify.success({
            title: '成功',
            message: '拒绝通过操作成功'
          });
          this.getList();
        })
        .catch((res) => {
          console.log(res)
          this.$notify.error({
            title: '失败',
            message: res.data.errmsg
          })
        })
    },
    channelsFilter(value) {
      if(value==undefined||value==''||value.length==0){
        return '';
      }
      let str='';

      this.channels.forEach(e=>{
        value.split(",").forEach(v=>{
          if(v==e.id){
            str=str+e.name+','
          }
        })
      }) 
      return str;
    },
  }
}
</script>

<style>
.table-expand {
  font-size: 0;
}

.table-expand label {
  width: 100px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}

.gallery {
  width: 180px;
  height: 118px;
  margin-right: 10px;
  object-fit: cover;
}

.goods-detail-box img {
  width: 100%;
}

.el-table th.gutter {
  display: table-cell !important;
}
</style>
