Vue.component('credit-stream', {
    template: `<div>
                    <div class="center-content">
                    <div>
                        <el-input placeholder="用户昵称/姓名/手机号"
                                  type="text"
                                  clearable
                                  size="small"
                                  style="width:200px"
                                  v-model="searchText"></el-input>
                        <el-select v-model="type" placeholder="赊账状态" size="small" @change="searchData">
                            <el-option value="1" label="赊账"></el-option>
                            <el-option value="2" label="还款"></el-option>
                        </el-select>
                        <el-date-picker
                                v-model="start_time"
                                type="datetime"
                                size="small"
                                :editable="false"
                                placeholder="开始时间"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                        <el-date-picker
                                v-model="end_time"
                                type="datetime"
                                size="small"
                                :editable="false"
                                placeholder="结束时间"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                        <el-button type="primary" plain @click="searchData" size="small">搜索</el-button>
                    </div>
                </div>
                <div style="max-width: calc(100vw - 208px);">
                    <el-table border :data="recordList" style="width: calc(100vw - 208px);"
                              size="mini"
                              max-height="500"
                              v-loading="loading"
                              element-loading-text="数据获取中"
                              element-loading-spinner="el-icon-loading">
                        <el-table-column prop="index" width="60px" label="序号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="name_arr" label="用户昵称|姓名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="mobile_phone" label="手机号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="order_no" label="订单号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="state_name" label="赊销状态" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="edit_money" label="金额" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="edit_time" label="时间" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" v-if="openType==2">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="print(scope.row.bill_id)">打印单据</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="currentLen">
                    </el-pagination>
                </div>
              </div>`,
    props: {
        'show': {
            type: Boolean,
            default: false,
        },//是否展示
        'store_id': {
            type: String,
            default: '',
        },
        'openType': {
            type: Number,
            default: 2,//打开的用户类型  1商户  2门店
        }
    },
    data() {
        return {
            start_time: '',
            end_time: '',
            recordList: [],
            searchText: '',
            type: '1',
            loading: false,
            currentPage: 1,
            currentLimit: 10,
            currentLen: 0,
        }
    },
    methods: {
        //打印单据
        print(id) {
            layer.open({
                type: 2,
                content: "/index.php/Retail/WebPrint/orderPrint.html?id=" + id,
                title: "打印订单",
                area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
                shade: 0,
                offset: 'rb',
            })
            // MenuApp.pathData.push({
            //     name: '打印单据',
            //     path: '/index.php/Retail/WebPrint/orderPrint.html?id=' + id
            // })
        },
        //搜索
        searchData: function () {
            this.currentPage = 1;
            this.getData();
        },
        handleSizeChange: function (val) {
            this.currentLimit = val;//切换每页数量
            this.currentPage = 1;
            this.getData();
        },
        handleCurrentChange: function (val) {
            this.currentPage = val;
            this.getData();//切换页数
        },
        //查询
        getData: function () {
            this.loading = true;
            switch (this.type) {
                case '1':
                    //赊账
                    var url = "/index.php/Credit/CreditArrearage/getUserArrearage";
                    break;
                case '2':
                    //还款
                    var url = "/index.php/Credit/CreditRepayment/getRepayRecord";
                    break;
            }
            $.ajax({
                url: url,
                type: "post",
                data: {
                    page: this.currentPage,
                    limit: this.currentLimit,
                    editor_type: 2, //后台
                    searchText: this.searchText,
                    start_time: this.start_time,
                    end_time: this.end_time,
                    store_id: this.store_id,
                },
                success: (res) => {
                    this.recordList = res.data.list;
                    this.loading = false;
                    this.$nextTick(() => {
                        this.currentLen = parseInt(res.data.total);
                    })
                }
            })
        },
    },
    created() {
        this.searchData();
    },
    watch: {
        show(n) {
            console.log(n);
            if (n) this.searchData();
        }
    }
});