<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="168px"
            @submit.native.prevent
        >
            <el-form-item label="订单编号" prop="orderCode">
                <el-input
                    v-model="queryParams.orderCode"
                    placeholder="请输入订单编号"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="手机号码" prop="mobileNumber">
                <el-input
                    v-model="queryParams.mobileNumber"
                    placeholder="请输入手机号码"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <div v-if="buttonBoolean">
                  <el-form-item label="订单编号" prop="orderCode">
                <el-input
                    v-model="queryParams.orderCode"
                    placeholder="请输入订单编号"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

                 <el-form-item label="订单编号" prop="orderCode">
                <el-input
                    v-model="queryParams.orderCode"
                    placeholder="请输入订单编号"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

                 <el-form-item label="订单编号" prop="orderCode">
                <el-input
                    v-model="queryParams.orderCode"
                    placeholder="请输入订单编号"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            </div>
            <el-button
                @click="showOrHide()"
                style="
                    border-color: white;
                    background-color: white;
                    font-size: x-small;
                    color: #50bfff;
                    padding: 1px 2px;
                    margin-left: 40%;
                    margin-top: 0px;
                    margin-bottom: 15px;
                "
                :icon="icon"
                >{{ showOrHideText }}
            </el-button>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-col>
            <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['order:order:export']"
                >导出</el-button
            >
        </el-row>
        <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="运营商"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="组织机构代码"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="联系人">
    </el-table-column>
     <el-table-column
      prop="address"
      label="联系方式">
    </el-table-column>
     <el-table-column
      prop="address"
      label="入驻时间">
    </el-table-column>
     <el-table-column
      prop="address"
      label="操作">
      <template slot-scope="scope">
        <!--  :to="'/merchant/detail/index/' + scope.row.id" -->
                    <router-link
                        to="/financial/merchant/merchantVirtual"
                        class="link-type"
                    >
                        <span>虚拟财务</span>
                    </router-link>
                   <router-link 
                        to="/financial/merchant/cleanFinancical"
                        class="link-type"
                    >
                        <span style="margin-left:10px;color: darkblue;">清分财务</span>
                    </router-link>
                </template>
    </el-table-column>
  </el-table>
    </div>
</template>

<script>

export default {
    data() {
        return {
            showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
            //图标，可根据自己的需求匹配
            icon: "el-icon-caret-bottom",
            queryParams:{},
             tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        };
    },
    created() {
    },
    methods: {
        showOrHide() {
            if (this.buttonBoolean) {
                this.icon = "el-icon-caret-bottom";
                this.showOrHideText = "显示更多查询条件";
                this.buttonBoolean = !this.buttonBoolean;
            } else {
                this.icon = "el-icon-caret-top";
                this.showOrHideText = "收起";
                this.buttonBoolean = !this.buttonBoolean;
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            // 获取订单列表
            // this.getList();
            // 获取订单总金额
            // this.getOrderTotalData();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            // this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            // this.download(
            //     "order/order/export",
            //     {
            //         ...this.queryParams,
            //     },
            //     `order_${new Date().getTime()}.xlsx`
            // );
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep
    .el-descriptions--medium:not(.is-bordered)
    .el-descriptions-item__cell {
    padding-bottom: 4px;
}
::v-deep .el-descriptions__header {
    margin-bottom: 10px;
}
.cardview-box {
    width: 100%;
    margin-bottom: 12px;
    font-size: 16px;
    color: #4a4a4a;
    border: 1px solid #f0f0f0;
}
.cardview-static {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 0 10px;
    height: 46px;
    line-height: 46px;
    background-color: #f0f0f0;
}
.flex {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 10px;
}
</style>
