<!-- 供应商首页 -->
<template>
  <div class="one-row">
    <div class="data">
      <div class="data-item">
        <div class="small-title">{{ t('home.number_orders') }}</div>
        <div class="small-data">
          <div class="small-data-item small-data-item1">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.openPurchaseCount || 0 }}<span>{{ t('home.single') }}</span></div>
              <div>{{ t('home.number_open') }}</div>
            </div>
            <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item2 ml-14px">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.allPurchaseCount || 0 }}<span>{{ t('home.single') }}</span></div>
              <div>{{ t('home.number_total_order') }}</div>
            </div>
            <img src="../../../assets/imgs/icon5.png" alt="" class="img" />
          </div>
        </div>
      </div>
      <div class="data-item ml-14px">
        <div class="small-title">{{t('home.number_planned_shipments')}}</div>
        <div class="small-data">
          <div class="small-data-item small-data-item3">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.openPurchasePlanCount || 0 }}<span>{{ t('home.single') }}</span></div>
              <div>{{t('home.number_open_plans')}}</div>
            </div>
            <img src="../../../assets/imgs/icon6.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item4 ml-14px">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.allPurchasePlanCount || 0 }}<span>{{ t('home.single') }}</span></div>
              <div>{{t('home.number_all_plans')}}</div>
            </div>
            <img src="../../../assets/imgs/icon3.png" alt="" class="img" />
          </div>
        </div>
      </div>
      <div class="data-item ml-14px">
        <div class="small-title">{{t('home.number_invoices')}}</div>
        <div class="small-data">
          <div class="small-data-item small-data-item5">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.notTakeSupplierdeliverCount || 0 }}<span>{{ t('home.single') }}</span></div>
              <div>{{t('home.number_unreceived_orders')}}</div>
            </div>
            <img src="../../../assets/imgs/icon4.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item6 ml-14px">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.takeSupplierdeliverCount || 0 }}<span>{{ t('home.single') }}</span></div>
              <div>{{t('home.number_orders_received')}}</div>
            </div>
            <img src="../../../assets/imgs/icon2.png" alt="" class="img" />
          </div>
        </div>
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[65%]">
        <div class="title">{{t('home.invoice_trend_month')}}</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 w-[35%] ml-14px">
        <div class="title">{{t('home.TOP10_parts_shipped_month')}}</div>
        <Echart :options="pieOptions" :height="280" :key="lineIndex" />
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[47.3%]">
        <div class="title">{{t('home.latest_news')}}</div>
        <el-table :data="notaicList" style="width: 100%" stripe height="240px">
          <el-table-column :label="t('home.number')" align="center" prop="id" />
          <el-table-column :label="t('home.user_type')" align="center" prop="userType">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
            </template>
          </el-table-column>
          <el-table-column :label="t('home.user_number')" align="center" prop="userId" width="80" />
          <el-table-column :label="t('home.template_coding')" align="center" prop="templateCode" width="80" />
          <el-table-column :label="t('home.sender_number')" align="center" prop="templateNickname" width="180" />
          <el-table-column
            :label="t('home.template_content')"
            align="center"
            prop="templateContent"
            width="200"
            show-overflow-tooltip
          />
          <el-table-column
            :label="t('home.template_parameters')"
            align="center"
            prop="templateParams"
            width="180"
            show-overflow-tooltip
          >
            <template #default="scope"> {{ scope.row.templateParams }}</template>
          </el-table-column>
          <el-table-column :label="t('home.template_type')" align="center" prop="templateType" width="120">
            <template #default="scope">
              <dict-tag
                :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
                :value="scope.row.templateType"
              />
            </template>
          </el-table-column>
          <el-table-column :label="t('home.read')" align="center" prop="readStatus" width="100">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
            </template>
          </el-table-column>
          <el-table-column
            :label="t('home.read_time')"
            align="center"
            prop="readTime"
            width="180"
            :formatter="dateFormatter"
          />
          <el-table-column
            :label="t('home.create_time')"
            align="center"
            prop="createTime"
            width="180"
            :formatter="dateFormatter"
          />
          <!-- <el-table-column label="操作" align="center"  fixed="right" width="120">
        <template #default="scope">
          <el-button link type="primary" @click="openDetail(scope.row)" v-hasPermi="['system:notify-message:query']">
            <Icon icon="ep:document-copy" />
            详情
          </el-button>
        </template>
      </el-table-column> -->
        </el-table>
      </div>
      <div class="data1 w-[47.3%]">
        <div class="title">{{ t('home.latest_deduction_details')}}</div>
        <el-table :data="tableData" style="width: 100%" stripe height="240px">
          <el-table-column prop="title" :label="t('home.title')" />
          <el-table-column prop="name" :label="t('home.publisher')" />
          <el-table-column prop="date" :label="t('home.publish_date')" />
        </el-table>
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[47.3%]">
        <!-- 本月退货明细 -->
        <div class="title">{{t('home.month_return_detials')}}</div>
        <el-table
          :data="purchasereturnRecordMonth"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="number" :label="t('home.document_number')" width="180" />
          <el-table-column prop="fromPackingNumber" :label="t('home.source_package_number')" width="180" />
          <el-table-column prop="toPackingNumber" :label="t('home.destination_package_number')" width="180" />
          <el-table-column prop="fromContainerNumber" :label="t('home.source_appliance_number')" width="120" />
          <el-table-column prop="toContainerNumber" :label="t('home.destination_appliance_number')" width="120" />
          <el-table-column prop="fromBatch" :label="t('home.source_batch')" width="120" />
          <el-table-column prop="toBatch" :label="t('home.destination_batch')" width="120" />
          <el-table-column prop="altBatch" :label="t('home.replace_batch')" width="120" />
          <el-table-column prop="fromLocationCode" :label="t('home.source_location_code')" width="120" />
          <el-table-column prop="toLocationCode" :label="t('home.destination_location_code')" width="120" />
          <el-table-column prop="fromLocationGroupCode" :label="t('home.source_location_group_code')" width="120" />
          <el-table-column prop="toLocationGroupCode" :label="t('home.destination_location_group_code')" width="120" />
          <el-table-column prop="fromAreaCode" :label="t('home.source_location_area_code')" width="120" />
          <el-table-column prop="toAreaCode" :label="t('home.destination_location_area_code')" width="120" />
          <el-table-column prop="fromOwnerCode" :label="t('home.source_shipper_code')" width="120" />
          <el-table-column prop="toOwnerCode" :label="t('home.destination_shipper_code')" width="120" />
          <el-table-column prop="inventoryStatus" :label="t('home.inventory_state')" width="120">
            <template #default="scope">
              {{ formatter(scope.row.inventoryStatus,DICT_TYPE.INVENTORY_STATUS) }}
            </template>
          </el-table-column>
          <el-table-column prop="poNumber" :label="t('home.order_number')" width="120" />
          <el-table-column prop="poline" :label="t('home.order_line')" width="120" />
          <el-table-column prop="reason" :label="t('home.cause')" width="120" />
          <el-table-column prop="singlePrice" :label="t('home.unit_price')" width="120" />
          <el-table-column prop="amount" :label="t('home.money')" width="120" />
          <el-table-column prop="itemCode" :label="t('home.material_code')" width="160" />
          <el-table-column prop="itemName" :label="t('home.material_name')" width="120" />
          <el-table-column prop="itemDesc1" :label="t('home.material_description1')" width="120" />
          <el-table-column prop="itemDesc2" :label="t('home.material_description2')" width="120" />
          <el-table-column prop="qty" :label="t('home.amount')" width="120" />
          <el-table-column prop="uom" :label="t('home.measuring_unit')" width="120">
            <template #default="scope">
              {{ formatter(scope.row.uom,DICT_TYPE.UOM) }}
            </template>
          </el-table-column>
          <el-table-column prop="projectCode" :label="t('home.item_code')" width="120" />
          <el-table-column prop="remark" :label="t('home.comment')" width="120" />
          <el-table-column prop="createTime" :label="t('home.create_time')" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" :label="t('home.creater')" width="120" />
        </el-table>
        <el-pagination style="margin-top:10px"
          v-model:current-page="currentPage_purchasereturn"
          v-model:page-size="pageSize_purchasereturn"
          :page-sizes="[10, 20, 30, 50, 100]"
          :small="true"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total_purchasereturn"
          @size-change="getPurchasereturnRecordMonth"
          @current-change="getPurchasereturnRecordMonth"
        />
      </div>
      <div class="data1 w-[47.3%]">
        <!-- 本月索赔明细 -->
        <div class="title">{{t('home.claim_details_month')}}</div>
        <el-table
          :data="purchaseclaimRecordMonth"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="number" :label="t('home.document_number')" width="180" />
          <el-table-column prop="fromBatch" :label="t('home.batch')" width="120" />
          <el-table-column prop="poNumber" :label="t('home.order_number')" width="120" />
          <el-table-column prop="poline" :label="t('home.order_line')" width="120" />
          <el-table-column prop="reason" :label="t('home.cause')" width="120" />
          <el-table-column prop="singlePrice" :label="t('home.unit_price')" width="120" />
          <el-table-column prop="amount" :label="t('home.money')" width="120" />
          <el-table-column prop="code" label="代码" width="160" />
          <el-table-column prop="createTime" :label="t('home.create_time')" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" :label="t('home.creater')" width="120" />
        </el-table>
        <el-pagination style="margin-top:10px"
          v-model:current-page="currentPage_purchaseclaim"
          v-model:page-size="pageSize_purchaseclaim"
          :page-sizes="[10, 20, 30, 50, 100]"
          :small="true"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total_purchaseclaim"
          @size-change="getPurchaseclaimRecordMonth"
          @current-change="getPurchaseclaimRecordMonth"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { lineOptions, pieOptions } from '../echarts-data'
