<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="shopInfo" label-width="180px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="名称" prop="title">
            <el-input
              type="text"
              style="width: 300px"
              placeholder="请输入名称"
              v-model="shopInfo.title"
              :show-word-limit="true"
              :maxlength="12"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="满返条件"
            prop="fullAmount"
            style="margin-top: 30px"
          >
            满
            <el-input-number
              v-model="shopInfo.fullAmount"
              style="width: 130px"
              :controls="false"
              max="9999"
              min=""
              step="1"
              placeholder="单笔下单金额"
            ></el-input-number>
            元 返
            <el-input-number
              v-model="shopInfo.returnAmount"
              style="width: 130px"
              :controls="false"
              max="9999"
              min=""
              step="1"
              placeholder="购物红包金额"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            label="下单时间范围"
            prop="orderType"
            style="margin-top: 30px"
          >
            <el-radio-group v-model="shopInfo.orderType">
              <el-radio :label="0">固定时间</el-radio>
              <el-radio :label="1">长期有效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="shopInfo.dateRange"
              type="datetimerange"
              range-separator="-"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="xddatePicker"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item
            label="下单条件"
            prop="orderTopNum"
            style="margin-top: 30px"
          >
            下单前
            <el-input-number
              v-model="shopInfo.orderTopNum"
              style="width: 130px"
              :controls="false"
              max="9999"
              min=""
              step="1"
            ></el-input-number>
            名
          </el-form-item>

          <el-form-item
            label="购物红包使用时间范围"
            prop="orderType"
            style="margin-top: 30px"
          >
            <el-radio-group v-model="shopInfo.useType">
              <el-radio :label="0">固定时间</el-radio>
              <el-radio :label="1">长期有效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="shopInfo.dateRange1"
              type="datetimerange"
              range-separator="-"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="datePicker"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item
            label="参与活动商品"
            prop="sendAmount"
            style="margin-top: 30px"
          >
            <el-button type="primary" size="mini" @click="spuSelect"
              >选择商品</el-button
            >
            <el-button
              size="mini"
              @click="removeRow"
              v-if="tabList && tabList.length > 0"
              >批量移除</el-button
            >
            <el-table
              v-if="tabList && tabList.length > 0"
              v-loading="loading"
              :data="tabList"
              @selection-change="handleSelectionChange"
              row-key="id"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
                :selectable="checkSelectable"
              />
              <el-table-column label="商品Id" align="center" prop="id" />
              <el-table-column label="商品信息" align="center">
                <template slot-scope="scope">
                  <div
                    style="
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;
                      align-items: center;
                    "
                  >
                    <el-image
                      style="width: 30px; height: 30px"
                      :src="scope.row.pic"
                      :preview-src-list="[scope.row.pic]"
                    >
                    </el-image>
                    <div
                      :title="scope.row.spuName"
                      style="
                        width: 80px;
                        height: auto;
                        word-wrap: break-word;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                    >
                      {{ scope.row.spuName }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="分类"
                align="center"
                prop="categoryName"
              />
              <el-table-column label="商品状态" align="center">
                <template slot-scope="scope">
                  {{
                    scope.row.spuStatus == 2
                      ? "售罄"
                      : scope.row.spuStatus == 0
                      ? "上架"
                      : scope.row.spuStatus == 1
                      ? "下架"
                      : ""
                  }}
                </template>
              </el-table-column>
              <el-table-column label="销量" align="center" prop="salesVolume" />
              <el-table-column label="价格" align="center" width="120">
                <template slot-scope="scope">
                  {{ scope.row.originalPrice }}元/{{ scope.row.unit }}
                </template>
              </el-table-column>
              <el-table-column label="类型" align="center" width="120">
                <template slot-scope="scope">
                  {{
                    scope.row.scope == 1
                      ? "农商批发商品"
                      : scope.row.scope == 3
                      ? "同城秒送商品"
                      : scope.row.scope == 4
                      ? "会员专区"
                      : scope.row.scope == 2
                      ? "同城特价商品"
                      : ""
                  }}
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="margin-top: 30px; text-align: center">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-col>
      </el-row>
    </el-form>

    <el-dialog
      :visible.sync="shopDialog"
      width="50%"
      :destroy-on-close="true"
      @close="close"
    >
      <SpuList
        :selectData="tabList"
        :dialog="false"
        @voucherChoose="voucherChooseSpu"
      ></SpuList>

      <span
        slot="footer"
        class="dialog-footer"
        v-if="$route.query.type != 'look'"
      >
        <el-button @click="shopDialog = false">取 消</el-button>
        <el-button type="primary" @click="shopDialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { saveOrUpdates } from "@/api/marketing/activity";
import SpuList from "./components/spulist.vue";
export default {
  components: { SpuList },
  data() {
    return {
      shopDialog: false,
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur " }],
        dateRange: [
          { required: true, message: "请选择活动名称", trigger: "blur " },
        ],
        fullAmount: [
          { required: true, message: "请输入满减条件", trigger: "blur " },
        ],
        orderType: [
          { required: true, message: "请选择下单时间范围", trigger: "blur " },
        ],
        orderTopNum: [
          { required: true, message: "请选择下单条件", trigger: "blur " },
        ],
        useType: [
          {
            required: true,
            message: "请选择购物红包使用范围",
            trigger: "blur ",
          },
        ],
      },
      shopInfo: {
        type: 1,
        showType: 0,
      },
      tabSelects: [],
      spuSelectList: [],
      tabList: [],
      selectRow: null,
    };
  },
  mounted() {},
  methods: {
    handleSelectionChange(val) {
      this.selectRow = val;
    },
    removeRow() {
      const filteredArray = this.tabList.filter(
        (item1) => !this.selectRow.some((item2) => item2.id === item1.id)
      );
      this.shopInfo.spuList = filteredArray;
      this.tabList = filteredArray;
    },
    cancel() {
      this.$confirm("是否确认取消，当前页面所进行的操作将不会保存?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
          this.$router.replace({
            path: "/marketing/fullReturn/index",
          });
        })
        .catch(() => {});
    },
    xddatePicker(val) {
      if (val) {
        this.shopInfo.orderStartTime = moment(val[0]).valueOf();
        this.shopInfo.orderEndTime = moment(val[1]).valueOf();
      } else {
        this.shopInfo.orderStartTime = "";
        this.shopInfo.orderEndTime = "";
      }
    },
    datePicker(val) {
      if (val) {
        this.shopInfo.useStartTime = moment(val[0]).valueOf();
        this.shopInfo.useEndTime = moment(val[1]).valueOf();
      } else {
        this.shopInfo.useStartTime = "";
        this.shopInfo.useEndTime = "";
      }
    },
    spuSelect() {
      this.shopDialog = true;
    },
    voucherChooseSpu(val) {
      this.spuSelectList = val;
    },
    shopDialogSubmit() {
      if (this.tabList.length > 0) {
        this.tabList = [...this.tabList, ...this.spuSelectList];
      } else {
        this.tabList = this.spuSelectList;
      }
      this.shopDialog = false;
    },
    submitForm() {
      let ids = [];
      if (this.tabList) {
        ids = this.tabList.map((item) => item.id);
      } else {
        this.$message.error("请选择商品！");
        return;
      }
      this.shopInfo.orderSpuIds = `[${ids.toString()}]`;
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveOrUpdates(this.shopInfo).then((res) => {
            if (res.code == 200) {
              this.$message.success("保存成功！");
              this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
              this.$router.replace({
                path: "/marketing/fullReturn/index",
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.el-dialog__body {
  padding: 0px 20px;
}
</style>
