<template>
  <div class="app-container">
    <!-- 筛选 功能项-->
    <el-form :inline="true">
      <el-form-item label="客户名称">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入客户名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="queryParams.searchDateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表数据 -->
    <el-table v-loading="loading" :data="customerList" style="width: 100%" border>
      <el-table-column
        v-for="(item,index) in STATICSDATA.table.head"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      />
      <el-table-column fixed="right" width="200" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" type="text" size="small">配置</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small">充值</el-button>
          <el-button @click="handleMedia(scope.row)" type="text" size="small">媒体账号</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getPackLists"
    />
    <!-- 新增 -->
    <d-add @refresh="refresh"></d-add>
    <!-- 配置 -->
    <d-configure :objdata="objdata" @refresh="refresh"></d-configure>
    <!-- 充值 -->
    <d-invest :balance="balance" @refresh="refresh"></d-invest>
    <!-- 媒体账号（后台2.0） -->
    <d-media ref="media" @refresh="refresh"></d-media>
  </div>
</template>

<script>
import { getPackList } from "@/api/system/pack";
import STATICSDATA from "./data.json";
import dAdd from "./common/d-add/index";
import dConfigure from "./common/d-configure/index";
import dInvest from "./common/d-invest/index";
import dMedia from "./common/d-media/index";
import bus from "./common/bus";
export default {
  components: {
    dAdd,
    dConfigure,
    dInvest,
    dMedia
  },
  data() {
    return {
      loading: false,
      balance: null,
      objdata: null,
      STATICSDATA,
      total: 0,
      dilogShow: {
        addAhows: false,
        toConfigure: false,
        recharge: false,
        media: false
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        customerName: null,
        beginDate: "",
        endDate: "",
        searchDateRange: []
      },
      customerList: []
    };
  },
  created() {
    this.getPackLists();
  },
  methods: {
    refresh(value) {
      if(value){
        this.getPackLists() 
      }
    },
    // 清空
    clear() {
      // this.queryParams.customerName = null;
      // this.queryParams.beginDate = null;
      // this.queryParams.endDate = null;
      // this.queryParams.searchDateRange = [];
    },
    // 搜索
    handleQuery() {
      this.queryParams.beginDate = this.queryParams.searchDateRange[0];
      this.queryParams.endDate = this.queryParams.searchDateRange[1];
      this.getPackLists();
      this.clear();
    },
    // 新增
    handleAdd() {
      this.dilogShow.addAhows = true;
      bus.$emit("shows", this.dilogShow.addAhows);
    },
    // 请求人群客户列表
    getPackLists() {
      this.loading = true;
      let {
        current,
        size,
        beginDate,
        endDate,
        customerName
      } = this.queryParams;
      let obj = {
        current: current,
        size: size
      };
      beginDate ? (obj.beginDate = beginDate) : null;
      endDate ? (obj.endDate = endDate) : null;
      customerName ? (obj.customerName = customerName) : null;
      getPackList(obj)
        .then(res => {
          this.customerList = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(console.log);
    },
    // 配置
    handleUpdate(row) {
      this.dilogShow.toConfigure = true;
      this.objdata = row;
      bus.$emit("to-shows", this.dilogShow.toConfigure);
    },
    // 充值
    handleDelete(row) {
      this.dilogShow.recharge = true;
      this.balance = row;
      bus.$emit("buy-shows", this.dilogShow.recharge);
    },
    // 媒体账号
    handleMedia(row) {
      this.dilogShow.media = true;
      this.$refs.media.customerId = row.customerId
      bus.$emit("media-shows", this.dilogShow.media);
    }
  }
};
</script>