<template>
  <el-form class="form" ref="form" v-bind="{ labelWidth, size: 'small' }" :model="formData" :rules="rules">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="设备类型" prop="typeId">
          <el-select
            v-model="formData.typeId"
            filterable
            :placeholder="message.typeId"
            clearable
            @change="onTypeChange"
            style="width:100%"
          >
            <el-option v-for="item in types" :key="item.id" :label="item.deviceTypeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备SN序列" prop="install.deviceId">
          <el-select
            v-model="formData.install.deviceId"
            filterable
            :placeholder="message.deviceId"
            clearable
            style="width:100%"
          >
            <el-option v-for="item in devices" :key="item.id" :label="item.deviceName" :value="item.id">
              {{ `${item.deviceName}${item.deviceSn ? ' | ' + item.deviceSn : ''}` }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安装负责人" prop="install.installPeople">
          <el-input v-model="formData.install.installPeople" :placeholder="message.installPeople" clearable />
        </el-form-item>
        <el-form-item label="联系方式" prop="install.liaisonPhone">
          <el-input v-model="formData.install.liaisonPhone" :placeholder="message.liaisonPhone" clearable />
        </el-form-item>
        <el-form-item label="安装时间" prop="install.installTime">
          <el-date-picker
            v-model="formData.install.installTime"
            :placeholder="message.installTime"
            clearable
            value-format="yyyy-MM-dd"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        image area
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, ModelSync, Prop } from 'vue-property-decorator'
import BaseDialog from '@/components/BaseDialog/index.vue'
import { ElForm } from 'element-ui/types/form'
import { getDefalutNumberProp, telAndMobileReg } from '@/utils/constant'
import { ElUploadInternalFileDetail } from 'element-ui/types/upload'
import { IDevice, IDeviceType } from '../../api/common'
import { devicePage } from '../../api/device'

export interface IInstall {
  /** 设备类型ID */
  typeId: number
  /** 设备安装信息 */
  install: {
    /** 设备ID */
    deviceId: number
    /** 文件所属项目类型 */
    fileTypeID: number
    /** 安装人 */
    installPeople: string
    /** 安装时间 */
    installTime: string
    /** 联系人电话 */
    liaisonPhone: string
    /** 关联状态0未启用,1启用（启用后不允许修改） */
    relevancyState: number
    /** 站点ID */
    siteId: number
  }
  fileList: (string | Partial<ElUploadInternalFileDetail>)[]
}

@Component({ name: 'DeviceForm', components: { BaseDialog } })
export default class DeviceForm extends Vue {
  @ModelSync('value', 'change', { type: Object }) readonly formData!: IInstall
  @Prop({ type: String, default: '8em' }) labelWidth!: string
  @Prop({ type: Array, default: () => ({}) }) types!: IDeviceType[]
  getDefalutNumberProp = getDefalutNumberProp
  $refs!: { form: ElForm }
  devices: IDevice[] = []
  message = {
    typeId: '请选择设备类型',
    deviceId: '请选择设备',
    installPeople: '请输入安装负责人',
    liaisonPhone: '请输入联系方式',
    installTime: '请选择安装时间'
  }
  rules = {
    typeId: [{ required: true, message: this.message.typeId, trigger: 'change' }],
    'install.deviceId': [{ required: true, message: this.message.deviceId, trigger: 'change' }],
    'install.installPeople': [{ required: true, message: this.message.installPeople, trigger: 'blur' }],
    'install.liaisonPhone': [
      { required: true, message: this.message.liaisonPhone, trigger: 'blur' },
      { pattern: telAndMobileReg(), message: '请输入正确的联系方式', trigger: 'blur' }
    ],
    'install.installTime': [{ required: true, message: this.message.installTime, trigger: 'blur' }]
  }

  async onTypeChange(deviceType) {
    try {
      const {
        result: { records }
      } = await devicePage({ deviceType, ...this.$store.getters['project/id'] })
      this.devices = records
    } catch (error) {
      console.log(error)
    }
  }

  async validate() {
    return new Promise<IInstall>((resolve, reject) => {
      this.$refs.form.validate((valid) => {
        valid ? resolve(this.formData) : reject()
      })
    })
  }
}
</script>
