<template>
  <div class="push-card">
    <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
      <a-form-item label="卡片主图">
        <div class="add-btn" @click="addMaterial">
          <!-- <i class="iconfont icon-jia1"></i> -->
          <img
            v-if="card.product_image_url"
            :src="card.product_image_url"
            alt=""
          />
          <a-button size="small" v-else>图片库</a-button>
        </div>
      </a-form-item>
      <a-form-item label="卡片标题">
        <a-input
          v-model:value="card.product_description"
          style="width: 300px"
          placeholder="请输入"
          :maxlength="7"
        ></a-input>
      </a-form-item>
      <a-form-item label="推广卖点">
        <p
          v-for="(item, index) in points_list"
          :key="index"
          style="width: 600px"
        >
          <a-input
            placeholder="请输入"
            :maxlength="9"
            v-model:value="item.title"
            style="width: 300px; margin-right: 10px"
          ></a-input>
          <span v-show="index === 0"
            ><a-button
              :disabled="points_list.length === 10"
              style="margin-right: 10px"
              type="primary"
              @click="addTitle"
              >添加推广卖点</a-button
            >
            <span style="color: gray"
              >推广卖点个数：{{ points_list.length }}/10</span
            ></span
          >
          <i
            v-show="index !== 0"
            class="iconfont icon-shanchu"
            style="color: gray; cursor: pointer"
            @click="deleteTitle(index)"
          ></i>
        </p>
      </a-form-item>
      <a-form-item label="行动号召">
        <a-radio-group v-model:value="card.enable_personal_action">
          <a-radio-button :value="true">开启智能优选</a-radio-button>
          <a-radio-button :value="false">关闭智能优选</a-radio-button>
        </a-radio-group>
        <span
          v-show="card.enable_personal_action"
          style="
            display: inline-block;
            width: 400px;
            font-size: 12px;
            color: gray;
            line-height: 16px;
            padding-left: 10px;
          "
          >系统将基于字节领先的技术能力和实时的投放数据，在每次抖音广告显示
          时，挑选最有利于转化的文案进行显示，帮助您提升转化能力。</span
        >
      </a-form-item>
      <a-form-item label="文案">
        <a-select
          placeholder="请选择"
          v-model:value="card.text"
          style="width: 300px"
        >
          <a-select-option value="下一章">下一章</a-select-option>
          <a-select-option value="去阅读">去阅读</a-select-option>
          <a-select-option value="更多精彩">更多精彩</a-select-option>
          <a-select-option value="了解更多">了解更多</a-select-option>
          <a-select-option value="阅读全文">阅读全文</a-select-option>
          <a-select-option value="查看详情">查看详情</a-select-option>
        </a-select>
        <span
          v-show="card.enable_personal_action"
          style="
            display: inline-block;
            width: 200px;
            font-size: 12px;
            color: gray;
            line-height: 16px;
            padding-left: 10px;
          "
          >在无法使用智能优选的流量场景下，将 使用上方文案展示给用户。</span
        >
        <span
          v-show="!card.enable_personal_action"
          style="
            display: inline-block;
            width: 200px;
            font-size: 12px;
            color: gray;
            line-height: 16px;
            padding-left: 10px;
          "
          >关闭智能优选后，将对所有用户展示您 选择的文案</span
        >
      </a-form-item>
    </a-form>
    <!-- 选择素材库素材 -->
    <a-modal
      v-model:visible="visible"
      title="选择图片"
      @ok="handleOk"
      width="720px"
    >
      <material-select
        ref="materialCom"
        :materialType="'image'"
        v-if="visible"
      ></material-select>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import {} from "@/api";
import { message } from "ant-design-vue";
import materialSelect from "./material-select.vue";

const PushCard = defineComponent({
  components: { materialSelect },
  setup() {
    const materialCom: any = ref(null);
    const state = reactive({
      visible: false,
      card: {
        product_image_id: 0, // 主图id
        product_image_url: "", // 主图url 渲染用
        product_description: "", // 卡片标题
        product_selling_points: ref<any[]>([]), // 推广卖点数组
        enable_personal_action: true, // 行动号召（智能优选
        text: "查看详情", // 文案
      },
      points_list: [{ title: "" }],
    });
    return { ...toRefs(state), materialCom };
  },
  mounted() {},
  methods: {
    // 选取主图
    addMaterial() {
      this.visible = true;
    },
    // 确认选取主图
    handleOk() {
      // 程序化选取素材
      let data = this.materialCom.backMaterial();
      if (data.flag) {
        this.card.product_image_id = data.material.id;
        this.card.product_image_url = data.material.url;
        this.visible = false;
      } else {
        return message.error("请先选择图片");
      }
    },
    // 新增推广卖点
    addTitle() {
      this.points_list.push({ title: "" });
    },
    // 程序化-删除卖点
    deleteTitle(index: any) {
      this.points_list.splice(index, 1);
    },
  },
});

export default PushCard;
</script>
<style lang="scss" scoped>
.push-card {
  width: 800px;
  min-height: 200px;
  border: 2px solid rgb(230, 230, 230);
  border-radius: 4px;
  padding: 10px;
  .add-btn {
    width: 100px;
    height: 100px;
    background: rgb(243, 243, 243);
    border: 2px dashed rgb(200, 200, 200);
    border-radius: 4px;
    text-align: center;
    float: left;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      max-height: 100%;
      max-width: 100%;
    }
    // i {
    //   font-size: 20px;
    //   color: gray;
    //   display: block;
    //   line-height: 20px;
    //   margin-top: 36px;
    // }
    // span {
    //   display: block;
    //   font-size: 13px;
    //   color: gray;
    // }
  }
}
</style>
