<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-row :gutter="20">
      <a-col :span="24">
        <a-row :gutter="20">
          <a-col :span="24">
            <a-row :gutter="20">
              <a-col :span="19">
                <a-form-item label="门户设计名称:" name="designName">
                  <a-input v-model:value="form.designName" allow-clear placeholder="请输入门户设计名称" />
                </a-form-item>
                <a-form-item label="门户状态:" name="designStatus">
                  <a-select v-model:value="form.designStatus" allowClear placeholder="请选择门户状态" style="width: 100%">
                    <a-select-option :value="10">启用</a-select-option>
                    <a-select-option :value="20">下架</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="5" class="pick">
                <a-form-item label="图标:">
                  <div class="modular-icon" @click="imgClick">
                    <img :src="activeIconSrc" style="width: 100%; height: 100%" />
                  </div>
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-form-item label="描述:" name="description">
              <a-textarea v-model:value="form.description" :rows="4" placeholder="请输入描述"></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-modal :visible="visibleIcon" width="620px" title="选择图标" @ok="iconOk" @cancel="visibleIcon = false">
      <div>
        <img
          v-for="(icon, index) in iconList"
          :key="index"
          :src="icon.url"
          class="flow-icon-item"
          :class="{ active: selectedIcon === icon.name_suffix }"
          @click="selectedIconClick(icon)"
        />
      </div>
    </a-modal>
  </a-form>
</template>

<script setup name="PortalConfigForm">
import { reactive, ref, computed } from 'vue';

const props = defineProps({
  // 表单数据
  form: Object,
  iconList: Array,
  isUpdate: Boolean
});

const visibleIcon = ref(false);

// 当前激活图标
const activeIcon = ref(null);
// 当前选中图标
const selectedIcon = ref(null);

// 验证规则
const rules = reactive({
  designName: [{ required: true, message: '请输入门户设计名称', type: 'string', trigger: 'blur' }],
  designStatus: [{ required: true, message: '请选择门户状态', type: 'number', trigger: 'change' }]
});

/**
 * 图标
 */
const activeIconSrc = computed(() => {
  const icon = props.iconList.find(t => t.name_suffix == activeIcon.value);
  return icon ? icon.url : '';
});

const imgClick = () => {
  visibleIcon.value = true;
};

// 图标点击
const selectedIconClick = icon => {
  selectedIcon.value = icon.name_suffix;
  iconOk();
};

//   关闭选择图标弹框
const iconOk = () => {
  activeIcon.value = selectedIcon.value;
  props.form.designLogo = selectedIcon.value;
  visibleIcon.value = false;
};

const init = () => {
  activeIcon.value = props.iconList[0].name_suffix;
  selectedIcon.value = props.iconList[0].name_suffix;
  props.form.designLogo = props.iconList[0].name_suffix;
};

const modelIconSet = value => {
  activeIcon.value = value;
  selectedIcon.value = value;
};

defineExpose({
  init,
  modelIconSet
});
</script>

<style scoped lang="less">
.modular-icon {
  width: 125px;
  height: 125px;
  border: 1px solid #eee;
  border-radius: 6px;
  vertical-align: middle;
  img {
    cursor: pointer;
  }
}
.flow-icon-item {
  width: 40px;
  height: 40px;
  margin: 6px;
  position: relative;
  cursor: pointer;

  &.active {
    opacity: 1;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }

  &:hover {
    opacity: 1;
  }
}
</style>
