<template>
  <div class="app-container home">
    <div>
      <h2>欢迎使用供应商自助管理系统</h2>
      <el-divider/>
    </div>
    <!-- 分割线 -->
    <div class="mt10 grid-container grid-container3" style="height: 15%">
      <el-card v-for="item in card" class="grid-item" body-style="padding:0px;height:100%">
        <el-row>
          <div class="height-full fl center ml20" style="width: 30%">
          <el-image style="border-radius: 4%;width: 80%;height: 80%"
                    :src="item.svg">
            <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">
                {{ item.title }}
              </span>
            <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:item.color}">
                {{ item.text }}
              </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%">
        <div slot="header" class="header">
          <el-icon class="el-icon-s-management"/>
          待办事项
          <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="linkPage('/pur/auditDelivery')">
              更多
              <el-icon class="el-icon-d-arrow-right"/>
            </el-button>
          </div>
        </div>
        <el-table
          v-loading="msgLoading"
          :data="msgList"
          stripe
          style="width: 100%;height:calc(100% - 50px);margin-top: 10px">
          <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="dealStatus"
            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('/pur/auditDelivery')"
              >处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="grid-item" body-style="padding:0px;height:100%">
        <div slot="header" class="header">
          <el-icon class="el-icon-s-platform"/>
          审核送货单
          <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('/pur/auditDelivery')">更多
              <el-icon class="el-icon-d-arrow-right"/>
            </el-button>
          </div>
        </div>
        <el-table
          v-loading="orderLoading"
          :data="orderList"
          stripe
          style="width: 100%;height:calc(100% - 50px);margin-top: 10px">
          <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('/pur/auditDelivery')"
              >处理
              </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 已对照产品 from "@/assets/svg/已对照产品.svg"
import 库存预警 from "@/assets/svg/库存预警.svg"
import 资质预警 from "@/assets/svg/资质预警.svg"

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "4.3.0",
      card: [
        {color: '#394047', title: '已对照产品', text: '999999', svg: 已对照产品},
        {color: '#ef5c3b', title: '库存预警', text: '999999', svg: 库存预警},
        {color: '#ef5c3b', title: '资质预警', text: '999999', svg: 资质预警},
      ],
      // 待办==================================================
      msgLoading: false,
      msgList: [],
      msgQuery: {
        page: 1,
        limit: 5
      },
      // =======================================================================
      // 单据==================================================
      orderLoading: false,
      orderList: [],
      orderQuery: {
        page: 1,
        limit: 5,
        status: 10,
        vueType: "supDelivery",
      }
      // =======================================================================
    };
  },
  created() {
    this.getSysMsgTodoList()
    this.getOrderList()
  },
  methods: {
    linkPage(path) {
      this.$router.push({path})
    },
    getSysMsgTodoList() {
      this.msgLoading = true
      sysMsgTodoPage(this.msgQuery).then(res => {
        this.msgLoading = false
        if (res.code != 20000) {
          this.$message.error(res.message())
          return
        }
        this.msgList = res.data.list || []
      }).catch(e => {
        this.msgLoading = false
        this.msgList = []
      })
    },
    getOrderList() {
      this.orderLoading = true;
      getOrderList(this.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;
        });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</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-item {
  height: 100%;
  padding: 15px;

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

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

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

  .el-card {
    margin: 0;
  }
}

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

}

.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>

