<template>
  <div class="container">
    <div v-if="channel === 'fixed-media'" class="card-last">
      <Row :gutter="[24, 24]">
        <Col :span="12">
          <title-component data="基本信息" />
          <div>
            <Form :model="formState" name="basic" autocomplete="off" layout="vertical" @finish="onFinish">
              <FormItem
                label="名称"
                name="name"
                :rules="[
                  {
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                  },
                  {
                    max: 64,
                    message: '最多可输入64个字符',
                    trigger: 'blur'
                  }
                ]"
              >
                <Input placeholder="请输入名称" v-model:value="formState.name" />
              </FormItem>
              <FormItem label="说明" name="description">
                <Textarea placeholder="请输入说明" :rows="4" v-model:value="formState.description" show-count :maxlength="200" />
              </FormItem>
              <FormItem>
                <PermissionButton
                  v-if="view === 'false'"
                  type="primary"
                  html-type="submit"
                  :hasPermission="`link/AccessConfig:${id === ':id' ? 'add' : 'update'}`"
                >
                  保存
                </PermissionButton>
              </FormItem>
            </Form>
          </div>
        </Col><Col :span="12">
          <div class="doc">
            <h1>接入方式</h1>
            <p>
              {{ provider.name }}
            </p>
            <p>
              {{ provider.description }}
            </p>
            <h1>消息协议</h1>
            <p>
              {{ provider.id === 'fixed-media' ? 'URL' : 'SIP' }}
            </p>
          </div>
        </Col>
      </Row>
    </div>
    <!--        <div v-else-if="channel === 'gb28181'">-->
    <div v-else>
      <GB28181 :provider="props.provider" :data="props.data" @close="close" />
    </div>
  </div>
</template>

<script lang="ts" setup name="AccessMedia">
  import { PermissionButton, TitleComponent } from '@jdlinker/ui';
  import { onlyMessage } from '@jdlinker/utils';
  import GB28181 from './GB28181.vue';
  import { update, save } from '../../../../../api/link/accessConfig';
  import { ref, onMounted } from 'vue';
  import { useRoute } from "vue-router";
  // @ts-ignore
  import { Row, Col, Form, FormItem, Textarea, Input } from 'linker-ui-components'

  interface FormState {
    name: string;
    description: string;
  }

  type Emit = {
    (e: 'close'): void;
  };
  const emit = defineEmits<Emit>();

  const route = useRoute();
  const view = route.query.view as string;
  const id = route.params.id as string;

  const props = defineProps({
    provider: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Object,
      default: () => {}
    }
  });
  // @ts-ignore
  const channel = ref(props.provider.channel);

  const formState = ref<FormState>({
    name: '',
    description: ''
  });
  const onFinish = async (values: any) => {
    const params = {
      ...values,
      provider: 'fixed-media',
      transport: 'URL',
      channel: 'fixed-media'
    };
    const resp = id === ':id' ? await save(params) : await update({ ...params, id });
    if (resp.status === 200) {
      onlyMessage('操作成功', 'success');

      if (route.query.save) {
        // @ts-ignore
        window?.onTabSaveSuccess(resp.result);
        setTimeout(() => window.close(), 300);
      } else {
        history.back();
      }
    }
  };

  onMounted(() => {
    if (id !== ':id') {
      // @ts-ignore
      formState.value = {
        name: props.data.name,
        description: props.data?.description || ''
      };
    }
  });

  const close = () => {
    console.log('media close....');
    emit('close');
  };
</script>

<style lang="less" scoped>
  .container {
    margin: 20px;
  }

  .card-last {
    padding-right: 5px;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
