<!-- 可见创意灵感账号 -->
<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="search-wrap">
      <el-form :inline="true" :model="formData" @submit.native.prevent>
        <el-form-item label="appkey/校验包名">
          <el-input
            v-model.trim="formData.keyword"
            placeholder="请输入appkey/校验包名"
            style="width: 240px"
          ></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="formData.gmtCreate"
            :class="'create-date'"
            size="small"
            style="height:36px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="clearData"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作 -->
    <div class="operation-wrap">
      <el-upload
        ref="upload"
        class="upload-wrap"
        :accept="uploadOption.accept"
        :data="uploadOption.data"
        :action="uploadOption.action"
        :headers="uploadOption.headers"
        :limit="uploadOption.limit"
        :show-file-list="uploadOption.showFileList"
        :before-upload="onBeforeUpload"
        :on-success="onSuccess"
        :on-error="onError"
      >
        <el-button type="primary" icon="el-icon-upload" :loading="uploadOption.loading"
          >上传关系表</el-button>
      </el-upload>
      <el-button @click="handleUploadTemplate">下载关系表</el-button>
      <el-button class="fr" @click="userUserlibRefresh">刷新</el-button>
    </div>
    <!-- 展示数据 -->
    <el-table border class="seachTable" :data="tableData">
      <el-table-column
        prop="packageName"
        label="包名"
        :show-overflow-tooltip="true"
        width="280"
      >
        <template slot-scope="scope">
          <span>{{tableShowContent(scope.row.packageName)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="appKey"
        label="APPKEY"
        min-width="100"
      >
        <template slot-scope="scope">
          <span>{{tableShowContent(scope.row.appKey)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="categoryFirstName"
        label="一级标签"
        min-width="150"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{tableShowContent(scope.row.categoryFirstName)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="categorySecondName"
        label="二级标签"
        min-width="150"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{tableShowContent(scope.row.categorySecondName)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="categoryThirdName"
        label="三级标签"
        min-width="150"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{tableShowContent(scope.row.categoryThirdName)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="上传时间"
        min-width="150"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{tableShowContent(scope.row.gmtCreate)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="pageInfo.total > 0"
      :total="pageInfo.total"
      :page.sync="pageInfo.current"
      :limit.sync="pageInfo.size"
      @pagination="paginationChange"
    />
  </div>
</template>

<script>
// api
import {
  userUserlibExport,
  userUserlibSearch,
  userUserlibRefresh
} from "@/api/audience/featured";

import { getToken } from "@/utils/auth";
import { hackDownloadFileNew } from "@/utils/ruoyi";

export default {
  data() {
    return {
      formData: {
        keyword: "",
        gmtCreate: []
      },
      tableData: [],
      pageInfo: {
        total: 0,
        current: 1,
        size: 10,
      },
      uploadOption: {
        data: {
          check: false,
        },
        loading: false,
        action:
          window.location.protocol +
          process.env.VUE_APP_BASE_API +
          "/system/userlib/upload",
        accept: ".xlsx,.xls",
        showFileList: false,
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        limit: 1,
      }
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 刷新
    userUserlibRefresh() {
      userUserlibRefresh()
        .then(res => {
          this.msgSuccess(res.data)
          this.getTableData()
        })
        .catch(err => {
          this.msgError(err);
        })
    },
    // 查询
    handleSearch() {
      this.pageInfo.current = 1;
      this.getTableData();
    },
    // 清空时间
    clearData(val) {
       if (val === null) {
         this.dateSelect = []
       }
    },
    // 分页改变
    paginationChange() {
      this.getTableData();
    },
    onBeforeUpload() {
      this.uploadOption.loading = true;
    },
    onSuccess(response) {
      this.uploadOption.loading = false;
      let data = response.data
      if (response.code === 200) {
        let errorDetails = data.errorDetails
        if (errorDetails.length && errorDetails[0].content) {
          let h = this.$createElement
          this.$confirm(
            '提示',
            {
              title: '提示',
              message: h('div', null, [
                h('p', null, 'APPKEY存在重复，重复APPKEY：'), 
                h('p', {
                  style: {'word-break': 'break-all'}
                }, errorDetails[0].content)
              ]),
              showCancelButton: true,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
        } else {
          this.msgSuccess(data.message ? data.message : '上传成功')
          this.getTableData();
        }
      } else {
        this.msgError('导入模版失败,请重试');
      }
      this.$refs["upload"].clearFiles();
    },
    onError() {
      this.$refs["upload"].clearFiles();
      this.uploadOption.loading = false;
      this.msgError("导入模版失败,请重试");

    },
    // 实例调用
    // 获取展示数据
    async getTableData() {
      try {
        let params = this.getParams();
        let res = await userUserlibSearch(params);
        this.tableData = res.data.records;
        this.pageInfo.total = res.data.total;
      } catch (error) {
        console.error("获取展示数据", error);
      }
    },
    // 获取关系列表
    async handleUploadTemplate() {
      try {
        let res = await userUserlibExport();
        hackDownloadFileNew(
          res.data,
          "关系列表_" + new Date().getTime()
        );
      } catch (error) {
        console.error("获取关系列表失败", error);
      }
    },
    // utils
    getParams() {
      let result = {
        ...this.formData,
        ...this.pageInfo,
      };
      if (result.gmtCreate && result.gmtCreate.length) {
        result.gmtCreate = result.gmtCreate
      } else {
        delete result.gmtCreate
      }
      delete result.total;
      return result;
    },
    tableShowContent(val) {
      return val ? val : '-'
    }
  },
};
</script>
<style lang="scss" scoped>
.search-wrap {
  margin-bottom: 20px;
  border-bottom: 1px dashed #e4e4e4;
  .el-button--primary {
    min-width: 80px;
  }
}
.operation-wrap {
  margin-bottom: 20px;
  .upload-wrap {
    display: inline-block;
  }
}
/deep/.create-date input {
  height: 36px;
}
/deep/.audience-description {
  height: 80px;
  .el-form-item--medium {
    margin-bottom: 0;
    height: 80px;
    .el-textarea__inner {
      height: 80px;
    }
  }
}
/deep/.create-date {
  input {
    height: 34px;
  }
}
</style>