<template>
  <div :class="{'active':searchData.isCked}">
    <div class="diy-component-options" v-if="searchData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview">
      <div class="diy-search">
        <el-form label-width="90px">
          <el-form-item :label="searchData.CompData.Name" :required="searchData.CompData.IsRequire"
            style="margin-bottom:0">
            <el-select v-model="searchData.CompData.OptionValue" style="width:328px;" :popper-append-to-body="false"
              :multiple="searchData.CompData.IsMultiple">
              <el-option v-for="item in searchData.CompData.OptionList" :key="item.Id" :label="item.Name"
                :value="item.Id">
              </el-option>
            </el-select>
            <div class="tradeRemark">{{searchData.CompData.Remark}}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="diy-component-edit" v-if="searchData.isCked">
      <el-form label-width="100px">
        <el-form-item label="名称" required>
          <el-input v-model="searchData.CompData.Name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="提示文字">
          <el-input type="textarea" v-model="searchData.CompData.Remark" size="small"></el-input>
        </el-form-item>
        <el-form-item label="下拉选项列表">
          <template v-if="searchData.CompData.OptionList" v-for="(item,index) in searchData.CompData.OptionList">
            <div style="display: flex;align-items: center;">
              <el-input v-model="item.Name" size="small" class="w400" :key="index"></el-input> 
              <!-- <a style="cursor:pointer" @click="DeleteOption(index)"> 删除</a> -->
              <img src="../../../assets/img/userman/del.png" alt="" @click="DeleteOption(index)"  style="width: 26px;height: 26px;margin-left: 10px;"/>
            </div>
           
          </template>
          <el-button class="button-new-tag" size="small" @click="addOptionItem">添加选项</el-button>
        </el-form-item>
        <el-form-item label="是否多选">
          <el-switch v-model="searchData.CompData.IsMultiple" @change="MultipleChange">
          </el-switch>
        </el-form-item>
        <el-form-item label="是否必填">
          <el-switch v-model="searchData.CompData.IsRequire">
          </el-switch>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    props: ["searchData", "index", "dataLeng"],
    data() {
      return {
        defaultValue: '',
        inputVisible: false,
        inputValue: ''
      };
    },
    created() {},
    methods: {
      //单选多选切换
      MultipleChange() {
        this.searchData.CompData.OptionValue = "";
      },
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      handleClose(index) {
        this.searchData.CompData.OptionList.splice(index, 1);
        this.searchData.CompData.OptionList.forEach((x, index) => {
          x.Id = index
        })
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      //添加选项
      addOptionItem() {
        var index = 1;
        if (this.searchData.CompData && this.searchData.CompData.OptionList) {
          index = this.searchData.CompData.OptionList.length + 1;
          this.searchData.CompData.OptionList.push({
            Id: index,
            Name: "",
          });
        }
        this.CalcOption();
      },
      //删除选项
      DeleteOption(index) {
        this.searchData.CompData.OptionList.splice(index, 1);
        this.CalcOption();
      },
      //重新计算选项
      CalcOption() {
        if (this.searchData.CompData && this.searchData.CompData.OptionList) {
          var tempData = JSON.parse(JSON.stringify(this.searchData.CompData.OptionList));
          this.searchData.CompData.OptionList = [];
          tempData.forEach((item, index) => {
            item.Id = (index + 1);
            this.searchData.CompData.OptionList.push(item);
          })
        }
      }
    },
    mounted() {}
  };

</script>
