<template>
  <div id="order-check">
    <div class="order-check-body" v-loading.fullscreen.lock="fullscreenLoading">
      <div class="order-management-body">
        <div class="order-management-inner">
          <!-- <span>时间段：</span>
          <el-date-picker size="large" v-model="searchDate" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2" value-format="yyyy-MM-dd" align="center">
          </el-date-picker> -->
          <span>关键字：</span>
          <el-input
            ref="searchOrderNumber"
            v-model="searchOrderNumber"
            value=""
            placeholder="用户名称"
          ></el-input>
          <el-button type="primary" @click="_searchOrderData(1)" color="red"
            >搜索</el-button
          >

          <!-- <el-button type="success" @click="active = {file: ''}" color='red' style="float: right">上传</el-button> -->
        </div>
        <div class="order-check_bottom">
          <div class="order-management-table">
            <el-table
              ref="order_table"
              class="e-table"
              :data="orders"
              style="width: 100%"
            >
              <el-table-column prop="id" label="用户id"> </el-table-column>
              <!-- <el-table-column prop="name" label="名称">
              </el-table-column> -->
              <el-table-column prop="userName" label="用户名称">
              </el-table-column>
              <el-table-column prop="incrementNum" label="会员权益">
              </el-table-column>
              <el-table-column prop="remainDownLoadNum" label="剩余下载次数">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="addVipNum(scope.row)"
                    class="new_edit_btn"
                    >新增权益</el-button
                  >
                  <el-button
                    type="text"
                    class="edit_btn"
                    @click="addDownLoadNum(scope.row)"
                    >新增下载</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="order-management-pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      @close="closeAdd"
      width="30%"
    >
      <el-form :model="vipForm" :rules="rules" ref="ruleForm">
        <div v-if="ambient ">
        <el-form-item  prop="num" v-if="dialogTitle == '新增下载'" :label="`新增下载数：`" :label-width="formLabelWidth">
          <el-input style="width: 80%;" @input="limitNum" v-model="vipForm.num"></el-input>
        </el-form-item>
        <el-form-item  prop="memberLevels" v-if="addType==1" label="权益类型：" :label-width="formLabelWidth" >
          <el-select @change="LevelsChange" v-model="vipForm.memberLevels" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  prop="incrementNum" v-if="addType==1" label="会员数量：" :label-width="formLabelWidth" >
          <el-input-number v-model="vipForm.incrementNum" :precision="0" :step="1" :max="50" :min="1" />
        </el-form-item>
        <el-form-item v-if="vipForm.memberLevels == 'SE' && addType==1"  prop="monthQy" label="会员期限：" :label-width="formLabelWidth" >
          <el-select v-model="vipForm.monthQy" @change="monthQyChange" placeholder="请选择">
            <el-option :key="1" label="1个月" :value="1"> </el-option>
            <el-option :key="2" label="2个月" :value="2"> </el-option>
            <el-option :key="3" label="3个月" :value="3"> </el-option>
            <el-option :key="4" label="4个月" :value="4"> </el-option>
            <el-option :key="5" label="5个月" :value="5"> </el-option>
            <el-option :key="6" label="6个月" :value="6"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="incrementEndTime" v-if="addType==1" label="到期时间：" :label-width="formLabelWidth">
          <el-date-picker style="width: 80%;" :disabled="vipForm.memberLevels == 'SE'" v-model="vipForm.incrementEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        </div>
        <div v-else>
        <el-form-item prop="num" :label="`${dialogTitle}数：`" :label-width="formLabelWidth">
          <el-input style="width: 80%;" @input="limitNum" v-model="vipForm.num"></el-input>
        </el-form-item>
        <el-form-item prop="incrementEndTime"  v-if="addType==1" label="到期时间：" :label-width="formLabelWidth">
          <el-date-picker style="width: 80%;"  v-model="vipForm.incrementEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAdd">取 消</el-button>
        <el-button type="primary" @click="addNum">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: "order-check",
  data() {
    return {
      //   type: 9, PR:专业会员；SE:高级会员
      options:[{
          value: 'PR',
          label: '专业会员'
        },{
          value: 'SE',
          label: '高级会员'
        }],
      ambient:true,
      orders: [],
      currentPage: 1,
      fullscreenLoading: false,
      total: 0,
      searchDate: [],
      searchOrderNumber: '',
      hasClickSearch: false,
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dialogFormVisible: false,
      formLabelWidth: "180px",
      vipForm: {
        num: 1,
        incrementNum: 1,
        incrementEndTime: "",
      },
      dialogTitle: "新增权益",
      addType: 1,
      rules: {
        memberLevels:[{ required: true, message: "请选择权益类型", trigger: "change" }],
        incrementNum: [{ required: true, message: "请输入数量", trigger: "blur" }],
        monthQy:[{ required: true, message: "请选择会员期限", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        incrementEndTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    limitNum() {
      //   if (this.vipForm.num - 0 == 0 && this.vipForm.num.length == 1) {
      //     this.vipForm.num = 1
      //   } else {
      //     // this.vipForm.num = this.vipForm.num.replace(/[^1-9]/g, '')
      //   }

      if (this.vipForm.num - 0 == 0 && this.vipForm.num.length == 1) {
        this.vipForm.num = 1;
      } else {
        this.vipForm.num = this.vipForm.num.replace(/\D/g, "");
      }
    },
    LevelsChange(val) {
      if(val == 'PR'){
        let month = moment().add(1, 'y').format('YYYY-MM-DD hh:mm:ss');
        this.vipForm.incrementEndTime = month
      }else{
        this.monthQyChange(this.vipForm.monthQy || 0)
      }
    },
    monthQyChange(val) {
      let month = moment().add(val, 'M').format('YYYY-MM-DD hh:mm:ss');
      this.vipForm.incrementEndTime = month
    },
    addDownLoadNum(row) {
      this.vipForm.userName = row.userName;
      this.addType = 2;
      this.dialogFormVisible = true;
      this.dialogTitle = "新增下载";
    },
    addVipNum(row) {
      this.vipForm.userName = row.userName;
      this.addType = 1;
      this.dialogTitle = "新增权益";
      this.dialogFormVisible = true;
    },
    closeAdd() {
      this.dialogFormVisible = false;
      this.vipForm.num = 1;
      this.vipForm.incrementEndTime = "";
      this.$refs["ruleForm"].resetFields();
    },
    addNum() {
      let params;
      if (this.addType == 1) {
        // params = this.vipForm

        params = this.ambient?{
          userName: this.vipForm.userName,
          incrementEndTime: this.vipForm.incrementEndTime,
          incrementNum: this.vipForm.incrementNum,
          memberLevels: this.vipForm.memberLevels,
          monthQy: this.vipForm.monthQy,
        }: {
          userName: this.vipForm.userName,
          incrementEndTime: this.vipForm.incrementEndTime,
          incrementNum: this.vipForm.num,
        };
      } else {
        params = {
          downloadNum: this.vipForm.num,
          userName: this.vipForm.userName,
        };
      }

      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          this.$http
            .post("/manager/user/insertIncrementls", params)
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                  duration: 2000,
                });
                this.closeAdd();
                this._searchOrderData(1);
              } else {
                this.$message({
                  message: "添加失败",
                  type: "error",
                  duration: 2000,
                });
              }
            });
        } else {
          console.log("请补全信息");
        }
      });
    },

    handleCurrentChange(val) {
      let page = val;
      if (this.total > 0 && !this.hasClickSearch) {
        this._searchOrderData(page);
      } else {
        this._searchOrderData(page);
      }
    },

    async _searchOrderData(page) {
      this.hasClickSearch = true;

      this.fullscreenLoading = true;

      let para = {
        pageNum: page,
        searchKey: this.searchOrderNumber,

        pageSize: 10,
      };

      let url = "/manager/user/list";

      let data = (await this.$http["post"](url, para)).data;
      console.log(data);
      this.fullscreenLoading = false;
      let temp = data.list;
      for (var i = 0; i < temp.length; i++) {
        // temp[i]['expressNum_input'] = "";
        temp[i].items = [];
        temp[i].remainDownLoadNum =
          temp[i].downloadNumTotal - temp[i].downloadNum;
        if (!temp[i].incrementNum) {
          temp[i].incrementNum = 0;
        }
      }
      this.orders = temp;
      this.currentPage = page;
      this.total = data.total;
    },
  },
  mounted() {
    this._searchOrderData(1);
  },
};
</script>

<style scoped>
@import url("./style.css");
</style>

<style type="text/css">
.el-table__expand-icon > i {
  display: none !important;
}
</style>
