<template>
  <n-form label-width="auto">
    <n-grid :cols="12" :x-gap="12">
      <n-form-item-gi
        v-for="(item, index) of formList"
        :key="item.T_VerifyTemplateMap_id"
        :span="4"
        :label="item.T_name"
      >
        <!-- 多选id -->
        <n-select
          v-model:value="item.T_value"
          multiple
          label-field="T_id"
          value-field="T_sn"
          max-tag-count="responsive"
          :options="classList"
          v-if="item.T_label === 3"
        >
          <template #action>
            <n-space>
              <n-button :disabled="classList.length==0?true:false" class="underline" text @click="handleSelectAll(index)" >{{item.T_value.length==classList.length?'取消':'全选'}}</n-button>
              <n-button :disabled="classList.length==0?true:false" class="underline" text @click="handleSelectReverse(index)" >反选</n-button>
            </n-space>
          </template>
        </n-select>
        <!-- 单选id -->
        <n-select
          v-model:value="item.T_value"
          label-field="T_id"
          value-field="T_sn"
          :options="classList"
          v-else-if="item.T_label === 4"
        />
        <!-- 时间 -->
        <n-date-picker
          v-model:formatted-value="item.T_value"
          type="datetime"
          format="yyyy-MM-dd HH:mm"
          datetime
          clearable
          @update:formatted-value="(value) => (item.T_value = value)"
          class="w-full"
          v-else-if="item.T_label === 7"
        />

        <!-- 时间区间 -->
        <n-date-picker
          v-model:formatted-value="item.T_value"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm"
          clearable
          class="w-full"
          v-else-if="item.T_label === 9"
        />
        <!-- 图片 -->
        <template v-else-if="item.T_label === 10" >
          <n-image class="mr-5" width="100" :src="item.T_value" />
            <n-upload
            list-type="image-card"
            @change="(options) => handleChangeByIndex(options, index)"
            :default-upload="false"
            :max="1"
          >
            点击上传
          </n-upload>
        </template>
        <!-- CAD -->
        <template v-else-if="item.T_label === 11">
          <div style="display: flex;flex: 1;align-items: center;" >
            <n-image class="mr-5" width="100" :src="item.T_value"/>
            <n-space class="mr-5">
              <n-button @click="() => handleEdit(item)">编辑</n-button>
              <n-button @click="() => handleRefresh(index)">刷新</n-button>
            </n-space>
          </div>
          
        </template>
        <!-- 时间 注释 -->
        <template v-else-if="item.T_label === 12">
          <n-space vertical class="w-full">
            <n-date-picker
              v-model:formatted-value="item.T_value[0]"
              format="yyyy-MM-dd HH:mm"
              :time-picker-props="{ format: 'HH:mm' }"
              type="datetime"
              clearable
            />
            <n-input v-model:value="item.T_value[1]" type="text" />
          </n-space>
        </template>
        <!-- 时间区间 注释 -->
        <template v-else-if="item.T_label === 13">
          <n-space vertical class="w-full">
            <n-date-picker
              v-model:formatted-value="item.T_value[0]"
              format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              clearable
            />

            <n-input v-model:value="item.T_value[1]" type="text" />
          </n-space>
        </template>
        <!-- 可输入的表单项 -->
        <template v-else>
          <n-input v-model:value="item.T_value" type="text" />
        </template>
        <!-- 描述 -->
        <n-image
          width="100"
          :src="item.T_text"
          v-if="item.T_label === 10 || item.T_label === 11"
          style="margin-right: 36px;"
        />
        <n-popover trigger="hover" v-else>
          <template #trigger>
            <n-icon size="24" class="ml-3">
              <InformationCircleOutline />
            </n-icon>
          </template>
          {{ item.T_text }}
        </n-popover>
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<script setup>
import { getTaskDataClassList } from '@/api';
import * as qiniu from 'qiniu-js';
import { getFileToken } from '@/common';
import { InformationCircleOutline } from '@vicons/ionicons5';
import { NButton } from 'naive-ui';

const message = useMessage();

const task = window.sessionStorage.getItem('task')
  ? JSON.parse(window.sessionStorage.getItem('task'))
  : {};

const props = defineProps({
  formList: {
    type: Array, 
    default: () => [],
  },
});
// 表单对象
const formValue = reactive({
  pdf: '',
});
formValue.formList = computed(() => {
  return props.formList;
});



// 查询数据
const queryData = reactive({
  T_source: 2,
  T_task_id: task.T_task_id,
  T_VerifyTemplate_id: task.T_VerifyTemplate_id,
});

//
const classList = ref([]);

// CAD刷新
const handleRefresh = (index) => {
  console.log('cad',formValue.formList)
  formValue.formList[index].T_value =  ''

    formValue.formList[
    index
  ].T_value = `http://coldverifylocal.coldbaozhida.com/CAD/download?type=upload&filename=${queryData.T_task_id}_${queryData.T_VerifyTemplate_id}_${formValue.formList[index].T_id}.png&xxx=${Math.random()}`;

};

// CAD编辑
const handleEdit = (row) => {
  window.open(
    `http://coldverifylocal.coldbaozhida.com/CAD/?task_id=${queryData.T_task_id}&vt_id=${queryData.T_VerifyTemplate_id}&key_id=${row.T_id}`
  );
};

const handleChangeByIndex = async ({ file }, i) => {
  const token = await getFileToken(file.name.split('.')[1]);
  const observable = qiniu.upload(
    file.file,
    file.name,
    token,
    {},
    {
      useCdnDomain: true,
    }
  );
  observable.subscribe({
    next: (result) => {
      // 主要用来展示进度
      console.warn(result);
    },
    error: () => {
      message.error('上传失败');
    },
    complete: (res) => {
      formValue.formList[i].T_value = res.key;
    },
  });
};

// 全选
const handleSelectAll = (i) => {
  if(props.formList[i].T_value.length==classList.value.length){//已全选 ,现在全取消
    props.formList[i].T_value = []
  }else{
    props.formList[i].T_value = classList.value.map(item=>{return item.T_sn})
  }
  
 
};

// 反选
const handleSelectReverse = (i) => {
  let arr = classList.value.map(item=>{return item.T_sn})
  props.formList[i].T_value = props.formList[i].T_value.concat(arr).filter((v, i, array) => {
        return array.indexOf(v) === array.lastIndexOf(v);
  });
};

// 获取设备列表
const getClassList = async () => {
  // console.log('89',)
  try {
    const { data: res } = await getTaskDataClassList({
      // T_task_id: queryData.T_task_id,
      T_class:task.T_class
    });
    console.log('******',res)
    classList.value = res.Data.List || [];
  } catch (e) {
    console.log(e);
  }
};

getClassList();
</script>

<style scoped></style>
