<template>
  <a-drawer
    title="选择参数组"
    placement="right"
    :width="isMobile ? screenWidth : screenWidth * 0.85"
    :visible="visible"
    @close="onClose"
  >
    <x-add-form
      ref="xAddForm"
      @onSubmit="onAddOrEditSubmit"/>
    <a-list
      :grid="{gutter: 24, lg: 4, md: 3, sm: 1, xs: 1}"
      :dataSource="content.groups"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <a-card :hoverable="true" @click="toEdit(item)">
          <a-card-meta >
            <div style="margin-bottom: 3px" slot="title">{{ item.group }}</div>
            <a-icon type="tags" slot="avatar" :style="{ fontSize:'2em' }"/>
            <div class="meta-content" slot="description">{{ item.describe }}</div>
          </a-card-meta>
        </a-card>
      </a-list-item>
    </a-list>
  </a-drawer>
</template>

<script>
import { mapState } from 'vuex'
import XAddForm from '@vue2-client/base-client/components/common/XAddForm/XAddForm'

export default {
  name: 'FormGroupEdit',
  components: {
    XAddForm
  },
  data () {
    return {
      // 页面宽度
      screenWidth: document.documentElement.clientWidth,
      formObj: {
        groupName: '',
        formJson: []
      }
    }
  },
  mounted () {
    this.initView()
  },
  computed: {
    ...mapState('setting', ['isMobile'])
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    serviceName: {
      type: String,
      default: undefined
    },
    modifyModelData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    content: {
      type: Object,
      required: true
    },
    // 环境
    env: {
      type: String,
      default: () => {
        return 'prod'
      }
    },
  },
  watch: {
    visible (rel) {
      if (rel) {
        this.initView()
      }
    }
  },
  methods: {
    // 初始化组件
    initView () {
    },
    toEdit (item) {
      this.formObj = item
      const modifyModelData = { data: this.modifyModelData[item.groupName] }
      this.$refs.xAddForm.init({
        businessType: '修改',
        title: '参数项',
        formItems: item.formJson,
        serviceName: this.serviceName,
        modifyModelData: modifyModelData
      })
    },
    onClose () {
      this.$emit('update:visible', false)
    },
    onAddOrEditSubmit (res, callback) {
      const requestParameters = {
        paramsJson: {}
      }
      requestParameters.paramsJson[this.formObj.groupName] = {}
      for (const key of Object.keys(res.realForm)) {
        requestParameters.paramsJson[this.formObj.groupName][key] = res.realForm[key]
      }
      this.$emit('onSubmit', requestParameters, result => {
        if (result) {
          this.$message.success('提交成功！')
        } else {
          this.$message.error('提交失败！')
        }
        callback()
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
  }
  .new-btn{
    border-radius: 2px;
    width: 100%;
    height: 187px;
  }
  .meta-content{
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 64px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>
