<template>
  <div>
    <div v-if="isSetting">
      <item-box-setting class-suffix="select">
        <el-form-item label="ID">
          <el-input v-model="data.fieldId" />
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="data.label" />
        </el-form-item>
        <el-form-item label="远程数据">
          <el-switch
            v-model="data.setting.isRemote"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item v-if="!data.setting.isRemote" label="选项">
          <el-checkbox-group v-if="data.multiple" v-model="data.defaultValue">
            <div
              v-for="item in data.selections"
              :key="item.value"
              class="he-setting-select--multiple"
            >
              <el-checkbox :label="item.value">
                <span v-text="item.label" />
              </el-checkbox>
              <span
                class="he-setting-select--multiple--delete"
              ><i class="el-icon-delete" @click.stop="delSelect(item)" /></span>
              <span
                v-show="data.defaultValue.includes(item.value)"
                class="he-setting-select--multiple--default-text"
              >默认选择</span>
            </div>
          </el-checkbox-group>
          <div
            v-for="item in data.selections"
            v-else
            :key="item.value"
            class="he-setting-radio--radio"
          >
            <el-radio v-model="data.defaultValue" :label="item.value">
              <span v-text="item.label" />
            </el-radio>
            <span
              class="he-setting-radio--radio--delete"
            ><i class="el-icon-delete" @click.stop="delSelect(item)" /></span>
            <span
              v-show="item.value === data.defaultValue"
              class="he-setting-radio--radio--default-text"
            >默认选择</span>
          </div>
          <div v-if="inputing" class="he-setting-select--add">
            <el-form
              :inline="true"
              :model="addForm"
              class="he-setting-select--add--form"
              :rules="rules"
            >
              <el-form-item prop="label">
                <el-input
                  v-model="addForm.label"
                  size="mini"
                  placeholder="请输入标签"
                />
              </el-form-item>
              <el-form-item prop="value">
                <el-input
                  v-model="addForm.value"
                  size="mini"
                  placeholder="请输入值"
                />
              </el-form-item>
            </el-form>
            <el-button
              type="primary"
              icon="el-icon-check"
              size="mini"
              @click="add"
            />
            <el-button
              type="info"
              icon="el-icon-close"
              size="mini"
              @click="inputing = !inputing"
            />
          </div>
          <el-button
            v-else
            type="text"
            icon="el-icon-plus"
            size="mini"
            @click="
              inputing = !inputing;
              addForm.label = '';
              addForm.value = '';
            "
          >添加一项</el-button>
        </el-form-item>
        <template v-else>
          <el-form-item label="请求地址">
            <el-input
              v-model="data.setting.remoteUrl"
              placeholder="请输入远程地址"
              @blur="getRemoteData"
            />
          </el-form-item>
          <el-form-item label="数据路径">
            <el-input
              v-model="data.setting.remoteDataPath"
              placeholder="请输入远程获取路径"
            >
              <template slot="prepend">data.</template>
            </el-input>
          </el-form-item>
          <el-form-item label="Label">
            <el-input
              v-model="data.setting.remoteDataProps.label"
              placeholder="远程数据中的label"
            />
          </el-form-item>
          <el-form-item label="Value">
            <el-input
              v-model="data.setting.remoteDataProps.value"
              placeholder="远程数据中的value"
            />
          </el-form-item>
          <el-form-item label="远程数据">
            <div v-if="!remoteData || remoteData.length === 0">暂无数据</div>
            <el-checkbox-group v-if="data.multiple" v-model="data.defaultValue">
              <div
                v-for="item in remoteData"
                :key="item[data.setting.remoteDataProps.value]"
                class="he-setting-select--multiple"
              >
                <el-checkbox :label="item[data.setting.remoteDataProps.value]">
                  <span
                    v-text="item[data.setting.remoteDataProps.label]"
                  />
                </el-checkbox>
                <span
                  class="he-setting-select--multiple--delete"
                ><i class="el-icon-delete" @click.stop="delSelect(item)" /></span>
                <span
                  v-show="
                    data.defaultValue.includes(
                      item[data.setting.remoteDataProps.value]
                    )
                  "
                  class="he-setting-select--multiple--default-text"
                >默认选择</span>
              </div>
            </el-checkbox-group>
            <div
              v-for="item in remoteData"
              v-else
              :key="item[data.setting.remoteDataProps.value]"
              class="he-setting-radio--radio"
            >
              <el-radio
                v-model="data.defaultValue"
                :label="item[data.setting.remoteDataProps.value]"
              >
                <span v-text="item[data.setting.remoteDataProps.label]" />
              </el-radio>
              <span
                class="he-setting-radio--radio--delete"
              ><i class="el-icon-delete" @click.stop="delSelect(item)" /></span>
              <span
                v-show="item[data.setting.remoteDataProps.value] === data.defaultValue"
                class="he-setting-radio--radio--default-text"
              >默认选择</span>
            </div>
          </el-form-item>
        </template>
        <el-form-item label="多选支持">
          <el-switch
            v-model="multiple"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>
      </item-box-setting>
    </div>
    <div>
      <el-select
        v-if="data.setting.isRemote && model"
        v-model="model[data.fieldId]"
        :multiple="data.multiple"
        :placeholder="data.placeholder"
      >
        <el-option
          v-for="item in remoteData"
          :key="item[data.setting.remoteDataProps.value]"
          :label="item[data.setting.remoteDataProps.label]"
          :value="item[data.setting.remoteDataProps.value]"
        />
      </el-select>
      <el-select
        v-else-if="data.setting.isRemote && !model"
        v-model="data.defaultValue"
        :multiple="data.multiple"
        :placeholder="data.placeholder"
      >
        <el-option
          v-for="item in remoteData"
          :key="item[data.setting.remoteDataProps.value]"
          :label="item[data.setting.remoteDataProps.label]"
          :value="item[data.setting.remoteDataProps.value]"
        />
      </el-select>
      <el-select
        v-else-if="!data.setting.isRemote && model"
        v-model="model[data.fieldId]"
        :multiple="data.multiple"
        :placeholder="data.placeholder"
      >
        <el-option
          v-for="item in data.selections"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-else
        v-model="data.defaultValue"
        :multiple="data.multiple"
        :placeholder="data.placeholder"
      >
        <el-option
          v-for="item in data.selections"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import { ItemBoxSetting, remoteMixin } from '@/test-npm'
