<template>
  <el-main class="channel-wrap">
    <div class="sa-flex sa-flex-wrap">
      <div v-for="i in list" :key="i" class="sa-m-r-16">
        <div class="h5 sa-flex-col sa-row-center sa-col-center sa-m-t-24" :class="i.value">
          <div class="bg"><img :src="i.bg" /></div>
          <div class="h5-img sa-flex sa-m-b-8">
            <img :src="i.icon" />
          </div>
          <div class="h5-title title">{{ i.label }}</div>
          <div
            class="sa-m-t-12 sa-m-b-20"
            :class="table.data[i.value] == 1 ? 'sa-color--success' : ''"
          >
            {{ table.data[i.value] == 1 ? '已开启' : '已关闭' }}
          </div>
          <el-button type="primary" @click.stop="editRow(i)">立即配置</el-button>
        </div>
      </div>
    </div>
  </el-main>
</template>
<script setup>
  import { onMounted, reactive, ref, unref } from 'vue';
  import { useModal } from '@/sheep/hooks';
  import { api } from '../../config.service';
  import ConfigEdit from './edit.vue';
  const list = [
    {
      value: 'H5',
      label: 'H5',
      icon: './static/images/shop/config/H5.png',
      bg: './static/images/shop/config/H5BG.png',
    },
    {
      value: 'App',
      label: 'App',
      icon: './static/images/shop/config/app.png',
      bg: './static/images/shop/config/appBG.png',
    },
  ];
  const table = reactive({
    data: [],
    order: '',
    sort: '',
  });
  const loading = ref(true);
  async function getPlatform() {
    loading.value = true;
    const { data } = await api.platformStatus();
    table.data = data;
    loading.value = false;
  }
  function editRow(e) {
    useModal(
      ConfigEdit,
      {
        title: '平台-' + e.label,
        type: 'edit',
        platform: e.value,
        subtitle: e.label,
      },
      {
        confirm: () => {
          getPlatform();
        },
      },
    );
  }
  onMounted(() => {
    getPlatform();
  });
</script>
<style lang="scss" scoped>
  .channel-wrap {
    color: var(--sa-subfont);
    .h5 {
      width: 180px;
      height: 240px;
      box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px 2px rgba(0, 0, 0, 0.02);
      border-radius: 8px;
      font-size: 14px;
      line-height: 16px;
      background: var(--sa-background-assist);
      position: relative;
      .bg {
        position: absolute;
        right: 0;
        top: 0;
        width: 128px;
        height: 128px;
      }
      .h5-img {
        width: 64px;
        height: 64px;
      }
      .h5-title {
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        color: #fc800e;
      }
    }
    .WechatOfficialAccount {
      .title {
        color: #07c160;
      }
    }
    .WechatMiniProgram {
      .title {
        color: #6f74e9;
      }
    }
    .App {
      .title {
        color: #806af6;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
</style>
