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

          <th>
              <file-upload></file-upload>
          </th>

          <th>
            <Form>
              <FormItem>
                <Select v-model="i.url.action">
                  <Option value="go.h5">H5网页</Option>
                  <Option value="go.ufo">商品列表页</Option>
                  <Option value="go.pool">商品池</Option>
                </Select>
              </FormItem>

              <template v-if="i.url.action === 'go.h5'">
                <FormItem>
                  <Input v-model="i.url.title" placeholder="参数"/>

                </FormItem>
                <FormItem>
                  <Input v-model="i.url.url" placeholder="参数"/>
                </FormItem>
              </template>

              <template v-if="i.url.action === 'go.ufo'">
                <FormItem>
                  <Input v-model="i.url.productListTitle" placeholder="参数"/>
                </FormItem>

                <FormItem>
                  <Input v-model="i.url.productPool" placeholder="参数"/>
                </FormItem>

                <FormItem>
                  <Input v-model="i.url.url" placeholder="参数"/>
                </FormItem>
                
              </template>

              <template v-if="i.url.action === 'go.pool'">
                <FormItem>
                  <Input v-model="i.url.productId" placeholder="参数"/>
                </FormItem>

                <FormItem>
                  <Input v-model="i.url.url" placeholder="参数"/>
                </FormItem>
              </template>

            </Form>
          </th>

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

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

<script>

import fileUpload from './file-upload';

export default {
  props: {
    value: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      value_: this.handleData(this.value)
    }
  },
  methods: {
    onDeleteBtnClick(i, index) {
      this.value_.splice(index, 1);
      this.$emit('input', this.value_);
    },
    onAddBtnClick() {
      this.value_.push({

      });
      this.$emit('input', 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];
        let url = new URL(a.url.url);
        let params = new URLSearchParams(url.search);

        a.url.url = `${url.origin}${url.pathname}`

        if (a.url.action === 'go.ufo' && params.get('pagename') === 'productDetail') {
          a.url.action = 'go.pool'
        }

        for (let p of params) {
          a.url[p[0]] = p[1]
        }

        result.push(a)
      }

      console.log(result);

      return result;
    }
  },
  watch: {
    value(newVal)  {
      this.value_ = newVal
    }
  },
  components: {
    fileUpload
  }
}
</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>