<template>
  <div>
    <el-row>
      <basic-container>
        <el-dialog @close="dialogShow=false" append-to-body :close-on-click-modal="false" :visible.sync="dialogShow"
                   :destroy-on-close="true" title="公众号配置" width="70%">
          <avue-form v-model="configForm" :option="configOption" @reset-change="refreshChange" @submit="(data,done)=>{submit(data,done)}">
            <template slot="appIdList">
              <el-button type="primary" round icon="el-icon-plus" @click="addAppIdList"></el-button>
              <el-divider/>
              <div class="el-card box-card" v-for="(appIdListOption,index) in configOptionByAppIdList" :key="index" style="margin-bottom: 10px">
                <div slot="header" class="clearfix" style="padding: 5px">
                  <el-tag>支付appId配置</el-tag>
                  <el-button type="danger" style="float: right;" round icon="el-icon-minus" @click="removeAppIdList(index)"></el-button>
                </div>
                <el-divider/>
                <avue-form ref="form" v-model="configForm.appIdList[index]" :option="appIdListOption"></avue-form>
              </div>
            </template>
          </avue-form>
        </el-dialog>
        <el-col style="padding: 10px 0 10px 0;">
          <el-button type="primary" size="small" plain icon="el-icon-setting" @click="openDialog()">配置
          </el-button>
        </el-col>
        <template>
          <el-table :data="parentData" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-col span="12">
                  <el-table :data="props.row.appIdList" style="width: 100%" stripe size="small">
                    <el-table-column label="appId列表" header-align="center">
                      <el-table-column label="支付appId" prop="appId"></el-table-column>
                      <el-table-column label="appId类型" prop="appIdType"></el-table-column>
                      <el-table-column label="推荐关注appId" prop="subscribeAppId"></el-table-column>
                      <el-table-column label="配置状态" prop="status"></el-table-column>
                      <el-table-column label="失败原因" prop="failReason"></el-table-column>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col span="12">
                  <el-table :data="props.row.tradeAuthDirList" style="width: 100%" stripe size="small">
                    <el-table-column label="支付授权目录列表" header-align="center">
                      <el-table-column label="支付授权目录" prop="tradeAuthDir"></el-table-column>
                      <el-table-column label="配置状态" prop="status"></el-table-column>
                      <el-table-column label="失败原因" prop="failReason"></el-table-column>
                    </el-table-column>
                  </el-table>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column label="报备商户号" prop="reportMerchantNo"></el-table-column>
          </el-table>
        </template>
      </basic-container>
    </el-row>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getWechatConfigQuery,wechatConfigAdd} from "@/api/yeepay/wechat-config";

export default {
  data() {
    return {
      dialogShow: false,
      parentData: [],
      configForm: {
        tradeAuthDirList :[],
        appIdList:[]
      },
      configOption: {
        submitText: '完成',
        emptyBtn: false,
        labelWidth: 150,
        size: "mini",
        column: [
          {
            label: "支付授权目录",
            span: 24,
            prop: "tradeAuthDirList",
            type: "array",
          },
          {
            label: "支付appId目录列表",
            span: 24,
            prop: "appIdList",
            type: "array",
            shot: true,
          },
        ]
      },
      configOptionByAppIdList:[]
    }
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    init() {
      getWechatConfigQuery().then(res => {
        this.parentData = res.data.data;
      });
    },
    openDialog() {
      this.dialogShow = true
      if (this.canReset) {
        this.refreshChange()
      }
      this.canReset = true
    },
    submit(data,done){
      wechatConfigAdd(data).then(res=>{
        this.configForm = {
          tradeAuthDirList:[],
          appIdList:[]
        };
        this.$message.success("提交成功");
        done();
      },error => done());
    },
    refreshChange() {
      this.init();
    },
    addAppIdList(){
      const column = {
        labelWidth: 120,
        size:"mini",
        menuBtn:false,
        column: [
          {
            label: "appId",
            span: 24,
            prop: "appId",
          },
          {
            label: "appSecret",
            span: 24,
            prop: "appSecret",
          },
          {
            label: "appIdType",
            span: 24,
            prop: "appIdType",
            type: "select",
            dicData:[
              {
                label:"公众号",
                value:"OFFICIAL_ACCOUNT"
              },
              {
                label:"小程序",
                value:"MINI_PROGRAM"
              },
            ]
          },
          {
            label: "subscribeAppId",
            span: 24,
            prop: "subscribeAppId",
          },
        ]
      }
      this.configOptionByAppIdList.push(column);
    },
    removeAppIdList(index){
      this.configOptionByAppIdList.splice(index,1);
      this.configForm.appIdList.splice(index,1);
    }
  }
}
;
</script>

<style>
.name {
  font-family: inherit;
  font-size: inherit;
  border-color: #E4E7ED;
  color: #606266;
  margin-left: 15px;
  text-align: center;
}
.el-card .el-divider--horizontal{
  margin: 0 0 5px 0 !important;
}
</style>
