<!--订单列表-列表-->
<template>
  <view class="main_box">

    <view class="main_section">
      <scroll-view
          class="section_1"
          scroll-y="true"
          :lower-threshold="lowerThreshold"
          @scrolltolower="loadMoreData"
          style="height: 83vh;"
      >
        <view
            class="item"
            v-for="(v,k) in tableList"
            :key="k"
        >
          <view class="top">
            <view class="title">订单状态：{{v.order_status == 'pending' ? '待支付':'已支付' }}</view>
            <!--            <view class="btn" @click="downloadFile($util.img(v.file_data))">下载合同 <fui-icon name="arrowright" color="#A4ADB3" size="35"></fui-icon></view>-->
          </view>
          <view class="bottom">
            <view class="box">
              <view class="title">客户姓名：</view>
              <view class="content">{{ v.resource_id_name || ''}}</view>
            </view>

            <view class="box">
              <view class="title">付款类型：</view>
              <view class="content">
                {{ v.payment_type === 'cash' ? '现金支付' : v.payment_type === 'scan_code' ? '扫码支付' : '订阅支付' }}
              </view>
            </view>

            <view class="box">
              <view class="title">订单金额：</view>
              <view class="content">￥{{ v.order_amount || ''}}</view>
            </view>

            <view class="box">
              <view class="title">课程：</view>
              <view class="content">{{ v.course_id_name || ''}}</view>
            </view>

            <view class="box">
              <view class="title">班级：</view>
              <view class="content">{{ v.class_id_name }}</view>
            </view>

            <view class="box">
              <view class="title">人员：</view>
              <view class="content">{{ v.staff_id_name || ''}}</view>
            </view>

            <view class="box">
              <view class="title">支付时间：</view>
              <view class="content">{{ v.payment_time || '' }}</view>
            </view>

          </view>
        </view>

      </scroll-view>
