<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize" label-width="auto">
      <el-form-item label="平台分类" prop="merchantCategoryIdArr">
        <el-cascader v-model="queryParams.merchantCategoryIdArr" :options="shopTypeList" :props="{
          expandTrigger: 'hover',
          label: 'categoryName',
          value: 'categoryId',
          children: 'childrenList',
        }" :show-all-levels="false" clearable />
      </el-form-item>
      <el-form-item label="是否热门推荐" prop="recommendStatus">
        <el-select v-model="queryParams.recommendStatus" placeholder="请选择状态" clearable>
          <el-option v-for="item in RecommendStatusOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="auditStatus">
        <el-select v-model="queryParams.auditStatus" placeholder="请选择状态" clearable>
          <el-option v-for="item in AuditStatusOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="queryParams.createTime" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table :border="TableBorder" :size="ELTableSize" v-loading="loading" :data="dataList">
      <el-table-column type="index" width="55" label="序号" align="center">
        <template slot-scope="{$index}">
          {{ $getTableIndex(queryParams, $index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="商品ID" align="center" prop="productId">
        <template slot-scope="{row}">
          {{ row.productId | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="平台分类" align="center" prop="merchantCategoryName">
        <template slot-scope="{row}">
          <!-- {{ getProductCategory(row) | TableItemEmpty }} -->
          {{ row.merchantCategoryName | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="title">
        <template slot-scope="{row}">
          {{ row.title | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="最大售价（元）" align="center" prop="maxSalePrice">
        <template slot-scope="{row}">
          {{ row.maxSalePrice | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="所属商家" align="center" prop="businessName">
        <template slot-scope="{row}">
          {{ row.businessName | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="真实销量" align="center" prop="realSales">
        <template slot-scope="{row}">
          {{ row.realSales | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column prop="hot" align="center" label="是否热门推荐">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.recommendStatus"
            active-color="#13ce66"
            inactive-color="#B9B9B9"
            @change="goodsHotChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="auditStatus">
        <template slot-scope="{ row }">
          <StatusTag :status-vo="row.auditStatus | AuditStatusOptionFilter(true)" />
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center" prop="orderIndex" width="100px">
        <template slot-scope="{row}">
          {{ row.orderIndex | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="{row}">
          {{ row.createTime | TableItemEmpty }}
        </template>
        <!-- <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}")
          }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100px">
        <template slot-scope="{row}">
          <el-button :size="ELTableSize" type="text" @click="handleUpdate(row, 'show')">查看</el-button>
          <el-button :size="ELTableSize" type="text" v-if="row.auditStatus == AuditStatusEnum.AUDIT_PENDING"
            @click="openAuditDialog(row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 审核弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="close">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="审核状态" prop="auditStatus">
          <el-radio-group v-model="form.auditStatus">
            <el-radio :label="AuditStatusEnum.AUDIT_APPROVED">审核通过</el-radio>
            <el-radio :label="AuditStatusEnum.AUDIT_REJECTED">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="理由" :prop="form.auditStatus === AuditStatusEnum.AUDIT_REJECTED ? 'auditRemark' : ''">
          <el-input type="textarea" :rows="3" maxlength="50" placeholder="" v-model="form.auditRemark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="auditSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { merchantCategoryTree } from "@/api/platformClass";
import {
  productAuditList,
  productAudit,
  productRecommendStatus
} from "@/api/goods.js";
import getListApi from "@/mixins/getListApi";
import { AuditStatusEnum, AuditStatusOption } from '@/utils/statusEnum.js'
export default {
  mixins: [getListApi],
  data() {
    return {
      AuditStatusOption,
      AuditStatusEnum,
      listURL: productAuditList,
      RecommendStatusOption: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        merchantCategoryIdArr: undefined,
        merchantCategoryId: undefined,
        createTime: undefined,
        recommendStatus: undefined,
        auditStatus: undefined
      },
      // 日期范围字段映射配置
      dateRangeMapping: {
        // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
        createTime: { start: 'startTime', end: 'endTime' },
      },
      shopTypeList: [],
      dialogVisible: false,
      form: {
        auditRemark: undefined,
        auditStatus: AuditStatusEnum.AUDIT_APPROVED
      },
      rules: {
        auditStatus: [
          { required: true, message: "请选择审核状态", trigger: "blur" }
        ],
        auditRemark: [
          { required: true, message: "请输入审核理由", trigger: "blur" }
        ]
      },
    };
  },
  watch: {
    'queryParams.merchantCategoryIdArr': {
      handler(newVal, oldVal) {
        try {
          const val = newVal[newVal.length - 1];
          if (val || val === 0) {
            this.queryParams.merchantCategoryId = val;
          } else {
            throw new Error()
          }
        } catch (error) {
          this.queryParams.merchantCategoryId = undefined;
        }
        // if (newVal.length > 0) {
        //   this.queryParams.merchantCategoryId = newVal[newVal.length - 1];
        // } else {
        //   this.queryParams.merchantCategoryId = undefined;
        // }
      },
      immediate: true
    }
  },

  created() {
    let queryParams = localStorage.getItem("queryParams");
    if (queryParams) {
      this.queryParams = JSON.parse(queryParams);
      localStorage.setItem("queryParams", "");
    }

    this.getGoodsTypeList();
  },
  methods: {
    getProductCategory(row) {
      let text = '';
      try {
        const { productCategoryList } = row || {};

        if (productCategoryList && productCategoryList.length > 0) {
          let arr = productCategoryList.map(item => item.categoryName);
          text = arr.join(",")
        }
      } catch (error) {
        text = ''
      } finally {
        return text
      }

    },
    getGoodsTypeList() {
      merchantCategoryTree().then((res) => {
        if (res.code == 200) {
          this.shopTypeList = res.data;
        }
      });
    },

    close() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    openAuditDialog(row) {
      this.dialogVisible = true;
      this.form = {
        productId: row.productId,
        auditRemark: undefined,
        auditStatus: this.AuditStatusEnum.AUDIT_APPROVED
      }
    },
    auditSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          productAudit(this.form).then(res => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.getList();
            this.close()
          })
        }
      })
    },

    goodsHotChange(row) {
      productRecommendStatus(row.productId).then(res => {
        if (res && res.data.code == 200) {
          this.getList()
        }
      })
    },


    handleUpdate(row) {
      this.$router.push({
        path: "/merchandiseAudit/details",
        query: {
          productId: row.productId,
        },
      });
    },


  },
};
</script>

<style lang="scss" scoped>
.active {
  color: #1890ff;
  cursor: pointer;
}
</style>
