<template>
  <div>
    <i-page-header class="product_tabs" title="基本设置"></i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <el-tabs v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane label="基本配置" style="background: #fff;" name="sys">
          <el-form ref="form" :model="form" label-width="150px" >
            <el-divider content-position="left">基本数据</el-divider>
            <Row :gutter="24">
              <Col span="12">
                <el-form-item label="平台名称">
                  <el-input v-model="form.title"></el-input>
                </el-form-item>
              </Col>
            </Row>
			<Row :gutter="24">
			  <Col  span="12">
			    <el-form-item label="资源域名">
			      <el-input v-model="form.system_url"></el-input>
			    </el-form-item>
			  </Col>
			</Row>
            <el-divider content-position="left">系统信息</el-divider>
            <el-form-item label="平台说明">
              <el-input type="textarea"
                        placeholder="请输入平台说明信息"
                        :autosize="{ minRows: 6, maxRows: 30}"
                        v-model="form.tag"></el-input>
            </el-form-item>
			
			<el-form-item label="客服电话">
			  <el-input placeholder="请输入客服电话" v-model="form.custom_tel" style="width: 200px;"></el-input>
			</el-form-item>
			
			<!-- <el-divider content-position="left">商城设置</el-divider>
			<Row :gutter="24">
			  <Col  span="12">
			    <el-form-item label="IP商品收益百分比">
			      <el-input v-model="form.ip_income_per" style="width: 200px;"><template slot="append">%</template></el-input>
			    </el-form-item>
			  </Col>
			  
			  <Col  span="12">
			    <el-form-item label="推广用户收益百分比">
			      <el-input v-model="form.tree_income_per" style="width: 200px;"><template slot="append">%</template></el-input>
			    </el-form-item>
			  </Col>
			</Row>
			<Row :gutter="24">
			  
			  <Col  span="12">
			    <el-form-item label="消费转积分百分比">
			      <el-input v-model="form.money_to_score_per" style="width: 200px;"><template slot="append">%</template></el-input>
			    </el-form-item>
			  </Col>
			  <Col  span="12">
			    <el-form-item label="二级推广收益百分比">
			      <el-input v-model="form.tree_income_per_two" style="width: 200px;"><template slot="append">%</template></el-input>
			    </el-form-item>
			  </Col>
			</Row>
			<el-divider content-position="left">提现配置</el-divider>
			<Row :gutter="24">
			  <Col span="12">
			    <el-form-item label="提现最低限额">
					<el-input placeholder="单位:元"  type="number" v-model="form.tx_limit_money"><template slot="append">元</template></el-input>
					<div>提现最低限额，满额提现</div>
			    </el-form-item>
			  </Col>
			  <Col span="12">
			    <el-form-item label="提现手续费">
			  		<el-input placeholder="单位:%"  type="number" v-model="form.tx_process_per"><template slot="append">%</template></el-input>
			  		<div>提现手续费用比例</div>
			    </el-form-item>
			  </Col>
			</Row>
			<Row :gutter="24">
			  <Col span="12">
			    <el-form-item label="提现手续费上限">
					<el-input placeholder="单位:元"  type="number" v-model="form.tx_process_max"><template slot="append">元</template></el-input>
					<div>提现手续费上限</div>
			    </el-form-item>
			  </Col>
			</Row> -->
			
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即修改</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
		<el-tab-pane label="分享配置" style="background: #fff;" name="share">
			<el-form ref="shareForm" :model="shareForm" label-width="150px" >
				<el-divider content-position="left">分享信息</el-divider>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="分享标题">
							<el-input v-model="shareForm.title" placeholder="请输入分享标题"></el-input>
						</el-form-item>
					</Col>
				</Row>
				
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="分享图片">
							
							<div class="fx-r fx-bc">
								<div class="fx-r fx-bc fx-ac" v-if="shareForm.img" style="border: 1px dashed #d9d9d9;width: 82px;height: 82px;margin-right:12px;border-radius: 6px;cursor: pointer;overflow: hidden;">
									<img  v-lazy="shareForm.img" :src="shareForm.img" v-image-preview style="display: block;height: 100%;"/>
								</div>
								<ui-upload
								  :upUrl="upUrl"
								  :fileName="'上传'"
								  :headers="upHeaders"
								  :updata="{isz:0,code:'share'}"
								  @onUpload="onUpload"
								>
								</ui-upload>
							</div>
							
						</el-form-item>
					</Col>
				</Row>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="分享描述">
							<el-input type="textarea" placeholder="请输入描述信息" :autosize="{ minRows: 2, maxRows: 2}" v-model="shareForm.content"></el-input>
						</el-form-item>
					</Col>
				</Row>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="分享路径">
							<el-input v-model="shareForm.query" placeholder="请输入分享路径"></el-input>
						</el-form-item>
					</Col>
				</Row>
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">立即修改</el-button>
			    <el-button>取消</el-button>
			  </el-form-item>
			</el-form>
		</el-tab-pane>
		<el-tab-pane label="邀请配置" style="background: #fff;" name="invite">
			<el-form ref="inviteForm" :model="inviteForm" label-width="150px" >
				<el-divider content-position="left">邀请信息</el-divider>
				
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="邀请海报">
							<div class="fx-r fx-bc">
								<div class="fx-r fx-bc fx-ac" v-if="inviteForm.img" style="border: 1px dashed #d9d9d9;width: 82px;height: 82px;margin-right:12px;border-radius: 6px;cursor: pointer;overflow: hidden;">
									<img  v-lazy="inviteForm.img" :src="inviteForm.img" v-image-preview style="display: block;height: 100%;"/>
								</div>
								<ui-upload
								  :upUrl="upUrl"
								  :fileName="'上传'"
								  :headers="upHeaders"
								  :updata="{isz:0,code:'invite'}"
								  @onUpload="onUpload"
								>
								</ui-upload>
							</div>
						</el-form-item>
					</Col>
				</Row>
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">立即修改</el-button>
			    <el-button>取消</el-button>
			  </el-form-item>
			</el-form>
		</el-tab-pane>
