<template>
  <view class="page">
    <view class="home-header" :style="{ backgroundImage: `url(${homeBg})` }">
      <view class="logo">
        <image class="img" :src="logo"></image>
        <image class="img-title" :src="homeTitle" />
      </view>
      <view class="home-options">
        <view v-for="(item, index) in option" :key="index" class="option-item" @click="goLink(item.path)">
          <image class="img" :src="item.icon" mode="scaleToFill" />
          <view class="text">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="home-message">
      <view v-for="(item, index) in messageInfo" :key="index" class="message-item">
        <view class="item-title">{{ item.title }}</view>
        <view class="item-content" :style="{ color: item.color ?? '#000' }">{{ item.content }}</view>
      </view>
    </view>
    <view class="home-title">
      <view class="title">营销数据</view>
      <view class="custom-select">
        <view class="select-item">归属<up-icon name="arrow-down"></up-icon></view>
        <view class="select-item">周期<up-icon name="arrow-down"></up-icon></view>
      </view>
    </view>
    <view class="home-content">
      <view class="content-card">
        <view class="title">销售简报<view class="desc">(单位：万元)</view>
        </view>
        <view class="small-card">
          <view class="progress">
            <view class="text">完成率</view>
            <up-line-progress :percentage="75" activeColor="#2B69F8" />
          </view>
          <view class="small-card-content">
            <view class="content-item">
              <view class="title">目标金额</view>
              <view class="number">12,345.52
                <view class="unit">万</view>
              </view>
            </view>
            <view class="content-item">
              <view class="title">已完成金额</view>
              <view class="number">12,345.52
                <view class="unit">万</view>
              </view>
            </view>
          </view>
        </view>
        <view class="card-data">
          <view class="card-data-item">
            <view class="title">客户总数</view>
            <view class="number">52 <span class="unit">个</span></view>
            <view class="tips">新增客户<span class="data">+4</span></view>
          </view>
          <view class="card-data-item">
            <view class="title">服务商总数</view>
            <view class="number">52 <span class="unit">个</span></view>
            <view class="tips">新增服务商<span class="data">+4</span></view>
          </view>
          <view class="card-data-item">
            <view class="title">线索总数</view>
            <view class="number">52 <span class="unit">个</span></view>
            <view class="tips">新增线索<span class="data">+4</span></view>
          </view>
          <view class="card-data-item">
            <view class="title">立项总数</view>
            <view class="number">52 <span class="unit">个</span></view>
            <view class="tips">新增立项<span class="data">+4</span></view>
          </view>
          <view class="card-data-item">
            <view class="title">投标总数</view>
            <view class="number">52 <span class="unit">个</span></view>
            <view class="tips">新增投标<span class="data">+4</span></view>
          </view>
          <view class="card-data-item">
            <view class="title">中标总数</view>
            <view class="number">52 <span class="unit">个</span></view>
            <view class="tips">新增中标<span class="data">+4</span></view>
          </view>
        </view>
        <view class="card-bottom">
          <view class="card-item">
            <view class="title">待签约</view>
            <view class="number">52<span class="unit">个</span></view>
          </view>
          <view class="card-item">
            <view class="title">已签约</view>
            <view class="number">52<span class="unit">个</span></view>
          </view>
          <view class="card-item">
            <view class="title">待履约</view>
            <view class="number">52<span class="unit">个</span></view>
          </view>
          <view class="card-item">
            <view class="title">已履约</view>
            <view class="number">52<span class="unit">个</span></view>
          </view>
        </view>
      </view>
      <view class="customer-visit">
        <view class="title">客户拜访</view>
        <view class="customer-visit-content">
          <view class="cusomer-visit-item">
            <view class="tag-first">短期未联</view>
            <view class="content">
              <view class="content-item">
                <view class="title">超7天</view>
                <view class="number">12个</view>
              </view>
              <view class="content-item">
                <view class="title">超15天</view>
                <view class="number">52个</view>
              </view>
              <view class="content-item">
                <view class="title">超30天</view>
                <view class="number">52个</view>
              </view>
            </view>
          </view>
          <view class="cusomer-visit-item">
            <view class="tag-secondry">长期未联</view>
            <view class="content">
              <view class="content-item">
                <view class="title">超3月</view>
                <view class="number">12个</view>
              </view>
              <view class="content-item">
                <view class="title">超6月</view>
                <view class="number">52个</view>
              </view>
              <view class="content-item">
                <view class="title">逾期未联系</view>
                <view class="number">52个</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="customer-target">
        <view class="title">目标及合同额</view>
        <view class="charts-box">
          <qiun-data-charts type="tarea" :opts="opts" :chartData="chartData" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onShow, onLoad ,onReady} from '@dcloudio/uni-app';
