<template>
  <div>
    <el-dialog
        title="添加"
        class="dialog-mini"
        width="500px"
        @close="close"
        :visible.sync="dialogformVisible"
      >
        <el-form :model="ruleForm" :rules="rules" ref="form" style="max-height: 500px;overflow: auto;" label-width="90px" size="small">
          <el-form-item label="店铺名称" prop="id">
            <el-select v-model="ruleForm.id" filterable  placeholder="请选择" clearable  style="width: 100%;">
              <el-option
                v-for="item in parentOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="美德积分"  prop="integral">
            <el-input v-model="ruleForm.integral"></el-input>
          </el-form-item>
          <el-form-item label="星级"  prop="stars">
            <el-input v-model="ruleForm.stars"></el-input>
          </el-form-item>
          <el-form-item label="额度" prop="quota">
            <el-input v-model="ruleForm.quota"></el-input>
          </el-form-item>
          <el-form-item label="是否授信" prop="isCredit">
            <el-select v-model="ruleForm.isCredit" placeholder="请选择"  style="width: 100%;">
              <el-option
                v-for="item in creditOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="close" >取 消</el-button>
          <el-button size="mini" type="primary" @click="submitBtn('form')">确 定</el-button>
        </div>
      </el-dialog>
      
      
  
  </div>      
  </template>
  
  <script>
  
  import {getMethodCommon,postMethodCommon } from "@/api/common"; 
  
  
  export default {
      name: "shujutianbao",
      components:{
         
      },
      data() {
          return {
            dialogformVisible: true,
            ruleForm:{
               id: '',
               shopName: '',
               integral: '',
               stars: '',
               quota: '',
               isCredit: false
            },
            rules:{
              id: [
                { required: true, message: '请选择店铺名称', trigger: 'blur' }
              ],
              integral: [
                { required: true, message: '请输入美德积分', trigger: 'blur' }
              ],
              stars: [
                { required: true, message: '请输入星级', trigger: 'blur' }
              ],
              quota: [
                { required: true, message: '请输入额度', trigger: 'blur' }
              ]
            },
            parentOptions:[],
            creditOptions:[
              { id: true , name: '是' },{ id: false , name: '否' }
            ]
          }
      },
    
      created() {
          this.getParentData()
      },
      mounted(){
          
      },
      methods: {
        close(){
          this.$emit("close")
        },
        getParentData(){
          let param = {
            pageIndex: 1,
            pageSize: 999999
          }
          this.parentOptions = []
          getMethodCommon("/ShopInfo/GetShopInfo",param).then(res =>{
            res.data.forEach(item =>{
              this.parentOptions.push({
                id: item.id,
                name: item.shopName
              })
            })
          })
        },
        submitBtn(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.submitClick();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        submitClick(){
          this.parentOptions.forEach(item =>{
            if(this.ruleForm.id == item.id){
              this.ruleForm.shopName = item.name
            }
          })
          postMethodCommon("/Shopcredit/AddShopcredit",this.ruleForm).then(res =>{
            if(res.code == 200){
              this.$emit("addSuccess");
              this.$message({
                type:"success",
                message: res.message
              })
            }
          })
        },
      }
  }
  </script>
  
  <style>
  .el-dialog__headerbtn{
    top: 0 !important;
  }
   
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px !important;
    text-align: center;
  }
  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: #eee;
    -webkit-border-radius: 10px;
  }
  </style>
  