<template>
  <div>
    <el-card class="box-card" style="width: 94%;transform: translateX(3%);margin-top: 30px">
      <div slot="header" class="clearfix">
        <span>筛选搜索</span>
        <el-button style="float: right; padding: 3px 30px" type="text" @click="findShop">查询结果</el-button>
        <el-button style="float: right; padding: 3px 10px" type="text" @click="chong">重置</el-button>
      </div>
      <div class="text item">
        <el-form ref="form" :model="orders" label-width="100px">
          <el-form-item>
            订单编号：<el-input v-model="orders.ordersNum" placeholder="编号" style="width: 130px;margin-right: 50px"></el-input>
            订单款项状态：
            <el-select v-model="orders.ordersState" placeholder="请选择状态" style="margin-right: 30px" clearable>
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            选择时间:
            <el-date-picker v-model="orders.startDate" type="date" placeholder="开始时间" style="width: 130px;"/>
            -----
            <el-date-picker v-model="orders.endDate" type="date" placeholder="结束时间" style="width: 130px;"/>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <br>
    <button style="float: right; padding: 3px 10px" type="text" @click="orderslist">返回订单列表</button>
    <br>
    <el-card class="box-card" style="width: 94%;transform: translateX(3%);margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>回收站列表</span>
      </div>
      <el-table :data="arr" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column   label="日期" width="150" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.ordersLaunchdate }}</span>
          </template>
        </el-table-column>
       <el-table-column label="购买信息">
        <el-table-column  label="订单编号" width="150" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px"> {{ scope.row.ordersNum }}</span>
          </template>
        </el-table-column>
         <el-table-column label="订单所属人" width="100" align="center">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.userName }}</span>
           </template>
         </el-table-column>

        <el-table-column label="购买详情">
          <el-table-column prop="province" label="购买接口" width="200" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.productName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单金额" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.ordersPrice }}</span>
          </template>
        </el-table-column>
          <el-table-column label="订单规格" width="300" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.ordersSpecification }}</span>
            </template>
          </el-table-column>
        <el-table-column label="订单款项状态" width="130" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.ordersState==0">待支付</span>
            <span style="margin-left: 10px" v-if="scope.row.ordersState==1">已付款</span>
            <span style="margin-left: 10px" v-if="scope.row.ordersState==2">未付款</span>
            <span style="margin-left: 10px" v-if="scope.row.ordersState==4">售后(申请退款)</span>
            <span style="margin-left: 10px" v-if="scope.row.ordersState==5">已退款</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">恢复</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="ordersDelete(scope.row)">彻底删除</el-button>
          </template>
        </el-table-column>
        </el-table-column>
       </el-table-column>
      </el-table>
    <el-pagination style="float: right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="orders.pageNum"
                   :page-sizes="[2, 4, 6, 8]"
                   :page-size="orders.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="orders.total">
    </el-pagination>
    </el-card>

</div>
</template>


<script>
import { ordersDelete, listreclaim, updateByExist} from '@/api/market/orders'
import { diGui } from "@/api/market/orders";


//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      orders:{
        pageNum:1,
        pageSize:10,
        total:1,
        typeId:0
      },
      arr:[],
      type:[],
      startDate: null,
      endDate: null,
      index:'',
      ordersForm:{},

      options: [{
        value: ' ',
        label: '全选'
      }, {
        value: '0',
        label: '待支付'
      }, {
        value: '1',
        label: '已付款'
      }, {
        value: '2',
        label: '未付款'
      }, {
        value: '3',
        label: '售后中(申请退款) '
      } ,{
        value: '4',
        label: '已退款 '
      }]
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    //商品列表
    listreclaim() {
      listreclaim(this.orders).then(
        res => {
          console.log(res)
          this.arr = res.data.list
          this.orders.total = res.data.total
        }
      )
    },
    showConfirmDialog() {

    },
    //复原
    handleEdit(row){
      this.$confirm('你确定要执行此操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定后的操作
        console.log('用户点击了确定');
        updateByExist(row.ordersId).then(
          res =>{
            this.$message.success(res.msg)
            this.listreclaim()
          }
        )
      }).catch(() => {
        // 用户点击取消后的操作
        console.log('用户点击了取消');
      });
      location.reload();
    },
    // 删除
    ordersDelete(row){
      ordersDelete(row.ordersId).then(
        res => {
          this.$message.success(res.msg)
          this.listreclaim()
        }
      )
      location.reload();
    },
    // 重置
    chong(){
      this.orders={}
      this.listreclaim()
    },
    // 多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange(val) {
      this.orders.pageSize=val
      this.listreclaim()
    },
    handleCurrentChange(val) {
      this.orders.pageNum=val
      this.listreclaim()
    },
    orderslist(){
      this.$router.push({path:"/market/orders"})
    },
    // 查询
    findShop(){
      this.listreclaim()
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.listreclaim()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
