<!-- 供应商首页 -->
<template>
  <div class="one-row">
    <div class="data">
      <div class="data-item">
        <div class="small-title">订单数</div>
        <div class="small-data">
          <div class="small-data-item small-data-item1">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.openPurchaseCount || 0 }}<span>单</span></div>
              <div>开放订单数</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>单</span></div>
              <div>全部订单数</div>
            </div>
            <img src="../../../assets/imgs/icon5.png" alt="" class="img" />
          </div>
        </div>
      </div>
      <div class="data-item ml-14px">
        <div class="small-title">要货计划数</div>
        <div class="small-data">
          <div class="small-data-item small-data-item3">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.openPurchasePlanCount || 0 }}<span>单</span></div>
              <div>开放计划数</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>单</span></div>
              <div>全部计划数</div>
            </div>
            <img src="../../../assets/imgs/icon3.png" alt="" class="img" />
          </div>
        </div>
      </div>
      <div class="data-item ml-14px">
        <div class="small-title">发货单数</div>
        <div class="small-data">
          <div class="small-data-item small-data-item5">
            <div class="small-data-item-txt">
              <div>{{ supplierData?.notTakeSupplierdeliverCount || 0 }}<span>单</span></div>
              <div>未收货订单数</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>单</span></div>
              <div>已收货订单数</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">本月发货单趋势</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 w-[35%] ml-14px">
        <div class="title">本月发货零件TOP10</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">最新消息</div>
        <el-table :data="notaicList" style="width: 100%" stripe height="240px">
          <el-table-column label="编号" align="center" prop="id" />
          <el-table-column label="用户类型" 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="用户编号" align="center" prop="userId" width="80" />
          <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
          <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
          <el-table-column
            label="模版内容"
            align="center"
            prop="templateContent"
            width="200"
            show-overflow-tooltip
          />
          <el-table-column
            label="模版参数"
            align="center"
            prop="templateParams"
            width="180"
            show-overflow-tooltip
          >
            <template #default="scope"> {{ scope.row.templateParams }}</template>
          </el-table-column>
          <el-table-column label="模版类型" 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="是否已读" 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="阅读时间"
            align="center"
            prop="readTime"
            width="180"
            :formatter="dateFormatter"
          />
          <el-table-column
            label="创建时间"
            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">最新扣分明细</div>
        <el-table :data="tableData" style="width: 100%" stripe height="240px">
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="name" label="发布人" />
          <el-table-column prop="date" label="发布日期" />
        </el-table>
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[47.3%]">
        <div class="title">本月退货明细</div>
        <el-table
          :data="supplierData?.purchasereturnRecordMonth"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="number" label="单据号" width="180" />
          <el-table-column prop="fromPackingNumber" label="从包装号" width="180" />
          <el-table-column prop="toPackingNumber" label="到包装号" width="180" />
          <el-table-column prop="fromContainerNumber" label="从器具号" width="120" />
          <el-table-column prop="toContainerNumber" label="到器具号" width="120" />
          <el-table-column prop="fromBatch" label="从批次" width="120" />
          <el-table-column prop="toBatch" label="到批次" width="120" />
          <el-table-column prop="altBatch" label="替代批次" width="120" />
          <el-table-column prop="fromLocationCode" label="从库位代码" width="120" />
          <el-table-column prop="toLocationCode" label="到库位代码" width="120" />
          <el-table-column prop="fromLocationGroupCode" label="从库位组代码" width="120" />
          <el-table-column prop="toLocationGroupCode" label="到库位组代码" width="120" />
          <el-table-column prop="fromAreaCode" label="从库区代码" width="120" />
          <el-table-column prop="toAreaCode" label="到库区代码" width="120" />
          <el-table-column prop="fromOwnerCode" label="从货主代码" width="120" />
          <el-table-column prop="toOwnerCode" label="到货主代码" width="120" />
          <el-table-column prop="inventoryStatus" label="库存状态" width="120">
            <template #default="scope">
              {{ formatter(scope.row.inventoryStatus,DICT_TYPE.INVENTORY_STATUS) }}
            </template>
          </el-table-column>
          <el-table-column prop="poNumber" label="订单号" width="120" />
          <el-table-column prop="poline" label="订单行" width="120" />
          <el-table-column prop="reason" label="原因" width="120" />
          <el-table-column prop="singlePrice" label="单价" width="120" />
          <el-table-column prop="amount" label="金额" width="120" />
          <el-table-column prop="itemCode" label="物料代码" width="160" />
          <el-table-column prop="itemName" label="物料名称" width="120" />
          <el-table-column prop="itemDesc1" label="物料描述1" width="120" />
          <el-table-column prop="itemDesc2" label="物料描述2" width="120" />
          <el-table-column prop="qty" label="数量" width="120" />
          <el-table-column prop="uom" label="计量单位" width="120">
            <template #default="scope">
              {{ formatter(scope.row.uom,DICT_TYPE.UOM) }}
            </template>
          </el-table-column>
          <el-table-column prop="projectCode" label="项目代码" width="120" />
          <el-table-column prop="remark" label="备注" width="120" />
          <el-table-column prop="createTime" label="创建时间" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="创建者" width="120" />
        </el-table>
      </div>
      <div class="data1 w-[47.3%]">
        <div class="title">本月索赔明细</div>
        <el-table
          :data="supplierData?.purchasereturnRecordMonth"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="number" label="单据号" width="180" />
          <el-table-column prop="fromBatch" label="批次" width="120" />
          <el-table-column prop="poNumber" label="订单号" width="120" />
          <el-table-column prop="poline" label="订单行" width="120" />
          <el-table-column prop="reason" label="原因" width="120" />
          <el-table-column prop="singlePrice" label="单价" width="120" />
          <el-table-column prop="amount" label="金额" width="120" />
          <el-table-column prop="code" label="代码" width="160" />
          <el-table-column prop="createTime" label="创建时间" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="创建者" width="120" />
        </el-table>
      </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 } 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', ['本月发货单趋势'])
  set(lineOptionsData, 'series', [
    {
      name: '本月发货单趋势',
      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
}
onMounted(async () => {
  await getSupplierData()
  getList()
})
</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>
