<template>
  <Modal :maskClosable="false" :keyboard="false" v-model:open="data.isShowModal" :footer="null" 
         :title="$t('robot.runningInfo.editTitle')" width="60%" @cancel="_close">
    <Form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }" labelAlign="left" :labelWrap="true">
      <Row :gutter="24">
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.robotUuid')" name="robotUuid">
            <Input v-model:value="form.robotUuid" allowClear disabled :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.robotAccount')" name="robotAccount">
            <Input v-model:value="form.robotAccount" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.runningStatus')" name="runningStatus">
            <Select allow-clear showSearch :filterOption="selectFilterOption" v-model:value="form.runningStatus" 
                    allowClear :placeholder="$t('common.placeholderIn')">
              <SelectOption v-for="(item, index) in data.runningStatusOptions" :key="index" :value="item.value" 
                            :label="item.label" :text="item.label">{{ item.label }}
              </SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.currentBehavior')" name="currentBehavior">
            <Select allow-clear showSearch :filterOption="selectFilterOption" v-model:value="form.currentBehavior" 
                    allowClear :placeholder="$t('common.placeholderIn')">
              <SelectOption v-for="(item, index) in data.currentBehaviorOptions" :key="index" :value="item.value" 
                            :label="item.label" :text="item.label">{{ item.label }}
              </SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.liveRoomId')" name="liveRoomId">
            <Input v-model:value="form.liveRoomId" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.anchorId')" name="anchorId">
            <Input v-model:value="form.anchorId" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.loginTime')" name="loginTime">
            <DatePicker v-model:value="form.loginTime" allowClear :placeholder="$t('common.placeholderIn')" style="width: 100%" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.logoutTime')" name="logoutTime">
            <DatePicker v-model:value="form.logoutTime" allowClear :placeholder="$t('common.placeholderIn')" style="width: 100%" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.lastUpdateTime')" name="lastUpdateTime">
            <DatePicker v-model:value="form.lastUpdateTime" allowClear :placeholder="$t('common.placeholderIn')" style="width: 100%" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.enterLiveRoomTime')" name="enterLiveRoomTime">
            <DatePicker v-model:value="form.enterLiveRoomTime" allowClear :placeholder="$t('common.placeholderIn')" style="width: 100%" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('robot.runningInfo.exitLiveRoomTime')" name="exitLiveRoomTime">
            <DatePicker v-model:value="form.exitLiveRoomTime" allowClear :placeholder="$t('common.placeholderIn')" style="width: 100%" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
          </FormItem>
        </Col>
      </Row>
      <FormItem style="text-align: right">
        <Button @click="_close" :disabled="data.loading">{{ $t('common.cancel') }}</Button>
        <Button danger style="margin-left: 10px" @click="handleResetForm" :disabled="data.loading">
          {{ $t('common.reset') }}
        </Button>
        <Button type="primary" style="margin-left: 10px" @click="handleSubmit" :loading="data.loading"
                :disabled="data.loading">{{ $t('common.confirm') }}
        </Button>
      </FormItem>
    </Form>
  </Modal>
</template>

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

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

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

const emits = defineEmits<Emits>()

const data = reactive({
  isShowModal: false,
  loading: false,
  runningStatusOptions: [
    { label: $t('robot.runningInfo.runningStatusOptions.v1'), value: 1 },
    { label: $t('robot.runningInfo.runningStatusOptions.v2'), value: 2 },
    { label: $t('robot.runningInfo.runningStatusOptions.v3'), value: 3 }
  ],
  currentBehaviorOptions: [
    { label: $t('robot.runningInfo.currentBehaviorOptions.v1'), value: 1 },
    { label: $t('robot.runningInfo.currentBehaviorOptions.v2'), value: 2 },
    { label: $t('robot.runningInfo.currentBehaviorOptions.v3'), value: 3 },
    { label: $t('robot.runningInfo.currentBehaviorOptions.v4'), value: 4 }
  ]
})

const form = reactive({
  uuid: null,
  robotUuid: '',
  robotAccount: '',
  runningStatus: undefined,
  currentBehavior: undefined,
  liveRoomId: '',
  anchorId: '',
  loginTime: null,
  logoutTime: null,
  lastUpdateTime: null,
  enterLiveRoomTime: null,
  exitLiveRoomTime: null
})

// 选择框过滤方法
const selectFilterOption = (input: string, option: any) => {
  return option.text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}

// 表单规则
const rules = reactive({
  // 编辑时部分字段不可编辑，不需要验证
})

const formRef = ref();

function handleSubmit() {
  data.loading = true;
  formRef.value.validate().then(() => {
    robotRunningInfo.updateByUid(form).then((res) => {
      if (res.error) {
        return;
      }
      message?.success($t('common.editSuccess'));
      _close(true);
    })
  }).finally(() => {
    data.loading = false;
  })
}

function handleResetForm() {
  formRef.value.resetFields();
}

function _close(submit = false) {
  data.isShowModal = false;
  formRef.value.resetFields();
  emits('close', submit);
}

function _open(item) {
  data.isShowModal = true;
  Object.assign(form, item);
}

defineExpose({
  _open
})
</script>