<template>
  <div class="main">
      <div class="cardTitle">支付设置</div>
      <div class="search-box">
		<a-space size="large">
			<a-form-model layout="inline">
				<a-form-model-item label="商户名称">
                    <a-input placeholder="请输入商户名称"></a-input>
                </a-form-model-item>
			</a-form-model>
			<a-button type="primary" @click="handlerSearch">查 询</a-button>
			<a-button @click="handlerReset">重 置</a-button>
		</a-space>
	  </div>
      <div id="commonTable">
			<div style="margin-bottom: 16px">
				<a-button icon="plus" @click="hanlderAdd" type="primary" ghost>
					添加设置信息
				</a-button>
			</div>
            <a-table :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChange" :row-key="(record) => {return record.id}">
                <template slot="communityList" slot-scope="text,record">
                    <span v-for="(item) in record.communityList" :key="item.id">
                        {{item.name}}
                    </span>
                </template>
                <template slot="status" slot-scope="text,record">
                    <a-switch :checked="record.status==2 ? false : true" checked-children="启用" un-checked-children="停用" @change="onChange(record)" />
                </template>
                <template slot="action" slot-scope="text,record">
                    <a @click="alipayEdit(record)">编辑</a>
                    <a @click="boundEdit(record)" style="margin-left: 8px">绑定小区</a>
                    <a style="margin-left: 8px;color: red" @click="alipaySetDel(record)">删除</a>
                </template>
            </a-table>
	  </div>
      <a-drawer :title="activeMode == 1 ? '新建支付':'编辑支付'" :visible="drawerVisible" @close="drawerClose" width="512">
          <div class="drawer-content">
              <a-form-model>
                  <a-row>
                      <a-col :span="24">
                          <a-form-model-item label="商户名称">
                              <a-input v-model="alipayForm.name" placeholder="请输入"></a-input>
                          </a-form-model-item>
                          <a-form-model-item label="支付宝APPID">
                              <a-input v-model="alipayForm.alipayAppId" placeholder="请输入"></a-input>
                          </a-form-model-item>
                          <a-form-model-item label="支付宝公钥">
                              <a-textarea v-model="alipayForm.alipayPublicKey" placeholder="请输入公钥"></a-textarea>
                          </a-form-model-item>
                          <a-form-model-item label="支付宝商户公钥">
                              <a-textarea v-model="alipayForm.rsaPublicKey" placeholder="请输入公钥"></a-textarea>
                          </a-form-model-item>
                          <a-form-model-item label="支付宝商户私钥">
                              <a-textarea v-model="alipayForm.rsaPrivatKey" placeholder="请输入私钥"></a-textarea>
                          </a-form-model-item>
                          <a-form-model-item label="支付宝授权TOKEN">
                              <a-textarea v-model="alipayForm.appAuthToken" placeholder="请输入"></a-textarea>
                          </a-form-model-item>
                      </a-col>
                  </a-row>
              </a-form-model>
          </div>
          <div class="drawer-footer">
            <a-button @click="drawerClose">关闭</a-button>    
            <a-button style="margin-left: 8px" v-if="activeMode == 1" @click="alipayNext" type="primary">下一步</a-button>
            <a-button style="margin-left: 8px" v-else-if="activeMode == 2" @click="editConfirm" type="primary">确定</a-button>
          </div>  
      </a-drawer>
      <a-drawer title="绑定小区" :visible="boundVisible" @close="boundClose" width="512">
          <div>全部小区</div>
          <a-switch checked-children="开" un-checked-children="关" @change="selectAll"></a-switch>
          <a-divider></a-divider>
          <a-checkbox-group v-model="boundForm.communityIds" @change="cgChange">
              <a-row>
                  <a-col style="padding: 6px" :span="24" v-for="(item, index) in comList" :key="index">
                      <a-checkbox :value="item.id">
                          {{item.name}}
                      </a-checkbox>
                  </a-col>
              </a-row>
          </a-checkbox-group>
          <div class="drawer-footer">
            <a-button @click="boundClose">取消</a-button>    
            <a-button @click="boundConfirm" type="primary">保存</a-button>
          </div>  
      </a-drawer>
  </div>
</template>

