<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
    >
      <el-form-item label="活动时间:" prop="dateRange">
        <el-date-picker
          v-model="queryParams.dateRange"
          :picker-options="pickerOptions"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          style="width: 225px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="活动名称:" prop="activityName">
        <el-input
          v-model="queryParams.activityName"
          placeholder="请输入活动名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="活动编码:" prop="activityNo">
        <el-input
          v-model="queryParams.activityNo"
          placeholder="多个活动编码使用逗号隔开"
          clearable
        />
      </el-form-item>
      <el-form-item label="活动类型:" prop="activityType">
        <el-select
          v-model="queryParams.activityType"
          placeholder="请选择活动类型"
          style="width: 220px"
          clearable
        >
          <el-option
            v-for="(dict, index) in rebateTypeCodeList"
            :key="index"
            :label="dict.name"
            :value="dict.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="活动状态:" prop="activityState">
        <el-select
          v-model="queryParams.activityState"
          placeholder="请选择活动状态"
          style="width: 220px"
          clearable
        >
          <el-option
            v-for="(dict, index) in statusList"
            :key="index"
            :label="dict.name"
            :value="dict.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="渠道:" prop="channelCodes">
        <el-select
          v-model="queryParams.channelCodes"
          filterable
          :reserve-keyword="true"
          placeholder="请选择渠道"
          clearable
          multiple
        >
          <el-option
            v-for="(dict, index) in channelList"
            :key="index"
            :label="dict.channelName"
            :value="dict.channelCode"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="商品编码:" prop="skuNos">
        <el-input
          v-model="queryParams.skuNos"
          placeholder="多个商品编码使用逗号隔开"
          clearable
        />
      </el-form-item>
      <el-form-item label="商品名称:" prop="skuNo">
        <LoadMoreSelect
          :skuNo="queryParams.skuNo"
          @queryParams="(val) => (queryParams.skuNo = val)"
        />
      </el-form-item>
      <el-row :gutter="10" class="mb8" type="flex" justify="end">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          >新建活动</el-button
        >
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      ref="proTable"
      border
      v-loading="loading"
      :data="postList"
      :height="tableHeight"
    >
      <!-- <el-table-column type="selection" width="55" align="left" /> -->
      <el-table-column
        label="活动名称/编码"
        min-width="150"
        align="left"
        prop="activitieCode"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.activityName }}/{{ scope.row.activityNo }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="活动类型" min-width="110" align="left" prop="presaleType">
        <template slot-scope="scope">
          <span v-show="scope.row.presaleType == 0">品牌新品预售</span>
          <span v-show="scope.row.presaleType == 1">渠道预售活动</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动开始时间"
        min-width="160"
        align="left"
        prop="startTime"
      >
      </el-table-column>
      <el-table-column
        label="活动结束时间"
        min-width="160"
        align="left"
        prop="endTime"
      >
      </el-table-column>
      <el-table-column label="参与渠道" min-width="140" align="left" prop="channels">
        <template slot-scope="scope">
          <div :key="index" v-for="(item,index) in scope.row.channels">{{item.channelName}}/{{item.channelCode}}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" min-width="110" align="left" prop="activityState">
        <template slot-scope="scope">
          <span v-show="scope.row.activityState == 0">待提交</span>
          <span v-show="scope.row.activityState == 1">待审批</span>
          <span v-show="scope.row.activityState == 2">启用</span>
          <span v-show="scope.row.activityState == 3">下线</span>
          <span v-show="scope.row.activityState == 4">审批打回</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动商品"
        min-width="240"
        align="left"
        prop="skus"
      >
        <template slot-scope="scope">
          <div :key="index" v-for="(item,index) in scope.row.skus">{{item.skuName}}/{{item.skuNo}}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180" align="left" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.activityState == 1"
              @click="recallItem(scope.row)"
              :disabled="userName!=scope.row.createBy"
              >撤回</el-button
            >
            <el-button
              size="mini"
              v-if="
                scope.row.activityState == 0 || scope.row.activityState == 4
              "
              type="text"
              :disabled="userName!=scope.row.createBy"
              @click="handleEdit(scope.row, 1)"
              >编辑</el-button
            >
            <el-button size="mini" type="text" @click="handleEdit(scope.row, 2)"
              >查看详情</el-button
            >
            <el-button
              size="mini"
              v-if="scope.row.activityState == 2"
              type="text"
              @click="handleOff(scope.row)"
              :disabled="userName!=scope.row.createBy"
              >下线</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      class="fixed-pagination"
    />

    <el-dialog
      :title="title"
      :visible.sync="open2"
      top="50px"
      width="800px"
      append-to-body
    >
      <el-tabs type="card" v-model="activeName">
        <el-tab-pane label="预售活动" name="1">
          <el-row>
            <h3 style="margin-top: 0"><span></span>预售活动信息</h3>
            <el-form
              :model="addForm"
              ref="addForm"
              size="small"
              :inline="true"
              :disabled="disabledForm"
              label-width="120px"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item label="活动类型:" prop="presaleType">
                    <el-radio-group
                      v-model="addForm.presaleType"
                    >
                      <el-radio label="0">品牌新品预售</el-radio>
                      <el-radio label="1">渠道预售活动</el-radio>
                    </el-radio-group>
                    <div class="color-r" v-show="addForm.rebateTypeCode == '0'">
                      品牌方指定的新品预售活动，由采购经理负责创建，采购总监审批
                    </div>
                    <div class="color-r" v-show="addForm.rebateTypeCode == '1'">
                      渠道申报预售活动，有渠道运营负责创建，销售总监审批
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="活动名称:"
                    :rules="[
                      {
                        required: true,
                        message: '请输入活动名称',
                        trigger: 'change',
                      },
                    ]"
                    prop="activityName"
                  >
                    <el-input
                      v-model="addForm.activityName"
                      max-Length="50"
                      style="width: 400px"
                      placeholder="请输入活动名称"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="活动日期:"
                    :rules="[
                      {
                        required: true,
                        message: '请选择活动日期',
                        trigger: 'change',
                      },
                    ]"
                    prop="dateRange"
                  >
                    <el-date-picker
                      v-model="addForm.dateRange"
                      :picker-options="pickerOptions2"
                      type="datetimerange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 400px"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="活动状态:" prop="activityState">
                    <span v-show="addForm.activityState == 0">待提交</span>
                    <span v-show="addForm.activityState == 1">待审批</span>
                    <span v-show="addForm.activityState == 2">启用</span>
                    <span v-show="addForm.activityState == 3">下线</span>
                    <span v-show="addForm.activityState == 4">审批打回</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="参与渠道:" :rules="[
                      {
                        required: true,
                        message: '请选择活动日期',
                        trigger: 'change',
                      },
                    ]" prop="channelCodes">
                <el-select
                  v-model="addForm.channelCodes"
                  filterable
                  :reserve-keyword="true"
                  placeholder="请选择参与渠道"
                  clearable
                  multiple
                >
                  <el-option
                    v-for="(dict, index) in channelList"
                    :key="index"
                    :label="dict.channelName"
                    :value="dict.channelCode"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </el-row>
            <h3><span></span>预售活动商品</h3>
            <el-row
              style="margin-bottom: 8px"
              v-show="addForm.rebateTypeCode != 'ZDCMF' && !disabledForm"
            >
              <el-popover placement="bottom" width="600" v-model="goodsVisible">
                <el-input
                  v-model="goodsText"
                  ref="goodsText"
                  id="goodsText"
                  type="textarea"
                  :rows="8"
                  placeholder="多个商品编码使用逗号隔开"
                  clearable
                  @input="copySkus"
                />
                <div style="text-align: right; margin-top: 4px">
                  <el-button size="mini" type="text" @click="goodsVisible = false"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    :loading="saveGoodsLoading"
                    size="mini"
                    @click="saveGoods"
                    >确定</el-button
                  >
                </div>
                <el-button slot="reference">添加商品</el-button>
              </el-popover>
            </el-row>

            <el-table
              ref="goodsTable"
              border
              :data="goodsTableList"
            >
              <el-table-column label="商品编码" align="left" prop="skuNo" min-width="140"  />
              <el-table-column label="商品名称" align="left" prop="skuName" min-width="140">
                <template slot-scope="scope">
                  <span>{{ scope.row.skuName }}</span>
                  <el-button
                    type="text"
                    size="mini"
                    @click="removeStage(scope.$index)"
                    v-show="!disabledForm"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="日志" name="2">
          <el-table ref="logTable" border :data="historyLogTableList">
            <el-table-column
              label="操作步骤"
              min-width="140"
              align="left"
              prop="operationName"
            />
            <el-table-column label="操作描述" min-width="140" align="left" prop="logMsg">
              <template slot-scope="scope">
                <span v-html="scope.row.operationMsg"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作人"
              min-width="100"
              align="left"
              prop="createBy"
            />
            <el-table-column
              label="操作时间"
              min-width="140"
              align="left"
              prop="createTime"
            />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button
          :loading="saveLoading"
          type="primary"
          @click="saveDept"
          v-show="!disabledForm"
          >提交</el-button
        >
        <el-button @click="open2 = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getChannelList } from "@/api/bizMonitor/index";
