<template>
  <div id="">
    <el-row>
      <el-col :span="14">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="选择模板" prop="posterTempId">
          <el-select v-model="ruleForm.posterTempId" placeholder="请选择模板">
            <el-option
              v-for="item in modelList"
              :label="item.name"
              :value="item.posterTempId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" prop="timeList">
          <el-date-picker
            v-model="ruleForm.timeList"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        </el-col
      >
      <el-col :span="6" :offset="4" v-show="ruleForm.posterTempId">
        <div style="text-align: center">
          <el-image
            style="width: 187.5px; height: 333.5px"
            :src="ModelUrl(ruleForm.posterTempId)"
            :preview-src-list="[ModelUrl(ruleForm.posterTempId)]"
          >
          </el-image>
          <h2>模板预览</h2>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    ruleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      modelList: [],
      pickerOptions: {
        shortcuts: [
          {
            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 * 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]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getModelList();
  },
  computed: {
    ModelUrl: function () {
      return function (k) {
        if (k) {
          for (let i = 0; i < this.modelList.length; i++) {
            if (this.modelList[i].posterTempId === k) {
              return this.$methodsTools.splitImgHost(
                this.modelList[i].posterUrl
              );
            }
          }
        } else {
          return "";
        }
      };
    },
  },
  methods: {
    //获取模板列表
    getModelList() {
      this.$api.inquiredistributionposterlist({ status: 1 }).then((res) => {
        this.modelList = res.rows;
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
