{extend name="main"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 140px;color: #6c757d;text-align: right;padding-right: 10px;}
	.el-drawer{overflow-y: auto;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-width="140px" :label-position="labelPosition" size="mini">

	  <el-form-item label="搜索类型" prop="search_type">
	    <el-radio-group v-model="search.search_type">
	      <el-radio :label="'uid'">UID</el-radio>
	      <el-radio :label="'invoice_title'">发票抬头</el-radio>
	      <el-radio :label="'invoice_number'">发票编号</el-radio>
	      <el-radio :label="'courier_number'">物流编号</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item :label="getSearchType()" prop="key">
	    <el-input v-model="search.key" class="col-12 col-sm-2 pl-0 pr-0"></el-input>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		stripe
    		v-loading="search.ajax"
    		style="width: 100%;"
    		row-class-name="row-flex">
		  <el-table-column
			  type="selection"
			  width="55">
		  </el-table-column>
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        prop="uid"
	        label="UID"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        label="用户"
	        min-width="180">
		      <template slot-scope="scope">
		      	<div class="flex flex-center">
					<el-image
					  	v-if="scope.row.headimg" 
					    style="width: 30px; height: 30px"
					    lazy
					    class="rounded-circle mr-2"
					    :src="scope.row.headimg" 
					    :preview-src-list="[scope.row.headimg]">
					</el-image>
		      		<div>
						{{scope.row.nickname}}
		      		</div>
		      	</div>
		      </template>
	      </el-table-column>
		  <el-table-column type="expand" width="20">
			  <template slot-scope="scope">
			  	<div class="flex text-dark">
			  		<div class="flex-1 pr-2">
						<el-divider content-position="left">发票抬头</el-divider>
						<el-form label-width="120px">
							  <el-form-item label="发票抬头" v-if="scope.row.type" class="mb-0">
							    {{scope.row.invoice_title}}
							  </el-form-item>

							  <el-form-item label="开具类型" class="mb-0">
							  	{{scope.row.type?'企业':'个人'}}
							  </el-form-item>

							  <el-form-item label="发票类型" class="mb-0">
							  	{{scope.row.invoice_type?'增值税专用发票':'增值税普通发票'}}
							  </el-form-item>

							  <el-form-item label="税务登记证号" v-if="scope.row.type" class="mb-0">
							    {{scope.row.invoice_uscc}}
							  </el-form-item>

							  <el-form-item label="开户银行名称" v-if="scope.row.type" class="mb-0">
							    {{scope.row.bank_of_deposit}}
							  </el-form-item>

							  <el-form-item label="基本开户账号" v-if="scope.row.type" class="mb-0">
							    {{scope.row.basic_deposit_account}}
							  </el-form-item>
							  <el-form-item label="注册场所地址" v-if="scope.row.type" class="mb-0">
							    {{scope.row.reg_address}}
							  </el-form-item>

							  <el-form-item label="注册固定电话" v-if="scope.row.type" class="mb-0">
							    {{scope.row.reg_tel}}
							  </el-form-item>

							  <el-form-item label="发票编号" class="mb-0">
							    {{scope.row.invoice_number}}
							  </el-form-item>

							  <el-form-item label="物流公司" class="mb-0">
							    {{scope.row.courier}}
							  </el-form-item>

							  <el-form-item label="物流单号" class="mb-0">
							    {{scope.row.courier_number}}
							  </el-form-item>
						</el-form>
			  		</div>
			  		<div class="flex-1 pl-2">
						<el-divider content-position="left">邮寄地址</el-divider>
						<el-form label-width="120px">
							  <el-form-item label="收件人" class="mb-0">
							    {{scope.row.name}}
							  </el-form-item>
							  <el-form-item label="电话号码" class="mb-0">
							    {{scope.row.mobile}}
							  </el-form-item>
							  <el-form-item label="地址" class="mb-0">
							    {{scope.row.area1_text}}{{scope.row.area2_text}}{{scope.row.area3_text}}{{scope.row.address}}
							  </el-form-item>
							  <el-form-item label="邮编" class="mb-0">
							    {{scope.row.postcode}}
							  </el-form-item>
						</el-form>
			  		</div>
			  	</div>
			  </template>
		  </el-table-column>
	      <el-table-column
	      	prop="invoice_title"
	        label="发票抬头"
	        min-width="200">
		      <template slot-scope="scope">
	        	{{scope.row.invoice_title}}
		      </template>
	      </el-table-column>
	      <el-table-column
	      	prop="price"
	        label="发票总额"
	        width="120">
	      </el-table-column>
	      <el-table-column
	      	prop="order_sum"
	        label="订单数量"
	        width="120">
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.status==1">已处理</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==0">待处理</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="时间线"
	        width="180">
		      <template slot-scope="scope">
		        <el-popover trigger="hover" placement="top">
		          <p>创建时间: {{ scope.row.create_time }}</p>
		          <p>更新时间: {{ scope.row.update_time }}</p>
		          <div slot="reference" class="name-wrapper">
		            <el-tag size="small" type="info">{{ scope.row.create_time }}</el-tag>
		          </div>
		        </el-popover>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="/"
	        width="100">
		      <template slot-scope="scope">
		        <el-button
		            type="primary"
		            size="minism"
		            @click="setStatus(scope.row,scope.$index)"
		            v-if="scope.row.status===0">
		            处理
		        </el-button>
		        <el-button
		            type="info"
		            size="minism"
		            @click="setStatus(scope.row)"
		            v-if="scope.row.status===1">
		            详情
		        </el-button>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
<el-drawer
  title="我是标题"
  :visible.sync="selectedData.id"
  :before-close="handleClose"
  :with-header="false"
  ref="drawer">
  <div class="wrap h-100 p-3">
  	<div>
		<el-divider content-position="left">发票抬头</el-divider>
		<el-form label-width="120px">
			  <el-form-item label="发票抬头" v-if="selectedData.type" class="mb-0">
			    {{selectedData.invoice_title}}
			  </el-form-item>

			  <el-form-item label="开具类型" class="mb-0">
			  	{{selectedData.type?'企业':'个人'}}
			  </el-form-item>

			  <el-form-item label="发票类型" class="mb-0">
			  	{{selectedData.invoice_type?'增值税专用发票':'增值税普通发票'}}
			  </el-form-item>

			  <el-form-item label="税务登记证号" v-if="selectedData.type" class="mb-0">
			    {{selectedData.invoice_uscc}}
			  </el-form-item>

			  <el-form-item label="开户银行名称" v-if="selectedData.type" class="mb-0">
			    {{selectedData.bank_of_deposit}}
			  </el-form-item>

			  <el-form-item label="基本开户账号" v-if="selectedData.type" class="mb-0">
			    {{selectedData.basic_deposit_account}}
			  </el-form-item>
			  <el-form-item label="注册场所地址" v-if="selectedData.type" class="mb-0">
			    {{selectedData.reg_address}}
			  </el-form-item>

			  <el-form-item label="注册固定电话" v-if="selectedData.type" class="mb-0">
			    {{selectedData.reg_tel}}
			  </el-form-item>
		</el-form>
  	</div>
  	<div>
		<el-divider content-position="left">邮寄地址</el-divider>
		<el-form label-width="120px">
			  <el-form-item label="收件人" class="mb-0">
			    {{selectedData.name}}
			  </el-form-item>
			  <el-form-item label="电话号码" class="mb-0">
			    {{selectedData.mobile}}
			  </el-form-item>
			  <el-form-item label="地址" class="mb-0">
			    {{selectedData.area1_text}}{{selectedData.area2_text}}{{selectedData.area3_text}}{{selectedData.address}}
			  </el-form-item>
			  <el-form-item label="邮编" class="mb-0">
			    {{selectedData.postcode}}
			  </el-form-item>
		</el-form>
  	</div>
  	<div class="flex1" v-if="selectedData.status===0">
		<el-divider content-position="left">处理发票</el-divider>
	    <el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px"  size="small">
	      <el-form-item label="发票编号" prop="invoice_number">
	        <el-input v-model="form.invoice_number" autocomplete="off" class="col-12 col-sm-6 pl-0 pr-0"></el-input>
	      </el-form-item>
	      <el-form-item label="物流公司" prop="courier">
	        <el-input v-model="form.courier" autocomplete="off" class="col-12 col-sm-6 pl-0 pr-0"></el-input>
	      </el-form-item>
	      <el-form-item label="物流单号" prop="courier_number">
	        <el-input v-model="form.courier_number" autocomplete="off" class="col-12 col-sm-6 pl-0 pr-0"></el-input>
	      </el-form-item>
	    </el-form>
  	</div>
  	<div class="flex1" v-else="selectedData.status===1">
		<el-divider content-position="left">处理发票</el-divider>
		<el-form label-width="120px">
			  <el-form-item label="发票编号" class="mb-0">
			    {{selectedData.invoice_number}}
			  </el-form-item>
			  <el-form-item label="物流公司" class="mb-0">
			    {{selectedData.courier}}
			  </el-form-item>
			  <el-form-item label="物流单号" class="mb-0">
			    {{selectedData.courier_number}}
			  </el-form-item>
		</el-form>
  	</div>
    <div v-if="selectedData.status===0">
      <el-button @click="handleClose" size="small">取 消</el-button>
      <el-button type="primary" @click="submitForm('form');" :loading="form.ajax" size="small">{{ form.ajax ? '提交中 ...' : '确 定' }}</el-button>
    </div>
  </div>
</el-drawer>
{/block}
{block name="script"}
<script type="text/javascript">
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			multipleSelection:[],
			search:{
				search_type:'uid',
				key:'',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			selectedData:{
				id:0,
				index:null
			},
			form:{
				ajax:false,
				id:0,
				invoice_number:'',
				courier:'',
				courier_number:'',
			},
			tableData:[],
	        rules: {
	          invoice_number: [
	            { required: true, message: '请输入发票编号', trigger: 'blur' },
	          ],
	          courier: [
	            { required: true, message: '请输入物流公司', trigger: 'blur' },
	          ],
	          courier_number: [
	            { required: true, message: '请输入物流单号', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	getSearchType(){
	    		var text='UID';
	    		switch(this.search.search_type){
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'invoice_title':
	    				text='发票抬头';
	    				break;
	    			case 'invoice_number':
	    				text='发票编号';
	    				break;
	    			case 'courier_number':
	    				text='物流编号';
	    				break;
	    		}
	    		return text;
	    	},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			setStatus(row,index) {
				this.selectedData=row;
				this.selectedData.index=index;
				this.form.id=row.id;
			},
		    handleClose(done) {
				this.selectedData={id:0};
		    },
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
			submitForm(formName){
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
				  	_this.form.ajax=true;
					$.ajax({
						url:'/invoice/setStatus',
						type:'post',
						data:D,
						dataType:'json',
						error:function(err){
					  		_this.form.ajax=false;
							XYBase.error(XYBase.config.system_network_error);
						},
						success:function(ret){
					  		_this.form.ajax=false;
					        if (ret) {
								if(ret.code == 0){
									_this.tableData[_this.selectedData.index].status=1;
									_this.tableData[_this.selectedData.index].invoice_number=D.invoice_number;
									_this.tableData[_this.selectedData.index].courier=D.courier
									_this.tableData[_this.selectedData.index].courier_number=D.courier_number;
									_this.resetForm(formName);
									_this.handleClose();
									XYBase.success(ret.msg);
								}else{
									XYBase.msg(ret.msg);
								}
					        }
						}
					});
				  } else {
					return XYBase.warning('请先把表单填写完整。');
				  }
				});
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}