<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.productName" placeholder="商品名称" style="width: 180px;margin-right: 50px"></el-input>
            订单编号：<el-input v-model="orders.ordersNum" placeholder="编号" style="width: 180px;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>
            <br/> <br/>
            选择时间:
            <el-date-picker v-model="orders.startDate" type="date" placeholder="开始时间" />
            -----
            <el-date-picker v-model="orders.endDate" type="date" placeholder="结束时间"/>

          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <br>
    <button style="float: right; padding: 3px 10px" type="text" @click="reclaim">回收站</button>
    <br>
    <el-card class="box-card" style="width: 94%;transform: translateX(3%);margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>数据列表</span>
        <button @click="add(1)" style="float: right; padding: 3px 10px" type="text">添加</button>
        <button style="float: right; padding: 3px 10px" type="text" @click="getOut">导出</button>
      </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="120" 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="150" 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="110" 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="ordersUpdate(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="ordersDelete(scope.row)">删除</el-button>
            <el-button
              type="primary"
              size="small"
              @click="pay(scope.row)" >支付</el-button>
<!--              v-if="scope.row.status === '待支付'"-->
          </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>

    <el-dialog
      :title="addtitle"
      :visible.sync="addordersoff"
      width="50%"
      :before-close="handleClose">
      <div v-if="this.index==1">
        <h2>管理员慎重填写</h2><br>
        <el-form :model="ordersForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="订单编号：" prop="ordersNum">
            <el-input type="text" v-model="ordersForm.ordersNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单产品：" prop="ordersProduct">
            <el-input type="text" v-model="ordersForm.ordersProduct" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单所属人：" prop="ordersUser">
            <el-input type="text" v-model="ordersForm.ordersUser" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单金额：" prop="ordersPrice">
            <el-input type="text" v-model="ordersForm.ordersPrice" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单规格：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.ordersSpecification" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <center>
          <el-button @click="addordersoff = false">取 消</el-button>
          <el-button type="primary" @click="addorders(ordersForm)">提交</el-button>
        </center>
      </div>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

</div>
</template>


<script>
import { selectList, updateOrders, addordersup, ordersDelete, pay, getOut } from '@/api/market/orders'
import { diGui } from "@/api/market/orders";
import axios from 'axios'


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

      Cascader:{ expandTrigger:'hover',value:'id',label:'typeName',children:'parentPOS' },
      typeId:[],
      startDate: null,
      endDate: null,

      index:'',
      addtitle:'',
      addordersoff:false,
      ordersForm:{},

      options: [{
        value: ' ',
        label: '全选'
      }, {
        value: '0',
        label: '待支付'
      }, {
        value: '1',
        label: '已付款'
      }, {
        value: '2',
        label: '未付款'
      }, {
        value: '3',
        label: '售后中(申请退款) '
      } ,{
        value: '4',
        label: '已退款 '
      }]
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    // 多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //商品列表
    selectList() {
      selectList(this.orders).then(
        res => {
          console.log(res)
          this.arr = res.data.list
          this.orders.total = res.data.total
        }
      )
    },
    // 删除
    ordersDelete(row){
      ordersDelete(row.ordersId).then(
        res => {
          this.$message.success(res.msg)
          this.selectList()
        }
      )
    },
    // 分页
    handleSizeChange(val) {
      this.orders.pageSize=val
      this.selectList()
    },
    handleCurrentChange(val) {
      this.orders.pageNum=val
      this.selectList()
    },
    // 重置
    chong(){
      this.orders={}
      this.selectList()
    },
    // 查询
    findShop(){
      this.selectList()
    },
    // 添加跳转路径
    add(index){
      this.index=index
      if (this.index === 1) {
        this.addtitle= '添加订单';
      }
      // else if (this.index === 2) {
      //   this.dialogtitle= '';
      // }
      this.addordersoff=true
    },
    addorders(ordersForm){
      addordersup(ordersForm).then(response=>{
        alert(response.msg)
        if (response.code==200){}
        this.addordersoff=false
      })
      location.reload();
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 修改跳转路径
    ordersUpdate(row){
      this.$router.push({path:"/updorders/index",query:{orders:row}})
    },

    pay(row){
      console.log(row)
      window.open("http://localhost:9701/alipay/pay?productName="+row.productName +"&ordersNum="+row.ordersNum+"&ordersPrice="+row.ordersPrice)
      this.$message.success('付款成功')
        },

    getOut(){
      this.download('system/operlog/export', {
        ...this.queryParams
      }, `operlog_${new Date().getTime()}.xlsx`)

    },

    reclaim(){
      this.$router.push({path:"/reclaim/index"})
    }

    // getOut(){
    //   axios.get('/market/orders/getOutAll').
    //   then(response =>{
    //     if(response.data && response.data instanceof ArrayBuffer)
    //     {
    //      const blob = new Blob([response.data],{type:'application/octet-stream'});
    //      saveAs(blob ,'订单信息表');
    //     }else{
    //       console.error("导出失败:" ,error);
    //     }
    //   })
    // }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    // this.diGui()
    this.selectList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
