<template>
  <v-card theme="dark">
    <v-container style="max-width: 1400px" grid-list-xs>
      <v-row>
        <v-col cols="12" md="4">
          <h1 class="text-h5 my-5 d-flex align-center text-title">
            <Icon icon="logos:webix-icon" class="mr-3 my-2" />News
          </h1>
          <v-card
            elevation="0"
            class="my-5 pa-3"
            v-for="card in newsCards"
            :key="card.id"
            color="secondary"
          >
            <v-card-text class="text-content">
              <v-row align="center" no-gutters>
                <v-col cols="2" class="text-left">
                  <Icon :icon="card.icon" class="text-h4" />
                </v-col>
                <v-col class="text-left" cols="10">
                  {{ card.content }}
                </v-col>
              </v-row>
              <v-row align="center" no-gutters>
                <v-col cols="3" class="text-left">
                  <span>12:24</span>
                </v-col>
                <v-col class="text-h5 text-right" cols="9">
                  <v-btn variant="text" color="accent">Read➧</v-btn>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-col>
        <v-col cols="12" md="8" class="text-left">
          <h1 class="text-h5 my-5 d-flex align-center text-title">
            <Icon icon="logos:archlinux" class="mr-3 my-2" />TimeLine
          </h1>
          <!-- Info Card1 -->
          <v-card elevation="0" color="secondary" class="info-card gradient">
            <v-card-text class="d-flex align-center text-content">
              <Icon class="mr-5 text-h4" icon="logos:browserslist" />
              <span>Write something...</span>
              <v-spacer></v-spacer>
              <v-btn variant="text" icon="mdi-account-search" @click="toggleTheme"></v-btn>
              <v-btn variant="text" icon="mdi-pin"></v-btn>
            </v-card-text>
            <v-card-actions class="r py-5 text-title">
              <div></div>
              <v-select
                variant="outlined"
                placeholder="who can see"
                density="compact"
                hide-details
                class="mr-2"
                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
              ></v-select>
              <v-select
                variant="outlined"
                placeholder="channel"
                density="compact"
                hide-details
                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
              ></v-select>

              <v-spacer></v-spacer>
              <v-btn variant="tonal" icon="mdi-heart" color="accent"></v-btn>
            </v-card-actions>
          </v-card>

          <!-- Info Card 2 -->
          <v-card color="secondary" class="info-card">
            <div class="card-top r text-content">
              <Icon class="mr-5 text-h4" icon="logos:capacitorjs-icon" />
              <div class="flex-fill">
                Who has the advantage now? Who do you think will win the election?
              </div>
              <span>9:31 am</span>
            </div>
            <v-card-text class="text-content">
              <div>
                <v-radio-group color="accent" v-model="favoriteRadios">
                  <template #label>
                    <div>Your favorite <strong>search engine</strong></div>
                  </template>
                  <v-radio value="Google">
                    <template #label>
                      <v-row align="center">
                        <v-col cols="6" sm="5" md="3">
                          <span> Of course it's</span>
                          <strong class="ml-1 text-info">Google</strong></v-col
                        >
                        <v-col cols="4" sm="5" md="7">
                          <v-progress-linear
                            model-value="79"
                            color="#E89888"
                            rounded
                          ></v-progress-linear
                        ></v-col>
                        <v-col cols="2">79%</v-col>
                      </v-row>
                    </template>
                  </v-radio>
                  <v-radio value="Duckduckgo">
                    <template #label>
                      <v-row align="center">
                        <v-col cols="6" sm="5" md="3">
                          <span> Of course it's</span>
                          <strong class="ml-1 text-info">Meta</strong></v-col
                        >
                        <v-col cols="4" sm="5" md="7">
                          <v-progress-linear
                            model-value="21"
                            color="#B931F0"
                            rounded
                          ></v-progress-linear
                        ></v-col>
                        <v-col cols="2">70%</v-col>
                      </v-row>
                      <div></div>
                    </template>
                  </v-radio>
                </v-radio-group>
                <div class="d-flex justify-space-between align-center">
                  <span>9850 votes.Final result</span>
                  <v-btn variant="outlined" color="accent">Vote</v-btn>
                </div>
              </div>
            </v-card-text>
            <v-card-actions class="r text-content">
              <v-btn prepend-icon="mdi-heart"> Like(2.7k)</v-btn>
              <v-btn prepend-icon="mdi-comment">CommentLike(35)</v-btn>
              <v-btn prepend-icon="mdi-share">ShareLike(99)</v-btn>
            </v-card-actions>
          </v-card>
          <!-- Info Card3 -->
          <v-card color="secondary" class="info-card">
            <div class="card-top r text-content">
              <Icon class="text-h4" icon="logos:engine-yard-icon" />
              <div class="flex-fill mx-4">
                <p>
                  <span class="text-accent">Elon Mask</span> shared a
                  <span class="text-accent">link</span>
                </p>
                <p>Who has the advantage now? Who do you think will win the election?</p>
              </div>

              <span>9:31 am</span>
            </div>
            <v-card-text class="">
              <v-card>
                <v-img
                  class="align-end text-white"
                  height="200"
                  src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
                  cover
                >
                  <v-card-title>Top 10 Australian beaches</v-card-title>
                </v-img>
                <v-card-subtitle class="pt-4"> Number 10 </v-card-subtitle>

                <v-card-text>
                  <div>Whitehaven Beach</div>

                  <div>Whitsunday Island, Whitsunday Islands</div>
                </v-card-text>
              </v-card>

              <v-card class="d-flex mt-5">
                <v-img
                  max-width="200"
                  aspect-ratio="1"
                  cover
                  src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
                >
                </v-img>

                <div class="pa-2 flex-fill">
                  <v-card-subtitle class="pt-4"> Number 10 </v-card-subtitle>
                  <v-card-text>
                    <div>Whitehaven BeachAA</div>
                    <div>Whitsunday Island, Whitsunday Islands</div>
                  </v-card-text>
                  <v-card-actions>
                    <span>Nov.1.2016</span>
                    <v-spacer></v-spacer>
                    <span class="text-accent">BBC.COM</span>
                  </v-card-actions>
                </div>
              </v-card>
            </v-card-text>
            <v-card-actions class="r text-content">
              <v-btn color="#D84B82" prepend-icon="mdi-heart"> Like(2.7k)</v-btn>
              <v-btn prepend-icon="mdi-comment">CommentLike(35)</v-btn>
              <v-btn prepend-icon="mdi-share">ShareLike(99)</v-btn>
            </v-card-actions>
          </v-card>
          <!-- Info Card4 -->
          <v-card
            color="secondary"
            class="info-card d-flex justify-space-between align-center pa-5 text-content"
          >
            <v-avatar size="50" color="red">
              <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
            </v-avatar>
            <span class="text-h4 mx-5">67903</span>
            <div class="flex-fill text-content">people viewed your profile in the past 90 days</div>
            <v-img
              class="d-none d-md-block"
              max-width="50"
              src="https://cdn.vuetifyjs.com/images/cards/foster.jpg"
            ></v-img>
          </v-card>
          <!-- Card5 -->
          <v-card
            class="gradient success info-card d-flex justify-space-between align-center pa-5 text-content"
            color=""
          >
            <v-table>
              <thead>
                <tr>
                  <th class="text-left">Name</th>
                  <th class="text-left">Calories</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in desserts" :key="item.name">
                  <td>{{ item.name }}</td>
                  <td>{{ item.calories }}</td>
                </tr>
              </tbody>
            </v-table>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { useTheme } from 'vuetify';

