<template>

  <el-form
    ref="ruleFormRef"
    :model="formData"
    label-position="right"
    label-width="180px"
    label-suffix=":"
    scroll-to-error
    :rules="rules"
    :validate-on-rule-change="false"
  >
    <el-form-item label="移动端入口" prop="mobileTerminalEntry">
      <el-checkbox-group v-model="formData.mobileTerminalEntry">
        <el-checkbox
          v-for="item in mobileType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="是否使用云资源">
      <el-switch
        v-model="formData.isCloudResource"
        :active-value="1"
        :inactive-value="0"
      />
    </el-form-item>
    <el-form-item v-if="formData.isCloudResource===1" prop="cloudResource">
      <el-table :data="formData.cloudResource" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="state">
          <template #header>
            <span style="color: red">*</span>云资源类型
          </template>
          <template #default="scope">
            <!--            <el-form-item-->
            <!--              :prop="`cloudResource[${scope.$index}].cloudResourceType`"-->
            <!--              :rules="[{required:true,message:''}]"-->
            <!--            >-->
            <!--              <el-input-->
            <!--                v-model="formData.cloudResource[scope.$index].cloudResourceType"-->
            <!--                placeholder="云资源类型"-->
            <!--              />-->
            <!--            </el-form-item>-->
            <el-form-item
              :prop="`cloudResource[${scope.$index}].cloudResourceType`"
              :rules="[{required:true,message:''}]"
            >
              <el-select
                v-model="formData.cloudResource[scope.$index].cloudResourceType"
                placeholder="请选择"
                size="large"
                @change="cloudTypeChange(scope.$index)"
              >
                <el-option
                  v-for="item in disData"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="city">
          <template #header>
            <span style="color: red">*</span>基础规格
          </template>
          <template #default="scope">
            <!--            <el-form-item-->
            <!--              :prop="`cloudResource[${scope.$index}].baseSpecification`"-->
            <!--              :rules="[{required:true,message:''}]"-->
            <!--            >-->
            <!--              <el-input-->
            <!--                v-model="formData.cloudResource[scope.$index].baseSpecification"-->
            <!--                placeholder="基础规格"-->
            <!--              />-->
            <!--            </el-form-item>-->

            <el-form-item
              :prop="`cloudResource[${scope.$index}].baseSpecification`"
              :rules="[{required:true,message:''}]"
            >
              <el-select
                v-model="formData.cloudResource[scope.$index].baseSpecification"
                placeholder="请选择"
                size="large"
              >
                <el-option
                  v-for="item in getDisdataItem(formData.cloudResource[scope.$index].cloudResourceType)"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="address">
          <template #header>
            <span style="color: red">*</span>台数
          </template>
          <template #default="scope">
            <el-form-item
              :prop="`cloudResource[${scope.$index}].serversCount`"
              :rules="[{required:true,message:''}]"
            >
              <el-input-number v-model="formData.cloudResource[scope.$index].serversCount" :min="1" placeholder="台数" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="描述">
          <template #default="scope">
            <el-form-item>
              <el-input
                v-model="formData.cloudResource[scope.$index].description"
                placeholder="描述"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="formData.cloudResource.splice(scope.$index,1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        plain
        icon="Plus"
        class="w-full mb-8"
        @click="formData.cloudResource.push({})"
      >添加云资源
      </el-button>
    </el-form-item>

    <el-form-item label="是否产生数据">
      <el-switch
        v-model="formData.isProduceData"
        :active-value="1"
        :inactive-value="0"
      />
    </el-form-item>

    <el-form-item v-if="formData.isProduceData===1" prop="isProduceData">
      <el-table :data="formData.produceData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="state" label="">
          <template #header>
            <span style="color: red">*</span>数据目录名称
          </template>
          <template #default="scope">
            <el-form-item
              :prop="`produceData[${scope.$index}].dataDirectoryName`"
              :rules="[{required:true,message:''}]"
            >
              <el-input
                v-model="formData.produceData[scope.$index].dataDirectoryName"
                placeholder="数据目录名称"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="city">
          <template #header>
            <span style="color: red">*</span>数据项
          </template>
          <template #default="scope">
            <el-form-item
              :prop="`produceData[${scope.$index}].dataItem`"
              :rules="[{required:true,message:''}]"
            >
              <el-input
                v-model="formData.produceData[scope.$index].dataItem"
                placeholder="多个数据项时，用“；”隔开"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="formData.produceData.splice(scope.$index,1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        plain
        icon="Plus"
        class="w-full mb-8"
        @click="formData.produceData.push({})"
      >添加数据项
      </el-button>
    </el-form-item>

    <el-form-item label="是否使用公共组件">
      <el-switch
        v-model="formData.isCommonComponent"
        :active-value="1"
        :inactive-value="0"
      />
    </el-form-item>

    <el-form-item v-if="formData.isCommonComponent===1" prop="isProduceData">
      <el-table :data="formData.commonComponent" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="state" label="公共组件名称（强制组件数量必须>=1）">
          <template #default="scope">
            <el-form-item
              :prop="`commonComponent[${scope.$index}].componentName`"
              :rules="[{required:true,message:''}]"
            >
              <el-input
                v-model="formData.commonComponent[scope.$index].componentName"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="公共组件类型">
          <template #default="scope">
            <el-form-item
              :prop="`commonComponent[${scope.$index}].componentType`"
              :rules="[{required:true,message:''}]"
            >
              <el-input
                v-model="formData.commonComponent[scope.$index].componentType"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="formData.commonComponent.splice(scope.$index,1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        plain
        icon="Plus"
        class="w-full mb-8"
        @click="formData.commonComponent.push({})"
      >添加组件
      </el-button>
    </el-form-item>

  </el-form>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  detailData: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