<!--      <view class="btn_section">-->
<!--        <view class="btn" style="background-color:#29d3b4;" @click="openOrderShow()">创建订单</view>-->
<!--      </view>-->
    </view>

    <!--创建订单弹出层-->
    <fui-modal class="order_modal" :buttons="[]" width="600" :show="order_show">
      <text class="fui-title">创建订单</text>
      <text class="fui-descr"></text>
      <fui-form class="form-section" ref="form" top="0" :model="formData" :show="false">
        <view class="input-style">
          <!--客户名称-->
          <fui-form-item
              label="客户名称"
              labelSize='26'
              prop=""
              background='#fff'
              labelColor='#000'
              :bottomBorder='true'
          >
            <view class="input-title" style="margin-right:14rpx;">
              <fui-input
                  :disabled="true"
                  :borderBottom="false"
                  :padding="[0]"
                  placeholder="请输入客户名称"
                  v-model="formData.resource_id_name"
                  backgroundColor="#fff"
                  size="26"
                  color="#000"
              ></fui-input>
            </view>
          </fui-form-item>

          <!--付款类型-->
          <fui-form-item
              label="选择付款类型"
              asterisk
              asteriskPosition="right"
              labelSize='26'
              prop=""
              background='#fff'
              labelColor='#000'
              :bottomBorder='true'
          >
            <view class="input-title" style="margin-right:14rpx;">
              <view
                  class="input-title"
                  style="margin-right:14rpx;"
                  @click="openPaymentType()">
                {{ (formData.payment_type) ? formData.payment_type_name : '点击选择' }}
              </view>
            </view>
            <fui-picker
                :linkage='true'
                :options="payment_type_options"
                :layer="1"
                :show="payment_type_show"
                @change="changePaymentType"
                @cancel="cancelPaymentType">
            </fui-picker>
          </fui-form-item>

          <!--课程-->
          <fui-form-item
              label="选择课程"
              asterisk
              asteriskPosition="right"
              labelSize='26'
              prop=""
              background='#fff'
              labelColor='#000'
              :bottomBorder='true'
          >
            <view class="input-title" style="margin-right:14rpx;">
              <view
                  class="input-title"
                  style="margin-right:14rpx;"
                  @click="openCourseId()">
                {{ (formData.course_id) ? formData.course_id_name : '点击选择' }}
              </view>
            </view>
            <fui-picker
                :linkage='true'
                :options="course_id_options"
                :layer="1"
                :show="course_id_show"
                @change="changeCourseId"
                @cancel="cancelCourseId">
            </fui-picker>
          </fui-form-item>

          <!--班级-->
          <fui-form-item
              label="选择班级"
              asterisk
              asteriskPosition="right"
              labelSize='26'
              prop=""
              background='#fff'
              labelColor='#000'
              :bottomBorder='true'
          >
            <view class="input-title" style="margin-right:14rpx;">
              <view
                  class="input-title"
                  style="margin-right:14rpx;"
                  @click="openClassId()">
                {{ (formData.class_id) ? formData.class_id_name : '点击选择' }}
              </view>
            </view>
            <fui-picker
                :linkage='true'
                :options="class_id_options"
                :layer="1"
                :show="class_id_show"
                @change="changeClassId"
                @cancel="cancelClassId">
            </fui-picker>
          </fui-form-item>

          <!--订单金额-->
          <fui-form-item
              label="订单金额"
              labelSize='26'
              prop=""
              background='#fff'
              labelColor='#000'
              :bottomBorder='true'
          >
            <view class="input-title" style="margin-right:14rpx;">
              <fui-input
                  :disabled="true"
                  :borderBottom="false"
                  :padding="[0]"
                  placeholder="订单金额"
                  v-model="formData.money"
                  backgroundColor="#fff"
                  size="26"
                  color="#000"
              ></fui-input>
            </view>
          </fui-form-item>
        </view>
        <view class="button_box">
          <fui-button background="#fff" color="#414141" borderColor="#465CFF" btnSize="small" @click="closeOrderShow">取消</fui-button>
          <fui-button background="#fff" color="#465CFF" borderColor="#465CFF" btnSize="small" @click="clickOrder({index:1})">确定</fui-button>

        </view>
      </fui-form>
      <view class="fui-icon__close" @tap="closeOrderShow">
        <fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
      </view>
    </fui-modal>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  components: {
  },
  data() {
    return {
      loading:false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        resource_id:'',//客户资源表id
      },
      tableList:[],//聊天数据列表

      //订单表单
      formData:{
        payment_type:'',//付款类型必填验证
        payment_type_name:'',//付款类型必填验证

        course_id:'',//课程ID必填验证
        course_id_name:'',//课程ID必填验证

        class_id:'',//班级ID必填验证
        class_id_name:'',//班级ID必填验证

        staff_id:'',//员工ID必填验证
        staff_id_name:'',//员工ID必填验证

        resource_id:'',//客户资源表ID必填验证
        resource_id_name:'',//客户资源表ID必填验证

        money:'',//金额|这个不入库就展示先
      },

      order_show:false,//创建订单弹出层是否显示|true=显示,false=隐藏

      //付款类型-下拉选择器相关
      payment_type_options:[
        // {
        //   text:'张三',
        //   value:'1'
        // },
      ],//可选值列表
      payment_type_show:false,//下拉选择器是否展示

      //课程-下拉选择器相关
      course_id_options:[
        // {
        //   text:'张三',
        //   value:'1',
        //   price:'1'//课程价格
        // },
      ],//可选值列表
      course_id_show:false,//下拉选择器是否展示

      //班级-下拉选择器相关
      class_id_options:[
        // {
        //   text:'张三',
        //   value:'1'
        // },
      ],//可选值列表
      class_id_show:false,//下拉选择器是否展示
    }
  },
  onLoad(options) {
    this.filteredData.resource_id = options.resource_id//客户资源表id

    this.formData.resource_id = options.resource_id//客户资源表id
    this.formData.resource_id_name = options.resource_name//客户资源表id姓名


    this.formData.staff_id = options.staff_id//员工资源表id姓名
    this.formData.staff_id_name = options.staff_id_name//员工资源表id姓名
  },
  onShow(){
    this.init()
  },
  //下拉刷新
  async onPullDownRefresh() {
    //重置为第一页
    await this.resetFilteredData()
    await this.getList()
  },
  methods: {
//初始化
    async init(){
      //获取付款类型
      await this.getPaymentTypeList()
      //获取课程列表
      await this.getCourseList()
      //获取班级列表
      await this.getClassList()

      //获取列表
      await this.getList();
    },

    //加载更多(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getList();
      }
    },
    //重置为第一页
    async resetFilteredData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },

    //获取合同列表
    async getList(){
      this.loading = true

      let params = {...this.filteredData}

      //判断是否还有数据
      if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) {
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      if(params.page == 1){
        this.tableList = []
      }

      let res = await apiRoute.xy_orderTableList(params)//获取订单列表
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
      // this.tableList.unshift(...res.data.data); // 将新数据插入到数组头部

      console.log('列表',this.tableList)
      this.filteredData.total = res.data.total
      this.filteredData.page++
    },

    //获取付款类型
    async getPaymentTypeList(){
      let res = await apiRoute.common_Dictionary({key:'payment_type'})
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      let dictionary =  res.data.dictionary
      let arr = []
      dictionary.forEach((v,k)=>{
        arr.push({
          text: v.name,
          value: v.value,
        })
      })
      this.payment_type_options = arr
      console.log('付款类型',this.payment_type_options)
    },
    //获取课程列表
    async getCourseList(){
      let params = {}

      let res = await apiRoute.common_getCourseAll(params)
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }


      let arr = []
      res.data.forEach((v,k)=>{
        arr.push({
          text: `${v.course_name}`,
          value: v.id,
          price: v.price,
        })
      })
      this.course_id_options = arr
      console.log('课程列表',this.course_id_options)

    },
    //获取班级列表
    async getClassList(){
      let params = {
        status:1,//班级状态(1开启  2关闭)
      }

      let res = await apiRoute.common_getClassAll(params)
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      console.log('班级列表',res.data)
      let arr = []
      res.data.forEach((v,k)=>{
        arr.push({
          text: `${v.campus_name}-${v.class_name}`,
          value: v.id,
        })
      })
      this.class_id_options = arr
    },




    //创建订单相关
    //显示创建订单弹窗
    openOrderShow(){
      //重置的数据
      this.formData.payment_type = ''//付款类型必填验证
      this.formData.payment_type_name = ''//付款类型必填验证

      this.formData.course_id = ''//课程ID必填验证
      this.formData.course_id_name = ''//课程ID必填验证

      this.formData.class_id = ''//班级ID必填验证
      this.formData.class_id_name = ''//班级ID必填验证

      this.formData.money = ''//金额|这个不入库就展示先

      this.order_show = true//展示弹层
    },
    //关闭打卡弹窗
    closeOrderShow(){
      this.order_show = false
    },
    //监听-打卡签到回调
    async clickOrder(e){
      if(e.index == 0){
        //取消按钮
        this.closeOrderShow()
      }else{
        console.log('提交',this.formData)
        await this.submitFormData()
      }
    },
    //提交表单
    async submitFormData() {
      let param = {...this.formData}
      //表单验证
      //...
      if(!param.class_id){
        uni.showToast({
          title: '请选择班级',
          icon: 'none'
        })
        return
      }
      if(!param.course_id){
        uni.showToast({
          title: '请选择课程',
          icon: 'none'
        })
        return
      }
      if(!param.payment_type){
        uni.showToast({
          title: '请选择付款类型',
          icon: 'none'
        })
        return
      }

      console.log('提交xxx',param)
      this.closeOrderShow()

      let res = await apiRoute.xy_orderTableAdd(param)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      uni.showToast({
        title: '操作成功',
        icon: 'success'
      })

      //延迟1s执行
      setTimeout(() => {
        this.resetFilteredData()//重置表单
        this.getList();//刷新列表
      }, 1500)
    },


    //下拉选择器相关-付款类型
    //监听-付款类型
    changePaymentType(e){
      this.formData.payment_type = e.value
      this.formData.payment_type_name = e.text
      this.cancelPaymentType()
    },
    //打开选择器-付款类型
    openPaymentType(){
      this.payment_type_show = true
    },
    //关闭选择器-付款类型
    cancelPaymentType(){
      this.payment_type_show = false
    },

    //下拉选择器相关-课程
    //监听-课程
    changeCourseId(e){
      console.log('课程',e)
      this.formData.course_id = e.value
      this.formData.course_id_name = e.text

      this.formData.money = this.course_id_options.find(v=>v.value == e.value).price

      // console.log('课程formData',this.formData)
      this.cancelCourseId()
    },
    //打开选择器-课程
    openCourseId(){
      this.course_id_show = true
    },
    //关闭选择器-课程
    cancelCourseId(){
      this.course_id_show = false
    },

    //下拉选择器相关-班级
    //监听-班级
    changeClassId(e){
      this.formData.class_id = e.value
      this.formData.class_id_name = e.text
      this.cancelClassId()
    },
    //打开选择器-班级
    openClassId(){
      this.class_id_show = true
    },
    //关闭选择器-班级
    cancelClassId(){
      this.class_id_show = false
    },

    //下载文件
    async downloadFile(fileUrl) {
      if (!fileUrl) {
        this.$util.showToast({
          title: '暂无电子发票'
        });
        return false;
      }

      uni.downloadFile({
        url: fileUrl,
        success: function (res) {
          console.log('下载成功');
          // uni.openDocument({
          //   filePath: res.tempFilePath,
          //   fileType: 'pdf',
          //   success: function (res) {
          //     console.log('打开文档成功');
          //   }
          // });
        }
      });

    }

  }
}
</script>

