<template>
  <div>
    <table class="banner-table">
      <tbody>
        <tr v-for="(i,index) in value_" :key="i">
          <th>{{+index + 1}}</th>

          <th>
              <file-upload
                :default-file="i.src | removeImageParams"
                :id="index"
                @success="onUploadSuccess"
                @remove="onUploadRemove"
                >
              </file-upload>
          </th>

          <th>
            <banner-params v-model="i.url"></banner-params>
          </th>

          <th>
            <Button @click="onDeleteBtnClick(i, index)">删除</Button>
          </th>
        </tr>
      </tbody>
    </table>

    <div>
      <Button @click="onAddBtnClick">添加一张</Button>
    </div>
  </div>
</template>

<script>

import fileUpload from './drag-file-upload';
import bannerParams from './banner-params';
import util from '@/libs/util';

export default {
  props: ['value'],
  filters: {
    removeImageParams(url) {
      if (!url) {
        return
      }

      return url.split('?')[0]
    }
  },
  data() {
    return {
      value_: this.handleData(util.clone(this.value))
    }
  },
  methods: {
    onDeleteBtnClick(i, index) {
      this.value_.splice(index, 1);
      this.$emit('input', this.handleSaveData(this.value_));
    },
    onAddBtnClick() {
      this.value_.push({
        alt: "",
        bgColor: "",
        imgId: "0",
        isFocusRec: "0",
        src: "",
        url: {
          action: 'go.h5',
          url: ''
        }
      });

      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) {
      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.action === 'go.ufo' && util.getUrlQueryString(a.url.url, 'pagename') === 'productDetail') {
          a.url.action = 'go.pool'
        }

        result.push(a)
      }

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

      for (const i of Object.keys(temp)) {
        if (temp[i].url.action === 'go.pool') {
          temp[i].url.action = 'go.ufo';
        }
      }

      // array to object
      const result = {}

      for (const i of Object.keys(temp)) {
        result[i] = temp[i]
      }

      return result;
    },
    getValue(){
      return this.handleSaveData(this.value_);
    }
  },
  watch: {
    value(newVal)  {
      this.value_ = this.handleData(util.clone(newVal));
    }
  },
  components: {
    fileUpload,
    bannerParams
  }
}
</script>


<style lang="scss" scoped>

.banner-table {
  width: 100%;
  border-collapse: collapse;
}

.banner-table tr th {
  height: 150px;
  border: 1px solid #dddee1;
}

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

</style>