<template>
  <div class="container">
    <Breadcrumb :items="['system', 'system-customer']" />
    <a-card class="minHeight">
      <a-space direction="vertical" fill>
        <div style="color: #4e5969">工作简介：</div>
        <div style="margin: 8px 0; color: #2c2c2c">{{ config.content }}</div>
        <icon-button v-permission="['system-customer-edit']" icon="edit" type="primary" label="编辑" @click="onUpdate" />
      </a-space>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { createVNode, onMounted, ref } from 'vue';
  import { SystemConfig } from '@/types/system-config';
  import { Form, FormItem, Input, Modal } from '@arco-design/web-vue';
  import useConfigApi from '@/http/config';
  import { set } from 'lodash';

  const { update, getOne } = useConfigApi;

  const config = ref<Pick<SystemConfig, 'id' | 'content'>>({ id: 0, content: '' });

  const onUpdate = () => {
    const content = ref<string>(config.value?.content || '');

    Modal.open({
      title: '编辑',
      content: () =>
        createVNode(
          Form,
          { model: content },
          {
            default: () =>
              createVNode(
                FormItem,
                { label: '工作简介' },
                {
                  default: () =>
                    createVNode(Input, {
                      'maxLength': 30,
                      'modelValue': content.value,
                      'showWordLimit': true,
                      'onUpdate:modelValue': (val: string | undefined) => {
                        content.value = val || '';
                      },
                    }),
                }
              ),
          }
        ),
      closable: false,
      escToClose: false,
      maskClosable: false,
      onBeforeOk: (done) => {
        update(config.value?.id, { ...config.value, content: content.value })
          .then(() => {
            set(config.value, 'content', content.value);
            done(true);
          })
          .catch(() => {
            done(false);
          });
      },
    });
  };

  onMounted(() => {
    getOne({ identifier: 'customer_service' }).then((data?: SystemConfig) => {
      config.value = data || { id: 0, content: '' };
    });
  });
</script>

<style lang="less" scoped>
  .minHeight {
    min-height: calc(100vh - 200px);
  }
</style>