<template>
  <div class="app-containers">
    <div class="bai-box" >
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

        <el-form-item label="" prop="orderNo">
          <el-input
            v-model="queryParams.orderNo"
            placeholder="请输入订单号"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="type">
          <el-select
            v-model="queryParams.payChannel"
            clearable
            placeholder="请选择订单状态"
          >
            <el-option label="小程序" value="applet"/>
            <el-option label="收银台" value="cashier"/>
            <el-option label="POS端" value="POS"/>
            <el-option label="平台" value="PC"/>
          </el-select>


        </el-form-item>
        <el-form-item label="" prop="paymentChannel">
          <el-select
            v-model="queryParams.paymentChannel"
            clearable
            placeholder="请选择订单类型"
          >
            <el-option label="全部" value=""/>
            <el-option label="拉卡拉" value="cashier"/>
            <el-option label="富友" value="POS"/>
          </el-select>

        </el-form-item>
        <el-form-item label="" prop="status">
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="支付通道"
          >
            <el-option label="已支付" value="paid"/>
            <el-option label="未支付" value="unpaid"/>
            <el-option label="已退款" value="refund"/>
            <el-option label="支付失败" value="payFail"/>
            <el-option label="退款中" value="refunding"/>
          </el-select>
        </el-form-item>


        <el-form-item label="">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px;height: 32px"
            size="medium"
            value-format="yyyy-MM-dd"
            type="daterange"

            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item style="float: right;margin-right: 0px">
          <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>

        </el-form-item>
      </el-form>
      <div style="width: 100%;height: 74vh;overflow: auto">
      <el-table ref="tables" border v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="订单号" align="center" prop="orderNo"  width="220"/>
        <el-table-column label="所属机构" align="center" prop="deptName" width="200">
          </el-table-column>
        <el-table-column :label="sumPayMoney" align="center" prop="payMoney" >

        </el-table-column>

        <el-table-column label="订单类型" align="center" prop="type">
        </el-table-column>
        <el-table-column label="支付方式" align="center" prop="payType">
        </el-table-column>
        <el-table-column label="订单状态" align="center" prop="status">
        </el-table-column>

        <el-table-column label="付款用户/手机号" align="center" prop="userMobile" width="150">
        </el-table-column>

        <el-table-column label="支付通道" align="center" prop="payChannel" width="150">
        </el-table-column>

        <el-table-column label="商户号编号" align="center" prop="mchntCd" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.mchntCd?scope.row.mchntCd: '--'}}</span>
          </template>
        </el-table-column>



        <el-table-column label="订单创建时间" align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) || '--'}}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单完成时间" align="center" prop="updateTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) || '--'}}</span>
          </template>
        </el-table-column>


      </el-table>

      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
  import {getName} from "../../../utils/fuint";
  import {addStaff, delStaff, getStaff, listStaff, updateStaff} from "../../../api/staff/staff";
  // import {getDuty, listDuty} from "@/api/staff/duty";
  import { getOrderListApis,getSumPayMoneyApi } from "../../../api/allOrder";
  export default {
    name: "asdf",
    dicts: ['transaction','handover','handover_quit','payment_type','pay_status',
      'jbjl','official','notice','role'],
      props: ["id"],

    data() {
      return {
        drawer: false,
        // 标题
        title: "",
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        categoryOptions: [],
        storeOptions: [],
        posPrem:'',

        props: { multiple: true },
        appletPrem:'',

        writeOff:[],
        write:[],
        specialPrem:[],
        special:[],
        // 总条数
        total: 0,
        // 表格数据
        list: [],
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 默认排序
        defaultSort: {prop: 'createTime', order: 'descending'},
        // 表单参数
        form: {
          id:'', category:'', userId:'', mobile:'', realName:'', wechat:'', merchantId:'', storeId:this.id, auditedStatus:'',
          auditedTime:'', description:'', isRefuel:'yc', handoverMode:'dqmdtyjb', handoverPrem:'yqx', handoverOut:'jbtc', record:'qbjl',
          merchantStatus:'qy',screen:'qy', posPrem:'', appletPrem:'', notice:'advice_jy', oilGunId:'', timeFrame:'bx', refund:'yqx',
          transaction:'qbjy', writeOff:'',specialPrem:'', official:'', status:'qy',pos:'jy',role:''
        },
        // 查询参数
        queryParams: {
          type:'',
          orderNo:'',
          payChannel:'',
          payType:'',
          page: 1,
          pageSize: 10,
        },

        typeList:[
          { value: '1',label: '油品'},
          { value: '2',label: '商品'},
          { value: '3',label: '储值卡'},
          { value: '4',label: '积分'},
          { value: '5',label: '囤油卡'},
          { value: '6',label: '油品加加商品(收银台订单)'},
          { value: '7',label: '挂账订单'},
        ],
        payTypeList:[
          { value: '选项1',label: '黄金糕'},

        ],
        payChannelList:[
          { value: 'applet',label: '小程序'},
          { value: 'cashier',label: '收银台'},
        ],
        sumPayMoney:'订单金额'
      };
    },
    created() {
      this.getList();
    },
    methods: {
       // 查询列表
       getList() {
        this.loading = true;
        this.queryParams.storeId = this.id
        getOrderListApis(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.list = response.data.records;
            this.total = response.data.total;
            this.getSumPayMoney()
            this.loading = false;
          }
        );
      },

       // 查询总钱数
       getSumPayMoney() {
        // this.loading = true;
        this.queryParams.storeId = this.id
        getSumPayMoneyApi(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            if(response.data > 0) {
              const sum = response.data
              this.sumPayMoney = '订单金额(总计：￥'+sum+')'
            }else {
              this.sumPayMoney = '订单金额'

            }
            // this.loading = false;
          }
        );
      },

      getType(data) {
        const matchedElement = this.typeList.find(element => element.value === data);
        if (matchedElement) {
            return matchedElement.label;
        }
        return null;
      },

      showDesc(){
        this.drawer = true;
      },
      handleNodeClick1(data) {
        this.form.posPrem = JSON.stringify(data);
      },
      handleNodeClick2(data) {
        this.form.appletPrem = JSON.stringify(data);
      },
      getCheckbox(){
        this.form.writeOff = this.writeOff.toString();
        this.form.specialPrem = this.specialPrem.toString();
      },
      // 页面跳转
      toTarget(url) {
        this.$router.push( { path: url } );
      },

      // 查询角色列表
      getDuty(){
        listDuty().then(response => {
          this.role = response.data
        })
      },
      // 店铺列表
      getStoreList() {
        listStaff().then(response => {
            this.storeOptions = response.data.records;
          }
        );
        // searchStore().then(response => {
        //     this.storeOptions = response.data.storeList;
        //   }
        // );
      },
      // 搜索按钮操作
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      // 重置按钮操作
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
        this.handleQuery();
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.operId)
        this.multiple = !selection.length
      },
      // 排序触发事件
      handleSortChange(column, prop, order) {
        this.queryParams.orderByColumn = column.prop;
        this.queryParams.isAsc = column.order;
        this.getList();
      },
      // 新增按钮操作
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "新增员工";
      },
      // 表单重置
      reset() {
        this.posPrem = '';
        this.appletPrem = '';
        this.writeOff = []
        this.form = {
          id:'', category:'', userId:'', mobile:'', realName:'', wechat:'', merchantId:'', storeId:this.id, auditedStatus:'A',
          auditedTime:'', description:'', isRefuel:'yc', handoverMode:'dqmdtyjb', handoverPrem:'yqx', handoverOut:'jbtc', record:'qbjl',
          merchantStatus:'qy',screen:'qy', posPrem:'', appletPrem:'', notice:'advice_jy', oilGunId:'', timeFrame:'bx', refund:'yqx',
          transaction:'qbjy', writeOff:'',specialPrem:'', official:'', status:'qy',pos:'jy',role:''
        };
        this.resetForm("form");
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },

    }
  };
</script>

<style scoped>
  .app-containers{
    width: 100%;
    height: 100%;
    /* height: 100vh; */
    background: #f9f9f9;
    box-sizing: border-box;
    padding: 10px;
    padding-bottom: 0px;
  }

  .bai-box{
    background: #fff;
    box-sizing: border-box;
    padding: 20px;
  }
</style>
