<template>
  <div class="main_root">
    <div class="main_left">
      <div class="main_left_title">按班级</div>
      <div class="class_list">
        <div
          :class="['class_item', !searchForm.classid ? 'selceted' : '']"
          @click="classChange(null, schoolInfo.hasst)"
          :title="schoolInfo.schoolname"
        >
          全部班级
          <Icon
            v-if="schoolInfo.hasst === 1"
            class="ivu-icon iconfont icon-ding-mianxing st_icon"
          ></Icon>
        </div>
        <div
          :class="[
            'class_item',
            searchForm.classid === classItem.id ? 'selceted' : ''
          ]"
          v-for="classItem in schoolInfo.classList"
          :key="classItem.id"
          @click="classChange(classItem.id, classItem.hasst)"
          :title="classItem.name"
        >
          {{ classItem.name }}
          <Icon
            v-if="classItem.hasst === 1"
            class="ivu-icon iconfont icon-ding-mianxing st_icon"
          ></Icon>
        </div>
      </div>
    </div>
    <div class="main_right">
      <div class="right_header">
        <div class="header_left">
          <span v-if="appStrategyInfo.stappid">{{ appStrategyInfo.name }}</span>
        </div>
        <div class="header_right">
          <div
            v-if="searchForm.hasst"
            @click="toEditAppStrategy(appStrategyInfo.stappid)"
          >
            修改
          </div>
          <div
            style="font-size: 13px"
            v-if="searchForm.hasst"
            @click="toResetAppStrategy()"
          >
            重置
          </div>
          <div @click="toSelectAppStrategy()">引用</div>
        </div>
      </div>
      <template v-if="appStrategyInfo.groups.length > 0">
        <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.alias }}
              </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>
      </template>
      <div v-else class="no_data">
        <div>
          <img src="@/assets/img/nodata.png" />
          <div>暂无数据</div>
        </div>
      </div>
    </div>
    <Modal
      class="modal1"
      :mask-closable="false"
      v-model="useAppStrategyInfo.show"
      title="引用"
    >
      <div class="table_wrap" v-if="useAppStrategyInfo.show">
        <Table
          :columns="useColumns"
          :data="useAppStrategyInfo.list"
          @on-row-click="useAppStrategyRowSelected"
        >
          <template slot-scope="{ row, index }" slot="actionSlot">
            <Radio
              :value="row.selected"
              @on-change="useAppStrategyChange(index)"
            ></Radio>
          </template>
        </Table>
      </div>
      <div slot="footer">
        <Button @click="useAppStrategyInfo.show = false">取消</Button>
        <Button
          @click="saveUseAppStrategyInfo()"
          type="primary"
          class="primary_btn"
          >保存</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import { weekDay } from "@/utils";
