<template>
    <div class="bodyBoxs">
        <div class="boxs">
            <div class="titles">纪念币检索</div>
            <el-form status-icon label-width="0px" class="demo-ruleForm" ref="formItem" :model="formItem">
                 <div class="demo-ruleForm-box">
                    <div class="demo-ruleForm-box-item">
                        <div class="formDiv">纪念币名称</div>
                        <el-form-item label>
                            <el-input
                            v-model="formItem.name"
                            style="width: 165px; position: relative;margin:0"
                            class="input-item"
                            />
                        </el-form-item>
                        <div class="formDiv">面值</div>
                        <el-form-item label>
                            <el-input
                            v-model="formItem.money_size"
                            style="width: 165px; position: relative;margin:0"
                            class="input-item"
                            />
                        </el-form-item>

                        <div class="formDiv">类别</div>
                        <el-form-item label>
                            <!-- <el-input
                            v-model="formItem.year"
                            style="width: 165px; position: relative;margin:0"
                            class="input-item"
                            /> -->

                            <el-select v-model="formItem.category"  placeholder=""  style="width:  165px; position: relative;margin:0 ">
                                <el-option
                                v-for="item in selectArr"
                                :key="item"
                                :label="item"
                                :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div class="formDiv">发行时间</div>
                        <el-form-item label>
                            <el-input
                            v-model="formItem.issueTime"
                            style="width: 165px; position: relative;margin:0"
                            class="input-item"
                            />
                        </el-form-item>
                    </div>
                    <div class="demo-ruleForm-box-item">
                        <el-button style="background:#ff7200;color:#fff;"   @click="search"  v-loading.fullscreen.lock="fullscreenLoading">查询</el-button>
                        <el-button style="background:#b6b6b6;color:#fff" @click="clear">清空</el-button>
                        <el-button style="background:#529bcc;color:#fff" @click="outData"   v-loading.fullscreen.lock="fullscreenLoading" >导出</el-button>
                    </div>
                </div>


            </el-form>
            <div class="itemBox">
                <div class="itemTitle">状态：</div>
                <div class="itemText">
                     <template  v-for="(item ,i) in stateArr">
                         <div class="items" :key="item" v-if="i==stateOrder" style="background:#317caf;color:#fff" @click="changeState(i)">{{item}}</div>
                         <div class="items" :key="item" v-else  @click="changeState(i)">{{item}}</div>
                    </template>
                </div>
            </div>
            <div class="tableTitle">
                <div class="tableTitleText">检索结果</div>
                <div class="tableTitleBtn"   v-loading.fullscreen.lock="fullscreenLoading" @click="outData">导出</div>
            </div>
            <el-table
                :data="tableData"
                style="width: 100%"
                :cell-style="rowStyle"
                :header-cell-style="rowStyle"
                >
                <el-table-column
                    prop="numberId"
                    label="编号">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="藏品名称">
                </el-table-column>
                <el-table-column
                    prop="images"
                    label="藏品图">
                    <template slot-scope="scope">
                    <el-image
                        :src="scope.row.images.length>0?scope.row.images[0].url:''"
                        style="width: 50px; height: auto; max-height: 200px"
                    ></el-image>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="enteringTibetYears"
                    label="入藏年度">
                </el-table-column>
                <el-table-column
                    prop="count"
                    label="入库数量">
                </el-table-column>
                <el-table-column
                    prop="expenditure"
                    label="支出数量">
                </el-table-column>
                <el-table-column
                    prop="moneySize"
                    label="面值">
                </el-table-column>

                <el-table-column
                    prop="texture"
                    label="质地">
                </el-table-column>
                <el-table-column
                    prop="issue_time"
                    label="发行时间">
                </el-table-column>

                <el-table-column
                    prop="balance"
                    label="结存数量">
                </el-table-column>

                <el-table-column
                    prop="lendCount"
                    label="借出数量">
                </el-table-column>



                <el-table-column
                    prop="action"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button  size="small"  type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            align="center"
            background
            layout="prev, pager, next, jumper,total"
            :page-size="pageSize"
            :total="total"
            :current-page="pages"
            @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>


    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data(){
        return{
           formItem: {
                // num: '',
                name: '',
                issueTime: '',
                category: '',
                money_size:""
            },
            selectArr:[
                "金银币",
                "纸币",
                "流通纪念币",
                "电子货币",
                "实物出入账",
                '其他',

            ],
            tableData: [],
            stateArr:['全部','已借出','未借出'],
            stateOrder:0,
            baseImgUrl: process.env.VUE_APP_BASE_IMG_URL,
            fullscreenLoading:false,
            loading:false,
            pages:1,
            pageSize:15,
            total:0
        }
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            this.loading=true;
            let myState=2;
            if(this.stateOrder==0){
                myState=2;
            }else if(this.stateOrder==1){
                myState=1;
            }else{
                myState=0;
            }
            this.$api.moneySearch({
                page:this.pages,
                size:this.pageSize,
                enteringTibetYears:"",
                category:this.formItem.category,
                name:this.formItem.name,
                issueTime:this.formItem.issueTime,
                money_size:this.formItem.money_size,
                state:0,
                is_lend:myState
            }).then((res) => {
                this.loading=false;
                if(res.code==0){
                    this.tableData=res.data.data;
                    this.total=res.data.total
                }else{
                    this.$message(res.message);
                }
            }).catch((res) => {
                this.loading=false;
            });
        },
        handleCurrentChange(val){
            this.pages= val;
            this.getData();
        },
        changeState(i){
            if(this.stateOrder!=i){
                this.stateOrder=i
            }else{
                this.stateOrder=-1;
            }
            this.getData();
        },
        search(){
            this.getData();
        },
        clear(){
            this.formItem={
                name: '',
                issueTime: '',
                category: '',
                money_size:""
            }
        },
        outData(){
            let myState=2;
            if(this.stateOrder==0){
                myState=2;
            }else if(this.stateOrder==1){
                myState=1;
            }else{
                myState=0;
            }
            let urls="https://jingji-h5.ecps.com.cn/3320/index.php?s=getExport&token="+getToken()+"&size="+this.pageSize+"&page="+this.pages+"&status=2&type=1&is_lend="+myState+"&name="+this.formItem.name+"&textureCategory=&years="+this.formItem.issueTime+"&enteringTibetYears=&category="+this.formItem.category+"&lv=&source=&remnantState=&enteringTibetTime=&money_size="+this.formItem.money_size;
            // urls=""+encodeURIComponent(urls);
            window.location.href=urls;
        },
        handleEdit(i,r){
            this.$router.replace({
                path:"/editcommemo",
                query: {
                    id: r.id
                }
            })
        },
        rowStyle() {
            return "text-align:center";
        }
    }
}
</script>
<style scoped>
    .bodyBoxs{
        padding: 40px;
    }
    .boxs{
        width: 100%;
        background: #fff;
        border-radius: 15px;
    }
    .titles{
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #ababab;
        line-height: 90px;
        font-size: 26px;
        color: #1b1b1b;
        padding-left: 20px;
        font-weight: bold;
    }
     .demo-ruleForm{
         width: 100%;
         box-sizing: border-box;
         padding: 24px 60px;
     }
     .demo-ruleForm-box{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
     }
     .demo-ruleForm-box-item{
         display: flex;
         justify-content: flex-start;
         align-items: center;
     }
     .el-form-item{
         margin: 0 15px 0 0;
     }
     .formDiv{
         margin-right: 10px;
     }
     .tableTitle{
        width: 100%;
        height: 46px;
        background: #4791c2;
        padding: 0 30px 0 60px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
     }
     .tableTitleText{
         font-size: 24px;
         color: #f4f7fc;
     }
     .tableTitleBtn{
         width: 66px;
         height: 25px;
         background: #ffffff;
         border-radius: 5px;
         text-align: center;
         line-height: 25px;
         color: #317caf;
     }
     .itemBox{
        width: 100%;
        padding: 5px 60px;
        box-sizing: border-box;
        line-height: 30px;
        border-top: 1px solid #e6e6e6;
    }
    .itemTitle{
        font-size: 22px;
        color: #317caf;
    }
    .itemText{
        display: flex;
        justify-content: flex-start;
        align-content: start;
        flex-wrap: wrap;
    }
     .itemText div{
        margin-right: 40px;
        color: #727272;
        cursor: pointer;
        padding:0 20px;
        background: transparent;
        border-radius: 100px;
     }
</style>
