<template>
  <div class="app-container home">
    <div>
      <h2>欢迎使用UDI管理平台</h2>
      <el-divider/>
    </div>
    <!-- 分割线 -->
<!--    <div class="m0 grid-container grid-container1" style="height: 100%; display: flex; flex-wrap: wrap;">-->
<!--      <el-card-->
<!--        @click.native="handleClick(index)"-->
<!--        v-for="(card, index) in stationList"-->
<!--        :key="index"-->
<!--        class="grid-itemCard"-->
<!--        :body-style="{ padding: '0px', height: '100px', width: '100px', display: 'flex', justifyContent: 'center', alignItems: 'center' }"-->
<!--      >-->
<!--        {{ card.workplaceName }}-->
<!--      </el-card>-->

<!--    </div>-->


    <div class="mt10 grid-container grid-container3" style="height: 15%">
      <el-card class="grid-item" body-style="padding:0px;height:100%" v-hasPermi="['home:index:product']">
        <el-row>
          <div class="height-full fl center ml20" style="width: 30%">
            <el-image style="border-radius: 4%;width: 80%;height: 80%"
                      :src="productSvg">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div class="height-full fr center mr20">
              <span class="header d-block">
                已对照产品
              </span>
            <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
                {{ productCount }}
              </span>
          </div>
        </el-row>
      </el-card>

      <el-card class="grid-item" body-style="padding:0px;height:100%" v-hasPermi="['home:index:invWarn']">
        <el-row>
          <div class="height-full fl center ml20" style="width: 30%">
            <el-image style="border-radius: 4%;width: 80%;height: 80%"
                      :src="invSvg">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div class="height-full fr center mr20" @click="linkPage('/remind/invRemindMsg')">
              <span class="header d-block">
                库存预警
              </span>
            <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#FF0000'}">
                {{ invMsgCount }}
              </span>
          </div>
        </el-row>
      </el-card>

      <el-card class="grid-item" body-style="padding:0px;height:100%" v-hasPermi="['home:index:certWarn']">
        <el-row>
          <div class="height-full fl center ml20" style="width: 30%">
            <el-image style="border-radius: 4%;width: 80%;height: 80%"
                      :src="certSvg">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div class="height-full fr center mr20" @click="linkPage('/remind/supCertRemindMsg')">
              <span class="header d-block">
                资质预警
              </span>
            <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#FF0000'}"
            >
                {{ certMsgCount }}
              </span>
          </div>
        </el-row>
      </el-card>
    </div>
    <!--  分割线  -->
    <div class="m0 grid-container grid-container2" style="height: calc(40%);margin-top: 10px">
      <el-card class="grid-item" body-style="padding:0px;height:100%" v-hasPermi="['home:index:todo']">
        <div slot="header" class="header">
          <el-icon class="el-icon-s-management"/>
          待办事项{{ `(${todoCount}条)` }}
          <div class="fr">
            <el-button type="text" style="font-size: 15px;color: unset" @click="getSysMsgTodoList">
              <el-icon class="el-icon-refresh"/>
              重新加载
            </el-button>
            <el-button type="text" style="font-size: 15px;color: unset"
                       @click.stop="">
              更多
              <el-icon class="el-icon-d-arrow-right"/>
            </el-button>
          </div>
        </div>
        <el-table
          v-loading="msgLoading"
          :data="msgList"
          height="calc(90%)"
          stripe
          style="">
          <el-table-column
            type="index"
            label="序号"
            width="50"/>
          <el-table-column
            label="消息编码"
            prop="code"
            width="120"/>
          <el-table-column
            label="消息类型"
            prop="msgTypeName"
            width="120"/>
          <el-table-column
            label="消息内容"
            prop="msgContent"
            width="280"/>
          <el-table-column
            label="处理状态"
            prop="dealStatusName"
            width="120"/>
          <el-table-column
            label="推送状态"
            prop="pushStatusName"
            width="120"/>
          <el-table-column
            label="仓库"
            prop="invName"
            width="120"/>
          <el-table-column
            label="部门"
            prop="deptName"
            width="120"/>
          <el-table-column
            label="创建时间"
            prop="createTime"
            width="140"/>
          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="linkPage('/system/msg/sysMsgTodo')"
              >处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="grid-item" body-style="padding:0px;height:100%" v-hasPermi="['home:index:ioAudit']">
        <div slot="header" class="header">
          <el-icon class="el-icon-s-platform"/>
          审核送货单{{ `(${orderTotal}条)` }}
          <div class="fr">
            <el-button type="text" style="font-size: 15px;color: unset" @click="getOrderList">
              <el-icon class="el-icon-refresh"/>
              重新加载
            </el-button>
            <el-button type="text" style="font-size: 15px;color: unset"
                       @click="linkPage('/order/checked')">更多
              <el-icon class="el-icon-d-arrow-right"/>
            </el-button>
          </div>
        </div>
        <el-table
          v-loading="orderLoading"
          :data="orderList"
          height="calc(90%)"
          stripe>
          <el-table-column
            type="index"
            label="序号"
            width="50"/>
          <el-table-column label="送货单号" prop="billNo" width="180"/>
          <el-table-column label="单据类型" prop="billTypeName" width="150"/>
          <el-table-column label="送货单位" prop="fromName" width="220"/>
          <el-table-column label="创建时间" prop="createTime" width="150"/>
          <el-table-column label="核对时间" prop="checkTime" width="150"/>

          <el-table-column label="采购部门" prop="deptName" width="120">
          </el-table-column>
          <el-table-column label="收货仓库" prop="invName" width="120">
          </el-table-column>
          <el-table-column label="核对人" prop="checkUserName" width="120">
          </el-table-column>
          <el-table-column label="来源单号" prop="corpOrderId" width="180"/>
          <!--          <el-table-column label="来源" prop="fromType" width="120">-->
          <!--            <template slot-scope="scope">-->
          <!--              <span>{{ fromTypeMap[scope.row.fromType] }}</span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->


          <!--          <el-table-column label="审核状态" prop="status" width="100">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-tag :type="statusFilterType(scope.row.status)">{{-->
          <!--                  checkStatus[scope.row.status]-->
          <!--                }}-->
          <!--              </el-tag>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="备注" prop="remark" width="180"/>
          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="linkPage('/order/checked')"
              >处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import {getOrderList} from "../api/inout/order";
