<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="shopName"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;

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

      <span>收货人手机号：</span>
      <el-input
        style="width: 180px;"
        @keydown.enter.native="select"
        clearable
        placeholder="请输入收货人手机号"
        v-model="skuName"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <span>收货人姓名：</span>
      <el-input
        style="width: 180px;"
        @keydown.enter.native="select"
        clearable
        placeholder="请输入收货人姓名"
        v-model="skuName"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <span>状态：</span>
      <el-select
        v-model="skuName"
        placeholder="请选择状态
        "
        style="width:150px;"
      >
        <el-option label="待使用" value="待使用"></el-option>
        <el-option label="使用中" value="使用中"></el-option>
        <el-option label="已使用" value="已使用"></el-option>
        <el-option label="已过期" value="已过期"></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> -->
    <!-- 添加规格 -->
    <el-dialog
      title="添加规格"
      customClass="customWidth"
      :visible.sync="dialogFormVisible"
    >
      <div style="margin-bottom: 10px;">
        <span style="width: 80px;display: inline-block;text-align: right;"
          >规格标题：</span
        >
        <el-input
          style="width:200px"
          v-model="ruleName"
          placeholder="请输入标题名称 例:衣服"
        ></el-input>
      </div>
      <div style="margin:40px 0 0 73px;">
        <div
          class="ruleitem"
          v-for="(item, index) in this.ruleValue"
          :key="index"
        >
          <div>
            {{ item.value }}
            <span @click="deleterule(index)">
              <icon-svg name="schu" class="ruleicon"></icon-svg>
            </span>
          </div>
          <div>
            <el-tag
              :key="tag"
              v-for="(tag, j) in item.detail.split(',')"
              closable
              :disable-transitions="false"
              @close="handleClose(tag, j, item)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-model="inputValues[index]"
              ref="saveTagInput"
              size="small"
              style="width:120px;"
              placeholder="请输入属性名"
              @keyup.enter.native="handleInputConfirm(index, item)"
            >
            </el-input>
            <el-button
              class="button-new-tag"
              size="small"
              @click="handleInputConfirm(index, item)"
              >添加</el-button
            >
          </div>
        </div>
      </div>
      <div style="margin:30px 0 0 83px;">
        <div v-if="isshow" class="btn_specif">
          <el-button type="primary" @click="btnToclick()">添加新规格</el-button>
        </div>
      </div>
      <div style="margin:10px 0 0 0px;">
        <div
          v-if="!isshow"
          style="margin-top: 20px;"
          :visible.sync="dialogFormVisible"
        >
          <div style="display: inline-block;">
            <span style="width: 80px;display: inline-block;text-align: right;"
              >规格：</span
            >
            <el-input
              style="width:50%;"
              v-model="releobject.value"
              placeholder="例:颜色"
            ></el-input>
          </div>
          <div style="display: inline-block;">
            <span style="width: 80px;display: inline-block;text-align: right;"
              >规格值：</span
            >
            <el-input
              style="width:50%;"
              v-model="releobject.detail"
              placeholder="例:黑色"
            ></el-input>
          </div>
          <div style="display: inline-block;">
            <el-button type="primary" @click="speciTo()">确 定</el-button>
            <el-button @click="speciTotwo()">取 消</el-button>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="specificationTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改规格 -->
    <el-dialog
      title="修改规格"
      customClass="customWidth"
      :visible.sync="dialogFormVisible1"
    >
      <div style="color:red;">
        此处修改的规格不会改变已生成的商品，如想更改商品信息请去商品列表更新商品
      </div>
      <el-form :model="form">
        <el-form-item label="规格标题：">
          <el-input
            v-model="form.ruleName"
            style="width:200px;"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div style="margin-left:73px;">
            <div
              class="ruleitem"
              v-for="(item, index) in form.ruleValue"
              :key="index"
            >
              <div>
                {{ item.value }}
                <span @click="deleterule1(index)">
                  <icon-svg name="schu" class="ruleicon"></icon-svg>
                </span>
              </div>
              <div>
                <el-tag
                  :key="tag"
                  v-for="(tag, j) in item.detail.split(',')"
                  closable
                  :disable-transitions="false"
                  @close="handleClose1(tag, j, item)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-model="inputValues[index]"
                  ref="saveTagInput"
                  size="small"
                  style="width:120px;"
                  placeholder="请输入属性名"
                  @keyup.enter.native="handleInputConfirm1(index, item)"
                >
                </el-input>
                <el-button
                  class="button-new-tag"
                  size="small"
                  @click="handleInputConfirm(index, item)"
                  >添加</el-button
                >
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="margin-left:83px;">
            <div v-if="isshow" class="btn_specif">
              <el-button type="primary" @click="btnToclick1()"
                >添加新规格</el-button
              >
            </div>
          </div>
          <div style="margin-top:10px;">
            <div
              v-if="!isshow"
              style="margin-top: 20px;"
              :visible.sync="dialogFormVisible"
            >
              <div style="display: inline-block;">
                <span
                  style="width: 100px;display: inline-block;text-align: right;"
                  >规格：</span
                >
                <el-input
                  style="width:50%;"
                  v-model="releobject.value"
                  placeholder="请输入规格"
                ></el-input>
              </div>
              <div style="display: inline-block;">
                <span
                  style="width: 100px;display: inline-block;text-align: right;"
                  >规格值：</span
                >
                <el-input
                  style="width:50%;"
                  v-model="releobject.detail"
                  placeholder="请输入规格值"
                ></el-input>
              </div>
              <div style="display: inline-block;">
                <el-button type="primary" @click="speciTo1()">确 定</el-button>
                <el-button @click="speciTotwo1()">取 消</el-button>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <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,
      ruleName: "",
      releobject: {
        value: "",
        detail: ""
      },
      detailarr: [],
      detsilshow: true,
      inputVisible: false,
      inputValues: {
        inputValue0: "",
        inputValue1: "",
        inputValue2: "",
        inputValue3: "",
        inputValue4: "",
        inputValue5: ""
      },
      ruleValue: [],
      dynamicTags: [],
      form: {
        id: "",
        ruleName: "",
        ruleValue: [],
        createTime: ""
      },
      isshow: true,
      formLabelWidth: "100px",
      tableDataLoading: false,
      dialogFormVisible1: false,
      dialogFormVisible: false,
      typeDatas: {
        list: [],
        total: 0
      },

      shopName: "",
      skuName: "", // 规格属性名
      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")
        ] //日期
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      this.size = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    deleterule(index) {
      this.ruleValue.splice(index, 1);
    },
    btnToclick() {
      this.isshow = false;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    speciTotwo() {
      this.isshow = true;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    speciTo() {
      if (this.ruleName == "") {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "请输入标题名称",
          type: "warning"
        });
        return;
      }
      if (this.releobject.value == "") {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "请输入规格",
          type: "warning"
        });
        return;
      }
      if (this.releobject.detail == "") {
        this.$message({
          title: "提示",
          duration: 1800,
          type: "error",
          message: "请输入规格值",
          type: "warning"
        });
        return;
      }

      this.ruleValue.push({
        value: this.releobject.value,
        detail: this.releobject.detail
      });
      this.isshow = true;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    handleClose(tag, j, item) {
      var detailarr = item.detail.split(",");
      detailarr.splice(j, 1);
      if (detailarr.length < 1) {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "规格值至少要有一个",
          type: "warning"
        });
        return;
      } else {
        item.detail = String(detailarr);
      }
    },
    handleInputConfirm(index, item) {
      let inputValue = this.inputValues[index];
      if (inputValue) {
        var detailarr = item.detail.split(",");
        detailarr.push(inputValue);
        for (var i = 0; i < detailarr.length; i++) {
          for (var j = 0; j < detailarr.length; j++) {
            if (detailarr[i] == detailarr[j] && i != j) {
              detailarr.splice(j, 1);
            }
          }
        }
        item.detail = String(detailarr);
        this.inputValues[index] = "";
      }
      this.inputVisible = false;
    },
    // 添加规格弹框
    addNotice() {
      this.ruleName = "";
      this.ruleValue = [];
      this.isshow = true;
      this.releobject.value = "";
      this.releobject.detail = "";
      this.dialogFormVisible = true;
    },
    // 添加规格
    specificationTo() {
      if (this.ruleName == "") {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "请输入标题名称",
          type: "warning"
        });
        return;
      }
      if (this.ruleValue.length == 0) {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "请至少添加一种规格",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl("selfGoodsRule/save"),
        method: "post",
        data: this.$http.adornData({
          ruleName: this.ruleName,
          ruleValue: this.ruleValue
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.dialogFormVisible = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.ruleName = "";
              this.ruleValue = [];
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    // 修改弹框
    updates(rows) {
      this.dialogFormVisible1 = true;
      this.form.id = rows.id;
      this.form.ruleName = rows.ruleName;
      this.form.ruleValue = rows.ruleValue;
      this.form.createTime = rows.createTime;
    },
    // 修改商品规格
    amendNoticeTo() {
      this.$http({
        url: this.$http.adornUrl("selfGoodsRule/update"),
        method: "post",
        data: this.$http.adornData({
          id: this.form.id,
          ruleName: this.form.ruleName,
          ruleValue: this.form.ruleValue,
          createTime: this.form.createTime
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.dialogFormVisible1 = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    btnToclick1() {
      this.isshow = false;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    speciTotwo1() {
      this.isshow = true;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    deleterule1(index) {
      this.form.ruleValue.splice(index, 1);
    },
    speciTo1() {
      this.form.ruleValue.push({
        value: this.releobject.value,
        detail: this.releobject.detail
      });
      this.isshow = true;
      this.releobject.value = "";
      this.releobject.detail = "";
    },
    handleClose1(tag, j, item) {
      var detailarr = item.detail.split(",");
      detailarr.splice(j, 1);
      if (detailarr.length < 1) {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "规格值至少要有一个",
          type: "warning"
        });
        return;
      } else {
        item.detail = String(detailarr);
      }
    },
    handleInputConfirm1(index, item) {
      let inputValue = this.inputValues[index];
      if (inputValue) {
        var detailarr = item.detail.split(",");
        detailarr.push(inputValue);
        for (var i = 0; i < detailarr.length; i++) {
          for (var j = 0; j < detailarr.length; j++) {
            if (detailarr[i] == detailarr[j] && i != j) {
              detailarr.splice(j, 1);
            }
          }
        }
        item.detail = String(detailarr);
        this.inputValues[index] = "";
      }
      this.inputVisible = false;
    },
    // 删除分类
    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;
      console.log(
        {
          page: this.page,
          limit: this.size,
          shopName: this.shopName,
          skuName: this.skuName,
          startTime: this.info.stockDate[0],
          endTime: this.info.stockDate[1]
        },
        "查询参数"
      );

      this.$http({
        url: this.$http.adornUrl("app/order/goods-sku-sales-count"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.size,
          shopName: this.shopName,
          skuName: this.skuName,
          startTime: this.info.stockDate[0],
          endTime: this.info.stockDate[1]
        })
      }).then(({ data }) => {
        console.log(data, "规格销量");

        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>
