<template>
  <div :class="$style.form">
    <sd-form-item name="appName" />
    <a-form-model-item
      label="应用分类"
      :rules="[
        {
          required: fields.appGroupId.required,
          message: '不能为空',
          trigger: ['change', 'blur'],
        },
      ]"
      prop="appGroupId"
    >
      <sd-list-picker
        v-model="parentSel"
        single
        :read-only="applicationType === 'share'"
        :load-list-data="loadListData"
        @change="parentChange"
      />
    </a-form-model-item>
    <sd-form-item name="appGroupId" hidden />
    <sd-form-item name="iconCode" :input-props="{ defaultValue: JSON.stringify(icon[0]) }">
      <template v-slot>
        <sd-icon
          v-model="model.iconCode"
          :type="(model.iconCode && JSON.parse(model.iconCode).name) || icon[0].name"
          :theme="(model.iconCode && JSON.parse(model.iconCode).theme) || icon[0].theme"
          :class="$style.iconclass"
        />
        <a-button @click="selectIcon">更改图标</a-button>
      </template>
      <template v-slot:read
        ><sd-icon
          :type="(model.iconCode && JSON.parse(model.iconCode).name) || icon[0].name"
          :theme="(model.iconCode && JSON.parse(model.iconCode).theme) || icon[0].theme"
        ></sd-icon
      ></template>
    </sd-form-item>
    <a-form-model-item
      label="上级菜单"
      :rules="[
        {
          required: true,
          message: '不能为空',
          trigger: ['change', 'blur'],
        },
      ]"
      prop="parentMenuCode"
    >
      <sd-value-picker
        v-model="parentMenu"
        single
        :read-only="applicationType === 'share'"
        @change="menuChange"
      >
        <template v-slot="scope">
          <sd-picker-source-tree :load-tree-data="loadTreeData" v-bind="scope" />
        </template>
      </sd-value-picker>
    </a-form-model-item>
    <sd-form-item name="parentMenuCode" hidden />
    <sd-form-item name="maintainers" />
    <sd-form-item name="appDesc" :input-props="{ type: 'textarea' }" />
  </div>
</template>

<script>
import pickValues from '@/common/services/pick-values'
import sdIconPicker from '@/common/components/sd-icon-picker.vue'
import PageService from '@/common/services/page-service'
import ApplicationService from './application-service'
import components from './_import-components/sd-application-info-form-import'

export default {
  name: 'SdApplicationInfoForm',
  components,
  props: {
    model: {
      type: Object,
      required: true,
    },
    fields: {
      type: Object,
      required: true,
    },
    applicationType: {
      type: String,
      default: 'all',
    },
  },
  data() {
    return {
      parentMenu: [],
      parentSel: [],
      icon: [
        {
          id: 'sd-appstore/fill',
          name: 'sd-appstore',
          theme: 'fill',
        },
      ],
    }
  },
  created() {
    // 获取所属分类
    if (this.model.appGroupId) {
      PageService.get({ id: this.model.appGroupId }, 'app/appgroup/weAppGroup').then((res) => {
        const name = res.data?.pageFormData?.pageFieldInfos?.filter(
          (item) => item.name === 'name'
        )[0]?.value
        this.parentSel = [{ id: this.model.appGroupId, name }]
      })
    }
    // 获取上级菜单名称
    if (this.model.parentMenuCode) {
      ApplicationService.getMenuByCode({ code: this.model.parentMenuCode }).then((res) => {
        this.parentMenu = [{ id: this.model.parentMenuCode, name: res.data.text }]
      })
    }
  },
  methods: {
    selectIcon() {
      pickValues(sdIconPicker, {
        value: this.model.iconCode ? [JSON.parse(this.model.iconCode)] : this.icon,
      }).then((icons) => {
        if (icons) {
          this.model.iconCode = JSON.stringify(icons[0])
        }
      })
    },
    menuChange(data) {
      this.model.parentMenuCode = data[0]?.id || ''
    },
    loadTreeData(parentCatId, parent) {
      var params = { parentId: parent?.dataId || -1 }
      return ApplicationService.getMenuList(params).then((res) => {
        return res.data.map(function(item) {
          return {
            id: item.props?.code || item.id,
            name: item.text,
            checkable: true, // 是否有选择框
            isLeaf: item.leaf, // 是否叶子节点
            dataId: item.id,
          }
        })
      })
    },
    loadListData() {
      const params = {
        startPosition: 0,
        maxResults: -1,
        formId: 'weAppGroup',
        columns: 'id,name',
      }
      return PageService.getList(params).then((res) => {
        return res.data.data.map((val) => {
          return {
            id: val.id,
            name: val.name,
          }
        })
      })
    },
    parentChange(data) {
      this.model.appGroupId = data[0]?.id || ''
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.form {
  :global(> .ant-form-item .ant-form-item-label) {
    float: left;
    width: 19%;
  }
  :global(> .ant-form-item .ant-form-item-control-wrapper) {
    float: left;
    width: 75%;
  }
}
.iconclass {
  margin-right: 8px;
  font-size: $font-size-base * 2;
  vertical-align: middle;
}
</style>
