<template>
  <Collapse v-model="value1" class="property">
    <Panel name="1">
      列表设置
      <div slot="content">
        <Form :label-width="80">
          <FormItem label="每行图标数目">
            <Input v-model="properties.rowIconNum" />
          </FormItem>
        </Form>
        <Divider />
        <div class="property-item" v-for="(config, index) in properties.configList" :key="index">
          <Form :model="config" :label-width="80">
            <FormItem label="功能">
              <Select v-model="config.function" filterable>
                <Option v-for="item in functionList" :value="item.id" :key="item.id">
                  {{item.title}}
                </Option>
              </Select>
            </FormItem>
            <FormItem label="图标">
              <Select v-model="config.icon">
                <Option v-for="item in iconList" :key="item.value" :value="item.value">
                  {{item.name}}
                </Option>
              </Select>
            </FormItem>
          </Form>
          <Button size="small" type="error" @click="removeItem(index)">删除</Button>
          <Divider />
        </div>
        <Button size="small" type="primary" @click="addItem">添加</Button>
      </div>
    </Panel>
  </Collapse>
</template>

<script>
export default {
  watch: {
    'properties.configList': {
      handler(newVal) {
        window.GMS.vbus.$emit('widgetPluginPropertiesChange', { id: this.type + this.id, properties: this.properties })
        this.itemSetting.properties = this.properties
      },
      deep: true,
    },
    'properties.rowIconNum'() {
      window.GMS.vbus.$emit('widgetPluginPropertiesChange', { id: this.type + this.id, properties: this.properties })
      this.itemSetting.properties = this.properties
    }
  },
  props: {
    itemSetting: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      value1: null,
      properties: { configList: [] },
			configList: [],
      functionList: [],
      iconList: [
        {
          value: '#icon-a-46_HOME_E_RBC_changyonggongneng_1',
          name: '常用功能1',
        },
        {
          value: '#icon-a-46_HOME_E_RBC_changyonggongneng_2',
          name: '常用功能2',
        },
        {
          value: '#icon-a-46_HOME_E_RBC_changyonggongneng_3',
          name: '常用功能3',
        },
        {
          value: '#icon-a-46_HOME_E_RBC_changyonggongneng_4',
          name: '常用功能4',
        },
        {
          value: '#icon-a-46_HOME_E_RBC_changyonggongneng_5',
          name: '常用功能5',
        },
        {
          value: '#icon-a-46_HOME_E_RBC_changyonggongneng_6',
          name: '常用功能6',
        },
        {
          value: '#icon-a-46_HOME_E_RBC_changyonggongneng_7',
          name: '常用功能7',
        },
        {
          value: '#icon-a-46_HOME_E_RBC_changyonggongneng',
          name: '常用功能8',
        },
      ],
    }
  },
  computed: {
    id() {
      return this.itemSetting.id
    },
    type() {
      return this.itemSetting.type
    },
  },
  methods: {
    addItem() {
      this.properties.configList.push({
        title: '',
        query: '',
        SQL: '',
        description: '',
      })
    },
    removeItem(index) {
      this.properties.configList.splice(index, 1)
    },
    addFunction(l = []) {
      for (let o of l) {
        if (o.type == 'ROUTE') {
          this.functionList.push(o)
        }
        else if (o.type == 'GROUP') {
          this.addFunction(o.children)
        }
      }
    },
  },
  created() {
    window.GMS.util.nvwa.getRoutes().then((res) => {
      this.addFunction(res.data.children)
    })
    let prop = this.itemSetting.properties
		if (prop && prop.configList) {
			this.properties = prop
		}
  },
}
</script>
<style scoped lang="scss">
</style>