<template>
  <div class="main_root">
    <div class="search_header">
      <Input
        v-model="searchForm.name"
        placeholder="请输入名称、包名"
        style="width: 200px"
      />
      <Input
        v-model="searchForm.title"
        placeholder="请输入版本号"
        style="width: 150px; margin: 0 10px"
      />
      <Button type="primary" class="primary_btn" @click="searchList()">
        <Icon type="ios-search" :size="18" />
      </Button>
    </div>
    <div class="table_wrap">
      <Table :columns="columns" :data="searchForm.list">
        <template slot-scope="{ row }" slot="appName">
          <div class="appName">
            <div class="app_logo">
              <img :src="$api.showImageUrl + row.appIcon" />
            </div>
            <div class="app_comm">
              <div :title="row.appName">
                <div @click="toView(row)" class="apptitle">
                  {{ row.appName }}
                </div>
                <div v-if="row.belong === 1" class="app_tag">公共</div>
                <div v-else-if="row.belong === 2" class="web_tag">私有</div>
              </div>
              <span>版本: {{ row.versionName }}</span>
              <div @click="see_device(row)" style="cursor: pointer">
                授权型号: {{ row.devicenum }}个
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="appType">
          <div>{{ row.appType === 1 ? "推荐应用" : "必装应用" }}</div>
        </template>
        <template slot-scope="{ row }" slot="enabled">
          <div>
            {{ row.enabled === 1 ? "启用" : "禁用" }}
          </div>
        </template>
        <template slot-scope="{ row }" slot="whited">
          <div class="action_list">
            <div v-if="row.whited === 1" class="action_success">是</div>
            <div v-else class="action_error">否</div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="showico">
          <div class="action_list">
            <div v-if="row.showico === 1" class="action_success">是</div>
            <div v-else class="action_error">否</div>
          </div>
        </template>

        <template slot-scope="{ row }" slot="countSlot">
          <div class="action_list">
            <div @click="countSlot(row, 1)">下载</div>
            <div @click="countSlot(row, 2)">安装统计</div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="actionSlot">
          <div class="action_list">
            <div @click="toView(row)">查看</div>
          </div>
        </template>
      </Table>
    </div>
    <div class="page_wrap">
      <Page
        :transfer="true"
        :total="searchForm.total"
        :current="searchForm.page"
        :page-size="searchForm.size"
        :page-size-opts="[10, 20, 40, 60]"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        show-total
        show-sizer
      ></Page>
    </div>
    <!-- 安装统计 -->
    <Modal
      class="modal1"
      :mask-closable="false"
      v-model="installInfo.show"
      title="安装统计"
    >
      <div v-if="installInfo.show">
        <div class="install_title">
          {{ installInfo.appName }}
          <div class="history">
            <div>版本号码</div>
            <Select
              :transfer="true"
              v-model="installInfo.versionName"
              @on-change="installChange()"
              style="width: 120px; margin-left: 10px"
            >
              <Option
                v-for="item in installInfo.apphistorys"
                :value="item.versionName"
                :key="item.versionName"
                >{{ item.versionName }}</Option
              >
            </Select>
          </div>
        </div>
        <div class="table_wrap" style="margin: 0">
          <Table
            :columns="installInfo.columns"
            :data="installInfo.list"
          ></Table>
        </div>
      </div>
      <div slot="footer" style="text-align: center">
        <Button @click="installInfo.show = false">关闭</Button>
      </div>
    </Modal>
    <!-- 授权型号 -->
    <Modal
      class="modal1 view"
      :mask-closable="false"
      v-model="deviceInfo.show"
      title="授权型号"
    >
      <div class="view_content" v-if="deviceInfo.show">
        <div class="view_title">名称</div>
        <div class="view_devices" style="line-height: 32px">
          {{ deviceInfo.appName }}
        </div>
      </div>
      <div class="view_content" style="margin-top: 20px">
        <div class="view_title">授权型号</div>
        <div class="view_devices">
          <div
            class="view_list"
            v-for="item in deviceInfo.devices"
            :key="item.dgroupid"
          >
            <div class="dgname">{{ item.dgname }}</div>
            <div class="devices">
              <span v-for="sitem in item.devices" :key="sitem.deviceid">{{
                sitem.deviceModel
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: center">
        <Button @click="deviceInfo.show = false">关闭</Button>
      </div>
    </Modal>
    <!-- 下载 -->
    <Modal
      class="modal_tip download"
      :mask-closable="false"
      v-model="downloadInfo.show"
      title="下载"
    >
      <div class="content" v-if="downloadInfo.show">
        <div class="title">{{ downloadInfo.appName }}</div>
        <div class="qrcode">
          <div id="ScanShare" ref="ScanShare"></div>
          <p>扫描二维码进行下载</p>
        </div>
        <div class="download" @click="download(downloadInfo.apkPath)">
          <Icon type="md-download" />点击下载
        </div>
      </div>

      <div slot="footer" style="text-align: center">
        <Button @click="downloadInfo.show = false">关闭</Button>
      </div>
    </Modal>
    <!-- 查看 -->
    <Modal
      class="modal1"
      :mask-closable="false"
      v-model="viewInfo.show"
      title="查看"
    >
      <div class="view_conten" v-if="viewInfo.show">
        <div class="view_logo">
          <div>
            <img
              v-if="viewInfo.appIcon"
              :src="$api.showImageUrl + viewInfo.appIcon"
            />
          </div>
          <div class="appIcon" @click="download(viewInfo.appIcon)">
            <Icon type="md-download" />下载
          </div>
        </div>
        <div class="view_conter">
          <div class="view_comm">
            <div class="view_titles">
              {{ viewInfo.appName
              }}<span v-if="viewInfo.enabled === 1" class="qy">启用</span>
            </div>
            <div class="view_item">
              <span>版本号码</span>
              <Select
                :transfer="true"
                v-model="viewInfo.versionName"
                @on-change="viewInfoChange()"
                style="width: 120px"
              >
                <Option
                  v-for="item in viewInfo.apphistorys"
                  :value="item.versionName"
                  :key="item.versionName"
                  >{{ item.versionName }}</Option
                >
              </Select>
            </div>
          </div>
          <div class="view_comm">
            <div class="view_item">
              <span>版本名称</span>{{ viewInfo.versionName }}
            </div>
            <div class="view_item">
              <span>分组</span>{{ viewInfo.appgroupName }}
            </div>
            <div class="view_item">
              <span>开发者</span>{{ viewInfo.appDeveloper }}
            </div>
          </div>
          <div class="view_comm">
            <div class="view_item">
              <span>强制安装</span>{{ viewInfo.forced === 0 ? "否" : "是" }}
            </div>
            <div class="view_item">
              <span>应用属性</span
              >{{ viewInfo.appType === 1 ? "推荐应用" : "必装应用" }}
            </div>
            <div class="view_item">
              <span>应用大小</span>{{ viewInfo.appSize }}
            </div>
          </div>
          <div class="view_comm">
            <div class="view_item">
              <span style="width: 120px">网址白名单例外</span
              >{{ viewInfo.whited === 0 ? "否" : "是" }}
            </div>
            <div class="view_item">
              <span style="width: 120px">允许清空缓存</span
              >{{ viewInfo.cached === 0 ? "否" : "是" }}
            </div>
            <div class="view_item">
              <span style="width: 120px">添加到已有策略</span
              >{{ viewInfo.strategy === 0 ? "否" : "是" }}
            </div>
          </div>
          <div class="view_comm">
            <div class="view_item" style="width: 100%">
              <span>应用包名</span>{{ viewInfo.appPackage }}
            </div>
            <div class="view_item"></div>
          </div>
          <div class="view_com">
            <div class="view_t">应用截图</div>
            <div class="view_img">
              <img
                v-for="img in viewInfo.appImg"
                :key="img"
                :src="$api.showImageUrl + img"
              />
            </div>
          </div>
          <div class="view_com">
            <div class="view_t">应用简介</div>
            <div>{{ viewInfo.appAbbr || "无" }}</div>
          </div>
          <div class="view_com">
            <div class="view_t">更新内容</div>
            <div>{{ viewInfo.appRenew || "无" }}</div>
          </div>
          <div class="view_com">
            <div class="view_t">授权型号</div>
            <div class="view_devices">
              <div
                class="view_list"
                v-for="item in viewInfo.devices"
                :key="item.dgroupid"
              >
                <div class="dgname" style="line-height: 40px">
                  {{ item.dgname }}
                </div>
                <div class="devices">
                  <span v-for="sitem in item.devices" :key="sitem.deviceid">{{
                    sitem.deviceModel
                  }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="view_com">
            <div class="view_t">选择学校</div>
            <div class="view_devices">
              <div class="devices">
                <span v-for="item in viewInfo.schools" :key="item.schoolid">{{
                  item.schoolName
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" style="text-align: center">
        <Button @click="viewInfo.show = false">关闭</Button>
      </div>
    </Modal>
    <Spin fix v-if="showLoading" style="background-color: transparent">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>加载中</div>
    </Spin>
  </div>
</template>

<script>
import { search_list_app } from "@/api/region";
import {
  app_detail,
  app_detail_history,
  app_install_statistic
} from "@/api/appgroup";
import QRCode from "qrcodejs2";
import { getResourceSize } from "@/utils";
export default {
  data() {
    return {
      showLoading: false,
      downloadInfo: {
        show: false,
        appName: "",
        apkPath: ""
      },
      deviceInfo: {
        show: false,
        appName: "",
        devices: []
      },
      // 查看
      viewInfo: {
        show: false,
        appName: "",
        appgroupName: "",
        enabled: 1,
        appType: 1,
        forced: 1,
        whited: 1,
        showico: 1,
        cached: 1,
        strategy: 1,
        apkPath: "",
        appIcon: "",
        appImg: [],
        versionName: "",
        versionNum: "",
        appSize: "",
        appDeveloper: "",
        appPackage: "",
        appAbbr: "",
        appRenew: "",
        targetSchool: 2,
        deviceids: [],
        schoolids: []
      },
      installInfo: {
        show: false,
        appName: "",
        versionName: null,
        apphistorys: [],
        list: [],
        columns: [
          {
            title: "序号",
            type: "index",
            width: 70,
            align: "center"
          },
          {
            title: "区域名称",
            key: "regionName",
            align: "center"
          },
          {
            title: "设备总数",
            key: "total",
            align: "center"
          },
          {
            title: "已安装设备数",
            key: "installNum",
            align: "center"
          },
          {
            title: "未安装设备总数",
            key: "unInstallNum",
            align: "center"
          },
          {
            title: "安装比例",
            key: "installRate",
            align: "center"
          }
        ]
      },
      searchForm: {
        name: "",
        title: "",
        page: 1,
        size: 10,
        list: [],
        total: 0
      },
      columns: [
        {
          title: "序号",
          align: "center",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.searchForm.page - 1) * this.searchForm.size +
                1
            );
          }
        },
        {
          title: "应用",
          slot: "appName",
          align: "center",
          minWidth: 250
        },
        {
          title: "分组",
          key: "appgroupName",
          align: "center",
          minWidth: 80
        },
        {
          title: "属性应用",
          slot: "appType",
          align: "center",
          minWidth: 80
        },
        {
          title: "状态",
          slot: "enabled",
          align: "center",
          minWidth: 50
        },
        {
          title: "网址白名单例外",
          slot: "whited",
          minWidth: 80,
          align: "center"
        },
        {
          title: "创建人",
          key: "createname",
          align: "center",
          minWidth: 100
        },
        {
          title: "操作人",
          key: "updatename",
          align: "center",
          minWidth: 100
        },
        {
          title: "操作时间",
          key: "updatetime",
          width: 150,
          align: "center"
        },
        {
          title: "统计",
          slot: "countSlot",
          width: 120,
          align: "center"
        },
        {
          title: "操作",
          slot: "actionSlot",
          width: 70,
          align: "center"
        }
      ]
    };
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  created() {
    this.searchList();
  },
  methods: {
    //下载logo
    download(url) {
      window.location.href = this.$api.showImageUrl + url;
    },
    //查看型号
    see_device(row) {
      this.showLoading = true;
      app_detail({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        appid: row.appid
      }).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          this.deviceInfo = {
            show: true,
            appName: res.obj.appName,
            devices: res.obj.devices
          };
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    installChange() {
      //安装统计切换版本
      let obj = this.installInfo.apphistorys.filter(
        (v) => v.versionName === this.installInfo.versionName
      )[0];
      this.showLoading = true;
      app_install_statistic({
        appPackage: obj.appPackage,
        versionName: obj.versionName,
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          this.installInfo.list = res.obj;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    async countSlot(row, type) {
      if (type === 1) {
        //下载
        this.downloadInfo = {
          show: true,
          appName: row.appName,
          apkPath: row.apkPath
        };
        this.$nextTick(() => {
          let qrcodeEl = this.$refs.ScanShare;
          if (!qrcodeEl) {
            return;
          }
          qrcodeEl.innerHTML = "";
          let qrcode = new QRCode(qrcodeEl, {
            width: 140,
            height: 140,
            text: this.$api.showImageUrl + this.downloadInfo.apkPath
          });
          qrcode._el.title = "";
        });
      } else if (type === 2) {
        //获取历史版本
        this.showLoading = true;
        let res = await app_detail_history({ appid: row.appid });
        if (res.code != 0) {
          this.$Message.error(res.msg);
        }
        //安装统计
        let res1 = await app_install_statistic({
          appPackage: row.appPackage,
          versionName: row.versionName,
          rtype: this.powerParams.rtype,
          objectid: this.powerParams.objectid
        });
        this.showLoading = false;
        if (res1.code === 0) {
          this.installInfo = {
            show: true,
            appName: row.appName,
            apphistorys: res.obj,
            versionName: row.versionName,
            list: res1.obj,
            columns: [
              {
                title: "序号",
                type: "index",
                width: 70,
                align: "center"
              },
              {
                title: "区域名称",
                key: "regionName",
                align: "center"
              },
              {
                title: "设备总数",
                key: "total",
                align: "center"
              },
              {
                title: "已安装设备数",
                key: "installNum",
                align: "center"
              },
              {
                title: "未安装设备总数",
                key: "unInstallNum",
                align: "center"
              },
              {
                title: "安装比例",
                key: "installRate",
                align: "center"
              }
            ]
          };
        } else {
          this.$Message.error(res1.msg);
        }
      }
    },
    viewInfoChange() {
      //查看切换版本
      let obj = this.viewInfo.apphistorys.filter(
        (v) => v.versionName === this.viewInfo.versionName
      )[0];
      this.viewInfo.apkPath = obj.apkPath;
      this.viewInfo.appDeveloper = obj.appDeveloper;
      this.viewInfo.appIcon = obj.appIcon;
      this.viewInfo.appPackage = obj.appPackage;
      this.viewInfo.appRenew = obj.appRenew;
      this.viewInfo.appSize = getResourceSize(obj.appSize);
      this.viewInfo.versionNum = obj.versionNum;
    },
    // 查看
    toView(row) {
      this.showLoading = true;
      app_detail({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        appid: row.appid
      }).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          this.viewInfo = {
            show: true,
            apphistorys: res.obj.apphistorys,
            appName: res.obj.appName,
            appgroupName: row.appgroupName,
            enabled: res.obj.enabled,
            appType: res.obj.appType,
            forced: res.obj.forced,
            whited: res.obj.whited,
            showico: res.obj.showico,
            cached: res.obj.cached,
            strategy: res.obj.strategy,
            apkPath: res.obj.apkPath,
            appIcon: res.obj.appIcon,
            appImg: res.obj.appImg ? res.obj.appImg.split(";") : [],
            versionName: res.obj.versionName,
            versionNum: res.obj.versionNum,
            appSize: getResourceSize(res.obj.appSize),
            appDeveloper: res.obj.appDeveloper,
            appPackage: res.obj.appPackage,
            appAbbr: res.obj.appAbbr,
            appRenew: res.obj.appRenew,
            targetSchool: res.obj.targetSchool,
            devices: res.obj.devices,
            schools: res.obj.schools
          };
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    // 搜索
    searchList() {
      this.searchForm.page = 1;
      this.getList();
    },
    // 页码改变
    pageChange(page) {
      this.searchForm.page = page;
      this.getList();
    },
    // 每页显示数量改变
    pageSizeChange(size) {
      this.searchForm.size = size;
      this.searchForm.page = 1;
      this.getList();
    },
    // 获取列表
    getList() {
      this.showLoading = true;
      search_list_app({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        page: this.searchForm.page,
        size: this.searchForm.size,
        name: this.searchForm.name,
        title: this.searchForm.title
      }).then((data) => {
        this.showLoading = false;
        if (data.code === 0) {
          this.searchForm.list = data.obj.data;
          this.searchForm.total = data.obj.total;
        } else {
          this.$Message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.search_header {
  display: flex;
  align-items: center;
  margin: 16px 16px;
}
.view_title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.table_wrap {
  .appName {
    display: flex;
    margin: 16px 0;
    .app_logo {
      flex: none;
      width: 56px;
      height: 56px;
      border-radius: 20px;
      border: 1px solid #e5e5e5;
      background: #ffffff;
      padding: 10px;
      img {
        width: 38px;
        height: 38px;
        object-fit: cover;
      }
    }
    .app_comm {
      flex: none;
      margin-left: 10px;
      text-align: left;
      div {
        display: flex;
        align-items: center;
        color: #339dff;
      }
      .apptitle {
        display: inline-block;
        max-width: 140px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
      }
      .app_tag {
        display: inline-block;
        margin-left: 4px;
        width: 32px;
        text-align: center;
        color: #fff;
        line-height: 1.6;
        font-size: 12px;
        border-radius: 5px;
        background-color: #7854f6;
      }
      .web_tag {
        display: inline-block;
        margin-left: 4px;
        width: 32px;
        text-align: center;
        color: #fff;
        line-height: 1.6;
        font-size: 12px;
        border-radius: 5px;
        background-color: #52c41a;
      }
    }
  }
}
.view_content {
  display: flex;
  .view_title {
    width: 90px;
    text-align: right;
    flex: none;
    font-size: 16px;
    margin: 0 10px;
    line-height: 32px;
    height: 32px;
  }
}
.download {
  .content {
    text-align: center;
    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .qrcode {
      width: 172px;
      padding: 16px;
      margin: 0 auto;
      border: 2px solid #ffffff;
      background: #ffffff4d;
      box-shadow: 0 10px 30px 0 #339dff26;
      #ScanShare {
        width: 140px;
        height: 140px;
        margin-bottom: 10px;
      }
    }
    .download {
      margin-top: 40px;
      &:hover {
        cursor: pointer;
        color: #339cff;
      }
    }
  }
}
.install_title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  position: relative;
}
.history {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  font-size: 16px;
  font-weight: 400;
  font-family: "SourceHanSansCN";
  align-items: center;
}
.view_conten {
  display: flex;
  .view_logo {
    width: 90px;
    height: 90px;
    margin-right: 20px;
    border: 1px solid #e5e5e5;
    background-color: white;
    border-radius: 20px;
    padding: 15px;
    img {
      width: 60px;
      height: 60px;
      object-fit: cover;
    }
    .appIcon {
      margin-top: 10px;
      color: #96abdf;
      line-height: 30px;
      text-align: center;
      &:hover {
        cursor: pointer;
        color: #339cff;
      }
    }
  }
  .view_conter {
    width: calc(100% - 110px);
    font-size: 16px;
    .view_comm {
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      .view_titles {
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
        .qy {
          background-color: #52c41a;
          border-radius: 6px;
          font-size: 10px;
          color: white;
          margin-left: 10px;
          padding: 4px 6px;
        }
      }
      .view_item {
        width: 33%;
        font-weight: bold;
        span {
          display: inline-block;
          font-weight: 400;
          width: 120px;
          margin-right: 20px;
        }
      }
    }
    .view_com {
      display: flex;
      line-height: 40px;
      .view_t {
        width: 120px;
        flex: none;
        margin-right: 20px;
      }
      .view_img {
        display: flex;
        padding-top: 10px;
        img {
          width: 90px;
          height: 80px;
          object-fit: cover;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
