<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>
    <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 v-model="i.url" :type="type"></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'],
  filters: {
    removeImageParams(url) {
      if (!url) {
        return;
      }

      return url.split('?')[0];
    }
  },
  data() {
    return {
      type_: this.size || '0',
      value_: this.handleData(util.clone(this.value)),
      itemStyle: ''
    };
  },
  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: '',
        title: '',
        hideDeleteButton: false,
        url: {
          action: 'go.h5',
          url: '',
          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;
          }
          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';
          }
        }
        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')
        } 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];
      }

      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';
    },
    reset() {
      this.value_ = [];
    }

  },
  watch: {
    value(newVal)  {
      this.type_ = this.size || '0';
      this.value_ = this.handleData(util.clone(newVal));
    }
  },
  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;
}

</style>