<template>
  <el-dialog class="api-edit" v-model="showDialog" title="设置筛选条件" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form class="inline-form" ref="formRef" label-width="auto">
      <el-form-item v-for="(item, i) in ruleList" :key="item.id" :label="item.title" :prop="item.name">
        <template #label>
          <el-checkbox v-model="item.isCheck">{{ item.title }}</el-checkbox>
        </template>
        <el-input v-if="item.types === 'input'" v-model="item.value" :disabled="!item.isCheck" placeholder="请输入" />
        <el-input v-else-if="item.types === 'textarea'" v-model="item.value" :disabled="!item.isCheck" type="textarea" placeholder="请输入" />
        <el-date-picker v-else-if="item.types === 'date'" v-model="item.value" :disabled="!item.isCheck" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" class="w100" clearable />
      </el-form-item>
      <el-form-item v-if="ruleList.length % 2 === 1"> </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import api from '/@/api/device'

import { ElMessage } from 'element-plus';

const emit = defineEmits(['getList']);
const showDialog = ref(false);
const formRef = ref();
const ruleList = ref([]);
const baseForm = {
  id: undefined,
};

const formData = reactive({
  ...baseForm,
});

const onSubmit = async () => {
  const hasNull = ruleList.value.find((item: any) => {
    const isNull = item.isCheck && !item.value
    if (isNull) {
      ElMessage.closeAll()
      ElMessage.warning(`${item.title}不能为空`)
    }
    return isNull
  })

  if (hasNull) return

  const ruleInfo = ruleList.value.map((item: any) => {
    item.isCheck = item.isCheck ? 1 : 0
    delete item.title
    return item
  })

  await api.assetRelationship.editRuleInfo({ id: formData.id, ruleInfo });
  ElMessage.success('操作成功');
  resetForm();
  showDialog.value = false;
  emit('getList');
};

const resetForm = async () => {
  Object.assign(formData, { ...baseForm });
  ruleList.value = []
  formRef.value && formRef.value.resetFields();
};

const open = async (row: any) => {
  resetForm();
  showDialog.value = true;
  formData.id = row.id
  const productKey = row.assetInfo.productKey

  const ruleInfo = JSON.parse(row.ruleInfo || '[]')

  //获取属性列表
  api.dev_asset_metadata.detail({ productKey }).then((res: any) => {
    const list = res.map((row: any) => {

      const hasFindItem = ruleInfo.find((item2: any) => item2.id === row.id)
      const item = {
        id: row.id,
        name: row.name,
        title: row.title,
        types: row.types,
        value: hasFindItem ? hasFindItem.value : null,
        isCheck: hasFindItem?.isCheck ? true : false,
      }
      return item
    })
    ruleList.value = list
  })
};

defineExpose({ open });
</script>
<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 320px;
}

.el-form {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  align-items: flex-start;

  .el-form-item {
    flex: 1;
    min-width: 40%;
    margin-bottom: 0;
  }
}
</style>