<template>
   <div class="dashboard-container">
      <div class="dashboard-editor-container">
        <panel-group />

        <div class="divBox">
            <el-card :bordered="false" dis-hover>
              <div slot="header">
                <div class="acea-row row-middle">
                  <el-avatar
                    icon="el-icon-s-operation"
                    size="small"
                    style="color: #1890ff; background: #e6f7ff; font-size: 13px"
                  />
                  <span class="ivu-pl-8" style="vertical-align: top;">订单统计</span>

                   <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;" @click="getDocT(0)">总排行</el-link>
                    <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;" @click="getDocT(9)">本年排行</el-link>
                    <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;" @click="getDocT(5)">本月排行</el-link>
                    <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;" @click="getDocT(3)">本周排行</el-link>
                   <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;"  @click="getDocT(1)">今日排行</el-link>



                </div>
              </div>
              <el-row :gutter="24">
                <el-col
                  :xl="16"
                  :lg="16"
                  :md="24"
                  :sm="24"
                  :xs="24"
                  class="ivu-mb mb10 dashboard-console-visit"
                >
                  <span class="ivu-pl-8" >订单统计</span>
                 <store-order-money />
                </el-col>
                <el-col
                  :xl="8"
                  :lg="8"
                  :md="24"
                  :sm="24"
                  :xs="24"
                  class="ivu-mb mb10 dashboard-console-visit"
                >
                  <span class="ivu-pl-8" >商品销售排行TOP10</span>
                  <div style=" margin-bottom: 40px;"></div>
                 <doctor-chart ref="getDoc" />
                </el-col>
              </el-row>
            </el-card>
        </div>



      </div>

     <el-dialog
       title="店铺资质消息提示"
       :visible.sync="dialogVisible"
       width="40%"
       center>
       <div v-if="qualificationCheck" class="urgent-notice">
         <div class="notice-content">
           <div class="notice-title">【重要通知】</div>
           <div class="notice-desc" v-if="remainDays < 0">
             您店铺的入驻资质已届满6个月有效期！<br/>
             请立即更新并上传最新资质提交审核，避免影响店铺正常运营！
           </div>
           <div class="notice-desc" v-if="remainDays >= 0">
             您店铺的入驻资质即将届满6个月有效期！剩余{{remainDays}}天<br/>
             请立即更新并上传最新资质提交审核，避免影响店铺正常运营！
           </div>
         </div>
       </div>
       <div v-for="(item,index) in promptList">({{index+1}})、{{item}}</div>
       <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="dialogVisible = false">已 知 晓</el-button>
      </span>
     </el-dialog>


  </div>
</template>

<script>

import doctorChart from "./components/store/doctorChart.vue";
import PanelGroup from "./components/store/PanelGroup.vue";
import StoreOrderMoney from "./components/store/StoreOrderMoney.vue";
import { qualificationReminder, queryValidStoreLastInfo } from '@/api/store/store'
export default {
  name: 'Index',
  components: {
PanelGroup,StoreOrderMoney,doctorChart
  },
  data() {
    return {
      remainDays:0,
      qualificationCheck:false,
       data:null,
      promptList:[],
      dialogVisible: false,
    }
  },
  created() {
    this.$nextTick(()=>{
      console.log("是否执行资质提示方法")
      this.handleNoticeInfo();
    })

    //this.getIndex();
  },
  methods: {
    /* getIndex() {
      this.loading = true;
      getIndex().then(response => {
        this.data = response.data;

      });
    }, */
    handleNoticeInfo() {
      queryValidStoreLastInfo()
        .then(response => {
          console.log("noticeInfo接口完整响应：", response);
          if (response.code === 200) {
            this.promptList = response.data;
            //请求店铺资质提醒接口满6个月
            qualificationReminder().then(response => {
              if(response.code === 200) {
                if(response.data != null) {
                  this.remainDays = response.data.remainDays;
                  this.qualificationCheck = true;
                }
              }
            })
            this.dialogVisible = true;
            console.log("通知信息请求完成！", this.promptList);
          } else {
            //请求店铺资质提醒接口满6个月
            qualificationReminder().then(response => {
              if(response.code === 200) {
                if(response.data != null) {
                  this.remainDays = response.data.remainDays;
                  this.qualificationCheck = true;
                  this.dialogVisible = true;
                }
              }
            })
          }
        })
        .catch(err => {
          console.error("获取通知信息失败：", err);
          this.$message.error("加载通知信息失败，请稍后重试");
        });
    },
    getDocT(row){
      setTimeout(() => {
        this.$refs.getDoc.getDoc(row);
      }, 1);
    }
  },
}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .acea-row {
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .checkTime {
    ::v-deep.el-radio__input {
      display: none;
    }
  }
  .ivu-pl-8 {
    margin-left: 8px;
    font-size: 14px;
  }
  .divBox {
    // padding: 0 20px !important;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header {
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }
  .ivu-mb {
    margin-bottom: 10px;
  }

  .urgent-notice {
    background-color: #fff1f0; /* 浅红色背景 */
    border: 1px solid #ffccc7; /* 红色边框 */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(245, 108, 108, 0.1); /* 轻微红色阴影增强醒目度 */
  }

  .notice-icon {
    font-size: 24px;
    margin-top: 2px;
  }

  .notice-content {
    flex: 1;
  }

  .notice-title {
    font-size: 16px;
    font-weight: 700;
    color: #f56c6c; /* 红色标题 */
    margin-bottom: 8px;
  }

  .notice-desc {
    font-size: 14px;
    color: #e53e3e; /* 深红色文案 */
    line-height: 1.6;
    font-weight: 500;
  }
  .prompt-item {
    margin: 8px 0;
    color: #333;
  }
  </style>
