<template>
    <div class="cpList">
        <div class="head">
            <div class="text flex-start">
                <el-input placeholder="请输入内容" v-model="params.cpName" clearable>
                    <template slot="prepend">CP公司</template>
                </el-input>

                <el-input placeholder="请输入内容" v-model="params.linkMan" clearable>
                    <template slot="prepend">联系人</template>
                </el-input>
            </div>
            <div class="action">
                <el-button plain type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
                <el-button
                        plain
                        type="success"
                        icon="el-icon-circle-plus-outline"
                        @click="handelOpenDialog"
                >新增
                </el-button>
            </div>
        </div>

        <div class="list">
            <el-table
                    :data="cpList.slice((curPage-1)*pageSize,curPage*pageSize)"
                    border
                    stripe
                    :fit="false"
                    height="100%"
            >
                <el-table-column label="序号" type="index" width="80" show-overflow-tooltip/>
                <el-table-column label="CP公司名称" prop="cpName" width="150" show-overflow-tooltip/>
                <el-table-column label="联系人" prop="linkMan" width="150" show-overflow-tooltip/>
                <el-table-column label="职位" prop="position" width="150" show-overflow-tooltip/>
                <el-table-column label="联系电话" prop="linkPhone" width="150" show-overflow-tooltip/>
                <el-table-column label="地址" prop="address" width="150" show-overflow-tooltip/>
                <el-table-column label="备注" prop="remark" width="150" show-overflow-tooltip/>
                <el-table-column label="创建时间" prop="createTime" width="150" show-overflow-tooltip/>
                <el-table-column label="更新时间" prop="updateTime" width="150" show-overflow-tooltip/>

                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <div class="headrow">
                            <el-button size="mini" @click="handelUpdate(scope.row.cpId)">编辑</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="pageSize"
                    :current-page="curPage"
                    :pager-count="11"
                    :total="total"
            ></el-pagination>
        </div>

        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                center
                width="500px"
                :rules="rules"
                ref="ruleForm"
        >
            <div class="content">
                <el-form
                        label-width="100px"
                        label-position="left"
                        style="width:400px;"
                        class="demo-ruleForm"
                        :model="dialogModel"
                        :rules="rules"
                        ref="ruleForm"
                >
                    <el-form-item label="CP公司名称" prop="cpName">
                        <el-input v-model="dialogModel.cpName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="linkMan">
                        <el-input v-model="dialogModel.linkMan"></el-input>
                    </el-form-item>
                    <el-form-item label="职位" prop="position">
                        <el-input v-model="dialogModel.position"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="linkPhone">
                        <el-input v-model="dialogModel.linkPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="dialogModel.address"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="dialogModel.remark"></el-input>
                    </el-form-item>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handelDialogConform">确 定</el-button>
        <el-button @click="handelCancel">取 消</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
  import cpApi from "@/api/cp";
  import {getCookie, getLastDay, formatTime} from "@/utils/util";

  export default {
    name: "cpList",
    data() {
      return {
        isUpdate: false,
        rules: {
          cpName: [{required: true, message: "请输入CP公司名称", trigger: "blur"}]
        },
        userId: "",
        cpList: [],
        total: 0,
        pageSize: 20,
        curPage: 1,
        params: {},
        dialogVisible: false,
        dialogTitle: '',
        dialogModel: {},
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        cpApi.getList(this.params).then(res => {
          this.$log.debug(res);
          this.total = res.length;
          this.cpList = res;
        });
      },

      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.curPage = val;
      },
      handelLogTimeChange(val) {
        this.params.logStartTime = val ? val[0] : null;
        this.params.logEndTime = val ? val[1] : null;
        this.$log.debug(this.params);
      },
      handelPayTimeChange(val) {
        this.params.payStartTime = val ? val[0] : null;
        this.params.payEndTime = val ? val[1] : null;
        this.$log.debug(this.params);
      },
      handelLoginTimeChange(val) {
        this.params.loginStartTime = val ? val[0] : null;
        this.params.loginEndTime = val ? val[1] : null;
        this.$log.debug(this.params);
      },
      handelOpenDialog() {
        this.dialogTitle = '新增CP公司信息'
        this.isUpdate = false
        this.dialogVisible = true
      },
      handelDialogConform() {
        if (this.isUpdate) {
          cpApi.update(this.dialogModel).then(res => {
            this.dialogVisible = false;
            this.$refs["ruleForm"].resetFields();
            this.getList();
            this.isUpdate = false;
            this.dialogModel = {};
            this.$message({
              type: "success",
              message: "修改成功!"
            });
          });
        } else {
          this.dialogModel.logSysId = this.userId;
          cpApi.add(this.dialogModel).then(res => {
            this.dialogVisible = false;
            this.$refs["ruleForm"].resetFields();
            this.getList();
            this.isUpdate = false;
            this.dialogModel = {};
            this.$message({
              type: "success",
              message: "添加成功!"
            });
          });
        }
      },
      handelDelete(id) {
        if (id) {
          let dto = {};
          dto.id = id;
          dto.isDelete = 0;
          this.$confirm("此操作将永久该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              cpApi.updateVip(dto).then(res => {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
        }
      },
      handelUpdate(id) {
        cpApi.getById(id).then(res => {
          if (res) {
            this.dialogModel = res;
            this.isUpdate = true;
            this.dialogVisible = true;
          }
        });
      },
      handelCancel() {
        this.isUpdate = false;
        this.dialogModel = {};
        this.$refs["ruleForm"].resetFields();
        this.dialogVisible = false;
      }
    }
  };
</script>

<style lang="less" scoped>
    .cpList {
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .head {
            margin: 4px;

            .text {
                .el-input {
                    margin: 4px;
                    width: 25%;
                }

                .range {
                    margin: 4px;
                    width: 25%;

                    .el-input {
                        width: 45%;
                    }
                }

                .el-select {
                    margin: 4px;
                    width: 25%;
                }
            }

            .select {
                .el-select {
                    margin: 4px;
                    width: 25%;
                }
            }

            .interval {
                .el-range-editor {
                    margin: 4px;
                    width: 33%;
                }
            }

            .action {
                margin: 4px;
            }
        }
    }
</style>
