<template>
  <div class="pkg-show">
    <el-form inline>
      <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 label="计划id">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6}"
          placeholder="请输入计划id，并以回车做分割"
          v-model="plans"
          style="width:300px"
          @input="plans = plans.replace(/[\,]|[\，]/gm,'\n')"
        >
        </el-input>
      </el-form-item>

      <el-button type="primary" @click="getTableData()">确定</el-button>
    </el-form>

    <el-button v-model="multipleSelection" type="primary" @click="closePlan(multipleSelection)">关闭计划</el-button>
    <el-button v-model="multipleSelection" type="primary" @click="deletePlan(multipleSelection)">删除计划</el-button>
    <el-table
      :data="income"
      style="width:100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="广告主id" sortable prop="advertiser_id" align="center" width=200 />
      <el-table-column label="计划id" sortable prop="plan_id" align="center" width=200 />
      <el-table-column label="计划名称" sortable prop="ad_name" align="left" />
      <el-table-column label="状态" sortable prop="name_status" align="center" width=100 />
      <el-table-column label="消耗" sortable prop="cost" align="center" width=100 />
      <el-table-column label="关闭结果" sortable prop="msg" align="center" width=200 />
     </el-table>
  </div>
</template>

<script>
import { getBusinIncome } from "@/api/cloud";
import { opPutinPlan } from '@/api/report';
const moment = require("moment");
export default {
  data() {
    return {
      dataDate: [],
      startDate :'',
      endDate: '',
      plans: '',
      income: [],
      multipleSelection: []
    }
  },
  created() {
    this.dataDate[0] = moment().subtract(7, "days").format("YYYY-MM-DD");
    this.dataDate[1] = moment().format("YYYY-MM-DD");
  },
  methods: {
    getTableData() {
      this.startDate = this.dataDate[0];
      this.endDate = this.dataDate[1];
      let params = {
        sqlId: 1347,
        startDate: this.startDate,
        endDate: this.endDate,
        plans: this.plans.replace('\n','\,')
      };
      getBusinIncome(params).then((res) => {
        for(var i=0;i<res.result.data.length;i++){
          res.result.data[i].msg = ('')
        }
        this.income = res.result.data;
      })
    },
    // 关闭计划
    closePlan(value) {
      for(var i = 0; i < value.length; i++){
        let form = {};
        form.advertiserId = value[i].advertiser_id;
        form.planId = value[i].plan_id;
        form.optStatus = 'disable';
        form.history = JSON.stringify(value[i])
        opPutinPlan(form).then(res=>{
          for(var j = 0;j<this.multipleSelection.length;j++){
            this.multipleSelection[j].msg = res.msg;
          }
        })
      } 
    },
    // 删除计划
    deletePlan(value){
      console.log(value)
      for(var i = 0; i < value.length; i++){
        let form = {};
        form.advertiserId = value[i].advertiser_id;
        form.planId = value[i].plan_id;
        form.optStatus = 'delete';
        form.history = JSON.stringify(value[i])
        opPutinPlan(form).then(res=>{
          console.log(res);
        })
      } 
    },
    // 控制多选数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>
  .pkg-show{
    padding: 25px;
  }
</style>