<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
      <el-form-item label="客户名称" prop="appName">
        <el-input
          v-model="queryParams.appName"
          clearable
          placeholder="请输入客户名称"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="客户编码" prop="appCode">
        <el-input
          v-model="queryParams.appCode"
          clearable
          placeholder="请输入客户编码"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" clearable placeholder="系统内置">
          <el-option
            v-for="dict in dict.type.sys_yes_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['pay:customer:add']"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['pay:customer:export']"
          icon="el-icon-download"
          plain
          size="mini"
          type="warning"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-empty description="暂无支付客户" v-if="customerList.length==0"></el-empty>
    <el-row :gutter="10">
      <el-col :span="8" v-for="customer in customerList">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 19px ; font-weight: 700">{{ customer.appName }}</span>
            <el-switch style="float: right; padding: 5px; margin: 3px 5px"
                       v-model="customer.status"
                       active-value="Y"
                       inactive-value="N"
                       @change="updStatus(customer.status,customer.id)"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
            <el-button type="primary" icon="el-icon-edit" style="float: right; padding: 5px; margin: 0 5px" circle
                       @click="handleUpdate(customer.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" style="float: right; padding: 5px; margin: 0 5px" circle
                       @click="handleDelete(customer)"></el-button>
          </div>
          <div>
            <el-descriptions class="margin-top" :column="1" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  客户名称
                </template>
                {{ customer.appName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  客户编码
                </template>
                {{ customer.appCode }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  创建人
                </template>
                {{ customer.createBy }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  创建时间
                </template>
                {{ customer.createTime }}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider>客户近五笔交易记录</el-divider>
            <el-table
              :data="customer.orderPaySimpleRespsList"
              style="width: 100%">
              <el-table-column
                prop="cusOrderNumber"
                label="客户单号"
                width="105">
              </el-table-column>
              <el-table-column
                prop="payOrderNumber"
                label="支付单号"
                width="105">
              </el-table-column>
              <el-table-column
                prop="price"
                label="支付金额"
                width="105">
              </el-table-column>
              <el-table-column
                prop="channelTypeName"
                label="渠道商类型"
                width="105">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <el-dialog
      :title="title"
      :visible.sync="open"
      width="50%">

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="客户编码" prop="appCode">
          <span v-if="this.form.id!=null" style="font-size: 16px">{{ form.appCode }}</span>
          <el-select v-if="this.form.id==null" v-model="form.appCode" placeholder="请选择">
            <el-option
              v-for="item in appCodeList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称" prop="appName">
          <el-input v-model="form.appName" placeholder="请输入参数名称"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in dict.type.sys_yes_no"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入内容" type="textarea"/>
        </el-form-item>
        <el-form-item label="客户描述" prop="appDesc">
          <editor v-model="form.appDesc" :min-height="192"/>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,

import {
  addCustomer,
  customerAll,
  deleteById,
  disable,
  enable,
  findById,
  getList,
  updateCustomer
} from "@/api/pay/customer";

export default {
  name: "Customer",
  dicts: ['sys_yes_no'],
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      appCodeList: [],
      rules: {
        appName: [
          {required: true, message: "客户名称不能为空", trigger: "blur"}
        ],
        appCode: [
          {required: true, message: "请选择客户编码", trigger: "change"}
        ],
        status: [
          {required: true, message: "请选择客户状态", trigger: "blur"}
        ]
      },
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        appName: "",
        appCode: "",
        status: "Y"
      },
      value: true,
      open: false,
      form: {
        appName: "",
        appCode: "",
        appDesc: "",
        status: "Y",
        remark: ""
      },
      title: "",
      customerList: [],
    };
  },

  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    updStatus(status, id) {
      if (status == "N") {
        disable(id).then(res => {
          this.getList();
          this.$modal.msgSuccess("禁用成功");
        })
      } else if (status == "Y") {
        enable(id).then(res => {
          this.getList();
          this.$modal.msgSuccess("启用成功");
        })
      }
    },
    handleExport() {

    },
    /** 删除按钮操作 */
    handleDelete(customer) {
      this.$modal.confirm('是否确认删除客户编码为"' + customer.appCode + '"的客户吗？').then(function () {
        return deleteById(customer.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    handleUpdate(id) {
      this.reset();
      findById(id).then(res => {
        this.form = res.data;
      })
      this.open = true;
      this.title = "修复支付单客户";
    },
    handleAdd() {
      this.reset();
      customerAll().then(res => {
        this.appCodeList = res.data;
      })
      this.open = true;
      this.title = "添加支付单客户";
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        appName: "",
        appCode: "",
        appDesc: "",
        status: "Y",
        remark: ""
      };
      this.resetForm("form");
      this.appCodeList = [];
    },
    getList() {
      getList(this.queryParams).then(res => {
        this.customerList = res.data
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
.el-card {
  margin: 10px 0;
}
</style>
