<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="推送设置" name="1">
        <el-form ref="form" :rules="rules" :model="form" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="主题名称" style="margin-top: 30px" prop="topicName">
                <el-input
                  type="text"
                  placeholder="请输入内容"
                  v-model="form.topicName"
                  maxlength="10"
                  show-word-limit
                  style="width: 300px"
                  :disabled="disabled"
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="推送红包" style="margin-top: 30px"> </el-form-item>
              <el-form-item
                label="红包个数"
                prop="redEnvelopeNum"
                style="margin-left: 70px"
              >
                <el-input-number
                  v-model="form.redEnvelopeNum"
                  :disabled="disabled"
                  style="width: 150px"
                  :controls="false"
                  max="100"
                  min="0"
                ></el-input-number
                >个
              </el-form-item>
              <el-form-item
                label="单个金额"
                prop="singleAmount"
                style="margin-left: 70px"
              >
                <el-input-number
                  v-model="form.singleAmount"
                  :disabled="disabled"
                  style="width: 150px"
                  :controls="false"
                  max="100"
                  min="0"
                ></el-input-number
                >元
              </el-form-item>
              <el-form-item
                label="红包时效"
                prop="redEnvelopePeriod"
                style="margin-left: 70px"
              >
                <el-input-number
                  v-model="form.redEnvelopePeriod"
                  :disabled="disabled"
                  style="width: 150px"
                  :controls="false"
                  max="100"
                  min="0"
                ></el-input-number
                >天
                <span style="margin-left: 20px"
                  >推送后所设置天数用户未领取,将自动过期，剩余金额原路返回</span
                >
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="推送消息" style="margin-top: 30px" prop="pushMessage">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="form.pushMessage"
                  :disabled="disabled"
                  :show-word-limit="true"
                  style="width: 500px"
                  maxlength="100"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="推送用户" name="2">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="120px"
        >
          <el-form-item label="" prop="key">
            <el-input
              v-model="queryParams.key"
              placeholder="请输入用户ID,用户昵称搜索"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="浏览记录" prop="browseFlag">
            <el-select
              v-model="queryParams.browseFlag"
              placeholder="请选择浏览记录"
              style="width: 240px"
            >
              <el-option label="全部" value=""> </el-option>
              <el-option label="7天内浏览用户" value="7"> </el-option>
              <el-option label="30天内浏览用户" value="30"> </el-option>
              <el-option label="半年内浏览用户" value="180"> </el-option>
              <el-option label="一年内浏览用户" value="365"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单记录" prop="orderFlag">
            <el-select
              v-model="queryParams.orderFlag"
              placeholder="请选择下单记录"
              style="width: 240px"
            >
              <el-option label="全部" value=""> </el-option>
              <el-option label="30天内下单用户" value="30"> </el-option>
              <el-option label="半年内下单用户" value="180"> </el-option>
              <el-option label="一年内下单用户" value="365"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推送状态" prop="pushStatus">
            <el-select
              v-model="queryParams.pushStatus"
              placeholder="请选择推送状态"
              style="width: 240px"
            >
              <el-option label="全部" value=""> </el-option>
              <el-option label="未推送" value="0"> </el-option>
              <el-option label="已推送" value="1"> </el-option>
            </el-select>
          </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-table
          v-loading="loading"
          :data="tableList"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <el-table-column label="用户ID" align="center" prop="id" />
          <el-table-column label="用户头像" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.headUrl"
                :preview-src-list="[scope.row.headUrl]"
              >
              </el-image>
            </template>
          </el-table-column>

          <el-table-column label="用户昵称" align="center" prop="nick" />
          <el-table-column label="浏览记录" align="center" prop="browseRecord">
            <template slot-scope="scope">
              {{
                scope.row.browseRecord
                  ? $moment(Number(scope.row.browseRecord)).format("yyyy-MM-DD HH:mm:ss")
                  : ""
              }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="距离" align="center" width="120" /> -->
          <el-table-column label="下单记录" align="center" prop="orderRecord">
            <template slot-scope="scope">
              {{
                scope.row.orderRecord
                  ? $moment(Number(scope.row.orderRecord)).format("yyyy-MM-DD HH:mm:ss")
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="近期推送记录" align="center" prop="topicName" />
          <el-table-column label="领取记录" align="center" prop="receiveStatus">
            <template slot-scope="scope">
              {{ scope.row.receiveStatus == 0 ? "未领取" : "已领取" }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as markApi from "@/api/marketing/index";
export default {
  name: "Config",
  data() {
    return {
      disabled: true,
      activeName: "1",
      // 遮罩层
      loading: true,
      // 选中数组
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        phone: "",
        nick: "",
      },
      form: {},
      userid: "",
      tableList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      markApi.aiMarketingInfo(this.$route.query.id).then((response) => {
        if (response.code == 200) {
          this.form = response.data;
        }
      });
    },
    handleClick() {
      if (this.activeName == 2) {
        this.getTable();
      }
    },
    getTable() {
      this.loading = true;
      this.queryParams.id = this.$route.query.id;
      markApi.selectUserMsg(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.tableList = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getTable();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style scoped lang="scss"></style>
