<template>
  <div>
    <div style="width: 100%;margin:2% 0;display: inline-block;">
      <span>套餐名称：</span>
      <el-input
        style="width: 150px;"
        @keydown.enter.native="select"
        clearable
        placeholder="请输入套餐名称"
        v-model="search.loversSetName"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;

      <span>购买用户手机号：</span>
      <el-input
        style="width: 180px;"
        @keydown.enter.native="select"
        clearable
        placeholder="请输入购买用户手机号"
        v-model="search.receiverPhone"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;

      <span>收货人手机号：</span>
      <el-input
        style="width: 180px;"
        @keydown.enter.native="select"
        clearable
        placeholder="请输入收货人手机号"
        v-model="search.receiverPhone"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <span>收货人姓名：</span>
      <el-input
        style="width: 180px;"
        @keydown.enter.native="select"
        clearable
        placeholder="请输入收货人姓名"
        v-model="search.receiverName"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <span>状态：</span>
      <el-select
        v-model="search.activeStatus"
        placeholder="请选择状态
        "
        style="width:150px;"
      >
        <el-option label="待支付" value="0"></el-option>
        <el-option label="待使用" value="1"></el-option>
        <el-option label="使用中" value="2"></el-option>
        <el-option label="已使用" value="3"></el-option> </el-select
      >&nbsp;&nbsp;&nbsp;&nbsp;

      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="attributeSelect"
        >查询</el-button
      >
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="attributeCleans"
        >重置</el-button
      >
      <el-button
        :disabled="!isAuth('specificationVolume:import')"
        size="mini"
        type="primary"
        icon="document"
        @click="attributeImport"
        >导出</el-button
      >
    </div>
    <el-table v-loading="tableDataLoading" :data="typeDatas.list" row-key="id">
      <el-table-column type="index" label="编号" width="80"> </el-table-column>
      <el-table-column label="购买套餐" prop="shopName"> </el-table-column>
      <el-table-column prop="ruleName" label="购买用户手机号">
      </el-table-column>
      <el-table-column label="收货人姓名" prop="skuInfo">
        <!-- <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.ruleValue" :key="index">
            <div>
              <span>{{ item.value }}:</span>
              <span>{{ item.detail }}</span>
            </div>
          </div>
        </template> -->
      </el-table-column>
      <el-table-column prop="ruleName" label="收货人手机号"> </el-table-column>
      <el-table-column prop="value" label="收货地址"> </el-table-column>
      <el-table-column prop="value" label="套餐订单id"> </el-table-column>
      <el-table-column prop="value" label="未使用订单详情时间">
      </el-table-column>
      <el-table-column prop="value" label="已使用订单详情时间">
      </el-table-column>
      <el-table-column prop="value" label="例假周期长度"> </el-table-column>
      <el-table-column prop="value" label="例假经期长度"> </el-table-column>
      <el-table-column prop="value" label="上一次例假开始时间">
      </el-table-column>
      <el-table-column prop="value" label="购买价格"> </el-table-column>
      <el-table-column prop="value" label="有效期"> </el-table-column>
      <el-table-column prop="value" label="状态"> </el-table-column>
      <el-table-column prop="value" label="状态更新时间"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('specification:update')"
            @click="updates(scope.row)"
          >
            订单详情
          </el-button>
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('specification:update')"
            @click="updates(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            :disabled="!isAuth('specification:delete')"
            @click="deletes(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div style="text-align: center;margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,  20, 30, 50, 100]"
        :page-size="size" :current-page="page" layout="total,sizes, prev, pager, next,jumper"
        :total="typeDatas.totalCount">
      </el-pagination>
    </div> -->

    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="typeDatas.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      size: 10,
      page: 1,
      limit: 10,
      typeDatas: { list: [], total: 10 },
      tableDataLoading:false,
      search: {
        userId: "", // 用户id，用户端不用传
        orderNumber: "", //订单编号
        loversSetName: "", //套餐名称
        receiverName: "", //收货人姓名
        receiverPhone: "", //收货人电话
        activeStatus: "" //订单激活状态;0待支付、1待使用、2使用中、3已使用
      },
      ruleValue: [],
      dynamicTags: [],
      form: {
        id: "",
        ruleName: "",
        ruleValue: [],
        createTime: ""
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    // 删除分类
    deletes(row) {
      this.$confirm(`确定删除此条信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("selfGoodsRule/delete"),
            method: "get",
            params: this.$http.adornParams({
              id: row.id
            })
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {}
              });
            }
          });
        })
        .catch(() => {});
    },
    // 获取数据
    dataSelect() {
      this.tableDataLoading = true;

      this.$http({
        url: this.$http.adornUrl("admin/lovers-set-order/pages"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.size,
          userId: this.search.userId,
          orderNumber: this.search.orderNumber,
          loversSetName: this.search.loversSetName,
          receiverName: this.search.receiverName,
          receiverPhone: this.search.receiverPhone,
          activeStatus: this.search.activeStatus
        })
      }).then(({ data }) => {
        console.log(data, "套餐订单分页");
        // if(data.code==0){}
        this.tableDataLoading = false;
        let returnData = data.data;
        this.typeDatas.list = returnData.list;
        this.typeDatas.total = returnData.totalCount;
      });
    },
    select() {
      this.page = 1;
      this.dataSelect();
    },

    // 查询
    attributeSelect() {
      this.page = 1;
      this.dataSelect();
    },
    // 重置
    attributeCleans() {
      this.shopName = "";
      this.skuName = "";
      this.info.stockDate = [
        dayjs()
          .subtract(1, "day")
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        dayjs()
          .subtract(1, "day")
          .endOf("day")
          .format("YYYY-MM-DD HH:mm:ss")
      ];
      this.page = 1;
      this.dataSelect();
    },
    // 导出
    attributeImport() {}
  },
  mounted() {
    this.dataSelect();
    console.log([
      dayjs()
        .subtract(1, "day")
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss"),
      dayjs()
        .subtract(1, "day")
        .endOf("day")
        .format("YYYY-MM-DD HH:mm:ss")
    ]);
  }
};
</script>

<style>
.customWidth {
  width: 60% !important;
}

.ruleitem {
  padding-left: 10px;
  margin-top: 15px;
}

.ruleitem .ruleicon {
  position: relative;
  top: 3px;
  left: 2px;
  width: 1.2em;
  height: 1.2em;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  height: 32px;
  line-height: 31px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #f5f7fa;
  position: relative;
  left: -5px;
  border-color: #dcdfe6;
  border: 1px solid #dcdfe6;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.el-input--small .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
</style>