<!-- 		<el-tab-pane label="微信配置" style="background: #fff;" name="weixin">
			<el-form ref="weixinForm" :model="weixinForm" label-width="150px" >
				<el-divider content-position="left">分享信息</el-divider>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="APPID">
							<el-input v-model="weixinForm.appid" placeholder="请输入小程序APPID"></el-input>
						</el-form-item>
					</Col>
				</Row>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="SECRET">
							<el-input v-model="weixinForm.secret" placeholder="请输入小程序SECRET"></el-input>
						</el-form-item>
					</Col>
				</Row>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="商户号">
							<el-input v-model="weixinForm.mchid" placeholder="请输入小程序商户号"></el-input>
						</el-form-item>
					</Col>
				</Row>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="微信支付V2KEY">
							<el-input v-model="weixinForm.apiv2key" placeholder="请输入微信支付V2KEY"></el-input>
						</el-form-item>
					</Col>
				</Row>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="apiclient_key">
							<el-upload  
								:action="certUrl" 
								:data="{isz:0,type:'apiclient_key'}" 
								:show-file-list="false" 
								:headers="upHeaders" 
								:on-success="handleUploadSuccessKey"
								:on-error="handleUploadError"
								:before-upload="beforeUploadUpload">
								<el-input v-model="weixinForm.apiclient_key" placeholder="请上传apiclient_key" readonly="readonly"></el-input>
							</el-upload>
						</el-form-item>
					</Col>
				</Row>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="apiclient_cert">
							<el-upload
							    style="width: 100%;"
								:action="certUrl" 
								:data="{isz:0,type:'apiclient_cert'}" 
								:show-file-list="false" 
								:headers="upHeaders" 
								:on-success="handleUploadSuccessCert"
								:on-error="handleUploadError"
								:before-upload="beforeUploadUpload">
								<el-input v-model="weixinForm.apiclient_cert" placeholder="请上传apiclient_cert" readonly="readonly"></el-input>
							</el-upload>
						</el-form-item>
					</Col>
				</Row>
				<Row :gutter="24">
					<Col span="12">
						<el-form-item label="微信支付回调">
							<el-input v-model="weixinForm.notify_url" placeholder="请输入微信支付回调" ></el-input>
						</el-form-item>
					</Col>
				</Row>
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">立即修改</el-button>
			    <el-button>取消</el-button>
			  </el-form-item>
			</el-form>
			
		</el-tab-pane> -->
	  </el-tabs>
    </Card>
  </div>