function getDisdataItem (name) {
  let disDataItem = []
  disData.value.forEach(item => {
    if (item.name === name) {
      disDataItem = item.children
    }
  })
  return disDataItem
}

function cloudTypeChange (index) {
  formData.value.cloudResource[index].baseSpecification = ''
}
const disData = ref([
  {
    name: 'ECS',
    children: [
      {
        name: '1核1G'
      },
      {
        name: '2核4G'
      }
    ]
  },
  {
    name: 'OSS',
    children: [
      {
        name: '100G'
      },
      {
        name: '200G'
      }
    ]
  }
])
const ruleFormRef = ref()
const formData = ref({
  mobileTerminalEntry: [],
  cloudResource: [
    {
      cloudResourceType: '', // 	- 云资源类型
      baseSpecification: '', // 	 	- 基础规格
      serversCount: '', // 			- 台数
      description: '' // 			- 描述
    }
  ],
  produceData: [
    {
      dataDirectoryName: '', // 		- 数据目录名称
      dataItem: '' // 				- 数据项
    }
  ],
  commonComponent: [
    {
      componentName: '', // 			- 组件名称
      componentType: '' // 	 		- 公共组件类型
    }
  ],
  isCloudResource: 0,
  isProduceData: 0,
  isCommonComponent: 0
})
const rules = {
  mobileTerminalEntry: [{ required: true, message: '请选择移动端入口' }],
  cloudResource: [{ required: true, message: '请至少添加一个云资源' }],
  produceData: [{ required: true, message: '请至少添加一个产生数据' }],
  commonComponent: [{ required: true, message: '请至少添加一个公共组件' }]
}

onMounted(() => {
  formData.value.mobileTerminalEntry = props.detailData.mobileTerminalEntry

  if (props.detailData.cloudResource) {
    formData.value.cloudResource = props.detailData.cloudResource || []
  }
  if (formData.value.commonComponent) {
    formData.value.commonComponent = props.detailData.commonComponent || []
  }
  if (formData.value.produceData) {
    formData.value.produceData = props.detailData.produceData || []
  }

  formData.value.isCloudResource = props.detailData.isCloudResource
  formData.value.isProduceData = props.detailData.isProduceData
  formData.value.isCommonComponent = props.detailData.isCommonComponent
})
watch(() => props.detailData, val => {
}, { deep: true })

function validForm (callback) {
  ruleFormRef.value.validate(valid => {
    callback(valid)
  })
}

defineExpose({ validForm, formData })

const mobileType = ref([
  {
    label: '浙里办',
    value: 1
  },
  {
    label: '浙政钉',
    value: 2
  },
  {
    label: '其他',
    value: 3
  },
  {
    label: '无移动端',
    value: 4
  }
])

</script>
<style scoped lang="less">

</style>