export default {
  name: 'HSelect',
  components: { ItemBoxSetting },
  mixins: [remoteMixin],
  props: {
    isSetting: Boolean,
    data: {
      type: Object,
      required: true
    },
    model: {
      type: [Object, null],
      default: null
    }
  },
  data() {
    return {
      inputing: false,
      addForm: {
        label: '',
        value: ''
      },
      rules: {
        label: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        value: [{ required: true, message: '请输入值', trigger: 'blur' }]
      },
      multiple: this.data.multiple
    }
  },
  watch: {
    multiple(v) {
      if (v) this.data.defaultValue = []
      else this.data.defaultValue = ''
      this.data.multiple = v
    }
  },
  methods: {
    delSelect(item) {
      const i = this.data.selections.findIndex((s) => s === item)
      this.data.selections.splice(i, 1)
      if (this.data.multiple) {
        const j = this.data.defaultValue.indexOf(item.value)
        if (j > -1) {
          this.data.defaultValue.splice(j, 1)
        }
      } else {
        if (this.data.defaultValue === item.value) this.data.defaultValue = ''
      }
    },
    add() {
      if (
        _.trim(this.addForm.label) !== '' &&
        _.trim(this.addForm.value) !== ''
      ) {
        this.data.selections.push({ ...this.addForm })
        this.inputing = !this.inputing
      }
    },
    multipleChange(v) {}
  }
}
</script>

<style lang="scss" scoped>
// .he-setting-select {
//   &--multiple {
//     width: 100%;
//     font-size: 14px;
//     &--delete {
//       cursor: pointer;
//       color: $error-color;
//       margin-left: 20px;
//     }
//     &--default-text {
//       margin-left: 20px;
//       color: $primary-color;
//     }
//   }
//   &--radio {
//     width: 100%;
//     &--delete {
//       cursor: pointer;
//       color: $error-color;
//     }
//     &--default-text {
//       margin-left: 20px;
//       color: $primary-color;
//     }
//   }

//   &--add {
//     width: 100%;
//     @include display-flex(row, nowrap, space-between, center);
//     &--form {
//       flex-grow: 1;
//       @include display-flex(row, nowrap, space-between, center);
//     }
//   }
// }
</style>
