<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" label-width="100px" :model="queryParams" :rules="rules">
            <el-row>
              <el-form-item label="产品名称" prop="productCode">
                <el-select v-model="queryParams.productCode" placeholder="请输入模版编码" style="width: 220px" clearable @change="selectProduct">
                  <template #header>
                    <el-input v-model="likeName" placeholder="可根据产品名称模糊查询" @input="filterByProductName"></el-input>
                  </template>
                  <el-option
                    v-for="dict in filteredList"
                    :key="dict.productCode"
                    :label="dict.productCode + '-' + dict.productName"
                    :value="dict.productCode"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="申请日期" prop="dateRange">
                <el-date-picker
                  v-model="dateRange"
                  clearable
                  type="daterange"
                  range-separator="To"
                  start-placeholder="申请起期"
                  end-placeholder="申请止期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                />
              </el-form-item>
            </el-row>
            <el-form>
              <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form>
          </el-form>
        </el-card>
      </div>
    </transition>
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table v-loading="loading" :data="salesStatusApplicationList">
        <el-table-column label="产品编码" align="center" prop="productCode" />
        <el-table-column label="产品名称" align="center" prop="productName" />
        <el-table-column label="产品状态变化" align="center" prop="changeContent" />
        <el-table-column label="产品起售日期" align="center" prop="salesStartDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.salesStartDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品停售日期" align="center" prop="salesEndDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.salesEndDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" prop="applicationTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.applicationTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center" prop="applicationStatus">
          <template #default="scope">
            <dict-tag :options="prod_application_status" :value="scope.row.applicationStatus" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip v-if="scope.row.applicationStatus === '1'" content="撤回" placement="top">
              <el-button v-hasPermi="['product:apply:appcalback']" link type="primary" icon="Back" @click="applyDelete(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip v-if="scope.row.applicationStatus === '0'" content="删除" placement="top">
              <el-button v-hasPermi="['product:apply:appremove']" link type="primary" icon="Delete" @click="applyDelete(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip v-if="scope.row.applicationStatus === '0'" content="查看详情" placement="top">
              <el-button v-hasPermi="['product:apply:changeapply']" link type="primary" icon="View" @click="viewApplyDetails(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
    </el-card>
  </div>

  <apply_detail :detailVisible="detailVisible" :isChange="isChange" :detailApplyId="detailApplyId" @update:detailVisible="updateDetailVisible"></apply_detail>
</template>
<script setup name="apply-look" lang="ts">
import { queryByApplicant, updateApplicationStatus } from '@/api/product/apply';
import apply_detail from '@/views/product/apply/apply_detail.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { prod_application_status } = toRefs<any>(proxy?.useDict('prod_application_status'));
const showSearch = ref(true);
//模糊查询列表
const filteredList = ref([]);
//下拉基础列表
const baseproductList = ref([]);
const props = defineProps({
  baseProductList: Object
});
watch(
  () => props.baseProductList,
  (val) => {
    baseproductList.value = val;
    filteredList.value = val;
  },
  { deep: true, immediate: true }
);
const detailVisible = ref(false);
const isChange = ref(true);
const detailApplyId = ref('');

const initFormData = {
  productCode: undefined,
  salesStatus: undefined,
  salesLimit: undefined,
  salesStartDate: undefined,
  salesEndDate: undefined,
  signEndDate: undefined,
  emailNotice: undefined,
  stopSalesReason: undefined
};
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    productCode: undefined,
    salesStatus: undefined,
    salesLimit: undefined
  },
  form: { ...initFormData },
  rules: {}
});
const { queryParams, rules, form } = toRefs(data);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const likeName = ref('');
const total = ref(0);
const loading = ref(false);
const salesStatusApplicationList = ref([]);
const queryFormRef = ref<ElFormInstance>();
//模糊查询
//模糊查询
const filterByProductName = () => {
  if (likeName.value) {
    filteredList.value = baseproductList.value.filter(
      (item) => item.productName.includes(likeName.value) || item.productCode.includes(likeName.value)
    );
  } else {
    // 如果 likeName 为空，显示原始列表
    filteredList.value = baseproductList.value;
  }
};
/** 产品选择后处理动作 */
const selectProduct = async (newVal) => {
  queryParams.value.productCode = newVal;
};
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 查询产品申请列表 */
const getList = async () => {
  loading.value = true;
  const res = await queryByApplicant(proxy?.addDateRange(queryParams.value, dateRange.value));
  salesStatusApplicationList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/**
 * 产品销售状态申请记录查询 撤回按钮
 * @param row
 */
const applyDelete = async (row) => {
  await updateApplicationStatus(row.applicationId);
  await getList();
};

/**
 * 产品销售状态申请记录查询 撤回按钮
 * @param row
 */
const viewApplyDetails = (row) => {
  detailVisible.value = true;
  isChange.value = true;
  detailApplyId.value = row?.applicationId;
};

/**
 * 子界面关闭，父组件更新
 */
const updateDetailVisible = (newVal) => {
  //  console.log('look-updateDetailVisible', newVal);
  detailVisible.value = newVal;
};
</script>

<style scoped lang="scss"></style>
