<script lang="ts" setup>
import { shallowRef, reactive, computed, ref, onMounted } from "vue"
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"
import { httpFeedbacklist, httpFeedbackDel } from "/@/api/sellOut/project";
import { goodTypeOptions } from "./../config/_options"
import ProductModal from "./productModal.vue"

import { ElMessageBox, ElMessage } from "element-plus"

const props = defineProps<{ detail: any }>()

const visible = shallowRef(false)

const ladder = ref([])

const currentItem = computed(() => ({
  ...current.item,
  companyNo: props.detail.companyNo,
  platform: props.detail.platform,
  khNo: props.detail.khNo
}))

const current = reactive({ index: -1, item: {} })

function handleChoose(item: any, index: number){
  current.index = index
  current.item = item
  visible.value = true
}

function handleDelete(row: any, index: number){
  const { pgNo } = ladder.value[index]
  ElMessageBox.confirm("确定要删除?", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async ()=> {
    const { code, message } = await httpFeedbackDel({ id: [row.id], spuCode: row.skuCode ,pgNo: row.pgNo })
    if(Number(code) === 0){
      requestFeedbackProduct(index)
    } else {
      ElMessage.warning(message)
    }
  })
}

async function requestFeedbackProduct(index: number | string, page = 1){
  if(!ladder.value[index]){ ladder.value[index] = props.detail.ladder[index] }
  ladder.value[index].page = page
  ladder.value[index].loading = true
  const { data } = await httpFeedbacklist({ 
    pgNo: ladder.value[index].pgNo, 
    projectNo: props.detail.projectNo, 
    page: ladder.value[index].page, 
    size: 10 
  })
  ladder.value[index].loading = false
  ladder.value[index].feedlist = (data.list || [])
}





onMounted(async () => {
 for(const index in (props.detail.ladder as any[])){
  await requestFeedbackProduct(index)
 }
})
</script>

<template>
  <div class="flex flex-col">
    <ElCard class="mb-[10px]" v-for="(item, index) in ladder">
      <h1 class="mb-[10px]">商品要求 {{ index + 1 }}</h1>

      <ElTable class="mb-[10px]" :data="[item]" size="small" border>
        <ElTableColumn label="商品类型" width="70px">
          <template #="scope">
            <ElTag>
              {{ goodTypeOptions.find(({ value }) => value === scope.row.good_type)?.label || '--' }}
            </ElTag>
          </template>
        </ElTableColumn>

        <ElTableColumn label="预算单价" prop="budget_price" width="70px" />
        <ElTableColumn label="购买数量" prop="num" width="70px" />
         <ElTableColumn label="商品分类" min-width="180px">
           <template #="scope">{{ scope.row.can.length === 3 ? scope.row.can.map(({ name }) => name).join('/') : '' }}</template>
         </ElTableColumn>
         <ElTableColumn label="图片" width="70px">
            <template #="scope">
              <ElImage v-if="scope.row.good_img" style="width:20px;height:20px" :src="scope.row.good_img"
                previewTeleported :previewSrcList="[scope.row.good_img]" />
            </template>
          </ElTableColumn>
          <ElTableColumn label="商品名称" prop="good_name" min-width="180px" />
      </ElTable>


      <h1 class="mb-[10px] flex justify-between">
        <span>商品反馈情况</span>
        <ElTooltip content="添加线上商品" placement="top">
          <ElButton 
            link 
            type="primary" 
            :icon="useRenderIcon('add')" 
            @click="handleChoose(item, index)"
          />
        </ElTooltip>
      </h1>

      <ElTable border size="small" :data="item.feedlist" v-loading="item.loading">
        <el-table-column
              prop="pgNo"
              label="商品要求编码"
              min-width="156px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="sale_price"
              label="销售单价"
              min-width="110px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="num"
              label="购买数量"
              min-width="90px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="good_img"
              label="商品图片"
              min-width="242px"
              show-overflow-tooltip
            >
              <template #="scope">
                <div v-if="scope.row.good_img && scope.row.good_img.length > 0">
                  <el-image
                    v-for="(si, sii) in scope.row.good_img.split(',')"
                    :key="si + sii"
                    :src="si"
                    class="hover fl"
                    :preview-src-list="[si]"
                    style="
                      display: inline-block;
                      width: 20px;
                      height: 20px;
                      margin: 0 2px 0 0;
                    "
                    alt=""
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="good_name"
              label="商品名称"
              min-width="200px"
              show-overflow-tooltip
            >
              <template #="scope">
                <span>{{ scope.row.good_name }}</span>
                <span v-for="(si, sii) in scope.row.specinfo" :key="si.id + sii">
                  {{ sii === 0 ? "_" : "-" }}{{ si.spec_name }}[{{ si.spec_value_name }}]
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="商品分类"
              min-width="110px"
              show-overflow-tooltip>
              <template #="{ row }">
                {{ row.can.map(({ name }) => name).join('-') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="source"
              label="商品类型"
              min-width="90px"
              show-overflow-tooltip
            >
              <template #="scope">
                <el-tag
                  :size="'mini'"
                  :type="scope.row.data_source + '' === '1' ? 'success' : ''"
                  >{{ scope.row.data_source + '' === "1" ? "平台商品" : "采反商品" }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="expire_day"
              label="信息有效期"
              min-width="85px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="work_day"
              label="制作工期"
              min-width="70px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="delivery_day"
              label="物流时间"
              min-width="70px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="creater"
              label="负责人"
              min-width="60px"
              show-overflow-tooltip
            />

            <el-table-column label="操作" width="60" fixed="right">
              <template #="{ row }">
                <el-tooltip content="删除" placement="top">
                  <el-button @click="handleDelete(row, index)" type="danger" link :icon="useRenderIcon('delete')" />
                </el-tooltip>
              </template>
            </el-table-column>
      </ElTable>
    </ElCard>

    <ProductModal 
      v-model:visible="visible"
      :index="current.index"
      :item="currentItem"
      @refresh="index => requestFeedbackProduct(index)"
   />
  </div>
</template>