import { getBrandNameList, getList } from "@/api/goods/index";
import {
  activitieSuppliers
} from "@/api/activitie/index";
import { presaleQueryPage,presaleAdd,presaleDetail,presaleDetailLog,presaleUpdate,presaleUpdateStatus } from '@/api/saleConfig/activitie';

import LoadMoreSelect from "@/components/LoadMoreSelect/index";
import { getToken } from "@/utils/auth";

export default {
  name: "SaleConfigActivitie",
  components: {
    LoadMoreSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      spuList: [],
      historyTableList: [],
      historyLogTableList: [],
      fileAction: process.env.VUE_APP_BASE_API_NEW + "/activitie/upload/file",
      goodsTableList: [],
      goodsVisible: false,
      saveGoodsLoading: false,
      headerValue: "",
      headerValue2: "",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API_NEW + "/activitie/analysis/sku/file",
      },
      stageInfos: [
        {
          price: 0,
          ratePrice: 0,
          stage: 1,
        },
        {
          price: 0,
          ratePrice: 0,
          stage: 1,
        },
      ],
      detailQuery: {
        total: 0,
        pageSize: 10,
        page: 1,
        dates: [],
      },
      detailTableList: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open2: false,
      goodsOpen: false,
      channelTableLoading: false,
      activeName: "1",
      rebateTypeCodeList: [
        { code: "0", name: "品牌新品预售" },
        { code: "1", name: "渠道预售活动" },
      ],
      statusList: [
        { code: 0, name: "待提交" },
        { code: 1, name: "待审批" },
        { code: 2, name: "审批打回" },
        { code: 3, name: "启用" },
        { code: 4, name: "下线" },
      ],
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        "activityName": "",
        "activityNo": "",
        "activityState": "",
        "activityType": "",
        "channelCodes": [],
        "endDate": "",
        "skuNo": "",
        "skuNos": "",
        "startDate": ""
      },
      addForm: {
        "activityName": "",
        "channelCodes": [],
        "endTime": "",
        "presaleType": '0',
        "skuNos": [],
        "startTime": ""
      },
      dateRange: [],
      fileList: [],
      goodsText: "",
      bindForm: {
        bindSkuNo: "",
      },
      // 表单参数
      form: {},
      expandRowKeys: [],
      treeKey: "",
      isExpand: false,
      brandNameList: [],
      saveLoading: false,
      bindModal: {
        open: false,
        id: "",
      },
      timer: null,
      chartLading: true,
      loadDataStatus: true,
      tableHeight: "auto",
      channelList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            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 * 15);
              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]);
            },
          },
        ],
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.67e7 ;
        },
        shortcuts: [
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            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 * 15);
              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]);
            },
          },
        ],
      },
      today: "",
      expandText: "全部展开",
      suppliersList: [],
      disabledForm: false,
    };
  },
  watch: {
    showSearch(n, _) {
      this.$nextTick(() => {
        const height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 210;
        this.tableHeight = height + "px";
      });
    },
  },
  computed: {
    roles() {
      return this.$store.getters.roles;
    },
    userName() {
      return this.$store.getters.userid;
    },
  },
  created() {
    this.treeKey = new Date();

    if (localStorage.getItem("saleActivitie-query")) {
      this.queryParams = JSON.parse(localStorage.getItem("saleActivitie-query"));
      this.queryParams.page = 1;
      this.queryParams.pageSize = 10;
    }

    // 获取当前月的第一天
    const currentMonthFirstDay = new Date();
    currentMonthFirstDay.setDate(1);

    // 获取当前月的最后一天
    const currentMonthLastDay = new Date();
    currentMonthLastDay.setMonth(currentMonthLastDay.getMonth() + 1);
    currentMonthLastDay.setDate(0);

    const year = currentMonthFirstDay.getFullYear();
    const month =
      currentMonthFirstDay.getMonth() + 1 < 10
        ? "0" + (currentMonthFirstDay.getMonth() + 1)
        : currentMonthFirstDay.getMonth() + 1;
    const day =
      currentMonthFirstDay.getDate() < 10
        ? "0" + currentMonthFirstDay.getDate()
        : currentMonthFirstDay.getDate();
    this.queryParams.dateRange = [];
    this.queryParams.dateRange[0] = year + "-" + month + "-" + day;
    const year2 = currentMonthLastDay.getFullYear();
    const month2 =
      currentMonthLastDay.getMonth() + 1 < 10
        ? "0" + (currentMonthLastDay.getMonth() + 1)
        : currentMonthLastDay.getMonth() + 1;
    const day2 =
      currentMonthLastDay.getDate() < 10
        ? "0" + currentMonthLastDay.getDate()
        : currentMonthLastDay.getDate();
    this.queryParams.dateRange[1] = year2 + "-" + month2 + "-" + day2;

    this.getList();
    this.getBrandNameList();
  },
  mounted() {},
  methods: {
    copySkus(value){
      this.goodsText = value.replace(/\n/g,',')
    },
    saveGoods() {
      this.saveGoodsLoading = true;
      getList({ sku: this.goodsText })
        .then((res) => {
          if (res.rows.length != 0) {
            res.rows.forEach((item) => {
              let status = true;
              this.goodsTableList.forEach((it) => {
                if (it.skuNo == item.sku) {
                  status = false;
                }
              });
              if (status) {
                this.goodsTableList.push({
                  skuName: item.skuName,
                  skuNo: item.sku,
                });
              }
            });
          }

          this.goodsVisible = false;
          this.saveGoodsLoading = false;
        })
        .catch((err) => {});
    },
    getBrandNameList() {
      getBrandNameList().then((res) => {
        this.brandNameList = res.data;
      });
      activitieSuppliers().then((res) => {
        this.suppliersList = res.data.supplierListResDTOS;
      });
      getChannelList().then((res) => {
        this.channelList = res.data || [];
      });
    },
    rowStyle({ row, rowIndex }) {
      if (row.skuName == "合计" || row.skuName == "总计") {
        return { background: "#f5f7fa" };
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.activitieCode);
    },
    recallItem(row) {
      this.$confirm("撤回后审批人将无法审批当前预售活动，确定要撤回吗？", "提示", {
        type: "warning",
      }).then(() => {
        this.loading = true;
        presaleUpdateStatus({ activityNo: row.activityNo, status: 0 })
          .then((res) => {
            if (res.status == 200) {
              this.$message.success("撤回成功");
              this.getList();
            }
            this.loading = false;
          })
          .catch((_) => {
            this.loading = false;
          });
      });
    },
    removeStage(index) {
      this.goodsTableList.splice(index, 1);
    },
    /** 查询岗位列表 */
    getList() {
      const data = { ...this.queryParams };
      if (data.dateRange && data.dateRange.length != 0) {
        data.startDate = data.dateRange[0];
        data.endDate = data.dateRange[1];
      } else {
        data.startDate = "";
        data.endDate = "";
      }

      localStorage.setItem("saleActivitie-query", JSON.stringify(data));

      this.loading = true;
      presaleQueryPage(data).then((response) => {
        this.postList = response.data.list;
        this.total = response.data.total;
        this.loading = false;

        this.$nextTick(() => {
          const height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 210;
          this.tableHeight = height + "px";
        });
      });
    },
    handleOff(row) {
      this.$confirm("下线后预售活动将失效，确认要执行吗？", "提示", {
        type: "warning",
      }).then(() => {
        this.loading = true;
        presaleUpdateStatus({ activityNo: row.activityNo,status: 3 })
          .then((res) => {
            if (res.status == 200) {
              this.$message.success("下线成功");
              this.getList();
            }
            this.loading = false;
          })
          .catch((_) => {
            this.loading = false;
          });
      });
    },
    handleEdit(row, type) {
      if (type == 1 || type==2) {
        presaleDetail({ activityCode : row.activityNo }).then((res) => {
          this.addForm = Object.assign(
            this.addForm,
            JSON.parse(JSON.stringify(res.data))
          );
          this.addForm.presaleType = this.addForm.presaleType+ ''
          this.addForm.dateRange = [this.addForm.startTime, this.addForm.endTime];
          this.addForm.channelCodes = [];
          res.data.channels.forEach(item=>{
            this.addForm.channelCodes.push(item.channelCode);
          })
          this.goodsTableList = res.data.skus;
          this.activeName = "1";
          
          if(type==1){
            this.title = "编辑预售活动";
            this.disabledForm = false;
          }else if(type==2){
            this.title = "查看预售活动";
            this.disabledForm = true;
          }
          
          this.open2 = true;
        });
      }

      presaleDetailLog({ activityCode : row.activityNo }).then((res) => {
        this.historyLogTableList = res.data;
      });
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.addForm = {
        "activityName": "",
        "channelCodes": [],
        "endTime": "",
        "presaleType": '0',
        "skuNos": [],
        "startTime": ""
      };

      this.historyLogTableList = [];
      this.annexs = [];
      this.fileList = [];
      this.goodsTableList = [];
      this.activeName = "1";
      this.open2 = true;
      this.disabledForm = false;
      this.title = "新建预售活动";
      this.$nextTick(() => {
        if (this.$refs["addForm"]) {
          this.$refs["addForm"].clearValidate();
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      const data = { ...this.queryParams };
      if (data.dateRange && data.dateRange.length != 0) {
        data.startDate = data.dateRange[0];
        data.endDate = data.dateRange[1];
      } else {
        data.startDate = "";
        data.endDate = "";
      }
      delete data.page;
      delete data.pageSize;
      this.newDownload("presale/export", data, `预售活动_${new Date().getTime()}.xlsx`);
    },
    saveDept() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {

          const datas = JSON.parse(JSON.stringify(this.addForm));
          const goodsTableList = JSON.parse(JSON.stringify(this.goodsTableList));

          const skuNos = [];
          if(goodsTableList.length==0){
            this.$message.warning('请选择商品！');
            return false;
          }
          goodsTableList.forEach(item=>{
            skuNos.push(item.skuNo);
          })

          datas.skuNos = skuNos;
          datas.startTime = this.addForm.dateRange[0];
          datas.endTime = this.addForm.dateRange[1];
          // return false
          this.saveLoading = true;
          if (this.title == "编辑预售活动") {
            presaleUpdate(datas)
              .then((res) => {
                this.saveLoading = false;
                if (res.status == "200") {
                  this.$message.success("编辑成功");
                  this.open2 = false;
                  this.getList();
                }
              })
              .catch((err) => {
                this.saveLoading = false;
              });
          } else if (this.title == "新建预售活动") {
            presaleAdd(datas)
              .then((res) => {
                this.saveLoading = false;
                if (res.status == "200") {
                  this.$message.success("新建成功");
                  this.open2 = false;
                  this.getList();
                }
              })
              .catch((err) => {
                this.saveLoading = false;
              });
          } 
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.color-r {
  color: #e6a23c;
}
.charts-box {
  height: 350px;
  margin-top: 30px;
}
.erpPrice > span {
  color: #409eff;
}
.iconEdit {
  cursor: pointer;
}
.app-container {
  padding-bottom: 60px;
}

.table-dp {
  display: flex;
  align-items: center;
  color: #999;
  span {
    color: #333;
  }
  .colorRed {
    color: red;
  }
}
.rate-span {
  margin-left: 5px;
  color: #999;
}
.dept-box {
  height: 40px;
  line-height: 40px;
  border-bottom: solid 1px #dfe6ec;
}

.el-tab-pane {
  .pagination-container {
    margin-bottom: 20px;
  }
}
.channel-box {
  margin: 5px 0;
  span {
    margin-right: 5px;
  }
}
.change-input {
  color: red;
  ::v-deep .el-input__inner {
    color: red;
  }
}
.up-png {
  width: 12px;
}
.colorG {
  color: #999;
}
.table-box2 {
  margin: 5px;
}

h3 {
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-top: 36px;
  span {
    display: block;
    width: 2px;
    height: 14px;
    background: #f56c6c;
    margin-right: 6px;
  }
}
</style>