<style lang="less" scoped>
.main_box {
  background: #292929;
}

//自定义导航栏
.navbar_section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #29d3b4;

  .title {
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #315d55;
  }
}

.main_section {
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 0rpx;
  padding-top: 32rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .section {
    background-color: #434544;
    padding: 40rpx 40rpx;
  }

  .section_1{
    padding: 0 24rpx;
    display: flex;
    flex-direction: column;

    .item{
      margin-bottom: 38rpx;
      display: flex;
      flex-direction: column;
      padding: 32rpx 24rpx;
      border-radius: 14rpx;
      background-color: #434544;
      color: #fff;
      .top{
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        .title{
          font-size: 30rpx;
        }
        .btn{
          display: flex;
          align-items: center;
          color: #29D3B4;
        }
      }
      .bottom{
        font-size: 26rpx;
        margin-top: 25rpx;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
        .box{
          display: flex;
          justify-content: space-between;
          .title{
            width: 180rpx;
          }
          .content{
            width: 100%;
          }
        }
      }

    }
  }

  .btn_section{
    display: flex;
    justify-content: center;
    align-items: center;
    .btn{
      border-radius: 10rpx;
      padding: 15rpx 0;
      width: 70%;
      color: #fff;
      font-size: 30rpx;
      text-align: center;
    }
  }



}

.describe {
  color: #999999;
  padding-left: 30rpx;
}


//创建订单弹出层
.order_modal{
  .fui-title {
    font-size: 32rpx;
    padding-top: 24rpx;
  }

  .fui-descr {
    font-size: 24rpx;
    color: #B2B2B2;
    padding-top: 12rpx;
    padding-bottom: 48rpx;
  }

  .fui-icon__close {
    position: absolute;
    right: 24rpx;
    top: 20rpx;
  }

  .form-section{

    .input-style {
      text-align: right !important;
      .input-title{}
    }
    .button_box{
      margin-top: 30rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20rpx;
    }
  }
}
</style>