<script setup lang="ts">
import { ref, shallowRef } from "vue"
import { useRoute } from "vue-router"
import { httpModifyList, httpDetail } from "/@/api/InvoiceSaleSettings/commodityCost"
import BasicDescriptions, { type DescriptionColumn } from "/@/components/BasicDescriptions";
import { good_detail_columns } from "./config/configs";

const data = ref([]);
const goodDetail = ref({});
const actives = ref(['1','2']);
const loading = shallowRef(false);
const goodDetailLoading = shallowRef(false);

const route = useRoute();

//请求商品详情
async function requestGoodDetail() {
  goodDetailLoading.value = true;
  try {
    const response = await httpDetail({ spuCode: route.query.spuCode });
    goodDetail.value = response.data;
  } catch (err) {
    console.log(err);
  } finally { 
    goodDetailLoading.value = false;
  }
}

async function requestRecord() {
  loading.value = true;
  try {
    const response = await httpModifyList({ spuCode: route.query.spuCode });
    data.value = response.data;
  } catch (err) {
    console.log(err)
  } finally {
    loading.value = false;
  }  
}

async function initialData() {
  requestGoodDetail();
  requestRecord();
}

const mapDiscount = {
  "1": "是",
  "0": "否"
};

const mapTag = {
  "1": "免税",
  "2": "不征税",
  "3": "零税率"
};

function getValue({ field ,before, after},isBefore = false) {
  switch (field) { 
    case '是否有优惠政策':
      return isBefore ? mapDiscount[before] : mapDiscount[after];
    case '税率标识':
      return isBefore ? mapTag[before] : mapTag[after];
    default:
      return isBefore ? before : after;
  }
 }


initialData();
</script>

<template>
  <div style="padding:10px;background-color:#fff" v-loading="loading">
    <el-collapse v-model="actives">
      <el-collapse-item title="商品详情" name="1" v-loading="goodDetailLoading">
        <BasicDescriptions
          v-if="JSON.stringify(goodDetail) !== '{}'"
          :data="goodDetail"
          :columns="good_detail_columns"
          label-width="130px"
          :col-number="2"
        />
      </el-collapse-item>

      <el-collapse-item title="商品修改记录" name="2" v-loading="loading">
          <el-table border size="small" :data="data">
            <el-table-column label="修改字段" prop="field">
            <template #="scope">{{
             scope.row.field || "类目编号"
            }}</template>
          </el-table-column>
          <el-table-column label="修改前" prop="before">
          <template #="scope">
            {{getValue(scope.row, true)}}
          </template>
          </el-table-column>
          <el-table-column label="修改后" prop="after">
            <template #="scope">
              {{getValue(scope.row, false)}}
            </template>
          </el-table-column>
          <el-table-column label="修改人" prop="apply_name" />
          <el-table-column label="修改时间" prop="addtime" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
