<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>
    <el-card class="box-card" style="width: 94%;transform: translateX(3%);margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>数据列表</span>
        <button @click="add" style="float: right; padding: 3px 10px" type="text">添加</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="handleEdit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table-column>
       </el-table-column>
      </el-table>
    </el-card>
    <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>

  </div>
</template>

<script>
import {selectList, update } from '@/api/market/orders'
import {handleDelete} from "@/api/market/product";
import { diGui } from "@/api/market/orders";
//这里可以导入其他文件（比如：组件，工具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,

      options: [{
        value: ' ',
        label: '全选'
      }, {
        value: '0',
        label: '待支付'
      }, {
        value: '1',
        label: '已付款'
      }, {
        value: '2',
        label: '未付款'
      }, {
        value: '3',
        label: '售后中(申请退款) '
      } ,{
        value: '4',
        label: '已退款 '
      }]
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {

    // 删除
    handleDelete(orders){
      handleDelete(orders.id).then(
        res => {
          this.$message.success(res.msg)
          this.selectList()
        }
      )
    },
    // 重置
    chong(){
      this.orders={}
      this.selectList()
    },
    // 分页
    handleSizeChange(val) {
      this.orders.pageSize=val
      this.selectList()
    },
    handleCurrentChange(val) {
      this.orders.pageNum=val
      this.selectList()
    },
    // 上架，新品，推荐修改
    updateShop(orders){
      update(orders).then(
        res => {
          this.$message.success(res.msg)
          this.selectList()
        }
      )
    },
    // 修改跳转路径
    handleEdit(orders){
      if (this.orders.serviceIds && typeof this.orders.serviceIds === 'string') {
        orders.serviceid = this.orders.serviceIds.split(',');
        // ... 后续操作
      }
      console.log(JSON.stringify(orders))
      orders.serviceid=orders.serviceIds.split(',').map(id => parseInt(id, 10));
      console.log(JSON.stringify(orders))
      this.$router.push({path:'/product/info/update',query:{orders:orders}})
    },
    // 查询
    findShop(){
      this.selectList()
    },
    // 添加跳转路径
    add(){
      this.$router.push('add')
    },
    // 多选框
    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
        }
      )
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    // this.diGui()
    this.selectList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