import logo from '@/static/images/home/home-logo.png';
import homeBg from '@/static/images/home/home-bg.png'
import homeTitle from '@/static/images/home/home-title.png'
import user from '@/static/images/home/user.png'
import clues from '@/static/images/home/clues.png'
import serivces from '@/static/images/home/serivces.png'
import note from '@/static/images/home/note.png'
import packageImg from '@/static/images/home/package.png'
/* 头部高度 */
const statusBarHeight = ref(0)

onLoad(() => {
  uni.getSystemInfo({
    success: (res) => {
      const statusBar = res.statusBarHeight
      // #ifdef MP-WEIXIN
      const custom = wx.getMenuButtonBoundingClientRect()
      statusBarHeight.value = (custom.bottom + custom.top - statusBar) + 'px'
      // #endif
      // #ifdef APP
      statusBarHeight.value = statusBar + 'px'
      // #endif
    }
  })
})
/* 下拉菜单条件 */
const attach = ref(1)
const cycle = ref(1)
const attachList = ref([
  {
    label: '仅本人',
    value: 1,
  },
  {
    label: '仅本人及下属',
    value: 2,
  },
  {
    label: '仅本部门',
    value: 3,
  },
  {
    label: '仅本部门',
    value: 3,
  }
])
const cycleList = ref([
  {
    label: '全部',
    value: 1,
  },
  {
    label: '本周',
    value: 1,
  },
  {
    label: '本月',
    value: 2,
  },
  {
    label: '本季度',
    value: 3,
  },
  {
    label: '本年',
    value: 3,
  }
])
const messageInfo = ref([
  {
    title: '流程审批',
    content: '34个',
    color: ''
  },
  {
    title: '待办任务',
    content: '34个',
    color: '#FF9019'
  },
  {
    title: '平台预警',
    content: '34个',
    color: '#F23947'
  },
  {
    title: '消息提醒',
    content: '34个',
    color: ''
  },
  {
    title: '通知公告',
    content: '34个',
    color: ''
  },
])
const option = [
  {
    icon: user,
    title: '建客户',
    path: ''
  },
  {
    icon: clues,
    title: '建线索',
    path: ''
  },
  {
    icon: serivces,
    title: '建服务商',
    path: ''
  },
  {
    icon: note,
    title: '写日志',
    path: ''
  },
  {
    icon: packageImg,
    title: '建拜访',
    path: ''
  },
]
function goLink(path) {
  if (path === '') {
    return
  }
  uni.navigateTo({
    url: path
  })
}
const chartData = ref({})
const opts = ref({
  color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
  padding: [15, 10, 0, 15],
  enableScroll: false,
  legend: {
    show:false
  },
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    data: [
      {
        title: "金额(万元)",
        min: 0,
        max: 100,
      },
    ]
  },
  extra: {
    area: {
      type: "curve",
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true,
      activeType: "solid"
    }
  }
})
onReady(() => {
  getServerData()
})
function getServerData() {
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
      categories: ["1月","2月","3月","4月","5月","6月",'7月','8月','9月','10月','11月','12月'],
      series: [
        {
          name: "1月",
          data: [40,50,60,60,50,40,50,60,70,80,90,100]
        },
        {
          name: "2月",
          data: [48,58,68,68,58,48,58,68,78,88,98,108]
        },
      ]
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
}
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 300px;
}