</template>
<script>
    import UiUpload from "../../../../ui/upload/index";
    import Setting from "../../../../setting";
    import {SystemSave, SystemSys} from "../../../../api/system/sys";
    import util from "../../../../libs/util";
    import IPageHeader from "../../../../layouts/system/page-header/index";
    export default {
        name: "index",
        components: {IPageHeader, UiUpload},
        computed: {},
        data() {
            return {
                upHeaders:{},
                upUrl  :"",
				certUrl:"",
				activeName:"sys",
				shareForm:{
					title:"",
					content:"",
					img:"",
					query:""
				},
				weixinForm:{
					appid:"",
					secret:"",
					mchid:"",
					apiv2key:"",
					apiclient_key:"",
					apiclient_cert:"",
					notify_url:""
				},
				inviteForm:{
					img:"",
				},
                form  : {
                    title     : "",
                    system_url       : "",
                    tag       : "",
					custom_tel:"",
					// ip_income_per:"",
					// tree_income_per:"",
					// tree_income_per_two:"",
					// money_to_score_per: "",
					// tx_limit_money:"",
					// tx_process_per:"",
					// tx_process_max:"",
                }
            }
        },

        created() {
            var upHeaders = {};
            //上传路径
            this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
			this.certUrl = Setting.apiBaseURL + "/systemv1/upload/uploadCertFile"
            //上传header数据
            const token = util.cookies.get('system_token');
            if (token) {
                upHeaders['SYSTEM-ACC-TOKEN'] = token;
            }
            this.upHeaders = upHeaders;
        },

        mounted(){
            this.$utils.loading(this,"loading..");
            SystemSys()
                .then(res=>{
                    this.$utils.loadingClose();
                    if(res.code == 200) {
                        this.form = res.data;
						this.weixinForm = res.data.wxconfig;
						this.shareForm = res.data.shareconfig;
						this.inviteForm = res.data.inviteconfig;
                    } else {
                        this.$alert(res.msg);
                    }
                })
                .catch(err=>{
                    this.$utils.loadingClose();
                    this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                });
        },

        methods: {
			handleClick(tab, event) {},
            /**
             * 提交数据
             */
            onSubmit:function () {
				let post = null;
				if(this.activeName=="sys"){
					post = this.form;
					post.saveType = "sys";
				}
				if(this.activeName=="weixin"){
					post = this.weixinForm;
					post.saveType = "weixin";
				}
				if(this.activeName=="share"){
					post = this.shareForm;
					post.saveType = "share";
				}
				if(this.activeName=="invite"){
					post = this.inviteForm;
					post.saveType = "invite";
				}
				if(post==null) return;
				this.$utils.loading(this,"加载中...");
                SystemSave(post).then(res=>{
                    this.$utils.loadingClose();
                    if(res.code == 200) {
                        this.$message({message: '恭喜你，修改成功',type: 'success'});
                    } else {
                        this.$alert(res.msg);
                    }
                }).catch(err=>{
                    this.$utils.loadingClose();
                    this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                });
            },
			onUpload:function (res) {
			    if(res.code == -1) {
			        Notice.error({ title : "系统提示", content:res.msg});
			    } else {
					if(this.activeName=='share') this.shareForm.img = res.data.img;
					if(this.activeName=='invite') this.inviteForm.img = res.data.img;
			    }
			},
			onPreview:function(res){
				console.log(res)
			},
			//key文件
			handleUploadSuccessKey(res, file){
				this.$utils.loadingClose();
				if(res.code==-1){
					Notice.error({ title : "系统提示", content:res.msg});
				}else{
					this.weixinForm.apiclient_key = res.data.cert;
				}
			},
			//Cert文件
			handleUploadSuccessCert(res, file){
				this.$utils.loadingClose();
				if(res.code==-1){
					Notice.error({ title : "系统提示", content:res.msg});
				}else{
					this.weixinForm.apiclient_cert = res.data.cert;
				}
			},
			
			
			beforeUploadUpload(file) {
			    this.$utils.loading(this,"上传中..");
			},
			handleUploadSuccess(res, file) {
			    this.$utils.loadingClose();
			    
			},
			handleUploadError:function (err, file, fileList) {
			    this.$utils.loadingClose();
			  //  this.$message.error(err);
			    console.log(err);
			}
        }
    }
</script>
<style scoped>
	.el-upload{width: 100%;}
</style>
