<template>
  <Collapse v-model="value1" class="property">
    <Panel name="1">
      列表设置
      <div slot="content">
        <div v-for="(config, index) in configList" :key="index">
          <Form :model="config" :label-width="80">
            <FormItem label="标题">
              <Input v-model="config.title"></Input>
            </FormItem>
            <FormItem label="查询SQL">
              <Input v-model="config.SQL"></Input>
            </FormItem>
            <FormItem label="查询标识">
              <Input v-model="config.templateName"></Input>
            </FormItem>
            <FormItem label="描述">
              <Input v-model="config.desc"></Input>
            </FormItem>
            <FormItem label="颜色">
              <Select v-model="config.color">
                <Option v-for="item in colorList" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
          </Form>
        </div>
      </div>
    </Panel>
  </Collapse>
</template>

<script>
export default {
  watch: {
    configList: {
      handler(newVal, oldVal) {
        this.itemSetting.properties = newVal
      },
      deep: true,
    },
  },
  props: {
    itemSetting: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      value1: null,
      configList: [
        {
          SQL: '',
          title: '我的审批待办',
          templateName: '',
          desc: '',
          color: '',
        },
        {
          SQL: '',
          title: '我的审批待办',
          templateName: '',
          desc: '',
          color: '',
        },
        {
          SQL: '',
          title: '我的审批待办',
          templateName: '',
          desc: '',
          color: '',
        },
        {
          SQL: '',
          title: '我的审批待办',
          templateName: '',
          desc: '',
          color: '',
        },
      ],
      colorList: ['info', 'success', 'warning', 'error'],
    }
  },
  created() {
    let prop = this.itemSetting.properties
    if (!prop || prop.length == 0) {
      prop = {}
      prop = this.configList
    } else if (prop) {
      this.configList = prop
    }
  },
  methods: {
  },
}
</script>
<style scoped lang="scss">
.property {
  div,
  span {
    margin-bottom: 5px;
  }
}
</style>