import { formatDate,dateFormatter } from '@/utils/formatTime'

import * as NotifyMessageApi from '@/api/system/notify/message'
import * as IndexApi from '@/api/home'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
const { t } = useI18n()
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    title: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  }
]
const supplierData = ref()
const lineIndex = ref(0)
// 本月发货单趋势
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getInvoiceCharts = async () => {
  set(
    lineOptionsData,
    'xAxis.data',
    supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
  )
  set(lineOptionsData, 'legend.data', [t('home.invoice_trend_month')])
  set(lineOptionsData, 'series', [
    {
      name: t('home.invoice_trend_month'),
      smooth: true,
      type: 'line',
      itemStyle: {},
      animationDuration: 2800,
      animationEasing: 'quadraticOut',
      data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
    }
  ])
  lineIndex.value++
}
//本月发货零件TOP10
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
const getPartTOPCharts = async () => {
  const data = [
    { value: 335, name: 'analysis.directAccess' },
    { value: 310, name: 'analysis.mailMarketing' },
    { value: 234, name: 'analysis.allianceAdvertising' },
    { value: 135, name: 'analysis.videoAdvertising' },
    { value: 1548, name: 'analysis.searchEngines' }
  ]
  console.log(supplierData.value.supplierdeliverItemMonthTop)
  set(
    pieOptionsData,
    'legend.data',
    supplierData.value.supplierdeliverItemMonthTop.map((v) => v.itemCode)
  )
  pieOptionsData!.series![0].data = supplierData.value.supplierdeliverItemMonthTop.map((v) => {
    return {
      name: v.itemCode,
      value: v.qty
    }
  })
  lineIndex.value++
}
// 获取供应商数据
const getSupplierData = async () => {
  IndexApi.getSupplierData().then((res) => {
    supplierData.value = res
    getInvoiceCharts()
    getPartTOPCharts()
  })
}
// 最新消息
const notaicList = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  userType: undefined,
  userId: undefined,
  templateCode: undefined,
  templateType: undefined,
  createTime: []
})
/** 查询列表 */
const getList = async () => {
  try {
    const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
    notaicList.value = data.list
  } finally {
  }
}
const formatter = (type,dict) => {
  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
  return str
}

