<template>
  <!-- 试玩素材 -->
  <div>
    <!-- 查询条件 -->
    <el-form inline class="el-form-style">
      <!-- 应用选择 -->
      <el-form-item label="应用选择">
        <el-select v-model="condition.pkg" filterable placeholder="应用选择">
          <el-option
            v-for="item in appList"
            :key="item.id"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>

      <!-- 入库日期 -->
      <el-form-item label="入库日期">
        <el-date-picker
          v-model="datadate"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>

      <!-- 筛选按钮 -->
      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" size="medium" @click="handleUpload"
      >上传素材</el-button
    >

    <el-button size="medium" @click="handlePush">批量推送到账户</el-button>

    <!-- 上传素材 -->
    <upload-material
      v-if="showUploadMaterial"
      :condition="condition"
      :appList="appList"
      ref="upload"
      @uploadSuccess="_tryPlayList"
    />

    <!-- 批量推送到账户 -->
    <push-to-account
      v-if="showPushDialog"
      ref="push"
      :pkg="condition.pkg"
      :ids="ids"
      @closeDialog="closeDialog"
    />

    <!-- 素材列表 -->
    <material-list
      v-loading="isloading"
      :materialData="materialData"
      @remove="remove"
      @paginationChange="paginationChange"
      ref="materialList"
    />
  </div>
</template>

<script>
import { tryPlayList, menuSelectApps } from "@/api/report";

import { getTime } from "@/utils/utils";

import UploadMaterial from "./childComponents/UploadMaterial"; // 上传素材
import PushToAccount from "./childComponents/PushToAccount"; // 推动至账户
import MaterialList from "./childComponents/MaterialList.vue"; // 素材列表

export default {
  components: {
    UploadMaterial,
    PushToAccount,
    MaterialList,
  },

  data() {
    return {
      // 请求到的数据
      materialData: {}, // 素材数据
      appList: [],
      // -----------------
      isloading: false,
      condition: {
        pkg: "com.ym.blc",
        startDate: "",
        endDate: "",
        page: 1,
        size: 20,
      },
      datadate: [],
      pickerOptions: this.$store.state.pickerOptions,
      showUploadMaterial: false, // 控制上传素材显示
      showPushDialog: false, // 控制批量推送到账户显示
      ids: [],
    };
  },

  watch: {
    datadate(val, old) {
      this.condition.startDate = val[0];
      this.condition.endDate = val[1];
    },
  },

  created() {
    this.init();
  },

  methods: {
    /**
     * 调用接口 请求数据
     */
    // 试玩素材列表
    _tryPlayList() {
      if (this.condition.pkg == "") {
        this.$message.warning("请选择包!");
        return;
      }
      this.isloading = true;
      tryPlayList(this.condition).then((res) => {
        this.materialData = res.result.data;
        this.isloading = false;
      });
    },

    // 获取app 列表
    _menuSelectApps() {
      let params = {
        platformId: "5",
        menuCode: "game.Overview",
      };
      menuSelectApps(params).then((res) => {
        this.appList = res.result.data;
      });
    },
    // ------------------------

    init() {
      this.datadate = [getTime(), getTime()];
      this._menuSelectApps();
      this._tryPlayList();
    },

    /* 上传素材弹窗控制 */
    handleUpload() {
      this.showUploadMaterial = true;
      this.$nextTick(() => {
        this.$refs.upload.init();
      });
    },

    /* 批量推送至账户弹框控制 */
    handlePush() {
      this.showPushDialog = true;
      this.ids = this.$refs.materialList.selectList;
      this.$nextTick(() => {
        this.$refs.push.init();
      });
    },

    // 查询试玩列表
    queryData() {
      this._tryPlayList();
    },

    // 关闭推送
    closeDialog() {
      this.showPushDialog = false;
      this.$refs.materialList.centerSelect();
    },

    // 分页改变
    paginationChange(pageInfo) {
      this.condition.page = pageInfo.page;
      this.condition.size = pageInfo.size;
      this._tryPlayList();
    },

    remove() {
      this.$refs.materialList.checkAll = false;
      this._tryPlayList();
    },
  },
};
</script>

<style scoped>
.el-form-style {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
</style>