const theme = useTheme();

const toggleTheme = () => {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
};
const newsCards = [
  {
    id: 1,
    title: 'Alfresco',
    icon: 'logos:alfresco',
    content: 'Secure Content Management Solutions for a Distributed Workforce',
  },
  {
    id: 2,
    title: 'Zulip',
    icon: 'logos:zulip-icon',
    content: 'Chat for distributed teams.',
  },
  {
    id: 3,
    title: 'Authy',
    icon: 'logos:authy',
    content: 'Enable 2FA for your favorite sites',
  },
  {
    id: 4,
    title: 'Appveyor',
    icon: 'logos:appveyor',
    content: 'Build, test, deploy your apps faster, on any platform.',
  },
  {
    id: 5,
    title: 'Ant-design',
    icon: 'logos:ant-design',
    content:
      'Help designers/developers building beautiful ' +
      'products more flexible and working with happiness',
  },
];

const favoriteRadios = ref('Duckduckgo');

const desserts = [
  {
    name: 'Frozen Yogurt',
    calories: 159,
  },
  {
    name: 'Ice cream sandwich',
    calories: 237,
  },
  {
    name: 'Eclair',
    calories: 262,
  },
  {
    name: 'Cupcake',
    calories: 305,
  },
  {
    name: 'Gingerbread',
    calories: 356,
  },
  {
    name: 'Jelly bean',
    calories: 375,
  },
  {
    name: 'Lollipop',
    calories: 392,
  },
  {
    name: 'Honeycomb',
    calories: 408,
  },
  {
    name: 'Donut',
    calories: 452,
  },
  {
    name: 'KitKat',
    calories: 518,
  },
];
</script>

<style lang="scss" scoped>
.bg {
  text-align: left;
  height: 100vh;
  // 更新
  // background-image: linear-gradient(135deg, #1c1e30, #2f3050);
}

.info-card {
  margin-bottom: 2rem;

  .v-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    font-size: 1rem;
  }

  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    font-size: 1rem;
  }

  .v-card-text {
    padding: 2rem;
  }

  .v-card-actions {
    display: flex;
    align-items: center;
    padding: 1.5rem 1rem;
    font-size: 1rem;
  }
}
</style>
