<template>
  <div class="app-container">
    <el-form ref="form" :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="fullAmount"
            style="margin-top: 30px"
          >
            满
            <el-input
              readonly
              type="text"
              style="width: 300px"
              placeholder="请输入名称"
              v-model="shopInfo.fullAmount"
              :show-word-limit="true"
              :maxlength="12"
            ></el-input>

            元 返
            <el-input
              readonly
              type="text"
              style="width: 300px"
              placeholder="请输入名称"
              v-model="shopInfo.returnAmount"
              :show-word-limit="true"
              :maxlength="12"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="下单时间范围"
            prop="orderType"
            style="margin-top: 30px"
          >
            <el-radio-group v-model="shopInfo.orderType" disabled>
              <el-radio :label="0">固定时间</el-radio>
              <el-radio :label="1">长期有效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <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="xddatePicker"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item
            label="下单条件"
            prop="orderTopNum"
            style="margin-top: 30px"
          >
            下单前
            <el-input
              readonly
              type="text"
              style="width: 300px"
              placeholder="请输入名称"
              v-model="shopInfo.orderTopNum"
              :show-word-limit="true"
              :maxlength="12"
            ></el-input>
            名
          </el-form-item>

          <el-form-item
            label="购物红包使用时间范围"
            prop="orderType"
            style="margin-top: 30px"
          >
            <el-radio-group v-model="shopInfo.useType" disabled>
              <el-radio :label="0">固定时间</el-radio>
              <el-radio :label="1">长期有效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              readonly
              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-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-row>
    </el-form>
  </div>
</template>

<script>
import moment from "moment";
import { storeMarketingActivityInfo } from "@/api/marketing/activity";
export default {
  data() {
    return {
      shopInfo: {
        type: 1,
        showType: 0,
      },
      tabList: [],
    };
  },
  mounted() {
    this.getInfoActivity();
  },
  methods: {
    getInfoActivity() {
      storeMarketingActivityInfo(this.$route.query.id).then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
          if (this.shopInfo.orderStartTime) {
            const orderStartTime = new Date(this.shopInfo.orderStartTime);
            const orderEndTime = new Date(this.shopInfo.orderEndTime);
            this.shopInfo.dateRange = [orderStartTime, orderEndTime];
            const useStartTime = new Date(this.shopInfo.useStartTime);
            const useEndTime = new Date(this.shopInfo.useEndTime);
            this.shopInfo.dateRange1 = [useStartTime, useEndTime];
            console.log(this.shopInfo);
            this.tabList = this.shopInfo.spuList;
          }
        }
      });
    },
  },
};
</script>

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