<template>
  <div class="app-container calendar-list-container">
		 <div class="filter-container" ref="filter-container">
		  <el-form ref="queryForm"  :model="listQuery" label-width="100px">
		    <el-row>
		      <el-col :span="5">
		        <el-form-item label="订单号">
		          <el-input v-model="listQuery.no" type="text" placeholder="请输入订单号"></el-input>
		        </el-form-item>
		      </el-col>
					<el-col :span="5">
					  <el-form-item label="手机号">
					    <el-input v-model="listQuery.phone" placeholder="请输入手机号"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="5">
					  <el-form-item label="状态">
					    <el-select class="filter-item" v-model="listQuery.status" placeholder="请选择状态">
								<el-option :key="null" label="无" :value="null" ></el-option>
								<el-option :key="2" label="取消" :value="2"></el-option>
								<el-option :key="3" label="待付款" :value="3"></el-option>
								<el-option :key="6" label="已完成" :value="6"></el-option>

					    </el-select>
					  </el-form-item>
					</el-col>
				<!-- 	<el-col>
						<el-form-item label="时间">
							<el-date-picker v-model="listQuery.startTime" type = "date" placeholder = "请输入开始时间"></el-date-picker>
							<span>——</span>
							<el-date-picker v-model="listQuery.endTime" type = "date" placeholder = "请输入结束时间"></el-date-picker>
						</el-form-item>
					</el-col> -->
					<el-col :span="5">
					  <el-form-item label="会员类型">
					    <el-select class="filter-item" v-model="listQuery.name" placeholder="请选择会员类型">
								<el-option :key="null" label="无" :value="null" ></el-option>
								<el-option :key="1" label="普通会员" :value="1"></el-option>
								<el-option :key="2" label="黄金会员" :value="2"></el-option>
								<el-option :key="3" label="钻石会员" :value="3"></el-option>
					    </el-select>
					  </el-form-item>
					</el-col>
		    </el-row>
		  </el-form>
		  <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" type="primary" v-waves icon="delete" @click="clearSearch">清除搜索</el-button>
		</div>
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading"
              border fit highlight-current-row
              style="width: 100%">
      <el-table-column align="center" label="ID" width="70">
        <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单号">
        <template scope="scope">
          <span>{{scope.row.no}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
			 <el-table-column width="150" align="center" label="用户名">
			  <template scope="scope">
			   <span>{{scope.row.telephone}}</span>
			  </template>
			</el-table-column>
      <el-table-column width="110" align="center" label="商品价格">
        <template scope="scope">
          <span>{{scope.row.goodsAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="订单价格">
        <template scope="scope">
          <span>{{scope.row.orderAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="实际价格">
        <template scope="scope">
          <span>{{scope.row.realAmount}}</span>
        </template>
      </el-table-column>
			<el-table-column width="110" align="center" label="状态">
			  <template scope="scope">
						<span v-if="scope.row.status == '2'">取消</span>
					<span v-if="scope.row.status == '3'">待付款</span>
					<span v-if="scope.row.status == '6'">已完成</span>
			  </template>
			</el-table-column>

			<!-- <el-table-column width="150" align="center" label="手机号">
			  <template scope="scope">
			   <span>{{scope.row.telephone}}</span>
			  </template>
			</el-table-column> -->
      <el-table-column width="180" align="center" label="创建时间">
        <template scope="scope">
          <span>{{scope.row.crtTime}}</span>
        </template>
      </el-table-column>
			<el-table-column width="180" align="center" label="更新时间">
			  <template scope="scope">
			    <span>{{scope.row.updTime}}</span>
			  </template>
			</el-table-column>
     <!-- <el-table-column align="center" label="操作" width="150">
        <template scope="scope">
          <el-button v-if="btn_buy && scope.row.state == 0" size="small" type="success" @click="handleBuy(scope.row)">订单详情</el-button>
					<el-button v-if="btn_buy && scope.row.state == 0" size="small" type="success" @click="handleBuy(scope.row)">操作</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    page
  } from 'api/order/rentVehicle';
  import { mapGetters } from 'vuex';
  import rsCode from '../../../utils/rsCode';

  export default {
    name: 'branchCompanyStock',
    data() {
      return {
        form: {
          id: null,
          companyId: null,
          companyName: null,
          name: null,
          tel: null,
          count: null,
          state: null
        },
        rules: {
          // companyName: [
          //   {
          //     required: true,
          //     message: '请输入用户',
          //     trigger: 'blur'
          //   }
          // ],
        },
        applyState: {
          '-1': {
            key: -1,
            label: '放弃购买'
          },
          0: {
            key: 0,
            label: '申请中'
          },
          1: {
            key: 1,
            label: '确认购买'
          }
        },
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
					type: 3,
					no: '',
					phone:'',
					status:null,
					startTime: undefined,
					endTime:undefined,
					name:null
        },
        dialogFormVisible: false,
        dialogStatus: '',
        btn_del: true,
        btn_buy: true,
        btn_cancel: true,
        tableKey: 0
      }
    },
    created() {
      this.getList();
      this.btn_del = this.elements['branchCompany/stockApply:btn_delete'];
    },
    computed: {
      ...mapGetters([
        'elements'
      ]),
      provinceRegions() {
        return getSonRegionByCodes(1);
      },
      cityRegions() {
        if (!this.$utils.isInteger(this.form.addrProvince)) {
          return null;
        }
        return getSonRegionByCodes(this.form.addrProvince);
      }
    },
    methods: {
      handleBuy(row) {
        this.$confirm('此操作将确认购买, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            buyStock(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              });
          });
      },
      handleCancel(row) {
        this.$confirm('此操作将放弃购买, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            cancelApply(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              });
          });
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            delObj(row.id)
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                });
                const index = this.list.indexOf(row);
                this.list.splice(index, 1);
              });
          });
      },
			 handleFilter() {
			  this.listQuery.page = 1;
			  this.$refs.queryForm.validate(valid => {
			    if (valid) {
			      this.getList();
			    } else {
			      return false;
			    }
			  });
			},
			clearSearch() {
				this.listQuery ={
				  page: 1,
				  limit: 20,
					type: 3,
					no: '',
					phone:'',
					status:null,
					startTime: undefined,
					endTime:undefined,
					name:null
				}
				this.getList()
			},
      getList() {
        this.listLoading = true;
				console.log(this.listQuery)
				if(this.listQuery.startTime){
				  this.listQuery.startTime = this.listQuery.startTime.getTime();
				}
				if(this.listQuery.endTime){
				  this.listQuery.endTime = this.listQuery.endTime.getTime();
				}
				if(this.listQuery.name == '1') {
					this.listQuery.name = "普通会员"
				} else
				if(this.listQuery.name == '2') {
					this.listQuery.name = "黄金会员"
				} else
				if(this.listQuery.name == '3') {
					this.listQuery.name = "钻石会员"
				} else {
					this.listQuery.name = null
				}
        page(this.listQuery)
          .then(response => {
            this.list = response.data.data;
            this.total = response.data.totalCount;
            this.listLoading = false;
          })
      },

      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    }
  }
</script>
