<template>
  <div class="app-container">

     <el-form :inline="true">
      <el-form-item label="查询日期">
        <el-date-picker
          v-model="queryDate"
          :picker-options="pickerOptions"
          type="daterange"
          align="center"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item label="请选择代理商">
        <el-select
          v-model="condition.agentId"
          clearable
          placeholder="请选择代理商"
        >
          <el-option
            v-for="item of agentList"
            :key="item.id"
            :label="item.agentName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="请选择状态">
        <el-select v-model="condition.status" clearable placeholder="请选择状态">
          <el-option
            v-for="item of statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="请选择类型">
        <el-select v-model="condition.type" clearable placeholder="请选择类型">
          <el-option
            v-for="item of typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="invoiceRecord()">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="margin-bottom: 20px" @click="addAgent()">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="invoiceRecordList"
      v-loading="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" prop="id" align="center" width="80px" />
      <el-table-column label="日期" prop="datadate" align="center" />
      <el-table-column
        label="代理商"
        prop="agentName"
        align="center"
      />
       <el-table-column label="金额（元）" prop="cash" align="center" />
      <el-table-column label="类型" prop="type" align="center" >
        <template slot-scope="scope">
          <span v-if="scope.row.type === 1">打款(充值)</span>
          <span v-else>退款</span>
        </template>
      </el-table-column>
      <el-table-column label="付款时间" prop="cashTime" align="center" />
      <el-table-column label="创建时间" prop="createdAt" align="center" />
      <el-table-column label="主体" prop="mainBody" align="center" />
      <el-table-column label="状态" prop="status" align="center" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="warning">进行中</el-tag>
          <el-tag v-else type="success">成功</el-tag>

          <!-- <el-radio v-model="scope.row.status" label="1" :change="changeSwitch(scope.row)">备选项</el-radio>
          <el-radio v-model="scope.row.status" label="2">备选项</el-radio> -->

          <!-- <el-switch
            v-model="scope.row.status === 1"
            active-text="成功"
            inactive-text="进行中"
            :change="changeSwitch(scope.row)"
            >
          </el-switch> -->
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="clickEditor(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="clickDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="is_clickEditor">
      <el-form>
        <el-form-item label="金额（元）" label-width="150px" align="center">
          <el-input v-model="addItem.cash" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="付款时间" label-width="150px">
          <el-date-picker
            v-model="addItem.cashTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="请选择代理商" label-width="150px">
          <el-select v-model="addItem.agentId" placeholder="请选择代理商">
            <el-option
              v-for="item of agentList"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="类型" label-width="150px">
          <el-select v-model="addItem.type" placeholder="请选择类型">
            <el-option
              v-for="item of typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" label-width="150px">
          <el-select v-model="addItem.status" placeholder="请选择状态">
            <el-option
              v-for="item of statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="主体:" label-width="150px">
          <el-select v-model="addItem.mainBody" placeholder="请选择主体">
            <el-option
              v-for="item of mainBodyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_clickEditor = false">取 消</el-button>
        <el-button type="primary" @click="clickEditorOk()">确 定</el-button>
      </div>
    </el-dialog>

    <Page
      :total="total"
      :page-size-opts="optPageSizes"
      style="margin: 20px 0"
      show-total
      prev-text="上一页"
      next-text="下一页"
      size="small"
      show-elevator
      show-sizer
      @on-change="pageChange"
      @on-page-size-change="sizeChange"
    />
  </div>
</template>

<script>
import { invoiceRecord } from "@/api/rechargeRefund";
import { putonAgent } from "@/api/agent";
import { fetchCommonTable } from "@/api/common";
const moment = require("moment");

export default {
  name: "agent",
  data() {
    return {
      queryDate: [],
      agentList: [],
      mainBodyList: [],
      invoiceRecordList: [],
      listLoading: true,
      slotNameList: [{label: "一级代理", value: 1},{label: "二级代理", value: 2},{label: "三级代理", value: 3}],
      statusList: [{label: "进行中", value: 1},{label: "成功", value: 2}],
      typeList: [{label: "打款(充值) ", value: 1},{label: "退款", value: 2}],

      is_clickEditor: false,
      condition: {
        cash: "",
        agentId: "",
        status: "",
        type: "",
        page: 1,
        size: 10,
      },
      addItem: {
        cash: "",
        cashTime: "",
        agentId: "",
        status: "",
        type: "",
        mainBody: "",
      },

      total: 0,
      optPageSizes: [10, 15, 20, 30, 50, 100, 200, 300, 500],
       pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start = moment(start).format("YYYY-MM-DD");
              end = moment(end).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              start = moment(start).format("YYYY-MM-DD");
              end = moment(end).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              start = moment(start).format("YYYY-MM-DD");
              end = moment(end).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },

  created() {
    let beforeDay = moment()
      .subtract(7, "days")
      .format("YYYY-MM-DD");
    this.condition.startDate = beforeDay;
    this.condition.endDate = moment().format("YYYY-MM-DD");
    this.queryDate.push(beforeDay, moment().format("YYYY-MM-DD"));

    this.putonAgent();
    this.invoiceRecord();
    this.fetchMainBodyList()
  },

  mounted() {},

  methods: {
    fetchMainBodyList() {
      fetchCommonTable({sqlId: 1394}).then(resp => {
        this.mainBodyList = resp.result.data
      })
    },
    //获取代理商列表
    putonAgent: function() {
      putonAgent("get", {}).then(res => {
        this.listLoading = false;
        if (res.status === 200) {
          this.agentList = res.result.data;
        } else {
          alert(res.msg);
        }
      });
    },

    // 发票列表
    invoiceRecord: function() {
      this.condition.startDate = this.queryDate[0];
      this.condition.endDate = this.queryDate[1];

      invoiceRecord("get", { ...this.condition }).then(res => {
        this.listLoading = false;
        if (res.status === 200) {
          this.invoiceRecordList = res.result.data.content;
          this.total = res.result.data.total;
        } else {
          alert(res.msg);
        }
      });
    },

    pageChange(page) {
      this.condition.page = page;
      this.invoiceRecord();
    },

    sizeChange(size) {
      this.condition.size = size;
      this.invoiceRecord();
    },

    //编辑
    clickEditor: function(e) {
      this.is_clickEditor = true;
      this.addItem = {...e};
    },

    //确定
    clickEditorOk: function() {
      invoiceRecord("post", {
        ...this.addItem
      }).then(res => {
        this.listLoading = false;
        this.is_clickEditor = false;
        if (res.status === 200) {
          this.invoiceRecord();
          this.$message({
            message: "操作成功",
            type: "success"
          });
        } else {
          alert(res.msg);
        }
      });
    },

    //删除
    clickDelete: function(e) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          invoiceRecord("delete", {
            id: e.id
          }).then(res => {
            this.listLoading = false;
            if (res.status === 200) {
              this.invoiceRecord();
              this.$message({
                message: "删除成功",
                type: "success"
              });
            } else {
              alert(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    addAgent: function() {
      this.is_clickEditor = true;
      this.addItem = {
        cash: "",
        agentId: "",
        status: 1,
        type: 1
      };
    }
  }
};
</script>