.page {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: v-bind(statusBarHeight);

  .home-header {
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(302.71deg, rgba(80, 133, 255, 0.7) 2.34%, #2B69F8 98.84%);
    height: 226rpx;
    background-size: cover;
    background-repeat: no-repeat;
    gap: 40rpx;
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .logo {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;

      .img {
        width: 136rpx;
        height: 52rpx;
      }

      .img-title {
        width: 400rpx;
        height: 32rpx;
      }
    }

    .home-options {
      display: flex;
      flex-direction: row;
      gap: 40rpx;
      // margin-bottom: 40rpx;

      .option-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;

        .img {
          width: 80rpx;
          height: 80rpx;
        }

        .text {
          color: #FFFFFF;
        }
      }
    }
  }



  .home-message {
    position: relative;
    top: -32rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    display: flex;
    flex-direction: row;
    gap: 24rpx;

    .message-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16rpx;

      .item-title {
        font-size: 28rpx;
      }

      .item-content {
        font-size: 28rpx;
      }
    }
  }

  .home-title {
    display: flex;
    flex-direction: row;
    padding: 12rpx;
    gap: 16rpx;

    .title {
      color: #000;
      font-size: 32rpx;
      font-family: 'PingFang SC';

    }

    .custom-select {
      display: flex;
      flex-direction: row;
      gap: 16rpx;

      .select-item {
        display: flex;
        flex-direction: row;
        background-color: #fff;
        border-radius: 16rpx;
        padding: 4rpx 32rpx;
      }
    }

  }

  .home-content {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    margin: 0 16rpx;

    .content-card {
      background-color: #fff;
      border-radius: 16rpx;
      display: flex;
      padding: 16rpx;
      flex-direction: column;

      .title {
        font-size: 32rpx;
        font-family: 'PingFang SC';
        display: inline-flex;
        align-items: center;

        .desc {
          font-size: 24rpx;
          font-family: 'PingFang SC';
          color: #797979;
        }
      }

      .small-card {
        border: 1px solid #F4F5F9;
        border-radius: 16rpx;

        .progress {
          display: flex;
          align-items: center;
          gap: 16rpx;
          padding: 16rpx;

          .text {
            color: #666666;
            font-size: 28rpx;
            font-family: 'PingFang SC';
          }
        }

        .small-card-content {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 16rpx;
          border-top: 1px solid #F6F8FF;

          .content-item {
            display: flex;
            flex-direction: column;

            .title {
              font-size: 28rpx;
              font-family: 'PingFang SC';
              color: #666666;
            }

            .number {
              font-size: 36rpx;
              font-family: 'PingFang SC';
              display: inline-flex;
              align-items: center;

              .unit {
                color: #666666;
                font-size: 28rpx;
                font-family: 'PingFang SC';
              }
            }
          }
        }
      }

      .card-data {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background: #fff;
        border-radius: 16rpx;
        padding: 32rpx;

        .card-data-item:nth-child(n) {
          border-right: 1px solid #F6F9FF;
        }

        .card-data-item:nth-child(2n) {
          border-right: none;
        }

        .card-data-item {
          display: flex;
          flex-direction: column;
          padding: 32rpx;
          border-bottom: 1px solid #F6F9FF;

          .title {
            color: #666666;
            font-size: 28rpx;
            font-family: 'PingFang SC';
          }

          .number {
            font-size: 36rpx;
            font-family: 'PingFang SC';

            .unit {
              font-size: 28rpx;
              font-family: 'PingFang SC';
            }
          }

          .tips {
            font-size: 24rpx;
            color: #666666;
            font-family: 'PingFang SC';

            .data {
              color: #2B69F8;
              font-size: 24rpx;
              font-family: 'PingFang SC';
            }
          }
        }
      }

      .card-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .card-item {
          display: flex;
          flex-direction: column;

          .title {
            font-size: 28rpx;
            color: #666666;
            font-family: 'PingFang SC';
          }

          .number {
            font-size: 36rpx;
            font-family: 'PingFang SC';

            .unit {
              font-size: 28rpx;
            }
          }
        }
      }
    }

    .customer-visit {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 32rpx;
      gap: 32rpx;

      .title {
        font-size: 32rpx;
        color: #000000;
        font-family: 'PingFang SC';
      }

      .customer-visit-content {
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .cusomer-visit-item {
          display: flex;
          flex-direction: row;
          border: 1px solid #F4F5F9;
          border-radius: 16rpx;

          .tag-first {
            display: flex;
            flex-direction: column;
            background: linear-gradient(90deg, #FFEBDC 0%, rgba(255, 235, 220, 0) 100%);
            width: 100rpx;
            height: 140rpx;
            justify-content: center;
            align-items: center;
            writing-mode: vertical-lr;
          }

          .tag-secondry {
            display: flex;
            flex-direction: column;
            background: linear-gradient(90deg, #FFC8CC 0%, rgba(255, 200, 204, 0) 100%);
            width: 100rpx;
            height: 140rpx;
            writing-mode: vertical-lr;
            justify-content: center;
            align-items: center;
          }

          .content {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            width: 100%;

            .content-item {
              display: flex;
              flex-direction: column;

              .title {
                color: #666666;
                font-size: 28rpx;
                font-family: 'PingFang SC';
              }

              .number {
                font-size: 36rpx;
                font-family: 'PingFang SC';
              }
            }
          }
        }
      }

    }
    .customer-target{
      background-color: #fff;
      border-radius: 16rpx;
      padding: 32rpx;
      .title{
        font-size: 32rpx;
        font-family: 'PingFang SC';
        color: #000;
      }
    }
  }
}
</style>
