<template>
  <div>
    <div v-show="templateName === 'imageList'">
      <label>显示样式：</label>
      <i-radio-group v-model.sync="type_">
        <i-radio label="4">
          一行四个
          <!-- <span>无</span> -->
        </i-radio>
        <i-radio label="5">
          一行五个
          <!-- <span>男</span> -->
        </i-radio>
      </i-radio-group>
    </div>
    <!-- 一张图、两张图 自定义图片高度、宽度 -->
    <Form v-if="isCustomImgSize" :label-width="50" class="size-container">
      <Form-item label="宽度:">
        <Input placeholder="请输入图片宽度" v-model="width"/>
      </Form-item>
      <Form-item label="高度:">
        <Input placeholder="请输入图片高度" v-model="height"/>
      </Form-item>
    </Form>
    <table class="banner-table">
      <tbody>
        <draggable v-model="value_" @start="drag=true" @end="drag=false">
          <tr v-for="(i, index) in value_" :key="i.id">
            <th valign="middle" width="5%">{{+index + 1}}</th>

            <th valign="middle">
              <div style="display: inline-block;">
                <file-upload
                  :default-file="i.src | removeImageParams"
                  :id="index"
                  @success="onUploadSuccess"
                  @remove="onUploadRemove"
                ></file-upload>
              </div>
            </th>

            <th class="banner-item" valign="middle">
              <banner-params
                ref="addParams"
                v-model="i.url"
                :type="type"
                :isSelectAction="isSelectAction"
              ></banner-params>
            </th>

            <th valign="middle" v-if="!i.hideDeleteButton">
              <Button type="error" @click="onDeleteBtnClick(i, index)">删除</Button>
            </th>
          </tr>
        </draggable>
      </tbody>
    </table>

    <div v-if="!hideAddButton" style="margin-top: 20px;">
      <Button @click="onAddBtnClick" type="primary">添加一张</Button>
    </div>
  </div>
</template>

<script>
import fileUpload from "./drag-file-upload";
import bannerParams from "./banner-params";
import util from "@/libs/util";

import draggable from "vuedraggable";

