<template>
  <div v-if="info.id" class="comp-prop">
    <Form :label-width="80" style="width:100%">
      <Collapse value="1">
      <!-- 组件属性 -->
        <Panel name="1">
          <span>组件属性</span>
          <template slot="content">
            <!--组件公共属性 -->
            <base-prop :info="info" :fieldList="fieldList" :use-selected-field="useSelectedField" />
            <!--组件特有的 -->
            <component
              :info="info"
              :is="`${componentsName(info.form.type)}-prop`"
              @selectIncon="selectIncon" />
            <!-- 选项相关 -->
            <template v-if="hasRemoteOptions.includes(info.form.type)">
              <FormItem label="选项类型">
                <RadioGroup
                  v-model="info.form.options.type"
                  type="button"
                  button-style="solid">
                  <Radio label="static" :disabled="info.form.type=='SelectRemote'||disabled">
                    静态
                  </Radio>
                  <!-- Cascader 在配置端 暂时不支持 远程 -->
                  <Radio label="remote" :disabled="disabled||info.form.type==='Cascader'">动态</Radio>
                  <Radio
                    label="localstorage"
                    :disabled="disabled||info.form.type==='Cascader'">
                    内存/远程
                  </Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="动态接口名" v-if="info.form.options.type==='remote'">
                <Input v-model="info.form.options.remote" :disabled="disabled"></Input>
              </FormItem>
              <FormItem label="内存/远程方法名" v-if="info.form.options.type==='localstorage'">
                <Input v-model="info.form.options.localstorage" :disabled="disabled"></Input>
              </FormItem>
              <FormItem label="内存/远程code" v-if="info.form.options.type==='localstorage'">
                <Input v-model="info.form.options.localstorageCode" :disabled="disabled"></Input>
              </FormItem>
              <template v-if="info.form.options.type==='static'">
                <!-- cascader选项  静态-->
                <cascader-option
                :list ="info.form.options.staticList"
                :isNew ="info.isNew"
                v-if="info.form.type === 'Cascader'" />
                <!-- 静态选项 -->
                <options-prop
                v-model="info.form.options.staticList"
                :isNew ="info.isNew"
                v-if="info.form.type !== 'Cascader'" />
              </template>
            </template>
          </template>
        </Panel>
        <!-- 校验规则 -->
        <Panel name="2" v-if="!isLayoutComponent">
          <span>校验规则</span>
          <!-- 正则校验 -->
          <Rules
          :info="info"
          v-model="info.validateRules"
          :isNew="info.isNew"
           slot="content" />
        </Panel>
       <!-- 扩展属性 -->
        <Panel name="3" v-if="!isLayoutComponent">
          <span>扩展属性</span>
          <extend-option slot="content" v-model="info" />
        </Panel>
      </Collapse>
      <br>
    </Form>

    <!-- icon选择弹窗 -->
    <Modal
      width="950"
      footer-hide
      v-model="iconModal">
      <IconSelect v-model="iconValue" @close="closeIconMldal" />
    </Modal>
  </div>
</template>
<script>
import  IconSelect from './cell/IconSelect.vue'
import  Rules from './cell/Rules.vue'
import  OptionsProp from './cell/OptionsProp.vue'
import  CascaderOption from './cell/CascaderOption.vue'
import  BaseProp from './cell/BaseProp.vue'
import  ExtendOption from './cell/ExtendOption.vue'
import  { formItemMixins } from '../../mixins'

import * as cell from './props/*.vue'

export default {
  name: 'CompProp',
  components: {
    IconSelect,
    Rules,
    OptionsProp,
    ExtendOption,
    CascaderOption,
    BaseProp,
    ...cell,
  },
  mixins: [ formItemMixins ],
  props: {
    info: {
      type: Object,
      default() {
        return {
          form: {
            options: [],
          },
          validateRules: [],
        }
      },
    },
    fieldList: {
      type: Array,
      default: () => [],
    },
    useSelectedField: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      iconModal: false,
      iconValue: '',
      iconType: '',
      // 拥有 远程 选项
      hasRemoteOptions: ['Select', 'SelectRemote', 'Cascader', 'Radio', 'Checkbox'],
    }
  },
  computed: {
    isLayoutComponent() {
      return this.layoutItems.some(v => v.type === this.info.form.type)
    },
    disabled() {
      return !this.info.isNew
    },
  },
  methods: {
    selectIncon(type) {
      this.iconType = type
      this.iconValue = this.info.form[type]
      this.iconModal = true
    },
    closeIconMldal() {
      this.iconModal = false
      this.$set(this.info.form, this.iconType, this.iconValue)
    },
  },
}
</script>
<style lang="scss" scoped>
.comp-prop{
  ::v-deep  .ivu-form-item {
    margin-bottom: 16px;
  }
}
</style>