<template>
    <div class="app-container">
        <Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
    </div>
</template>

<script setup name="Handle">
  import Form from '@/components/form/index.vue';
  import {addGroup, getGroup, updateGroup, resNameList,exitsResourceById} from "@/api/disRevenue/resource"
  export default {
    name: 'GroupDetails',
    components: {Form},
    data() {
      return {
        ruleForm: {},
        formList: [],
        paramsData: {},
        includedDevicesList: {},
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.id) {
        this.getFormDataList(this.paramsData.id);
      }
      this.fnFormList();
      this.getResNameList();
    },
    methods: {
      // formList集合
      fnFormList(objVal) {
        this.formList = [{
          config: {title: '基本信息'},
          controls: {
            id: {label: 'ID',hidden: true},
            groupName: {label: '名称', span: 24, type: 'input', rules: [{required: true, message: '请输入名称', trigger: 'blur'}]},
            description: {label: '描述', span: 24, type: 'textarea'},
            includedDevicesId: {label: '包含设备', span: 24, type: 'transfer',options: [], eventName: 'change'}
          }
        }];
      },
      // 获取详情
      getFormDataList(id) {
        getGroup(id).then(val => {
          if (val && val.data) {
            if (val.data && val.data['includedDevicesId']) {
              let newArr = val.data['includedDevicesId'].split(',');
              val.data['includedDevicesId'] = newArr.map(id => Number(id));
            }
            this.ruleForm = val.data;
          }
        }).catch(() => {
          // this.$modal.msgError("操作失败")
        });
      },
      // 包含设备
      getResNameList() {
        resNameList().then(val => {
          if (val) {
            this.formList[0].controls['includedDevicesId']['options']= val && val.map(item => {
              this.includedDevicesList[item.id] = item;
              return Object.assign({label: item.resourceName, key: item.id});
            });
          }
        }).catch(() => {
          this.$modal.msgError("操作失败")
        });
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        console.log('result===',formVal);
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'submit':
              dataVal['includedDevicesName'] = (dataVal['includedDevicesId'].map(id => this.includedDevicesList[id].resourceName)).join();
              dataVal['includedDevicesId'] = dataVal['includedDevicesId'].join();
              let fnType = addGroup;
              if (dataVal && dataVal.id) {
                fnType = updateGroup;
              }
              fnType(dataVal).then(response => {
                this.$modal.msgSuccess(response.msg);
                this.$router.push("/resource/group")
              }).catch(() => {
                this.$modal.msgError("操作失败")
              });
              break;
            case 'cancle':
              this.$router.push("/resource/group");
              break;
            // case 'includedDevicesId':
            //   console.log('dataVal==',dataVal);
            //   if (formVal && formVal === 'right') {
            //     exitsResourceById({resourceIds: dataVal.join(',')}).then(res => {
            //       console.log('res=',res.msg);
            //       if (res.msg) {
            //         let content = '<p style="font-size: 1rem;font-weight: 600;">资源从其他分组移动到此组</p>' +
            //           '<p style="height: 0px;margin:10px 0 50px;">资源移动到此组后，将在原来到组中消失，相关的监控策略也会消失</p>';
            //         this.$modal.confirm(content).then(() => {
            //           console.log('vvv===',this.$refs.formRef.$refs.ruleForm.model.includedDevicesId);
            //         }).catch(() => {
            //           console.log('cccccc====');
            //         });
            //       }
            //     });
            //   }
            //   break;
            default:
          }
        }
      }
    }
  }
</script>
<style>
</style>
