<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form ref="config" :model="config" label-width="200px" class="demo-config">
        <el-form-item label="应用Appid：">
          <el-input v-model="config.appid" type="text" class="selWidth" />
        </el-form-item>
        <el-form-item label="应用AppSecret：">
          <el-input v-model="config.app_secret" type="text" class="selWidth" />
        </el-form-item>
        <el-form-item label="应用企业的openCorpId：">
          <el-input v-model="config.open_corp_id" type="text" class="selWidth" />
        </el-form-item>
        <el-form-item v-for="(item,index) in Object.values(template_list)" :key="index" :label="item.title">
          <el-input v-model="item.sign_task_subject" class="selWidth">
            <template slot="prepend">合同名称</template>
          </el-input>
          <el-input v-model="item.sign_template_id" class="selWidth">
            <template slot="prepend">模板ID</template>
          </el-input>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="setConfig()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {contractConfigGet, contractConfigSet} from "@/api/marketing";

export default {
  name: 'Index',
  data() {
    return {
      // 配置信息
      config: {
        appid: '',
        app_secret: '',
        open_corp_id: '',
      },
      template_list: {},
    }
  },
  mounted() {
    this.getConfig();
  },
  methods: {
    // 提交配置信息
    setConfig(){
      let _this = this;
      // 信息处理
      let config = Object.assign({}, _this.config);
      config.template_list = Object.assign({}, _this.template_list) || {};
      // 提交配置信息
      contractConfigSet(config).then((res) => {
        _this.$message.success(res.message);
        _this.getConfig();
      }).catch((res) => {
        _this.$message.error(res.message);
      });
    },
    // 获取配置信息
    getConfig(){
      let _this = this;
      contractConfigGet().then((res) => {
        _this.config = res.data || {};
        _this.template_list = Object.assign({}, res.data.template_list) || {};
      }).catch((res) => {
        _this.$message.error(res.message);
      });
    },

  }
}
</script>

<style scoped lang="scss">
.selWidth{
  width: 500px!important;
  margin-bottom: 10px!important;
}
.tips{
  padding-bottom: 5px;
  font-size: 12px;
  color: #999;
}
</style>
