<template>
  <el-form class="compprop-productparams" ref="form" label-width="80px">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础设置" name="1">
        <el-form-item label="显示" style="margin-top:10px">
          <el-select v-model="comp.props.showComp.val" placeholder="请选择">
            <el-option label="始终显示" value="1"></el-option>
            <el-option label="仅有商品时显示" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="背景透明" style="margin-top:10px">
          <el-select v-model="comp.props.bgTransparency.val" placeholder="请选择">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-show="comp.props.showTitle&&comp.props.showTitle.val=='2'" label="图标">
          <el-popover placement="right-start" width="200" trigger="click" v-model="visable1">
            <span
              class
              v-for="(item,index) in iconList"
              :key="index"
              style="margin:5px;padding:6px"
            >
              <img
                :src="item"
                width="24"
                height="24"
                @click="comp.props.icon.val=item;visable1=false"
              />
            </span>
            <el-button class="select-icon" slot="reference" style="padding:6px">
              <img :src="comp.props.icon.val" width="24" height="24" />
            </el-button>
          </el-popover>
        </el-form-item>
      </el-collapse-item>

      <el-collapse-item title="标题" name="1">
        <el-form-item label="是否显示" style="margin-top:10px">
          <el-select v-model="comp.props.showTitle.val" placeholder="请选择">
            <el-option label="显示" value="1"></el-option>
            <el-option label="隐藏" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-show="comp.props.showTitle&&comp.props.showTitle.val=='1'" label="图标">
          <el-popover placement="right-start" width="200" trigger="click" v-model="visable1">
            <span
              class
              v-for="(item,index) in iconList"
              :key="index"
              style="margin:5px;padding:6px"
            >
              <img
                :src="item"
                width="24"
                height="24"
                @click="comp.props.icon.val=item;visable1=false"
              />
            </span>
            <el-button class="select-icon" slot="reference" style="padding:6px">
              <img :src="comp.props.icon.val" width="24" height="24" />
            </el-button>
          </el-popover>
        </el-form-item>

        <el-form-item
          v-show="comp.props.showTitle&&comp.props.showTitle.val=='1'"
          label="标题文本"
          prop="title"
        >
          <el-input v-model="comp.props.title.val" placeholder="请输入标题" :maxlength="8"></el-input>
        </el-form-item>
      </el-collapse-item>

      <el-collapse-item title="字段" name="3">
        <el-table :data="comp.props.paramsConfig.val" style="width: 100%">
          <el-table-column label="关联字段" width="140">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.DisplayAliasName"
                placeholder="请选择"
                @change="onChange(1,scope.row.DisplayAliasName,scope.row)"
              >
                <el-option
                  v-for="(item,index) in paramsList"
                  :key="index"
                  :value="item.DisplayAliasName"
                  :label="item.FieldDesc"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="图标" width="60">
            <template slot-scope="scope">
              <!-- <el-select v-model="scope.row.icon" placeholder="选择图标" @change="onChange()">
            <el-option v-for="(item,index) in iconList" :key="index" :value="item">
              <img :src="item" width="24" height="24">
            </el-option>
              </el-select>-->
              <el-popover placement="right-start" width="150" trigger="click">
                <span v-for="(item,index) in iconList" :key="index" style="margin:5px">
                  <img
                    :src="item"
                    width="24"
                    height="24"
                    @click="scope.row.icon=item;visable2=false"
                  />
                </span>
                <el-button slot="reference">
                  <img :src="scope.row.icon" width="24" height="24" />
                </el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="显示名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.title"
                placeholder="请输入显示名称"
                :maxlength="8"
                @keyup="onChange()"
              ></el-input>
            </template>
          </el-table-column>

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

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

<script>
import apiHelper from "../assets/js/apiHelper.js";
export default {
  name: "CompProductParamsProps",
  props: ["comp"],
  data() {
    return {
      activeNames: "1",
      visable1: false,
      visable2: false,
      defaultTitleIcon:
        "http://image.supercarrier8.com/h5_template/1003/icon009.png",
      defaultFieldIcon:
        "http://image.supercarrier8.com/h5_template/1003/icon002.png",
      iconList: [
        "http://image.supercarrier8.com/h5_template/1003/icon001.png",
        "http://image.supercarrier8.com/h5_template/1003/icon002.png",
        "http://image.supercarrier8.com/h5_template/1003/icon003.png",
        "http://image.supercarrier8.com/h5_template/1003/icon004.png",
        "http://image.supercarrier8.com/h5_template/1003/icon005.png",
        "http://image.supercarrier8.com/h5_template/1003/icon006.png",
        "http://image.supercarrier8.com/h5_template/1003/icon007.png",
        "http://image.supercarrier8.com/h5_template/1003/icon008.png",
        "http://image.supercarrier8.com/h5_template/1003/icon009.png",
        "http://image.supercarrier8.com/h5_template/1003/icon010.png",
        "http://image.supercarrier8.com/h5_template/1003/icon011.png"
      ],
      paramsList: [], // 可选择的全部参数
      paramsConfig: [],
      rules: {
        title: [
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    onChange: function(type, val, row) {
      if (type === 1) {
        var field = _.find(this.paramsList, { DisplayAliasName: val });
        row.title = field ? field.FieldDesc : "";
      }
      //this.set(this,this.comp.props.paramsConfig.val,o);
    },

    addField: function() {
      var emptyRow = {
        rowId: this.sup8.$utils.newGuid(),
        field: "",
        icon: this.defaultFieldIcon,
        title: "-",
        val: "-"
      };
      this.comp.props.paramsConfig.val.push(emptyRow);
    },

    removeField: function(rowId) {
      this.comp.props.paramsConfig.val = this.comp.props.paramsConfig.val.filter(
        t => t.rowId != rowId
      );
    },

    up: function(rowId, scope) {
      var index = _.findIndex(this.comp.props.paramsConfig.val, {
        rowId: rowId
      });
      this.comp.props.paramsConfig.val.up(index);
    },
    down: function(rowId) {
      var index = _.findIndex(this.comp.props.paramsConfig.val, {
        rowId: rowId
      });
      this.comp.props.paramsConfig.val.down(index);
    }
  },

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

    that.comp.props.icon.val =
      that.comp.props.icon.val || that.defaultTitleIcon;
    that.comp.props.title.val = that.comp.props.title.val || "";
    that.comp.props.paramsConfig.val = that.comp.props.paramsConfig.val || [];

    // 处理掉不合法的数据

    // 获取可配置参数的全集
    var pageId = "f792be5df0204a468a0cee6b89cb00f8";
    var eno = that.sup8.context.eno || that.sup8.context.eid;
    apiHelper.getAllConfigParams(eno, pageId, function(res) {
      if (res && res.flag && res.data) {
        that.paramsList = res.data;
      }
    });
  },
  watch: {
    "comp.props.paramsConfig.val": function(n) {
      console.log("paramsConfig", n);
      this.$forceUpdate();
    }
  },
  mounted: function() {}
};
</script>

<style scoped>
</style>



