@extends('layouts.base')

@section('content')
@section('title', trans('发票设置'))
@include('public.admin.box-item')
<style scoped>
  .el-form{
    width: 1200px;
  }
  .el-switch__core{
    background-color: #ccc;
  }
  .tips{
    font-size: 14px;
    color: rgb(232, 63, 63);
    line-height: 30px;
  }
  .fixed {
    width: calc(100% - 250px);
    padding: 7px;
    padding-top: 10px;
    position: fixed;
    bottom: 0px;
    z-index: 1999;
    box-sizing: border-box;
    box-shadow: 0px -1px 10px rgb(0 0 0 / 10%);
    margin-left: -14px;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
  }

  .fixed_box {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body{
    background-color: #eff3f6;
  }
  .all{
    margin-bottom: 80px;
  }
  [v-cloak]{display: none;}
</style>
<div class="all">
  <div id="app" v-cloak>
    <box-item text="基础设置">
      <el-form ref="form" :model="form" label-width="260px">
        <el-form-item label="插件开关">
          <el-switch v-model="form.is_open" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="发票类型">
          <el-checkbox-group v-model="form.invoice_type">
            <el-checkbox label="0">电子发票</el-checkbox>
            <el-checkbox label="1">纸质发票</el-checkbox>
            <el-checkbox label="2">专用发票</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="发票内容">
          <el-checkbox-group v-model="form.content">
            <el-checkbox label="0">商品明细</el-checkbox>
            <el-checkbox label="1">商品类型</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="开发票事件">
          <el-radio-group v-model="form.invoicing_event">
            <el-radio :label="0">订单付款后</el-radio>
            <el-radio :label="1">订单完成后</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否允许补开发票">
          <el-switch v-model="form.is_repair"  :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="补开时长">
          <el-input placeholder="" v-model="form.repair_duration">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="发票须知">
          <tinymceee v-model="form.notice"></tinymceee>
        </el-form-item>
      </el-form>
    </box-item>
    <box-item text="发票设置">
      <el-form :model="form" ref="ruleForm"  label-width="260px" :rules="rules()">
        <el-form-item :label="item.label" v-for="(item,i) in labelList" :key="i"  :prop="item.model">
          <template v-if="item.tips">
            <el-input :placeholder="'请输入'+item.label" v-model="form[item.model]" :disabled="disabled"></el-input>
            <div class="tips" >[[item.tips]]</div>
          </template>
          <el-input :placeholder="'请输入'+item.label" v-model="form[item.model]" v-else></el-input>

        </el-form-item>
      </el-form>
    </box-item>
    <div class="fixed">
      <div class="fixed_box">
        <el-button type="primary" @click="Submit('ruleForm')">提交</el-button>
      </div>
    </div>
  </div>
</div>
<script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
@include('public.admin.tinymceee')
<script>
  const vm = new Vue({
    el:"#app",
    delimiters: ['[[', ']]'],
    data(){
      return {
        form:{
          is_open:0,
          invoice_type:[],
          content:[],
          invoicing_event:1,
          is_repair:1,
          repair_duration:"",
          msg:"",
          appid:"",
          app_secret:"",
          enterprise_name:"",
          taxpayer_number:"",
          enterprise_equipment:"",
          address:"",
          mobile:"",
          bank:"",
          bank_admin:"",
          billing_payee:"",
          invoice_reviewer:"",
          invoice_drawer:""
        },
        disabled:false,
        labelList:[
          {label:"App_Id",model:"appid"},
          {label:"App_Secret",model:"app_secret"},
          {label:"企业名称",model:"enterprise_name",tips:"注：企业名称提交后不能进行修改，提交前请确认是否填写正确"},
          {label:"纳税人识别号",model:"taxpayer_number",tips:"注：纳税人识别号提交后不能进行修改，提交前请确认是否填写正确"},
          {label:"企业税控设备",model:"enterprise_equipment"},
          {label:"地址",model:"address"},
          {label:"电话",model:"mobile"},
          {label:"开户行",model:"bank"},
          {label:"开户行账号",model:"bank_admin"},
          {label:"开票收款人",model:"billing_payee"},
          {label:"发票复核人",model:"invoice_reviewer"},
          {label:"发票开票人",model:"invoice_drawer"},
          // {label:"发送人邮箱",model:"send_email"},
        ]
      }
    },
    created(){
      this.getdata();
    },
    methods:{
      rules(message){
        let rules = {};
        this.labelList.forEach(item=>{
          rules[item.model] = [{ required: true, message: '请输入'+ item.label, trigger: 'blur' },]
        })
        return rules
      },
      getdata(){
        this.$http.get("{!! yzWebFullUrl('plugin.invoice.admin.setting.set') !!}").then(({data})=>{
          if (data.result==1) {
            if(data.data){
              this.form = data.data;
              this.disabled = true;
            };
            if (this.form.enterprise_name == "" || this.form.taxpayer_number == "") {
              this.disabled = false;
            }
          }
          else this.$message.error(data.msg);
        })
      },
      settingSet(){
        const loading = this.$loading({
              lock: true,
              text: '正在保存中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$http.post("{!! yzWebFullUrl('plugin.invoice.admin.setting.set') !!}",{data:this.form}).then(({data:{result,msg}})=>{
          loading.close();
          if(result==1) {
            this.$message.success("已保存");
            this.getdata();
          }else this.$message.error(msg);
        })
      },
      confirmSet(){
        this.$confirm('企业名称和纳税人识别号提交修改后将不能修改。是否确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {this.settingSet()})
        .catch(() => {})
      },
      Submit(formName){
        this.$refs[formName].validate((valid) => {
            if (valid) {
              if (!this.disabled) this.confirmSet()
              else this.settingSet()
          } else {
            this.$message.error("发票设置的内容不能为空");
            return false;
          }
        });
      },
    }
  })
</script>
@endsection('content')