@extends('layouts.base')

@section('content')
@section('title', trans('发票设置'))
@include('public.admin.box-item')
@include('public.admin.invoice')
<style>
  body{ background-color: #eff3f6; }
  .el-form-item__content{ max-width:800px;}
  .filing{height:80px;background:#fff;position: fixed;z-index:999; bottom: 0;width: 85.5%;border-radius: 10px 10px 0 0;line-height:80px;text-align:center;box-shadow: 0px -1px 10px rgb(0 0 0 / 10%);
  }
  .add-goods {height: 120px; border: dashed 1px #dde2ee;justify-content: center;align-items: center;}
  .good{width: 120px;display: flex;flex-direction: column;}
  .good:nth-child(n+2){margin-left: 20px;}
  .del-icon{width: 20px; height: 20px; background-color: rgb(221, 226, 238); display: flex; align-items: center; justify-content: center; position: absolute; right: -10px; top: -10px; border-radius: 50%;}
</style>
<div class="all">
  <div id="app">
    <box-item text="发票信息">
      <el-form ref="form" :model="form" label-width="200px" ref="form">
        <el-form-item label="发票类型">
          <el-radio-group v-model="form.invoice_type">
            <el-radio label="0">电子发票</el-radio>
            <el-radio label="1">纸质发票</el-radio>
            <el-radio label="2">专用发票</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="form.invoice_type==2">
          <template v-for="(item,i) in specialInvoiceList">
            <el-form-item :label="item.label"  :rules="rules(item.label)" :prop="item.model" v-if="item.required" :key="'specialInvoiceList'+i">
              <el-input :placeholder="'请输入'+item.label" v-model="form[item.model]"></el-input>
            </el-form-item>

            <el-form-item  :label="item.label" v-else :key="'specialInvoiceList'+i">
              <el-input :placeholder="'请输入'+item.label" v-model="form[item.model]"></el-input>
            </el-form-item>
          </template>
        </div>

        <div v-if="form.invoice_type==1 || form.invoice_type==0">
          <el-form-item label="发票抬头">
            <el-radio-group v-model="form.rise_type">
              <el-radio label="1">个人</el-radio>
              <el-radio label="0">单位</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="抬头名称"  :rules="rules('抬头名称')" prop="collect_name" v-if="form.rise_type==1">
            <el-input placeholder="请输入抬头名称" v-model="form.collect_name"></el-input>
          </el-form-item>

          <template v-if="form.rise_type==0">
            <el-form-item label="单位"  :rules="rules('单位')" prop="collect_name" >
              <el-input placeholder="请输入单位" v-model="form.collect_name"></el-input>
            </el-form-item>
            <el-form-item label="税号"  :rules="rules('税号')" prop="gmf_taxpayer">
              <el-input placeholder="请输入税号" v-model="form.gmf_taxpayer"></el-input>
            </el-form-item>
          </template>

          <el-form-item label="发票内容">
            <el-radio-group v-model="form.content">
              <el-radio label="0">商品明细</el-radio>
              <el-radio label="1">商品类别</el-radio>
            </el-radio-group>
          </el-form-item>

          <div v-if="form.rise_type==0">
            <el-form-item :label="item.label" v-for="(item,i) in branInfoList" :key="'branInfoList'+i">
              <el-input :placeholder="'请输入'+item.label" v-model="form[item.model]"></el-input>
            </el-form-item>
          </div>

          <template v-if="form.invoice_type==1">
            <el-form-item label="收票人姓名">
              <el-input placeholder="请输入收票人姓名" v-model="form.col_name"></el-input>
            </el-form-item>
            <el-form-item label="收票人手机号">
              <el-input placeholder="请输入收票人手机号" v-model="form.col_mobile"></el-input>
            </el-form-item>
            <el-form-item label="收票人地址">
              <el-input placeholder="请输入收票人地址" v-model="form.col_address"></el-input>
            </el-form-item>
          </template>

          <el-form-item label="收票邮箱" v-if="form.invoice_type==0">
            <el-input placeholder="请输入收票邮箱" v-model="form.email"></el-input>
          </el-form-item>
        </div>

        <el-form-item label="指定商品">
          <div style="display: flex;flex-wrap: wrap;">
          <div class="good" v-for="(item,i) in pickGoods" :key="i">
            <div class="img" style="position: relative;">
              <a style="color: rgb(51, 51, 51);">
                <div class="del-icon" @click="pickGoods.splice(i,1)">X</div>
              </a>
              <img :src="item.thumb" alt="" width="120px" height="120px">
            </div>
            <div style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px;">[[item.title + "[ID" + item.id + "]"]]</div>
          </div>
          <div class="add-goods good" @click="getGoods(null)">
            <a style="font-size: 32px; color: rgb(153, 153, 153);">
              <i class="el-icon-plus"></i>
            </a>
            <div style="color: rgb(153, 153, 153);">选择商品</div>
          </div>
          </div>
        </el-form-item>

        <el-form-item label="开票金额">
          <el-input placeholder="请输入开票金额" v-model="form.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
    </box-item>

    <div style="height: 100px;"></div>
    <div class="filing">
      <el-button type="primary" @click="invoicing">确认开票</el-button>
    </div>

    <invoice v-model="dialogVisible" :show="dialogVisible" :url="currentPath" :order_id="order_id" :form="form"></invoice>

    <el-dialog title="选择商品" :visible.sync="pickGoodsShow" width="800">
      <div class="goods-list">
        <div class="search-goods" style="display: flex;margin-bottom: 20px;padding: 0 40px;">
          <el-input style="flex: 1;margin-right: 20px;" placeholder="输入关键字搜索" v-model="keyword"></el-input>
          <el-button @click="getGoods(keyword)">搜索</el-button>
        </div>
        <el-table :data="tableData" v-loading="tableLoading">
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column  label="商品信息">
            <template slot-scope="scope">
             <div style="display: flex; align-items: center;">
              <img :src="scope.row.thumb" alt="" width="50px" height="50px">
              <div style="margin-left: 10px;">[[scope.row.title]]</div>
               <div style="margin-left: 10px;color: #ff1717" v-if="scope.row.is_refund&&scope.row.belongs_to_refund_goods_log&&scope.row.belongs_to_refund_goods_log.belongs_to_order_fund">
                  [[ scope.row.belongs_to_refund_goods_log.belongs_to_order_fund.refund_type_name ]]
               </div>
             </div>
            </template>
          </el-table-column>
          <el-table-column  label="商品信息" width="180">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">[[scope.row.change?"已":""]]选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</div>

<script>
  let order_id = "{{ request()-> order_id }}";
  let vm = new Vue({
    el:"#app",
    delimiters: ['[[', ']]'],
    data(){
      return {
        keyword:"",
        currentPath:"{!!yzWebFullUrl('plugin.invoice.admin.invoicing-order.set-invoice')!!}" + "&order_id=" + order_id,
        branInfoList:[
            {label:"开户银行",model:"bank"},
            {label:"银行账号",model:"bank_admin"},
            {label:"注册地址",model:"address"},
            {label:"注册电话",model:"gmf_mobile"},
        ],

        //专用发票
        specialInvoiceList:[
          {required: true,label:"单位",model:"collect_name"},
          {required: true,label:"税号",model:"taxpayer"},
          {required: true,label:"开户银行",model:"bank"},
          {required: true,label:"银行账号",model:"bank_admin"},
          {required: true,label:"注册地址",model:"address"},
          {required: true,label:"注册电话",model:"gmf_mobile"},
          {required: false,label:"收票人姓名",model:"col_name"},
          {required: false,label:"收票人手机号",model:"col_mobile"},
          {required: false,label:"收票人地址",model:"col_address"},
        ],
        form:{
          invoice_type:"0",
          rise_type:"1",
          collect_name:"",
          taxpayer:"",
          address:"",
          mobile:"",
          gmf_bank_admin:"",
          gmf_taxpayer:"",
          email:"",
          price:"",
          content:"0",
          manual:"1",//1为手动开票
          order_id//订单id
        },
        pickGoods:[],
        order_id,
        dialogVisible:false,
        pickGoodsShow:false,
        tableData:[],
        tableLoading:false
      }
    },
    created(){
    },
    methods:{
      rules(message){
          return [{ required: true, message: '请输入' + message, trigger: 'blur' }]
      },
      handleClick(row,index){
        row.change = !row.change;
        for (let i = 0; i < this.pickGoods.length; i++) {
          if (this.pickGoods[i].id == row.id) {
            this.pickGoods.splice(i,1);
            return false;
          }
        }
        this.pickGoods.push(row);
      },
      getGoods(keyword){
        this.pickGoodsShow = true;
        this.tableLoading = true;
        this.tableData = [];
        let json = {order_id};
        if(keyword) json.keyword = keyword;
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing_order.get-goods')!!}",json).then(({data:{result,msg,data}})=>{
          this.tableLoading = false;
          if (result == 1) {
            data.forEach(item=>{
              let isChange = false;
              this.pickGoods.forEach(goods=>{
                if (goods.id==item.id) {
                  isChange = true;
                }
              })
              item.change = isChange;
              this.tableData.push(item);
            })
          }else this.$message.error(msg);
        })
      },
      confirmInvoicing(){
        // let ids = [];
        // this.pickGoods.forEach(item=>{
        //   ids.push(item.id)
        // })
        // this.form.goods_ids = ids.toString();
        this.form.goods = this.pickGoods;
        this.dialogVisible = true;
      },
      invoicing(type){
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.confirmInvoicing();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  })
</script>
@endsection('content')