<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
        <el-form-item label="日期">
            <el-date-picker
                v-model="dateValue"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                :picker-options="pickerOptions">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="渠道" prop="advType">
            <el-select v-model="queryParams.advType" placeholder="请选择渠道" clearable size="small">
                 <el-option
                   v-for="item in channelOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
                 />
               </el-select>
        </el-form-item>
        <el-form-item label="下载数" prop="totalCount">
          <el-input v-model="queryParams.totalCountMin" placeholder="请输入下载最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.totalCountMax" placeholder="请输入下载最大值" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="激活数" prop="advType">
          <el-input v-model="queryParams.activationCountMin" placeholder="请输入激活数最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.activationCountMax" placeholder="请输入激活数最大值" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="激活率" prop="advType">
          <el-input v-model="queryParams.activationRateMin" placeholder="请输入激活率最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.activationRateMax" placeholder="请输入激活率最大值" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="注册数" prop="advType">
          <el-input v-model="queryParams.registrationCountMin" placeholder="请输入注册数最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.registrationCountMax" placeholder="请输入注册数最大值" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="注册率" prop="advType">
          <el-input v-model="queryParams.registrationRateMin" placeholder="请输入注册率最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.registrationRateMax" placeholder="请输入注册率最大值" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="跳转数" prop="advType">
          <el-input v-model="queryParams.jumpCountMin" placeholder="请输入跳转数最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.jumpCountMax" placeholder="请输入跳转数最大值" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="跳转率" prop="advType">
          <el-input v-model="queryParams.jumpRateMin" placeholder="请输入跳转率最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.jumpRateMax" placeholder="请输入跳转率最大值" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="加粉数" prop="advType">
          <el-input v-model="queryParams.bindingCountMin" placeholder="请输入加粉数最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.bindingCountMax" placeholder="请输入加粉数最大值" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="加粉率" prop="advType">
          <el-input v-model="queryParams.bindingRateMin" placeholder="请输入加粉率最小值" size="small" clearable></el-input>
          <span>—</span>
          <el-input v-model="queryParams.bindingRateMax" placeholder="请输入加粉率最大值" size="small" clearable></el-input>
        </el-form-item>
        
  
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['his:adv:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="advList" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="日期" align="center" prop="date" width="150px"/>
        <el-table-column label="渠道" align="center" prop="imageUrl" width="150px">
            <template slot-scope="scope">
                <span v-for="item in channelOptions" v-if="scope.row.advType==item.value">{{item.label }} </span>
            </template>
        </el-table-column>
        <el-table-column label="下载数" show-overflow-tooltip align="center" prop="totalCount" width="150px" />
  
        <el-table-column label="激活数/率" align="center">
            <template v-slot="scope">
                {{ scope.row.activationCount }}/{{ scope.row.activationRate }}
            </template>
        </el-table-column>
        <el-table-column label="注册数/率" align="center" prop="advType" width="130px">
            <template v-slot="scope">
                {{ scope.row.registrationCount }}/{{ scope.row.registrationRate }}
            </template>
        </el-table-column>
          
        <el-table-column label="跳转数/率" align="center" prop="showType" width="130px">
            <template v-slot="scope">
                {{ scope.row.jumpCount }}/{{ scope.row.jumpRate }}
            </template>
        </el-table-column>

        <el-table-column label="加粉数/率" align="center" prop="status">
            <template v-slot="scope">
                {{ scope.row.bindingCount }}/{{ scope.row.bindingRate }}
            </template>
        </el-table-column>
        
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
    </div>
  </template>
  
  <script>
  import { advSemStatisticsList,fsAdvSemStatisticsExport} from "@/api/baidu/statistics";
  import Editor from '@/components/Editor/wang';
  export default {
    name: "AdvReport",
    components: { Editor },
    data() {
      return {
        dateValue:null,
        channelOptions:[
            {
                value:0,
                label:"百度"
            }
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 广告表格数据
        advList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dateMax:null,
          dateMin:null,
          advType: null,
          totalCountMin:null,
          totalCountMax:null,
          activationCountMin:null,
          activationCountMax:null,
          activationRateMin:null,
          activationRateMax:null,
          registrationCountMin:null,
          registrationCountMax:null,
          registrationRateMin:null,
          registrationRateMax:null,
          jumpCountMin:null,
          jumpCountMax:null,
          jumpRateMin:null,
          jumpRateMax:null,
          bindingCountMin:null,
          bindingCountMax:null,
          bindingRateMin:null,
          bindingRateMax:null
        },
        // 表单参数
        form: {},
        
      };
    },
    created() {
      this.getList();
     
    },
    methods: {
      /** 查询广告列表 */
        getList() {
            this.loading = true;
            advSemStatisticsList(this.queryParams).then(response => {
            this.advList = response.rows;
            this.total = response.total;
            this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        formatDate(date) {
            // 获取年、月、日、时、分、秒
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            // 返回格式化的日期时间字符串
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            if(this.dateValue){
                this.queryParams.dateMin = this.formatDate(this.dateValue[0]);
                this.queryParams.dateMax = this.formatDate(this.dateValue[1]);
            } else{
                this.queryParams.dateMin = null;
                this.queryParams.dateMax = null;
            }
            console.log("-------------",JSON.stringify(this.queryParams))
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.advId)
            this.single = selection.length!==1
            this.multiple = !selection.length
        },
        
     
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有投放数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.exportLoading = true;
                return fsAdvSemStatisticsExport(queryParams);
            }).then(response => {
                this.download(response.msg);
                this.exportLoading = false;
            }).catch(() => {});
        }
    }
  };
  </script>
  <style scoped>
  .el-input {
    width: 170px; /* 自定义输入框宽度 */
    margin-right: 0px;
  }

  </style>
  <style>
     .avatar-uploader .el-upload {
         border: 1px dashed #d9d9d9;
         border-radius: 6px;
         cursor: pointer;
         position: relative;
         overflow: hidden;
       }
       .avatar-uploader .el-upload:hover {
         border-color: #409EFF;
       }
  
       .avatar-uploader-icon {
         font-size: 28px;
         color: #8c939d;
         width: 150px;
         height: 150px;
         line-height: 150px;
         text-align: center;
       }
  
  </style>
  