<template xmlns="http://www.w3.org/1999/html">
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">


      <a-form-item
        label="选择快手账户"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-select
          v-model="accountId"
          @change="actionGroups"
          showSearch
          showArrow
          allowClear
          placeholder="选择需创建的快手账户"
          optionFilterProp="children"
          style="width: 650px"
          :filterOption="filterOption"
        >
          <a-select-option v-for="userAccount in accountList" :key="userAccount.accountId"
                           :value="userAccount.accountId">{{userAccount.authName}}
          </a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item
        label="选择广告组"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-cascader style="width: 650px" v-model="ids" :options="options" @change="onChangeActionBarText"
                    :loadData="loadData"
                    placeholder="Please select" :changeOnSelect="changeOnSelectValue"/>
      </a-form-item>


      <a-form-item
        label="广告投放位置"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-radio-group v-model="placementPosition" @change="changePlacementPosition">
          <a-radio-button value='1'>优选广告位</a-radio-button>
          <a-radio-button value='2'>按场景选择广告位</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="位置类型"
        v-if="showDeliveryType"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-radio-group v-model="deliveryType" @change="showSinglePicture">
          <a-radio-button value='1'>信息流广告</a-radio-button>
          <a-radio-button value='2'>视频后贴片广告</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item

        label="视频类型"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-radio-group v-model="videoType" @change="changeVideoList">
          <a-radio-button value='1'>竖版视频</a-radio-button>
          <a-radio-button value='2'>横版视频</a-radio-button>
          <a-radio-button value='3' v-if="singlePicture">单张图片</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="视频上传方式"
        v-if="showUploadType"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-radio-group v-model="videoUploadType" @change="changeUploadVideo">
          <a-radio-button value='1'>选择作品</a-radio-button>
          <a-radio-button value='2'>本地上传</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        label="选择本地文件进行上传"
        v-if="localUpload"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <upload-to-ali v-model="localUrl"
                       :customDomain="customDomain"
                       preview
                       :region="region"
                       :bucket="bucket"
                       :accept="acceptVideo"
                       :max="10"
                       :size="1024000"
                       :accessKeyId="accessKeyId"
                       :accessKeySecret="accessKeySecret"></upload-to-ali>
      </a-form-item>

      <a-form-item
        label="选择作品进行上传"
        v-if="selectVideoUpload"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <!-- <a-select
          v-model="videoUrl"
          @change="getDescription"
          showSearch
          allowClear
          optionFilterProp="children"
          style="width: 650px"
          @focus="handleFocus"
          @blur="handleBlur"
          :filterOption="filterOption">
          <a-select-option v-for="video in videoList" :key="video.localUrl" :value="video.localUrl">
            {{video.videoName}}
          </a-select-option>
        </a-select> -->

        <!-- 修改为弹窗形式 -->
        <div>
          <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
          <a-modal
            title="选择作品"
            v-model="visibleVideo"
            @ok="handleOkVideo"
            :width="860"
            @cancel="handleCancelVideo"
          >
            <template>
              <a-radio-group @change="getDescription" v-model="videoUrl" class="image_item_container">
                <div class="image_item" v-for="(video,index) of videoList" :key="index">
                  <video class="video" :src="video.localUrl" controls="controls" id="video">
                    您的浏览器不支持 video 标签。
                  </video>
                  <div class="item_text">{{video.videoName}}</div>
                  <a-radio :style="radioStyle" :value="video.localUrl"></a-radio>
                </div>
              </a-radio-group>
            </template>
          </a-modal>
        </div>
      </a-form-item>


      <a-form-item
        v-if="showImageUpload"
        label="图片上传"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <upload-to-ali v-model="localImageUrl"
                       :customDomain="customDomain"
                       multiple
                       preview
                       :region="region"
                       :bucket="bucket"
                       :accept="acceptImage"
                       :max="10"
                       :size="1024000"
                       :accessKeyId="accessKeyId"
                       :accessKeySecret="accessKeySecret"></upload-to-ali>
      </a-form-item>


      <a-form-item

        label="上传封面"
        v-if="showUploadImageRadio"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-radio-group v-model="imageType" @change="changeImageType">
          <a-radio-button value='1'>选择封面</a-radio-button>
          <a-radio-button value='2'>本地上传</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <a-form-item
        v-if="showCover"
        label="选择封面"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <div>
          <a type="primary" @click="showModal">点击选中已上传封面</a>
          <a-modal
            title="选择封面"
            v-model="visible"
            @ok="handleOk"
            :width="860"
          >
            <template>
              <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)" class="select_all"> 全选
              <br/>
              <br/>
              <div class="image_item_container">
                <div v-for="(item ,index) in imageList" class="image_item" :key="index">
                  <label :for="item.id" class="label_item">
                    <img :src="item.src" alt="" class="item_img">
                    <p class="item_text">{{item.name}}</p>
                    <p class="item_checkbox">
                      <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
                             @onClick="checkeda(item.id)"
                             @change="changChecked" :id="item.id">
                    </p>
                  </label>
                </div>
              </div>

            </template>
          </a-modal>
        </div>
      </a-form-item>
      <!-- <ul>
         <li v-for="(item ,index) in items" @click="checkeda(index)">
           <a href="javascript:">
             <img :src="item.img" alt="">
           </a>
           <p>{{item.title}}</p>
           <input type="checkbox" v-model="checkeds" :value="index">
         </li>
       </ul>-->


      <a-form-item
        v-if="showLocalImageUpload"
        label="本地封面上传"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <upload-to-ali v-model="imageUrl"
                       :customDomain="customDomain"
                       multiple
                       preview
                       :region="region"
                       :bucket="bucket"
                       :accept="acceptImage"
                       :max="10"
                       :size="1024000"
                       :accessKeyId="accessKeyId"
                       :accessKeySecret="accessKeySecret"></upload-to-ali>
      </a-form-item>


      <a-form-item
        label="行动号召按钮"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-select
          v-model="actionBarTextDesc"
          showSearch
          allowClear
          placeholder="选择应用目标"
          optionFilterProp="children"
          style="width: 650px"
          @focus="handleFocus"
          @blur="handleBlur"
          :filterOption="filterOption">
          <a-select-option v-for="actionBar in actionBarTextList" :key="actionBar.id" :value="actionBar.actionBarText">
            {{actionBar.actionBarText}}
          </a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item
        label="作品广告语"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-textarea
          style="width: 650px"
          v-model="description" :rows="2"/>
      </a-form-item>


      <a-form-item
        label="创意名称"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-input v-model="creativeName" placeholder="请填写广告创意名称" style="width: 650px"></a-input>
      </a-form-item>

      <a-form-item
        label="第三方点击监测链接"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-input v-model="clickTrackUrl" placeholder="请第三方点击监测链接" style="width: 650px"></a-input>
      </a-form-item>


      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center">
        <a-button htmlType="submit" type="primary">提交</a-button>
        <a-button style="margin-left: 8px">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import {getAction, postAction} from '@/api/manage'
  import {mapGetters} from 'vuex'
  import UploadToAli from '@femessage/upload-to-ali'
  import moment from "moment"
  import VuePreview from 'vue-preview'
  import jq from 'jquery'


  export default {
    name: 'BaseForm',
    components: {
      UploadToAli,
      VuePreview
    },
    data() {
      return {
        accountId: '',// 快手 accountId
        accountList: {},

        campaignId: '', //广告计划id
        targetPopulation: '',
        changeOnSelectValue: true,
        ids: [],
        placementPosition: '1',// 广告投放位置
        showDeliveryType: false,
        deliveryType: '1',
        videoType: '1',
        singlePicture: true,// 展示单张图片
        videoUploadType: '1',
        localUpload: false,
        localUrl: '', // 本地上传地址
        selectVideoUpload: true,
        videoUrl: '',// 视频id
        videoList: [],
        radioStyle: { // 视频单选样式
          display: 'block',
          height: '30px',
          lineHeight: '30px',
        },
        showUploadType: true,
        localImageUrl: '',//图片地址
        showImageUpload: false,
        imageList: [],
        imageUrl: [],
        showCover: true,
        imageType: '1',
        actionBarTextList: [],
        actionBarTextDesc: '',
        description: '',// 作品广告语
        creativeName: '',//创意名称
        clickTrackUrl: '',// 第三方检测链接
        showLocalImageUpload: false,
        showUploadImageRadio: true,
        visible: false,
        visibleVideo: false,
        isAllChecked: false,
        checkeds: [],
        customDomain: '',
        acceptVideo: 'video/mpeg,video/mp4',
        acceptImage: 'image/jpeg,image,jpg/png',
        accessKeyId: 'LTAIbNbqWzSOklQV',
        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
        region: 'oss-cn-beijing',
        bucket: 'ctop-media',
        options: [],
        labelCol: {
          xs: {
            span: 7
          }
          ,
          sm: {
            span: 7
          }
          ,
        }
        ,
        wrapperCol: {
          xs: {
            span: 10
          }
          ,
          sm: {
            span: 17
          }
          ,
        }
        ,

        form: this.$form.createForm(this),
        url:
          {
            userAllocationList: '/ctop/userAllocation/list',
            getOptionsUrl: '/kuaishou/create/getOptions',
            getChildrenUrl: '/kuaishou/create/getChildren',
            videoListUrl: '/kuaishou/kuaiShouVideo/list',
            imageListUrl: '/kuaishou/kuaiShouImage//image/list',
            actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
            getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',

            creativeUrl: '/kuaishou/create/createCreative',

          }
      }
    },
    methods: {
      ...mapGetters(["nickname", "avatar", "userInfo"]),

      handleOk(e) {
        console.log(e);
        this.visible = false;
        this.imageUrl = [];
        if (this.checkeds.length > 0) {
          for (let i = 0; i < this.checkeds.length; i++) {
            let imageId = this.checkeds[i];
            for (let j = 0; j < this.imageList.length; j++) {
              let imageVo = this.imageList[j];
              if (imageId == imageVo.id) {
                this.imageUrl.push(imageVo.src)
                console.log(this.imageUrl);
              }
            }
          }
        }
      },
      showModal() {
        this.visible = true;
      },

      // 上传视频弹窗
      handleOkVideo(e) {
        console.log(e);
        console.log(this.videoUrl);
        this.visibleVideo = false;

        this.closeAllVideoFun();

      },
      showModalVideo() {
        this.visibleVideo = true;

        // 设置默认选中的视频
        jq(document).ready(function () {
          // 播放当前视频停止其他视频
          let videos = jq("video");

          function pauseAll() {
            let self = this;
            [].forEach.call(videos, (i) => {
              // 将 videos 中其他的 video 全部暂停
              i !== self && i.pause();
            });
          };
          // 给play事件绑定暂停函数
          [].forEach.call(videos, (i) => {
            i.addEventListener("play", pauseAll.bind(i));
          });
        });
      },
      handleCancelVideo() {
        this.closeAllVideoFun();
        this.videoUrl = "";
      },

      // 停止播放所有视频
      closeAllVideoFun() {
        let videos = jq("video");
        let videosArr = Array.prototype.slice.call(videos);
        videosArr.forEach((x) => {
          x.pause();
        });
      },

      changChecked() {
        if (this.imageList.length == this.checkeds.length) {
          this.isAllChecked = true;
        } else {
          this.isAllChecked = false;
        }


      },

      checkeda: function (id) {
        let indexOf = this.checkeds.indexOf(id)
        if (indexOf >= 0) {
          this.$delete(this.checkeds, id);
        } else {
          this.checkeds.push(id)
        }
        console.log(this.checkeds)

      },


      checkAll(e) { // 点击全选事件函数
        let checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项
        if (e.target.checked) { // 判定全选checkbox的勾选状态
          for (let i = 0; i < this.imageList.length; i++) {
            if (!checkObj[i].checked) { // 将未勾选的checkbox选项push到绑定数组中
              this.checkeds.push(checkObj[i].value);
              console.log(this.checkeds)
            }
          }
        } else { // 如果是去掉全选则清空checkbox选项绑定数组
          this.checkeds = [];
        }
      },


      changeImageType() {
        if (this.imageType == '2') {
          this.showLocalImageUpload = true;
          this.showCover = false;
        } else {
          this.showLocalImageUpload = false;
          this.showCover = true;
        }
      },

      handleChange(value) {
        console.log(`selected ${value}`);
      },
      handleBlur() {
        console.log('blur');
      },
      handleFocus() {
        console.log('focus');
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      changeUploadVideo() {
        if (this.videoUploadType == 2) {
          this.localUpload = true;
          this.selectVideoUpload = false;
          this.showImageUpload = false;
        } else {
          this.localUpload = false;
          this.selectVideoUpload = true;
          this.showImageUpload = false;
        }
      },
      getDescription() {
        let params = {};
        params.localUrl = this.videoUrl;
        params.loginId = this.userInfo().id;
        postAction(this.url.getDescriptionUrl, params).then((res) => {
          console.log(res)
          if (res.success) {
            this.description = res.result.videoDesc;
            this.creativeName = res.result.videoName + "_" + moment().format('YYYY-MM-DD_HH:mm');
          }
        });
      },

      changeVideoList() {
        if (this.videoType == '2' || this.videoType == '1') {
          this.showImageUpload = false;
          this.showUploadType = true;
          this.selectVideoUpload = true;
          this.localUpload = false;
          this.showCover = false;
          this.showLocalImageUpload = false;
          this.videoUrl = '';
          this.showLocalImageUpload = false;
          this.showUploadImageRadio = true;
          this.showCover = true;
          let params = {};
          params.pageSize = '1000';
          params.loginId = this.userInfo().id;
          if (this.videoType == '2') {
            params.materialType = '2';
          }
          if (this.videoType == '1') {
            params.materialType = '1';
          }
          getAction(this.url.videoListUrl, params).then((res) => {
            if (res.success) {
              this.videoList = res.result.records
              if (this.videoList.length > 0) {
                this.videoUrl = this.videoList[0].localUrl;
              }
            }
          });
          getAction(this.url.imageListUrl, params).then((res) => {

            this.imageList = res

          });
        } else {
          this.showImageUpload = true;
          this.showUploadType = false;
          this.selectVideoUpload = false;
          this.localUpload = false;
          this.showCover = false;
          this.showUploadImageRadio = false;
          this.showLocalImageUpload = false;
          this.showCover = false;
        }
      },

      changePlacementPosition() {
        this.singlePicture = false;
        if (this.placementPosition == '1') {
          this.showDeliveryType = false;
          this.singlePicture = true;
        } else if (this.placementPosition == '2' && this.deliveryType == '1') {
          this.showDeliveryType = true;
          this.singlePicture = false;
        } else if (this.placementPosition == '2' && this.deliveryType == '2') {
          this.showDeliveryType = false;
          this.singlePicture = true;
        }


      },
      showSinglePicture() {
        this.singlePicture = false

        if (this.deliveryType == '2') {
          this.singlePicture = true;
          this.showImageUpload = false;
          this.selectVideoUpload = false;
          this.localUpload = false;
        } else {
          this.singlePicture = false;
          this.showImageUpload = false;
          this.selectVideoUpload = true;
          this.localUpload = true;
        }


      },


      handleSubmit(e) {
        console.log(this.imageIds);
        console.log(this.imageUrl)

        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log(this.imageIds);
            console.log('Received values of form: ', values);
            console.log('快手账号: ', this.accountId);
            console.log('  ---: ', this.ids);
            let params = {};
            params.accountId = this.accountId;
            if (this.ids.length == 2) {
              params.unitId = this.ids[1];
            }
            params.videoUploadType = this.videoUploadType;
            if (this.videoUploadType == '1') {
              params.videoUrl = this.videoUrl;
            } else if (this.videoUploadType == '2') {
              params.videoUrl = this.localUrl;
            }
            console.log("-----------------------");

            console.log(params.videoUrl);
            params.imageUrl = this.imageUrl;
            console.log(this.imageUrl)
            params.actionBarText = this.actionBarTextDesc;
            params.description = this.description;
            params.clickTrackUrl = this.clickTrackUrl;
            params.creativeName = this.creativeName;
            params.imageType = this.imageType;
            params.videoType = this.videoType;
            params.loginId = this.userInfo().id;
            postAction(this.url.creativeUrl, params).then((res) => {
              console.log(res)
              if (res.success) {
                alert("广告创意创建成功");
              }
            });
          }
        })
      },
      onChange(value) {
        console.log(value);
      },

      onChangeActionBarText() {
        if (this.ids.length == 2) {
          let id = this.ids[0];
          let params = {};
          params.campaignId = id;
          getAction(this.url.actionBarTextListUrl, params).then((res) => {
            if (res.success) {
              this.actionBarTextList = res.result.records
            }
          });

        }

      },

      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },

      loadData(selectedOptions) {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        targetOption.loading = false;
        this.campaignId = `${targetOption.value}`;
        let params = {};
        params.campaignId = this.campaignId;
        params.loginId = this.userInfo().id;
        params.accountId = this.accountId;
        postAction(this.url.getChildrenUrl, params).then((res) => {
          targetOption.children = res
        });
        this.options = [...this.options]
      },

      actionGroups() {
        let params = {};
        params.loginId = this.userInfo().id;
        params.accountId = this.accountId;
        postAction(this.url.getOptionsUrl, params).then((res) => {
          this.options = res
          console.log(res)
        });
      },

    },

    created: function () {
      let params = {};
      params.pageSize = '1000';
      params.mediaId = '2';
      params.userId = this.userInfo().id;
      getAction(this.url.userAllocationList, params).then((res) => {
        if (res.success) {
          this.accountList = res.result.records
        }
      });


      // 页面初始化 查询竖版视频
      params = {};
      params.pageSize = '1000';
      params.materialType = '1';
      params.loginId = this.userInfo().id;
      getAction(this.url.videoListUrl, params).then((res) => {
        if (res.success) {
          this.videoList = res.result.records
          if (this.videoList.length > 0) {
            this.videoUrl = this.videoList[0].localUrl;
          }
        }
      });

      // 图片列表
      getAction(this.url.imageListUrl, params).then((res) => {

        this.imageList = res
        console.log(res)

      });


    }
  }

</script>


<style lang="scss">
  .ant-modal-body {
    height: 650px;
    overflow-y: scroll;

    .image_item_container {
      margin: 0 -10px;

      .image_item {
        display: inline-block;
        width: 20%;
        padding: 0 10px;
        box-sizing: border-box;
        margin-bottom: 20px;

        .label_item {
          display: block;
          cursor: pointer;
        }

        .item_img {
          width: 100%;
          margin-bottom: 10px;
        }

        .item_text {
          height: 42px;
          overflow: hidden;
          margin-bottom: 0;
        }

        .item_checkbox {
          margin-bottom: 0;
        }

        .video {
          width: 100%;
        }
      }
    }

    .video_item_container {
      .video {
        width: 100%;
      }
    }
  }
</style>