import {sysMsgTodoPage} from "../api/system/sysMsgTodoApi";
import productSvg from "@/assets/svg/已对照产品.svg"
import invSvg from "@/assets/svg/库存预警.svg"
import certSvg from "@/assets/svg/资质预警.svg"
import {getInvRemindMsgList} from "../api/system/invRemindMsg";
import {getUdiInfos} from "../api/basic/udiRelevance";
// import {listPage} from "@/api/basic/sysWorkplaceManage.js";
import {getSupCertgetCount, getSupCertRemindMsgList} from "../api/purchase/supCertRedmindMsg";

export default {
  name: "Index",
  data() {
    return {
      productSvg: productSvg,
      invSvg: invSvg,
      certSvg: certSvg,
      productCount: 0,
      invMsgCount: 0,
      certMsgCount: 0,
      // 待办==================================================
      msgLoading: false,
      todoCount: 0,
      msgList: [],
      // =======================================================================
      // 单据==================================================
      orderLoading: false,
      orderTotal: 0,
      orderList: [],
      // =======================================================================
      // 假设这是你的卡片数据
      stationList: [

      ],
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  created() {
    //获取工位list
    // this.getStationList()
    this.getProductCount()
    this.getInvMsgCount()
    this.getCertMsgCount()
    this.getSysMsgTodoList()
    this.getOrderList()
  },
  methods: {
    // handleClick(index) {
    //   let url = window.location.origin+`#/tagCodeBlank?workplaceId=`+ this.stationList[index].workplaceId
    //   // this.$router.push( workplaceId)
    //   window.open(url, '_blank');
    // },
    // getStationList(){
    //   let param = {
    //     page: 1,
    //     limit: 200
    //   }
    //   listPage(param).then(res => {
    //     this.stationList = res.data?.list || []
    //   })
    // },
    getProductCount() {
      let param = {
        page: 1,
        limit: 1,
        addType: 1,
        filterType: 1
      }
      getUdiInfos(param).then(res => {
        this.productCount = res.data?.total || 0
      })
    },
    getInvMsgCount() {
      let param = {
        page: 1,
        limit: 1,
        status: 1,
        ignoreStatus: 0
      }
      getInvRemindMsgList(param).then(res => {
        this.invMsgCount = res.data?.total || 0
      })
    },
    getCertMsgCount() {
      let param = {
        page: 1,
        limit: 1,
        status: 1,
        ignoreStatus: 0
      }
      getSupCertgetCount(param).then(res => {
        this.certMsgCount = res.data
      })
    },
    linkPage(path) {
      console.log(path)
      this.$router.push(path)
    },
    getSysMsgTodoList() {
      this.msgLoading = true
      let msgQuery = {
        page: 1,
        limit: 5
      }
      sysMsgTodoPage(msgQuery).then(res => {
        this.msgLoading = false
        if (res.code != 20000) {
          this.$message.error(res.message())
          return
        }
        this.msgList = res.data.list || []
        this.todoCount = res.data.total || 0
      }).catch(e => {
        this.$message.error(e.message)
        this.msgLoading = false
        this.msgList = []
        this.todoCount = 0
      })
    },
    getOrderList() {
      this.orderLoading = true
      let orderQuery = {
        page: 1,
        limit: 10,
        // status: 10,
        statusType: "waitAudited"
        // vueType: "supDelivery",
      }
      getOrderList(orderQuery)
        .then((res) => {
          this.orderLoading = false;
          if (res.code === 20000) {
            this.orderList = res.data.list || [];
            this.orderTotal = res.data.total || 0;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.message)
          this.orderLoading = false;
          this.orderList = [];
          this.orderTotal = 0;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.el-row .el-card {
  margin: 0;

  .el-card__body {
    padding: 0 !important;
  }
}

.grid-itemCard {
  /* 确保卡片是正方形，并且有一定的间距 */
  margin: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.grid-item {
  height: 100%;
  padding: 15px;

  .el-row, .el-col {
    height: 100%;
  }

  .header {
    color: #676a6c;
    font-size: 20px;
    font-weight: bolder;
  }

  .el-table {
    margin-top: 10px;
    width: 100%;
  }
}

.grid-container {
  height: inherit;
  display: grid;
  grid-gap: 10px;

  .el-card {
    margin: 0;
  }
}

.grid-container1 {
  grid-template-columns: repeat(1, 1fr);
  padding: 10px;
}



.grid-container2 {
  grid-template-columns: repeat(2, 1fr);

}

.grid-container3 {
  grid-template-columns: repeat(3, 1fr);

}

.grid-container4 {
  grid-template-columns: repeat(4, 1fr);

}

.home {

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  height: calc(100%);
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    color: #000610;
    font-weight: bolder;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

