<!--
 * @Descripttion: 渠道信息
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-09 16:08:16
 * @LastEditors: zzx tigerzouzx@foxmail.com
 * @LastEditTime: 2024-11-19 16:08:16
-->
<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="hover">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float: right" type="primary" @click="handleSearchList()" size="small">
          查询搜索
        </el-button>
        <el-button style="float: right; margin-right: 15px" @click="handleResetSearch()" size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="渠道名称：">
            <el-input v-model="listQuery.ecName" class="input-width" placeholder="请输入渠道名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="创建时间：">
            <el-date-picker v-model="date" size="small" value-format="yyyy-MM-dd HH:mm:ss" class="item-width-350 ml10"
              type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="hover">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <!-- <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button> -->
    </el-card>
    <div class="table-container">
      <el-table ref="adminTable" :data="list" style="width: 100%" v-loading="listLoading" border>
        <el-table-column label="渠道编号" width="100" align="center" prop="appId"></el-table-column>
        <el-table-column label="渠道名称" align="center" prop="ecName"></el-table-column>
        <el-table-column label="联系人" align="center">
          <template slot-scope="scope">
            {{ scope.row.contactName||'--' }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope">
            {{ scope.row.contactPhone||'--' }}
          </template>
        </el-table-column>
        <el-table-column label="渠道服务费/元" width="160" align="center" prop="serviceMoney"></el-table-column>
        <el-table-column label="使用状态" width="160" align="center">
          <template slot-scope="scope">
            <el-tag type='success' v-if="scope.row.status === 1">正常</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建人" width="140" align="center">
          <template slot-scope="scope">
            {{ scope.row.createBy||'--' }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="140" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime||'--' }}
          </template>
        </el-table-column>
        <el-table-column label="更新人" width="140" align="center">
          <template slot-scope="scope">
            {{ scope.row.updateBy||'--' }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" width="140" align="center">
          <template slot-scope="scope">
            {{ scope.row.updateTime||'--' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="handleUpdate(scope.$index, scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="isEdit ? '编辑' : '添加'" :visible.sync="dialogVisible" width="40%">
      <el-form :model="admin" ref="adminForm" label-width="150px" size="small">
        <el-form-item label="渠道编号：">
          <el-input disabled v-model="admin.appId" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="渠道名称：">
          <el-input v-model="admin.ecName" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="联系人：">
          <el-input v-model="admin.contactName" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="admin.contactPhone" type="number" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="渠道服务费：">
          <el-input v-model="admin.serviceMoney" type="text" :rows="5" style="width: 250px"></el-input>
          <div>当前平台服务费为0.1元/度</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  createAdmin,
} from "@/api/login";
import { channelList, editList } from "@/api/channel";
import { formatDate } from "@/utils/date";

const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  ecName: null,
  startTime: '',
  endTime: ''
};
const defaultAdmin = {
  appId: null,
  ecName: null,
  contactName: null,
  contactPhone: null,
  serviceMoney: null,
};
export default {
  name: "info",
  data() {
    return {
      date: '',
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      admin: Object.assign({}, defaultAdmin),
      isEdit: false,
      allocDialogVisible: false,
      allocRoleIds: [],
      allRoleList: [],
      allocAdminId: null,
    };
  },
  watch: {
    date(val) {
      if (val) {
        this.listQuery.startTime = Date.parse(val[0]);
        this.listQuery.endTime = Date.parse(val[1]);
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
  },
  created() {
    this.getList();
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  methods: {
    // 重置搜索框
    handleResetSearch() {
      this.date = "";
      this.listQuery = Object.assign({}, defaultListQuery);
    },

    // 搜索
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },

    // 每页条数
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },

    // 当前页
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    // 添加
    handleAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.admin = Object.assign({}, defaultAdmin);
    },

    // 编辑
    handleUpdate(index, row) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.admin = Object.assign({}, row);
    },

    // 编辑或增加确定回调
    handleDialogConfirm() {
      this.$confirm("是否要确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let editData = {
          appId:this.admin.appId,
          contactName:this.admin.contactName,
          contactPhone:this.admin.contactPhone,
          ecName:this.admin.ecName,
          id: this.admin.id,
          serviceMoney: this.admin.serviceMoney
        }
        if (this.isEdit) {
          editList({...editData}).then((response) => {
            if( response.code == 200){
              this.$message({
              message: "修改成功！",
              type: "success",
            });
            this.dialogVisible = false;
            this.getList();
            }
          });
        } else {
          createAdmin(this.admin).then((response) => {
            if( response.code == 200){
              this.$message({
              message: "添加成功！",
              type: "success",
            });
            this.dialogVisible = false;
            this.getList();
            }
          });
        }
      });
    },

    // 获取列表
    getList() {
      this.listLoading = true;
      channelList(this.listQuery).then((response) => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
  },
};
</script>
<style></style>