// 本月退货明细
const currentPage_purchasereturn = ref(1)
const pageSize_purchasereturn = ref(10)
const total_purchasereturn= ref(100)
const purchasereturnRecordMonth = ref([])
const getPurchasereturnRecordMonth = ()=>{
    IndexApi.getPurchasereturnRecordMonth({
      pageNo: currentPage_purchasereturn.value,
      pageSize: pageSize_purchasereturn.value
    }).then((res) => {
      console.log('getPurchasereturnRecordMonth',res)
      purchasereturnRecordMonth.value = res.list
      total_purchasereturn.value = res.total
    })
}
// 本月索赔明细
const currentPage_purchaseclaim = ref(1)
const pageSize_purchaseclaim = ref(10)
const total_purchaseclaim= ref(100)
const purchaseclaimRecordMonth = ref([])
const getPurchaseclaimRecordMonth = ()=>{
    IndexApi.getPurchaseclaimRecordMonth({
      pageNo: currentPage_purchaseclaim.value,
      pageSize: pageSize_purchaseclaim.value
    }).then((res) => {
      console.log('getPurchaseclaimRecordMonth',res)
      purchaseclaimRecordMonth.value = res.list
      total_purchaseclaim.value = res.total
    })
}
onMounted( () => {
  getSupplierData()
  getList()
  // 本月索赔明细
  Promise.all([getPurchaseclaimRecordMonth(),getPurchasereturnRecordMonth()])
})
</script>
<style scoped lang="scss">
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  position: relative;
  padding-left: 10px;
  &::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 16px;
    background: #3c7adf;
    left: 0px;
    top: 3px;
    border-radius: 8px;
  }
}
.data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .data-item {
    width: calc(100% / 3);
    padding: 10px 0px;
    background: white;
    .small-title {
      padding: 0px 14px 10px;
    }
    .small-data {
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 0px 14px;
      .small-data-item {
        width: 50%;
        height: 70px;
        display: flex;
        align-items: center;
        border-radius: 6px;
        color: white;
        padding: 0px 20px;
        .small-data-item-txt {
          flex: 1;
          div {
            &:nth-child(1) {
              font-size: 20px;
              span {
                font-size: 12px;
                padding-left: 6px;
              }
            }
            &:nth-child(2) {
              font-size: 12px;
            }
          }
        }
        .img {
          width: 30px;
          opacity: 0.5;
        }
      }
      .small-data-item1 {
        background: linear-gradient(to left, #fd817d, #fcad80);
      }
      .small-data-item2 {
        background: linear-gradient(to left, #46c6fa, #336bfe);
      }
      .small-data-item3 {
        background: linear-gradient(to left, #96a6cc, #595f82);
      }
      .small-data-item4 {
        background: linear-gradient(to left, #08dcd5, #46e2bb);
      }
      .small-data-item5 {
        background: linear-gradient(to left, #f4c46b, #ffb313);
      }
      .small-data-item6 {
        background: linear-gradient(to left, #6eccf8, #02acfd);
      }
    }
  }
}
.two-row {
  display: flex;
  align-content: center;
  justify-content: space-between;
  .data1 {
    background: white;
    padding: 14px;
  }
}
</style>