<script>
import {alipayList, isEnable, alipayDelete, alipayUpdate} from "@/api/manage"
import {alipayInsert, alipayBound, findBindById, findInfoById} from "@/api/manage"
import {getAllCommunityInfo} from "@/api/basic/console"
export default {
    name: 'PaymentSet',
    data() {
        return {
            form: {
                name: ''
            },
            alipayForm: {
                name: '',
                alipayAppId: '',
                alipayPublicKey: '',
                rsaPublicKey: '',
                rsaPrivatKey: '',
                appAuthToken: ''
            },
            boundForm: {
                alipaySettingId: undefined,
                communityIds: []
            },
            tableData: [],
            columns: [
                {
					title: "商户名称",
					dataIndex: "name",
					width: "200",
				},
                {
					title: "绑定小区",
					dataIndex: "communityList",
					width: "200",
                    scopedSlots: { customRender: "communityList" },
				},
                {
					title: "状态",
					dataIndex: "status",
					width: "200",
                    scopedSlots: { customRender: "status" },
				},
                {
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: "180",
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
            ],
            pagination: {
                current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
            },
            //新建 编辑抽屉
            activeMode: 1, //1新增 2编辑
            activeId: undefined,
            drawerVisible: false,
            //绑定小区抽屉
            comList: [],
            boundVisible: false,
        }
    },
    mounted() {
        this.getApi();
        this.getData()
    },
    methods: {
        getApi() {
            getAllCommunityInfo().then(res => {
                let data = res.data;
                this.comList = data;
            })
        },
        getData() {
            let obj = {pageNum: this.pagination.current, size: this.pagination.pageSize, name: this.form.name};
            alipayList(obj).then(res => {
                let data = res.data.rows;
                this.pagination.total = res.data.total;
                this.tableData = data;
            })
        },
        handlerSearch() {

        },
        handlerReset() {

        },
        hanlderAdd() {
            this.activeMode = 1;
            this.alipayForm = {
                name: '',
                alipayAppId: '',
                alipayPublicKey: '',
                rsaPublicKey: '',
                rsaPrivatKey: '',
                appAuthToken: ''
            },
            this.drawerVisible = true;
        },
        //点击编辑的回调
        alipayEdit(record) {
            this.activeMode = 2;
            findInfoById({alipaySettingId: record.id}).then(res => {
                let data = res.data;
                this.activeId = data.id;
                this.alipayForm.name = data.name;
                this.alipayForm.alipayAppId = data.alipayAppId;
                this.alipayForm.alipayPublicKey = data.alipayPublicKey;
                this.alipayForm.appAuthToken = data.appAuthToken;
                this.alipayForm.rsaPrivatKey = data.rsaPrivatKey;
                this.alipayForm.rsaPublicKey = data.rsaPublicKey;
            })
            this.drawerVisible = true;
        },
        //点击绑定小区的回调
        boundEdit(record) {
            this.boundForm.alipaySettingId = record.id;
            findBindById({alipaySettingId: record.id}).then(res => {
                let data = res.data;
                this.boundForm.communityIds = data.communityIds
            })
            this.boundVisible = true;
        },
        //分页
        pageChange(val) {
            this.pagination.pageSize = val.pageSize;
            this.pagination.current = val.current;
            this.getData()
        },
        //改变状态
        onChange(record) {
            let obj = {alipaySettingId: record.id}
            isEnable(obj).then(res => {
                if (res.code === 200) {
					this.$message.success(res.msg);
					this.getData();
				} else {
					this.$message.error(res.msg);
				}
            })
        },
        //删除
        alipaySetDel(record) {
            let obj = {alipaySettingIds : [record.id]};
            this.$confirm({
                    title: "是否删除？",
                    icon:'close',
                    onOk:async()=>{
                    let res = await alipayDelete(obj);
                    if (res.code === 200) {
                        this.$message.success(res.msg);
                        this.getData();
                    } else {
                        this.$message.error(res.msg);
                    }
                },
            })
        },
        //抽屉
        drawerClose() {this.drawerVisible = false},
        boundClose() {this.boundVisible = false},
        alipayNext() {
            alipayInsert(this.alipayForm).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg);
                    this.getData();
                    this.drawerVisible = false;
                    // this.boundVisible = true;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        //编辑确认
        editConfirm() {
            let obj = Object.assign({}, this.alipayForm, {id: this.activeId})
            alipayUpdate(obj).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg);
                    this.getData();
                    this.drawerVisible = false;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        //绑定页面
        cgChange(val) {
            this.boundForm.communityIds = val
        }, //小区全选
        selectAll(val) {
            if(val == true) {
                let arr = []
                getAllCommunityInfo().then(res => {
                    let data = res.data;
                    data.forEach(ele => {
                        arr.push(ele.id)
                    })
                });
                this.boundForm.communityIds = arr
            } else {
                this.boundForm.communityIds = []
            }
        },
        boundConfirm() {
            alipayBound(this.boundForm).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg);
                    this.getData();
                    this.boundForm = {alipaySettingId: undefined, communityIds: []}
                    this.boundVisible = false;
                } else {
                    this.$message.error(res.msg);
                }
            })
        }
    }
}
</script>

<style>

</style>