<template>
  <div class="main_root">
    <div class="strategy_title">{{ appStrategyInfo.name }}</div>
    <div class="strategy_list_title">应用策略列表</div>
    <div
      class="strategy_item"
      v-for="(groupItem, groupIndex) in appStrategyInfo.groups"
      :key="groupIndex"
    >
      <table class="my_table">
        <tr>
          <th colspan="7">
            <div class="table_header">
              <div class="table_header_title">应用策略{{ groupIndex + 1 }}</div>
              <div class="table_header_action"></div>
            </div>
          </th>
        </tr>
        <tr>
          <td v-for="weekItem in weekDay" :key="weekItem.value">
            {{ weekItem.label }}
          </td>
        </tr>
        <tr>
          <td v-for="weekItem in weekDay" :key="weekItem.value">
            <div class="time_list">
              <span
                v-for="(timeItem, timeIndex) in appStrategyGroupInfo[
                  groupIndex
                ] && appStrategyGroupInfo[groupIndex][weekItem.value]"
                :key="timeIndex"
                >{{ timeItem.starttime }} - {{ timeItem.stoptime }}</span
              >
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="7">
            <div class="table_app_list">
              <div
                class="table_app_item"
                v-for="appItem in groupItem.apps"
                :key="appItem.appid"
              >
                <div class="app_top">
                  <img :src="$api.showImageUrl + appItem.appIcon" />
                </div>
                <div class="app_name">
                  {{ appItem.appName }}
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="bottom_btns">
      <Button @click="toGoBack()">返回</Button>
    </div>
  </div>
</template>

<script>
import { weekDay } from "@/utils";
import { stApp_detail } from "@/api/stPad";
export default {
  data() {
    return {
      weekDay,
      // 应用策略信息
      appStrategyInfo: {
        stappid: null,
        rversion: null,
        name: "",
        groups: []
      }
    };
  },
  created() {
    this.getAppStrategyDetail();
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    },
    appStrategyGroupInfo() {
      let info = [];
      this.appStrategyInfo.groups.forEach((groupItem) => {
        let groupTimes = {};
        groupItem.times.forEach((timeItem) => {
          if (!groupTimes[timeItem.week]) {
            groupTimes[timeItem.week] = [];
          }
          groupTimes[timeItem.week].push(timeItem);
        });
        info.push(groupTimes);
      });
      return info;
    }
  },
  methods: {
    getAppStrategyDetail() {
      stApp_detail({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        stappid: this.$route.query.stappid
      }).then((data) => {
        if (data.code === 0) {
          this.appStrategyInfo.name = data.obj.name;
          this.appStrategyInfo.groups = data.obj.groups;
          this.appStrategyInfo.stappid = data.obj.stappid;
          this.appStrategyInfo.rversion = data.obj.rversion;
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    toGoBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.strategy_title {
  margin: 16px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strategy_list_title {
  margin: 16px;
  font-size: 16px;
  font-weight: bold;
}
.strategy_item {
  margin: 16px;
  .my_table {
    width: 100%;
    empty-cells: show;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #dcdee2;
    border-spacing: 0;
    box-sizing: border-box;
    font-size: 12px;
    th {
      padding: 0;
      line-height: 30px;
      font-weight: normal;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      background-color: #fff;
      border: 1px solid #ced9f2;
    }
    td {
      position: relative;
      padding: 0;
      line-height: 30px;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      border: 1px solid #ced9f2;
    }
  }
  .table_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background-color: #edf3ff;
    .table_header_title {
      font-size: 12px;
      font-weight: bold;
    }
    .table_header_action {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > div {
        margin-left: 4px;
        padding: 0 4px;
        cursor: pointer;
        &:hover {
          color: #339dff;
          &.del {
            color: #f0153f;
          }
        }
      }
    }
  }
  .time_list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 30px;
    > span {
      margin: 4px 6px;
      line-height: 1;
      white-space: nowrap;
    }
  }
  .table_app_list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .table_app_item {
      margin: 10px;
      .app_top {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width: 56px;
        height: 56px;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
        background: #ffffff;
        img {
          width: 38px;
          height: 38px;
        }
      }
      .app_name {
        margin-top: 10px;
        max-width: 100px;
        line-height: 1;
        font-size: 12px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.bottom_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px;
}
</style>
