<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="shopInfo" label-width="120px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="名称" prop="title">
            <el-input
              readonly
              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="dateRange"
            style="margin-top: 30px"
          >
            <el-date-picker
              readonly
              v-model="shopInfo.dateRange"
              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="discountType"
            style="margin-top: 30px"
          >
            <el-radio-group v-model="shopInfo.discountType" disabled>
              <el-radio :label="0">固定金额</el-radio>
              <el-radio :label="1">折扣</el-radio>
            </el-radio-group>
          </el-form-item>

          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-left: 100px;
              flex-wrap: wrap;
            "
          >
            <el-form-item
              v-for="(item, index) in shopInfo.discountRule"
              :label="
                shopInfo.discountType == 0
                  ? item.index == 1
                    ? '首件价格(元)'
                    : '第' + item.index + '件价格(元)'
                  : item.index == 1
                  ? '首件折扣(%)'
                  : '第' + item.index + '件折扣(%)'
              "
              :key="index"
              style="margin-top: 30px"
            >
              <el-input-number
                v-model="item.discountVal"
                style="width: 130px"
                :controls="false"
                :max="shopInfo.discountType == 1 ? 100 : 9999"
                min=""
                step="1"
              ></el-input-number>
            </el-form-item>
            <i
              class="el-icon-circle-plus-outline"
              @click="addRule"
              style="
                margin-top: 28px;
                font-size: 22px;
                color: #1288df;
                margin-left: 10px;
              "
            ></i>
          </div>
          <span style="color: orange; margin-left: 100px"
            >提示:未添加件数时，默认开始恢复原价</span
          >
          <el-form-item
            label="参与活动商品"
            prop="sendAmount"
            style="margin-top: 30px"
          >
            <el-table
              v-if="tabList && tabList.length > 0"
              :data="tabList"
              @selection-change="handleSelectionChange"
              row-key="id"
            >
              <el-table-column type="selection" width="55" align="center" />
              <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-row>
    </el-form>
  </div>
</template>

<script>
import { storeMarketingActivityInfo } from "@/api/marketing/activity";
export default {
  data() {
    return {
      shopDialog: false,
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur " }],
        dateRange: [
          { required: true, message: "请选择活动名称", trigger: "blur " },
        ],
        discountType: [
          { required: true, message: "请选择折扣条件", trigger: "blur " },
        ],
      },
      shopInfo: {
        type: 1,
        showType: 0,
        discountRule: [{ index: 1, discountVal: "", discountType: 0 }],
      },
      tabSelects: [],
      spuSelectList: [],
      tabList: [],
      selectRow: [],
    };
  },
  mounted() {
    this.getInfoActivity();
  },
  methods: {
    removeRow() {
      const filteredArray = this.tabList.filter(
        (item1) => !this.selectRow.some((item2) => item2.id === item1.id)
      );
      console.log(filteredArray);
      this.shopInfo.spuList = filteredArray;
      this.tabList = filteredArray;
    },
    getInfoActivity() {
      storeMarketingActivityInfo(this.$route.query.id).then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
          console.log(this.shopInfo);
          if (this.shopInfo.orderStartTime) {
            const orderStartTime = new Date(this.shopInfo.orderStartTime);
            const orderEndTime = new Date(this.shopInfo.orderEndTime);
            // this.shopInfo.dateRange = [orderStartTime, orderEndTime];
            this.$set(this.shopInfo, "dateRange", [
              orderStartTime,
              orderEndTime,
            ]);

            this.tabList = this.shopInfo.spuList;
            if (this.shopInfo.discountRule) {
              this.shopInfo.discountRule = this.shopInfo.discountRules;
            } else {
              this.shopInfo.discountRule = [
                { index: 1, discountVal: "", discountType: 0 },
              ];
            }
            console.log(this.shopInfo);
          }
        }
      });
    },
  },
};
</script>

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