<template>
  <el-form class="compprop-swipernavbar" :class="rootClass" ref="form" label-width="80px">
    <el-form-item label="文字颜色">
      <el-color-picker v-model="comp.props.fontColor.val"></el-color-picker>
    </el-form-item>

    <el-form-item label="文字大小" v-if="comp.props.fontSize.readonly!=='1'">
      <el-input  :placeholder="'请输入'+comp.props.fontSize.title" v-model="comp.props.fontSize.val" >
      </el-input>
    </el-form-item>

    <el-table :data="comp.props.items.val" style="width: 100%">
      <el-table-column label="显示" width="50px">
        <template slot-scope="scope">
          <el-radio v-model="activeId" :label="scope.row.id"></el-radio>
        </template>
      </el-table-column>

      <el-table-column label="图片">
        <template slot-scope="scope">
          <el-input style="width:calc(100% - 65px)"
            v-model="scope.row.bgImg"
            placeholder="请输入图片url"
            :maxlength="200"
            @keyup="onChange()"
          ></el-input>
          <el-upload style="display:inline-block;width:60px"
            :action="url" 
            :on-success="uploadSuccess" 
            :on-error="uploadError" 
            :before-upload="uploadBefore" 
            list-type="picture" 
            :with-credentials="true" 
            :show-file-list="false" 
            accept="image/jpeg,image/jpg,image/png">
              <el-button size="medium" type="primary" icon="el-icon-upload" @click="uploadImg(scope.$index)"></el-button>
            </el-upload>
        </template>
      </el-table-column>

      <el-table-column label="动作">
        <template slot-scope="scope">
          <el-select v-model="scope.row.actionType" placeholder="请选择">
            <el-option
              :label="sup8._def.linkType.innerPage.label"
              :value="sup8._def.linkType.innerPage.value"
            ></el-option>
            <el-option
              :label="sup8._def.linkType.outerPage.label"
              :value="sup8._def.linkType.outerPage.value"
            ></el-option>
            <el-option
              :label="sup8._def.linkType.interface.label"
              :value="sup8._def.linkType.interface.value"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="动作">
        <template slot-scope="scope">
          <el-select
            v-if="scope.row.actionType===sup8._def.linkType.innerPage.value"
            v-model="scope.row.actionVal"
            style="width:100%"
            placeholder="请选择"
          >
            <el-option v-for="p in cfg.pages" :key="p.id" :label="p.name" :value="p.type"></el-option>
          </el-select>

          <el-input
            v-if="scope.row.actionType===sup8._def.linkType.outerPage.value"
            v-model="scope.row.actionVal"
            style="width:100%"
            placeholder="请输入url"
          ></el-input>

          <el-select
            v-if="scope.row.actionType===sup8._def.linkType.interface.value"
            v-model="scope.row.actionVal"
            style="width:100%"
            placeholder="请选择"
          >
            <el-option label="防伪答复" value="1"></el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <div class="option-bar">
            <i class="option el-icon-delete" title="删除" @click="remove(scope.row.id)"></i>
            
            <i
              v-if="scope.$index!==0"
              class="option el-icon-sort-up"
              title="向上"
              @click="up(scope.row.id,scope)"
            ></i>
            <i
              v-if="scope.$index!==(comp.props.items.val.length-1)"
              class="option el-icon-sort-down"
              title="向下"
              @click="down(scope.row.id)"
              style="margin-left:5px"
            ></i>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-button
      type
      icon="el-icon-plus"
      @click="add()"
      style="margin-top:10px;width:100%;padding:12px !important"
    >添加</el-button>
  </el-form>
</template>

<script>
import apiHelper from "../assets/js/apiHelper.js";
export default {
  name: "CompSwiperNavBarProps",
  props: ["cfg", "comp"],
  data() {
    return {
      rootClass: "",
      activeId: "",
      defaultBgImg:"https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/1004/btnbg.png",
      imgIndex:-1,
      url:this.sup8._appConf.apiUrl.alioss,
    };
  },
  methods: {
    add: function() {
      var emptyRow = {
        id: this.sup8.$utils.newGuid(),
        title: "",
        actionType: this.sup8._def.linkType.innerPage.value,
        actionVal: "",
        bgImg: this.defaultBgImg,
        active: false //初始化时是否显示在当前页面
      };

      if (this.comp.props.items.val.length <= 0) {
        this.activeId = emptyRow.id;
      }

      this.comp.props.items.val.push(emptyRow);
    },

    remove: function(id) {
      this.comp.props.items.val = this.comp.props.items.val.filter(
        t => t.id != id
      );
    },

    up: function(id, scope) {
      var index = _.findIndex(this.comp.props.items.val, {
        id: id
      });
      this.comp.props.items.val.up(index);
    },
    down: function(id) {
      var index = _.findIndex(this.comp.props.items.val, {
        id: id
      });
      this.comp.props.items.val.down(index);
    },
    uploadImg(index){
      this.imgIndex = index;
      console.log(this.comp.props.items);
    },
    uploadSuccess(response, file, fileList) {
      if(response.flag && response.data!==undefined){
        this.comp.props.items.val[this.imgIndex].bgImg = response.data.url;
        this.$message.success('上传成功');
      }
    },
    uploadError(err, file, fileList) {
      this.$message.error('上传失败');
    },
    uploadBefore(file) {
      const size = 1024*500;
      const typeArr = ["image/jpeg","image/jpg","image/png"];
      if(!typeArr.includes(file.type)){
        this.$message.warning('请上传png/jpg类型的图片');
        return false;
      } 
      if(file.size>size){
        this.$message.warning('上传图片不能超过500kb');
        return false;
      }
    }
  },

  created: function() {
    var that = this;
    that.mergeCompProps(that.comp);

    that.comp.props.items.val = that.comp.props.items.val || [];

    // 挑选出
    let activeItem = _.find(that.comp.props.items.val, { active: true });
    if (activeItem) {
      this.activeId = activeItem.id;
    } else if (that.comp.props.items.val.length > 0) {
      this.activeId = that.comp.props.items.val[0].id;
    }
  },
  watch: {
    activeId(n) {
      console.log("activeId", n);
      _.forEach(this.comp.props.items.val, function(it) {
        it.active = it.id === n;
      });

      this.$forceUpdate();
    }
  },
  mounted: function() {}
};
</script>

<style scoped>
</style>