import {
  stApp_detail_obj,
  stApp_list_sel,
  stApp_delete,
  class_list_strategy
} from "@/api/stPad";
export default {
  data() {
    return {
      weekDay,
      schoolInfo: {
        hasst: 0,
        schoolname: null,
        classList: null
      },
      searchForm: {
        classid: null,
        // 是否有策略0无1有
        hasst: 0
      },
      // 引用信息
      useAppStrategyInfo: {
        show: false,
        stappid: null,
        list: []
      },
      useColumns: [
        {
          title: "操作",
          slot: "actionSlot",
          width: 70,
          align: "center"
        },
        {
          title: "策略名称",
          key: "name",
          align: "center"
        },
        {
          title: "更新时间",
          key: "updatetime",
          width: 190,
          align: "center"
        }
      ],
      appStrategyInfo: {
        stappid: null,
        rversion: null,
        name: "",
        groups: []
      }
    };
  },
  created() {
    let search = this.$route.query.search;
    if (search) {
      search = JSON.parse(search);
      this.searchForm.classid = search.classid;
    }
    this.getClassList();
    this.getClassAppStrategyDetail();
  },
  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: {
    toEditAppStrategy(stappid) {
      this.$router.push({
        path: "/school/appStrategyManageEdit",
        query: {
          stappid,
          classid: this.searchForm.classid
        }
      });
    },
    useAppStrategyRowSelected(row, index) {
      this.useAppStrategyChange(index);
    },
    useAppStrategyChange(index) {
      this.useAppStrategyInfo.list.forEach((item) => {
        item.selected = false;
      });
      this.useAppStrategyInfo.list[index].selected = true;
    },
    saveUseAppStrategyInfo() {
      this.useAppStrategyInfo.list.forEach((item) => {
        if (item.selected) {
          this.useAppStrategyInfo.stappid = item.stappid;
        }
      });
      if (!this.useAppStrategyInfo.stappid) {
        this.$Message.error("请选择应用策略");
        return;
      }
      this.useAppStrategyInfo.show = false;
      this.toEditAppStrategy(this.useAppStrategyInfo.stappid);
    },
    toResetAppStrategy() {
      this.$Modal.confirm({
        title: "提示",
        content: "确认之后会将当前应用策略恢复成默认状态，是否重置？",
        onOk: () => {
          stApp_delete({
            stappid: this.appStrategyInfo.stappid,
            rversion: this.appStrategyInfo.rversion
          }).then((data) => {
            if (data.code === 0) {
              this.$Message.success(data.msg);
              this.getClassList();
              this.getClassAppStrategyDetail();
            } else {
              this.$Message.error(data.msg);
            }
          });
        },
        onCancel: () => {}
      });
    },
    toSelectAppStrategy() {
      this.useAppStrategyInfo.show = true;
      this.useAppStrategyInfo.stappid = null;
      this.useAppStrategyInfo.list = [];
      stApp_list_sel({
        schoolid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.useAppStrategyInfo.list = data.obj.map((item) => {
            item.selected = false;
            return item;
          });
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    classChange(classid, hasst) {
      this.searchForm.classid = classid;
      this.searchForm.hasst = hasst;
      this.getClassAppStrategyDetail();
    },
    // 获取班级列表
    getClassList() {
      class_list_strategy({
        // rtype: this.powerParams.rtype,
        // objectid: this.powerParams.objectid,
        schoolid: this.powerParams.objectid,
        st: "app"
      }).then((data) => {
        if (data.code === 0) {
          this.schoolInfo = {
            hasst: data.obj.hasst,
            schoolname: data.obj.name,
            classList: data.obj.children
          };
          this.searchForm.hasst = 0;
          if (this.searchForm.classid) {
            this.schoolInfo.classList.forEach((classItem) => {
              if (classItem.id === this.searchForm.classid) {
                this.searchForm.hasst = classItem.hasst;
              }
            });
          } else {
            this.searchForm.hasst = this.schoolInfo.hasst;
          }
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    keepAlive() {
      this.$router.replace({
        path: this.$route.path,
        query: {
          search: JSON.stringify({
            classid: this.searchForm.classid
          })
        }
      });
    },
    getClassAppStrategyDetail() {
      this.keepAlive();
      this.appStrategyInfo = {
        stappid: null,
        rversion: null,
        name: "",
        groups: []
      };
      stApp_detail_obj({
        objectid: this.searchForm.classid || this.powerParams.objectid,
        // 0公共策略 1学校 2班级
        sttype: this.searchForm.classid ? 2 : 1
      }).then((data) => {
        if (data.code === 0) {
          if (data.obj) {
            this.appStrategyInfo = data.obj;
          }
        } else {
          this.$Message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.main_root {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(100% - 10px);
  border-radius: 0;
  border: none;
  background-color: transparent;
  .main_left {
    margin-right: 10px;
    width: 200px;
    height: 100%;
    border-radius: 15px;
    border: 1px solid #e9f0f9;
    background-color: #fff;
    overflow: auto;
    .main_left_title {
      margin: 0 10px 10px;
      padding: 20px 0 14px;
      line-height: 20px;
      font-size: 16px;
      text-align: center;
      color: #798cb5;
      border-bottom: 1px solid #e9f0f9;
    }
    .class_list {
      max-height: calc(100% - 67px);
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      overflow: auto;
      .class_item {
        position: relative;
        margin: 0 10px;
        padding: 0 20px;
        border-radius: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        &:hover,
        &.selceted {
          font-weight: bold;
          color: #339dff;
          background-color: #dbeeff;
        }
        .st_icon {
          position: absolute;
          right: 4px;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 16px;
          height: 16px;
          color: #339dff;
        }
      }
    }
  }
  .main_right {
    width: calc(100% - 210px);
    height: 100%;
    border-radius: 15px;
    border: 1px solid #e9f0f9;
    background-color: #fff;
    overflow: auto;
    .right_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 16px;
      font-size: 16px;
      .header_left {
        font-weight: bold;
      }
      .header_right {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        > div {
          margin-left: 16px;
          cursor: pointer;
          &:hover {
            color: #339dff;
          }
        }
      }
    }
  }
}
.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;
    min-height: 30px;
    .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;
      }
    }
  }
}
.no_data {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 50px);
  font-size: 20px;
  color: #798cb5;
  text-align: center;
  img {
    margin-bottom: 25px;
    width: 300px;
    height: 180px;
  }
}
</style>
