<template>
  <Modal v-model:visible="visible" :title="$t('common.edit')" width="50%" :footer="null"
    :maskClosable="false" :keyboard="false" :destroyOnClose="true">
    <Form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 6 }" labelAlign="left" :labelWrap="true">
      <Row :gutter="24">
        <Col :span="24">
          <FormItem :label="'关联类型'" name="relationType">
            <Select v-model:value="formState.relationType" placeholder="请选择关联类型">
              <SelectOption value="runningConfig">运行配置</SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem :label="'关联配置'" name="runningConfigUuid">
            <Input v-model:value="formState.configName" disabled placeholder="关联配置" />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem :label="'直播间ID'" name="liveRoomId">
            <Input v-model:value="formState.liveRoomId" placeholder="请输入直播间ID" />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem :label="'直播间名称'" name="liveRoomName">
            <Input v-model:value="formState.liveRoomName" placeholder="请输入直播间名称" />
          </FormItem>
        </Col>
                <Col :span="24">
          <FormItem :label="'主播id'" name="anchorCode">
            <Input v-model:value="formState.anchorCode" placeholder="请输入主播编码" />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem :label="'主播名称'" name="anchorName">
            <Input v-model:value="formState.anchorName" placeholder="请输入主播名称" />
          </FormItem>
        </Col>
      </Row>
      <FormItem style="text-align: right">
        <Button @click="handleCancel" :disabled="loading">{{ $t('common.cancel') }}</Button>
        <Button type="primary" style="margin-left: 10px" @click="handleSubmit" :loading="loading"
                :disabled="loading">{{ $t('common.submit') }}
        </Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { $t } from '@vben/locales';
import { Modal, Form, Input, Row, Col, Select, Button, message } from 'ant-design-vue';
import { liveRoomRelation } from '#/api';

const FormItem = Form.Item;
const SelectOption = Select.Option;

const visible = ref(false);
const loading = ref(false);
const formRef = ref();

const formState = reactive({
  uuid: '',
  relationType: 'runningConfig',
  runningConfigUuid: '',
  configName: '',
  liveRoomId: '',
  liveRoomName: '',
  anchorId: '',
  anchorName: '',
  anchorCode: '',
  anchorAvatar: '',
  status: 1
});

const statusOptions = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
];

const rules = {
  relationType: [
    { required: true, message: '请选择关联类型', trigger: 'change' }
  ],
  liveRoomId: [
    { required: true, message: '请输入直播间ID', trigger: 'blur' }
  ],
  liveRoomName: [
    { required: true, message: '请输入直播间名称', trigger: 'blur' }
  ],
  anchorId: [
    { required: true, message: '请输入主播ID', trigger: 'blur' }
  ],
  anchorName: [
    { required: true, message: '请输入主播名称', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
};

function handleSubmit() {
  formRef.value.validate().then(() => {
    loading.value = true;
    liveRoomRelation.updateByUid(formState).then(res => {
      if (!res.error) {
        message.success($t('common.editSuccess'));
        handleCancel();
        emits('close', true);
      }
    }).catch(() => {
      message.error($t('common.editFailed'));
    }).finally(() => {
      loading.value = false;
    });
  }).catch(() => {
    message.warning('请完善表单信息');
  });
}

function handleCancel() {
  visible.value = false;
  formRef.value.resetFields();
}

interface Emits {
  (e: 'close', submit: Boolean): void
}

const emits = defineEmits<Emits>();

function _open(record, runningConfigInfo) {
  visible.value = true;
  formState.uuid = record.uuid;
  formState.relationType = record.relationType || 'runningConfig';
  formState.runningConfigUuid = runningConfigInfo?.uuid || '';
  formState.configName = runningConfigInfo?.configName || '';
  formState.liveRoomId = record.liveRoomId || '';
  formState.liveRoomName = record.liveRoomName || '';
  formState.anchorId = record.anchorId || '';
  formState.anchorName = record.anchorName || '';
  formState.anchorCode = record.anchorCode || '';
  formState.anchorAvatar = record.anchorAvatar || '';
  formState.status = record.status || 1;
}

function _close() {
  handleCancel();
}

//开放方法
defineExpose({ _open, _close });
</script>

<style scoped></style>