export default {
  props: [
    "value",
    "hideAddButton",
    "hideDeleteButton",
    "type",
    "templateName",
    "size",
    "isSelectAction",
    'isCustomImgSize'
  ],
  filters: {
    removeImageParams(url) {
      if (!url) {
        return;
      }

      return url.split("?")[0];
    }
  },
  data() {
    // console.log('====='+this.isSelectAction+"////==="+this.type);
    return {
      type_: this.size || "0",
      value_: this.handleData(util.clone(this.value)),
      itemStyle: "",
      height: '',
      width: '',
    };
  },
  methods: {
    onDeleteBtnClick(i, index) {
      this.value_.splice(index, 1);
      this.$emit("input", this.handleSaveData(this.value_));
    },
    onEditImgSize(params, index) {
      this.value_[index] = {...this.value_[index], ...params}
    },
    onAddBtnClick() {
      let actionValue = "go.h5";
      let urlStr = "";
      if (this.templateName === "tabFloor") {
        actionValue = "go.channel";
      } else if (this.templateName === "guessLike") {
        (actionValue = "go.pool"),
          (urlStr = "https://m.yohobuy.com/?pagename=productList");
      }

      this.value_.push({
        alt: "",
        bgColor: "",
        imgId: "0",
        isFocusRec: "0",
        src: "",
        title: "",
        business: "new",
        hideDeleteButton: false,
        url: {
          action: actionValue,
          url: urlStr,
          islogin: "Y",
          headerid: 1
        }
      });

      this.$emit("input", this.handleSaveData(this.value_));
    },
    onUploadSuccess(id, { url }) {
      this.value_[id].src = url + "?imageView2/{mode}/w/{width}/h/{height}";
      this.$emit("input", this.handleSaveData(this.value_));
    },
    onUploadRemove(id) {
      this.value_[id].src = "";
      this.$emit("input", this.handleSaveData(this.value_));
    },
    handleData(m) {
      // console.log('===handleData===')
      // console.log(m);
      //  console.log('===handl///eData===')
      // console.log(this.type_);
      let keys = Object.keys(m);

      keys.sort((a, b) => {
        a = +a;
        b = +b;

        if (a > b) {
          return 1;
        }

        if (a < b) {
          return -1;
        }

        return 0;
      });

      let result = [];

      for (const i of keys) {
        let a = m[i];
        if (!a.url) {
          let action = "go.h5";
          let url = "https://m.yohobuy.com/";
          if (this.templateName === "tabFloor") {
            action = "go.channel";
            url =
              "https://m.yohobuy.com/?pagename=home&tabName=" +
              a.tabName +
              "&channelCode=" +
              a.code +
              "&channelCode=" +
              a.productPool;
          } else if (this.templateName === "guessLike") {
            action = "go.pool";
            url = "https://m.yohobuy.com/?pagename=productList";
          }
          a.url = {
            action,
            url
          };
        }

        this.addId(a);

        if (a.url && a.url.action && a.url.action === "go.ufo") {
          if (
            util.getUrlQueryString(a.url.url, "pagename") === "productDetail"
          ) {
            a.url.action = "go.detail";
          } else if (
            util.getUrlQueryString(a.url.url, "pagename") === "productList"
          ) {
            a.url.action = "go.pool";
          } else if (
            util.getUrlQueryString(a.url.url, "pagename") === "saleCalendar"
          ) {
            a.url.action = "go.calendar";
          } else if (
            util.getUrlQueryString(a.url.url, "pagename") === "hotSale"
          ) {
            a.url.action = "go.hotlist";
          } else if (
            util.getUrlQueryString(a.url.url, "pagename") === "productListNew"
          ) {
            a.url.action = "go.list";
          } else {
            a.url.action = "go.list";
          }
        }
        // console.log('a')
        // console.log(a)
        result.push(a);
      }

      return result;
    },
    handleSaveData(m) {
      let temp = util.clone(m);

      for (const i of Object.keys(temp)) {
        if (
          [
            "go.pool",
            "go.detail",
            "go.list",
            "go.calendar",
            "go.hotlist",
            "go.identifyList"
          ].includes(temp[i].url.action)
        ) {
          temp[i].url.action = "go.ufo";
        }

        if (util.getUrlQueryString(temp[i].url.url, "headerid") === "-1") {
          temp[i].url.headerid = "-1";
        }

        if (util.getUrlQueryString(temp[i].url.url, "islogin") === "Y") {
          temp[i].url.islogin = "Y";
        }
        if (temp[i].url.action === "go.channel") {
          temp[i].tabName = util.getUrlQueryString(temp[i].url.url, "tabName");
          temp[i].code = util.getUrlQueryString(temp[i].url.url, "channelCode");
          temp[i].productPool = util.getUrlQueryString(
            temp[i].url.url,
            "productPool"
          );
          temp[i].business = util.getUrlQueryString(
            temp[i].url.url,
            "business"
          );
        } else {
          temp[i].title = util.getUrlQueryString(temp[i].url.url, "title");
          temp[i].alt = util.getUrlQueryString(temp[i].url.url, "title");
        }
      }
      // array to object
      const result = {};

      for (const i of Object.keys(temp)) {
        result[i] = temp[i];
        if(this.isCustomImgSize) {
          result[i].height = this.height;
          result[i].width = this.width;
        }
      }

      return result;
    },
    getValue() {
      return this.handleSaveData(this.value_);
    },
    getType() {
      return this.type_ || "0";
    },
    addId(m) {
      m.id = this.$bus.genId();
    },
    setValue(newVal) {
      this.value_ = this.handleData(util.clone(newVal));
    },
    reSetType() {
      this.type_ = "0";
      this.height = '';
      this.width = ''
    },
    reset() {
      this.value_ = [];
    }
  },
  watch: {
    value(newVal) {
      // console.log("watch===newVal" + this.isSelectAction);
      // console.log(newVal);
      this.type_ = this.size || "0";
      this.value_ = this.handleData(util.clone(newVal));
      this.height = '';
      this.width = '';
      if(this.isCustomImgSize) {
        const {height = '', width = ''} = this.value[0] || {};
        if(height || width) {
          this.height = height;
          this.width = width;
        }
      }
    }
  },
  components: {
    fileUpload,
    bannerParams,
    draggable,
  }
};
</script>


<style lang="scss" scoped>
.banner-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.banner-table {
  tr {
    height: 200px;

    th {
      border: 1px solid #dddee1;
    }
  }
}

tr:hover {
  background-color: #ebf7ff;
}

.banner-item {
  padding: 20px;
  min-width: 320px;
}

.size-container {
  width: 30%;
}
</style>