hi-ucs/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-17 14:11:08
 * @LastEditors: Light
 * @LastEditTime: 2022-10-26 14:57:25
 * @Description: 上架
-->
<template>
  <div class="put-on-the-shelf">
    <div v-for="title in props.refData.children" :key="title.id">
      <!-- <div class="top">
        <div></div>
        <div>{{ title.name }}</div>
        <div></div>
      </div> -->
      <template v-if="title.isConfigure">
        <div class="bottom">
          <div
            v-for="(val, index) in data[title.name]"
            :key="'key1' + val.name + index"
          >
            <!-- <div
              style="
                font-size: 0.18rem;
                font-weight: 600;
                display: flex;
                justify-content: flex-start;
              "
            >
              <span>{{ title.name }}-{{ index + 1 }}</span>
              <a-popconfirm
                :title="'是否删除该条' + title.name + '?'"
                ok-text="是"
                cancel-text="否"
                @confirm="del(title.name, index)"
              >
                <div class="del">
                  <i class="delImg"></i>
                  <div>删除</div>
                </div>
              </a-popconfirm>
            </div> -->
            <div
              style="
                  font-size: 16px;
                 display: flex;
                float: right;
                top:0px;
                margin-right: 28px;
              "
            >
              <!-- <span>{{ title.name }}-{{ index + 1 }}</span> -->
              <a-popconfirm
                :title="'是否删除该条' + title.name + '?'"
                ok-text="是"
                cancel-text="否"
                @confirm="del(title.name, index)"
              >
                <div class="del">
                  <i class="delImg"></i>
                  <div>删除</div>
                </div>
              </a-popconfirm>
            </div>
            <div
              class="form"
              v-for="attr in props.configure.filter(
                (item, index2) => item.name === title.name
              )[0].list"
              :key="'key2' + attr.name + index2"
            >
            
            <span ><front style="color:#e83a48"> *</front>{{ attr.name }}:</span>
              <a-input
              style="width:280px"
                disabled
                v-model:value="val[attr.field]"
                :maxlength="24"
                :placeholder="'请填写' + attr.name + ',不超过24个字符'"
                v-if="attr.type == 'input'"
              />
              <template v-if="attr.type == 'input2'">
                <a-input
                style="width:280px"
                   disabled
                  :maxLength="1000"
                  v-model:value="val[attr.field]"
                  :placeholder="'请填写' + attr.name"
                />
              </template>
              <template v-else-if="attr.type == 'textArea'">
              <a-input
                style="width:1120px"
                disabled
                v-model:value="val[attr.field]"
                :maxlength="1000"
                :placeholder="'请填写' + attr.name + ',不超过1000个字符'"
               
              />
            </template>
              <!-- <a-textarea
              disabled
                v-model:value="val[attr.field]"
                :showCount="true"
                :maxlength="1000"
                :placeholder="'请填写' + attr.name"
                v-else-if="attr.type == 'textArea'"
              /> -->
              <div v-else-if="attr.type == 'radio'">
                {{ val[attr.field] + (attr.company || '') }}
              </div>
              <span v-else-if="attr.type === 'image'">
                <a-image :width="85" :height="60" :src="val.img" />
              </span>
            </div>
            <div style="margin-top:24px;height:1px;border-top: 1px dashed #dddee1; width: 1240px;font-size: 18px;"></div>
          </div>
      
          <!-- <div style="font-size: 0.18rem; font-weight: 600border-top: 1px dashed grey; width: 1240px;font-size: 18px;">
            <span>{{ title.name }}-{{ data[title.name].length + 1 }}</span>
          </div> -->
          <div
            class="form"
            v-for="(val, index) in props.configure.filter(
              (item) => item.name === title.name
            )[0].list"
            :key="'key3' + val.name + index"
          >
          <span ><front style="color:#e83a48"> *</front>{{ val.name }}:</span>
            <a-input
            style="width:280px"
              v-model:value="val.note1"
              :maxlength="24"
              :placeholder="'请填写' + val.name + ',不超过24个字符'"
              v-if="val.type == 'input'"
            />
            <template v-if="val.type == 'input2'">
              <a-input
                style="width:280px"
                :maxLength="1000"
                v-model:value="val.note1"
                :placeholder="'请填写' + val.name"
              />
              <span style="width: 0.5rem; padding-left: 0.1rem">
                {{
                  numType == '一次性买断'
                    ? '元'
                    : numType == '按调用次数'
                    ? '元/次'
                    : numType == '按并发路数'
                    ? '元/路'
                    : numType == '按年计费'
                    ? '元/年'
                    : ''
                }}
              </span>
            </template>
            <template  v-else-if="val.type == 'textArea'">
              <a-input
                style="width:1120px"
                :showCount="true"
                v-model:value="val.note1"
                :maxlength="1000"
                :placeholder="'请填写' + val.name + ',不超过1000个字符'"
           
              />
            </template>
            <!-- <a-textarea
              v-model:value="val.note1"
              :showCount="true"
              :maxlength="1000"
              :placeholder="'请填写' + val.name"
              v-else-if="val.type == 'textArea'"
            /> -->
            <a-input-number
              v-model:value="val.note1"
              :min="0"
              :max="9999"
              :step="0.01"
              string-mode
              :placeholder="'请填写' + val.name"
              v-else-if="val.type == 'number'"
            />
            <!-- <a-radio-group
              v-model:value="val.note1"
              :options="val.options"
              @change="radioChange"
              v-else-if="val.type == 'radio'"
            /> -->
            <div
            v-else-if="val.type == 'radio'"
                class="danxuan-Area"
                id="danxuan-Area"
              >
                <div
                  v-for="itemSelect in val.options"
                  :key="itemSelect"
                  class="danxuan-Area-son"
                  @click="radioChangeNew(val, itemSelect)"
                  :class="
                    val.note1 && val.note1=== itemSelect
                      ? 'danxuan-Area-down'
                      : ''
                  "
                >
                  {{ itemSelect }}
                </div>
              </div>
            <upload
              :key="showKey"
              type="图片"
              btnName="上传图片"
              :maxCount="1"
              :data="val"
              :list="[]"
              tip="支持图片类型，大小不超过100M"
              v-else-if="val.type == 'image'"
            ></upload>
          </div>
          <div style="margin-top:24px;height:1px;border-top: 1px dashed #dddee1; width: 1240px;font-size: 18px;"></div>
          <div class="submit">
            <a-button type="primary" @click="add(title.name)">
              <img
                style="height: 12px; width: 12px;margin-top: -2px;"
                src="../../../assets/home/zhengjia.png"
                alt=""
              />
              <span style="margin-left: 4px">添加多个{{ title.name }}</span>
            </a-button>
          </div>
        </div>
      </template>

      <template v-else>
        <div class="bottom">
          <div
            class="form item"
            v-for="item in title.children"
            :key="item.id"
            v-show="
              !(
                (showType == '调用接口' && item.name == '平台地址') ||
                (showType == '调用接口' && item.name == 'SDK安装包') ||
                (showType == '平台对接' && item.name == 'SDK安装包') ||
                (showType == '平台对接' && item.name == '接口请求方式') ||
                (showType == '平台对接' && item.name == '服务接口') ||
                (showType == 'SDK' && item.name == '平台地址') ||
                (showType == 'SDK' && item.name == '接口请求方式') ||
                (showType == 'SDK' && item.name == '服务接口')
              )
            "
          >
            <div class="box">
              <div>
                <b class="required" v-if="required.indexOf(item.name) > -1">
                  *
                </b>
                {{ item.name }} :
              </div>
              <a-input
                :maxLength="1000"
                v-if="item.type == 'input' && item.name.indexOf('名称') == -1"
                v-model:value="item.note1"
                :placeholder="'请输入' + placeHolderWords(item.name)"
                @change="changeIiem(item.name, item.note1)"
              />
              <a-input
                v-else-if="
                  item.type == 'input' && item.name.indexOf('名称') != -1
                "
                :maxLength="50"
                v-model:value="item.note1"
                :placeholder="'请输入' + item.name + '，不超过50个字符'"
                @change="changeIiem(item.name, item.note1)"
              />
              <!-- <a-radio-group
                v-else-if="item.type == 'radio'"
                v-model:value="item.note1"
                :options="item.options"
                @change="changeIiem(item.name, item.note1)"
              /> -->  
              <!-- 接口请求方式  单选框样式改变 -->
              <!-- <div  v-else-if="item.type == 'radio'">ddd </div> -->
              <div
              v-else-if="item.type == 'radio'"
                class="danxuan-Area"
                id="danxuan-Area"
              >
                <div
                  v-for="itemSelect in item.options"
                  :key="itemSelect"
                  class="danxuan-Area-son"
                  @click="danxuanRadio(item, itemSelect)"
                  :class="
                    item.note1 && item.note1 === itemSelect
                      ? 'danxuan-Area-down'
                      : ''
                  "
                >
                  {{ itemSelect }}
                </div>
              </div>
              <!-- <a-input
                v-else-if="item.type == 'AbilityType'"
                :maxLength="1000"
                v-model:value="item.note1"
                :placeholder="'请输入' + item.name"
                :disabled="true"
              /> -->
              <span
                v-else-if="item.type == 'AbilityType'"
                style="font-weight: bold; color: #212121"
              >
                {{ item.note1 }}
              </span>
              <span
                v-else-if="item.type == 'ComponentType'"
                style="font-weight:bold;color:#212121}"
              >
                {{ item.note1 }}
              </span>
              <!-- <a-input
                v-else-if="item.type == 'ComponentType'"
                v-model:value="item.note1"
                :maxLength="1000"
                :placeholder="'请输入' + item.name"
                :disabled="true"
              /> -->
              <a-textarea
                v-else-if="item.type == 'textArea'"
                v-model:value="item.note1"
                :showCount="true"
                :maxlength="1000"
                :placeholder="'请输入' + item.name"
                @change="changeIiem(item.name, item.note1)"
              />
              <upload
                v-else-if="item.type == 'image'"
                type="图片"
                btnName="上传图片"
                :maxCount="1"
                :data="item"
                :list="props.imgList"
                tip="支持图片类型，大小不超过100M"
              ></upload>
              <upload
                v-else-if="item.type == 'file' && item.name !== '使用手册'"
                type="文件"
                btnName="上传附件"
                :maxCount="1"
                :data="item"
                :list="props.fileList"
                tip="支持文件类型，大小不超过100M"
              ></upload>
              <upload
                v-else-if="item.name == '使用手册'"
                type="文件"
                btnName="上传附件"
                :maxCount="1"
                :data="item"
                :busType="2"
                :list="props.fileList2"
                tip="支持文件类型，大小不超过100M"
              ></upload>
              <upload
                v-else-if="item.type == 'richText' && item.name == '技术文档'"
                type="文件"
                btnName="上传技术文档"
                :maxCount="1"
                :data="item"
                :busType="2"
                :list="props.fileList2"
                tip="支持.doc,.docx,.ppt,.pdf类型，大小不超过100M"
              ></upload>
              <upload
                v-else-if="item.type == 'package' && item.name == '上传附件'"
                type="附件"
                btnName="上传附件"
                :maxCount="1"
                :data="item"
                :busType="2"
                :list="props.fileList2"
                tip="支持.doc,.docx,.zip,.ppt,.pdf类型，大小不超过100M"
              ></upload>
              <upload
                v-else-if="item.type == 'package'"
                type="压缩包"
                btnName="上传安装包"
                :maxCount="1"
                :data="item"
                :list="props.packageList"
                tip="支持.zip类型"
              ></upload>
              <div
                class="Technical-text"
                v-else-if="item.type == 'richText'"
                @click="showTextFunction()"
              >
                编辑富文本
                <div
                  v-if="showText"
                  class="fuwenbenbianjiqi"
                  style="position: absolute; z-index: 10000"
                >
                  <VueTemplateDemo :dataFrom="props.dataFrom"></VueTemplateDemo>
                </div>
              </div>


              <upload
                v-else-if="item.type == 'video'"
                type="视频"
                btnName="请上传视频"
                :maxCount="1"
                :data="item"
                :list="props.videoList"
                tip="支持视频类型，大小不超过100M"
              ></upload>

              <!-- <a-button
              v-else-if="item.type == 'AssociatedApplication'"
              @click="sourceClick"
            >
              请选择来源应用
            </a-button> -->
              <a-select
                v-else-if="item.type == 'select' && item.name == '来源应用'"
                style="width: 2.4rem"
                v-model:value="item.note1"
                show-search
                placeholder="请输入关键字"
                :options="item.options"
                :filter-option="applicationsOption"
                @focus="applicationsFocus"
                @blur="applicationsBlur"
                @change="applicationsChange"
              ></a-select>
              <a-button
                v-else-if="item.type == 'AssociatedComponents'"
                @click="componentsClick"
              >
                请选择关联组件
              </a-button>
              <a-select
                v-else-if="item.type == 'select' && item.name == '使用方式'"
                style="width: 2.4rem"
                v-model:value="item.note1"
                :placeholder="'请选择' + item.name"
                @change="showTypeClick"
              >
                <a-select-option
                  v-for="(itemSelect, indexSelect) in item.options"
                  :key="indexSelect"
                  :value="itemSelect.dictLabel"
                >
                  {{ itemSelect.dictLabel }}
                </a-select-option>
              </a-select>
              <!-- <a-select
                v-else-if="item.type == 'select' && item.name !== '归属部门'"
                style="width: 2.4rem"
                v-model:value="item.note1"
                :placeholder="'请选择11' + item.name"
                @change="changeIiem(item.name, item.note1)"
              >
                <a-select-option
                  v-for="(itemSelect, indexSelect) in item.options"
                  :key="indexSelect"
                  :value="itemSelect.dictLabel"
                >
                  {{ itemSelect.dictLabel }}
                </a-select-option>
              </a-select> -->
              <div
                v-else-if="item.type == 'select' && item.name !== '归属部门'"
                class="danxuan-Area"
                id="danxuan-Area"
              >
                <div
                  v-for="(itemSelect, indexSelect) in item.options"
                  :key="indexSelect"
                  :value="itemSelect.dictLabel"
                  class="danxuan-Area-son"
                  @click="danxuanArea(item, item.name, itemSelect.dictLabel)"
                  :class="
                    item.note1 && item.note1 === itemSelect.dictLabel
                      ? 'danxuan-Area-down'
                      : ''
                  "
                >
                  {{ itemSelect.dictLabel }}
                </div>
              </div>
              <a-select
                v-else-if="item.name === '归属部门'"
                style="width: 2.4rem"
                v-model:value="item.note1"
                show-search
                placeholder="请输入关键字"
                :options="item.options"
                :filter-option="filterOption"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="changeIiem(item.name, item.note1)"
              ></a-select>
              <div
                v-else-if="item.type == 'checkBox'"
                class="application-Area"
                id="application-Area"
                :key="showKey"
              >
                <div
                  v-for="(itemson, indexson) in item.options"
                  :key="indexson"
                  class="application-Area-son"
                  @click="ApplicationArea(item, itemson)"
                  :class="
                    item.note2.indexOf(itemson.dictLabel) != -1
                      ? 'application-Area-down'
                      : ''
                  "
                >
                  {{ itemson.dictLabel }}
                  <div class="application-Area-son-son"></div>
                </div>
              </div>
            </div>
            <div
              class="requiredTips"
              v-show="
                notFilled.indexOf(item.name) > -1 &&
                (item.type == 'input' || item.type == 'textArea') &&
                changeField.indexOf(item.name) == -1
              "
            >
              请填写{{ item.name }}！
            </div>
            <div
              class="requiredTips"
              v-show="
                notFilled.indexOf(item.name) > -1 &&
                (item.type == 'select' ||
                  item.type == 'checkBox' ||
                  item.type == 'radio') &&
                changeField.indexOf(item.name) == -1
              "
            >
              请选择{{ item.name }}！
            </div>
          </div>
          <!-- 来源应用 -->
          <div class="AssociatedApplication">
            <a-modal
              v-model:visible="visibleAssociatedApplication"
              :title="titleName"
              @ok="handleOk"
              @cancel="handleCancel"
              style="width: 9.6rem"
            >
              <div>
                <a-transfer
                  v-model:target-keys="targetKeys"
                  v-model:selected-keys="selectedKeys"
                  :data-source="mockData"
                  :titles="titles"
                  :render="(item) => item.title"
                  @change="handleChange"
                  @selectChange="handleSelectChange"
                />
              </div>
            </a-modal>
          </div>
          <!-- 关联组件 -->
          <div class="AssociatedApplication">
            <a-modal
              v-model:visible="visibleAssociatedApplicationOther"
              :title="titleName"
              @ok="handleOk"
              @cancel="handleCancel"
              style="width: 960px"
            >
              <div>
                <a-transfer
                  v-model:target-keys="targetKeysOther"
                  v-model:selected-keys="selectedKeysOther"
                  :data-source="mockDataOther"
                  :titles="titles"
                  :render="(item) => item.title"
                  @change="handleChangeOther"
                  @selectChange="handleSelectChangeOther"
                  show-search
                  :filter-option="filterOptionTransfer"
                />
              </div>
            </a-modal>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
import VueTemplateDemo from '@/views/personalCenter/VueTemplateDemo'
import { placeHolderWords } from '@/utils/placeHolder'
import {
  ref,
  defineProps,
  watch,
  onMounted,
  defineExpose,
  defineEmits,
} from 'vue'
import mybus from '@/myplugins/mybus'
import upload from '@/views/components/upload'
import { message } from 'ant-design-vue'
import { getUserInfo, getDeptAll } from '@/api/user'
import {
  getCategoryTreePage,
  queryApplicationRelByResourceId,
  queryResourceRelByKeyId,
  filesUpload,
} from '@/api/personalCenter'
import { useRouter } from 'vue-router'
const router = useRouter()
const abilityToType = router.currentRoute.value.query.abilityToType
const componentTypeValue = router.currentRoute.value.query.componentTypeValue
const changeField = ref([])
//选取的数据
const chooseField = ref([])
const props = defineProps({
  // 展示数据
  refData: { type: Object, default: null },
  // 表单数据
  dataFrom: { type: Array, default: null },
  // 文件回显
  fileList: { type: Array, default: null },
  fileList2: { type: Array, default: null },
  // 压缩包回显
  packageList: { type: Array, default: null },
  // 图片回显
  imgList: { type: Array, default: null },
  // 视频回显
  videoList: { type: Array, default: null },
  // 外部字段
  externalField: { type: Array, default: null },
  // 多条的配置
  configure: { type: Array, default: null },
  required: { type: Array, default: null },
  notFilled: { type: Array, default: null },
  // [{
  //   name:'计费标准信息',
  //   list:[
  //     {
  //       name:'计费方式',
  //       type:'radio',
  //       field:'type',
  //       options:
  //         {
  //           name:'一次性买断',
  //           value:'1'
  //         },
  //         {
  //           name:'按调用次数',
  //           value:'2'
  //         },
  //         {
  //           name:'按并发路数',
  //           value:'3'
  //         },
  //         {
  //           name:'按年计费',
  //           value:'4'
  //         }
  //       ],
  //       note1:''
  //     },
  //     {
  //       name:'计费标准',
  //       field:'price',
  //       type:'number',
  //       company:'元',
  //       note1: ''
  //     },
  //     {
  //       name:'计费标准描述',
  //       field:'desc',
  //       type:'textArea',
  //       note1:''
  //     }
  //   ]
  // }]
})
const emit = defineEmits(['next', 'back', 'submit', 'preview'])

const changeAdd = () => {}
const data = ref({
  list: [],
})
const showKey = ref(0)
const numType = ref('一次性买断')
const radioChange = (e) => {
  numType.value = e.target.value
}
const radioChangeNew = (item,itemSelect) => {
  if (item.note1) {
    if (item.note1 === itemSelect) {
      item.note1 = null
    } else {
      item.note1 = itemSelect
    }
  } else {
    item.note1 = itemSelect
  }

  numType.value =itemSelect
}
const changeIiem = (name, value) => {
  if (value && value !== '' && changeField.value.indexOf(name) == -1) {
    changeField.value.push(name)
  } else if (!value || value == '') {
    if (changeField.value.indexOf(name) > -1) {
      changeField.value.splice(changeField.value.indexOf(name), 1)
    }
  }
}

props.refData.children.map((item) => {
  if (item.name == '基本信息') {
    item.children.map((val) => {
      if (val.name == '能力类型') {
        val.note1 = abilityToType
      }
      if (val.name == '组件类型') {
        val.note1 = componentTypeValue
      }
    })
  }
  if (
    props.configure &&
    props.configure.filter((val) => val.name === item.name).length > 0
  ) {
    item.isConfigure = true
    data.value[item.name] = []
  } else {
    item.isConfigure = false
  }
})
let arr = props.refData.children.filter((item) => {
  if (props.configure) {
    if (!item.isConfigure) {
      return item
    }
  } else {
    return item
  }
})
data.value.list = []
// 获取字典数据
arr.forEach((val) => {
  val.children.forEach((item) => {
    if (item.isLinkToDic === 'true' && item.linkValue) {
      getCategoryTreePage({
        page: 1,
        limit: 20,
        dictTypeId: item.linkValue,
        deFlage: 0,
      }).then((res) => {
        if (item.type === 'radio') {
          item.options = res.data.data.list.map((radio) => radio.dictLabel)
        } else if (item.type === 'select' || item.type === 'checkBox') {
          if (item.type === 'checkBox') {
            if (!item.note2) {
              item.note2 = []
            }
          }
          item.options = res.data.data.list
        }
        data.value.list.push(item)
      })
    } else if (item.name === '归属部门') {
      getDeptAll().then((res) => {
        const dataList = []
        res.data.data.forEach((element) => {
          dataList.push({
            value: element.id,
            label: element.name,
          })
        })
        item.options = dataList
        if (!item.note1) {
          getUserInfo().then(({ data: res1 }) => {
            item.note1 = res1.data.deptId
            item.note2 = item.options.filter(
              (val) => val.value == item.note1
            )[0]

            data.value.list.push(item)
          })
        } else {
          data.value.list.push(item)
        }
      })
    }
    // else if (item.name === '部门联系人') {
    //   if (!item.note1) {
    //     getUserInfo().then(({ data: res1 }) => {
    //       console.log(res1.data)
    //       item.note1 = res1.data.realName || ''
    //     })
    //     data.value.list.push(item)
    //   } else {
    //     data.value.list.push(item)
    //   }
    // } else if (item.name === '部门联系人电话') {
    //   if (!item.note1) {
    //     getUserInfo().then(({ data: res1 }) => {
    //       console.log(res1.data)
    //       item.note1 = res1.data.mobile || ''
    //     })
    //     data.value.list.push(item)
    //   } else {
    //     data.value.list.push(item)
    //   }
    // }
    else if (item.name === '来源应用') {
      queryApplicationRelByResourceId({
        referenceId: 0,
      }).then((res) => {
        const dataList = []
        res.data.data.notLinked.forEach((element) => {
          dataList.push({
            value: element.id,
            label: element.name,
          })
        })
        item.options = dataList
        data.value.list.push(item)
      })
    } else {
      data.value.list.push(item)
    }
  })
})
if (props.dataFrom) {
  props.dataFrom.infoList.forEach((item) => {
    if (
      props.configure &&
      props.configure.filter((val) => val.name === item.attrType).length > 0
    ) {
      data.value[item.attrType] = JSON.parse(item.attrValue)
    } else if (item.attrType === '应用领域') {
      props.refData.children.forEach((val) => {
        val.children.forEach((child) => {
          if (child.name === item.attrType) {
            // 通过;分割成数组
            child.note2 = item.attrValue.split(';')
            showKey.value++
          }
        })
      })
      //  item.note1 = item.attrValue.split(';')
    }
  })
}
//显示富文本
let showText = ref(false)
const showTextFunction = () => {
  showText.value = true
}
mybus.on('showTextFunctionEmit', (show) => {
  showText.value = show
})
mybus.off('func')
const add = (title, addFlag, type) => {
  let list = props.configure.filter((item) => item.name === title)[0].list
  let flag = true
  list.forEach((item) => {
    if (item.type !== 'number' && !item.note1.length > 0) {
      flag = false
    } else if (item.type === 'number' && !item.note1 > 0) {
      flag = false
    }
  })
  if (flag) {
    let obj = {}
    let sfFlag = false
    list.forEach((item) => {
      if (item.type === 'input2') {
        sfFlag = data.value[title].filter(
          (val) => val.type === numType.value
        )[0]
        if (sfFlag) {
          message.warning('已添加过该类型！')
          return
        }
        obj[item.field] =
          item.note1 +
          (numType.value == '一次性买断'
            ? '元'
            : numType.value == '按调用次数'
            ? '元/次'
            : numType.value == '按并发路数'
            ? '元/路'
            : numType.value == '按年计费'
            ? '元/年'
            : '')
      } else {
        obj[item.field] = item.note1
      }
    })
    if (!sfFlag) {
      data.value[title].push(obj)
    }

    mybus.emit('chageDataFrom', {
      attrType: title,
      attrValue: JSON.stringify(data.value[title]),
      delFlag: 0,
    })
    list.forEach((item) => {
      item.note1 = ''
      showKey.value++
    })
    if (addFlag) {
      if (type == '上一步') {
        emit('back')
      } else if (type == '下一步') {
        emit('next')
      } else if (type == '提交') {
        emit('submit')
      } else if (type == '预览') {
        emit('preview')
      }
    }
  } else {
    if (!addFlag) {
      message.warning('请填写完整')
    } else {
      list.forEach((item) => {
        item.note1 = ''
        showKey.value++
      })
      if (type == '上一步') {
        emit('back')
      } else if (type == '下一步') {
        emit('next')
      } else if (type == '提交') {
        emit('submit')
      } else if (type == '预览') {
        emit('preview')
      }
    }
  }
}
const del = (title, index) => {
  data.value[title].splice(index, 1)
  mybus.emit('chageDataFrom', {
    attrType: title,
    attrValue: JSON.stringify(data.value[title]),
    delFlag: 0,
  })
}
const ApplicationArea = (item, itemson) => {
  if (item.note2.indexOf(itemson.dictLabel) === -1) {
    item.note2.push(itemson.dictLabel)
  } else {
    item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
  }
  // 多选判断是否为空
  if (item.note2.length !== 0 && changeField.value.indexOf('应用领域') == -1) {
    changeField.value.push('应用领域')
  } else if (item.note2.length == 0) {
    if (changeField.value.indexOf('应用领域') > -1) {
      changeField.value.splice(changeField.value.indexOf('应用领域'), 1)
    }
  }
  mybus.emit('chageDataFrom', {
    attrType: item.name,
    attrValue: item.note2.join(';'),
    delFlag: 0,
  })
}
const danxuanArea = (item, itemSelect, indexSelect) => {
  if (item.note1) {
    if (item.note1 === indexSelect) {
      item.note1 = null
    } else {
      item.note1 = indexSelect
    }
  } else {
    item.note1 = indexSelect
  }

  changeIiem(itemSelect, indexSelect)
}
const danxuanRadio= (item, itemSelect) => {
  if (item.note1) {
    if (item.note1 === itemSelect) {
      item.note1 = null
    } else {
      item.note1 = itemSelect
    }
  } else {
    item.note1 = itemSelect
  }

  changeIiem(item.name, item.note1)
}
// 来源应用
const visibleAssociatedApplication = ref(false)
const visibleAssociatedApplicationOther = ref(false)
const mockData = ref([])
const mockDataOther = ref([])
const titles = ref(['未关联的应用名称', '已关联的应用名称'])
const titleName = ref('来源应用')
const targetKeys = ref([])
const targetKeysOther = ref([])
// 上一步关联数据
// const targetKeysBack = ref([])
// 来源应用-back
const sourceClick = () => {
  mockData.value = []
  visibleAssociatedApplication.value = true
  props.dataFrom.infoList.forEach((val) => {
    if (val.attrType === '来源应用' && val.attrValue != '') {
      queryApplicationRelByResourceId({
        referenceId: 0,
      }).then((res) => {
        res.data.data.notLinked.forEach((val, index) => {
          mockData.value.push({
            key: val.id,
            title: val.name,
            description: val.id,
          })
        })
      })
      targetKeys.value = []
      val.attrValue.split(',').forEach((item) => {
        targetKeys.value.push(item)
      })
    } else if (val.attrType === '来源应用' && val.attrValue == '') {
      queryApplicationRelByResourceId({
        referenceId: 0,
      }).then((res) => {
        res.data.data.notLinked.forEach((val, index) => {
          mockData.value.push({
            key: val.id,
            title: val.name,
            description: val.id,
          })
        })
      })
    }
  })
}
// 关联组件
const componentsClick = () => {
  titles.value = ['未关联的组件名称', '已关联的组件名称']
  titleName.value = '关联组件'
  visibleAssociatedApplicationOther.value = true
  mockDataOther.value = []
  props.dataFrom.infoList.forEach((val) => {
    if (val.attrType === '关联组件信息' && val.attrValue != '') {
      queryResourceRelByKeyId({
        keyId: 0,
        type: '组件服务',
        referenceName: '',
      }).then((res) => {
        res.data.data.notLinked.forEach((val, index) => {
          mockDataOther.value.push({
            key: val.id,
            title: val.name,
            description: val.name,
          })
        })
      })
      targetKeysOther.value = []
      val.attrValue.split(',').forEach((item) => {
        targetKeysOther.value.push(item)
      })
    } else if (val.attrType === '关联组件信息' && val.attrValue == '') {
      queryResourceRelByKeyId({
        keyId: 0,
        type: '组件服务',
        referenceName: '',
      }).then((res) => {
        res.data.data.notLinked.forEach((val, index) => {
          mockDataOther.value.push({
            key: val.id,
            title: val.name,
            description: val.name,
          })
        })
      })
    }
  })
}
const selectedKeys = ref([])
const selectedKeysOther = ref([])

const handleChange = (nextTargetKeys, direction, moveKeys) => {
  if (direction === 'right') {
    targetKeys.value = moveKeys.filter((item, index) => index === 0)
  }
}
const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {}
const handleChangeOther = (nextTargetKeys, direction, moveKeys) => {}
const handleSelectChangeOther = (sourceSelectedKeys, targetSelectedKeys) => {}

const filterOptionTransfer = (inputValue, option) => {
  return option.description.indexOf(inputValue) > -1
}

const handleOk = (e) => {
  visibleAssociatedApplicationOther.value = false
  visibleAssociatedApplication.value = false

  data.value.list.map((item) => {
    if (item.name === '来源应用') {
      item.note1 = targetKeys.value + ''
    } else if (item.name === '关联组件信息') {
      item.note1 = targetKeysOther.value + ''
    }
  })
}
const handleCancel = (e) => {
  visibleAssociatedApplicationOther.value = false
  visibleAssociatedApplication.value = false
}

const showType = ref('')
const showTypeClick = (e) => {
  showType.value = e
}
showTypeClick('调用接口')

watch(data.value.list, (newProps, oldProps) => {
  newProps.forEach((val) => {
    if (
      props.configure &&
      props.configure.filter((item) => item.name === val.name).length > 0
    ) {
      mybus.emit('chageDataFrom', {
        attrType: val.name,
        attrValue: val.note1,
        delFlag: 0,
      })
    } else if (
      props.externalField &&
      props.externalField.indexOf(val.name) > -1
    ) {
      let note2 = {} //储存归属部门的名字
      if (val.options) {
        note2 = val.options.filter((item) => item.value == val.note1)[0]
      }

      mybus.emit('chageDataFromDwon', {
        attrType: val.name,
        attrValue: val.note1,
        delFlag: 0,
        attrValueTwo: note2,
      })
    } else {
      if (val.name !== '应用领域' && val.name !== '发布端') {
        if (val.name == '算法介绍视频') {
          mybus.emit('chageDataFrom', {
            attrType: val.name,
            attrValue: val.note1,
            delFlag: 0,
            note3: val.note3,
          })
        } else {
          mybus.emit('chageDataFrom', {
            attrType: val.name,
            attrValue: val.note1,
            delFlag: 0,
          })
        }
      }
    }
  })
})
const applicationsChange = (value) => {
  data.value.list.map((item) => {
    if (item.name === '来源应用') {
      item.note1 = value
    }
  })
}

const handleBlur = () => {}
const applicationsBlur = () => {}

const handleFocus = () => {}
const applicationsFocus = () => {}

const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
defineExpose({
  add,
})
const applicationsOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
</script>
<style></style>
<style lang="less" scoped>
:deep(.upload-list-inline .ant-upload .ant-btn) {
  height: 150px;
  width: 218px;
  border: 1px solid rgba(198, 198, 198, 0.5);
  border-radius: 2px;
  background: rgba(0, 88, 225, 0.05);
  color: #0087ff;
  font-size: 14px;
}

:deep(.upload-list-inline .ant-upload .ant-btn > span) {
  background: url('~@/assets/home/yuanjia.png') no-repeat;
  color: #666666;
  background-position: center;
  text-align: center;
  line-height: 120px;
  height: 50px;
}
// 箭头大小以及位置
:deep(.ant-select-arrow) {
  background: url('~@/assets/home/huixia.png') no-repeat;
  cursor: pointer;
  margin-top: -4px;
  margin-right: -4px;
}

// 隐藏三角
:deep(.ant-select-arrow .anticon) {
  vertical-align: top;
  transition: transform 0.3s;
  display: none;
}
// :deep(.ant-select-arrow :focus) {
//   background:url('~@/assets/home/huishang.png') no-repeat ;
// cursor: pointer;
//   margin-top: -4px;
//   margin-right: -4px;
// }

.put-on-the-shelf {
  margin: 0.15rem 2rem;
  background: rgb(246, 247, 249, 0.8);
  height: 846px;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  .Technical-text {
    height: 0.3rem;
    width: 1rem;
    border: 0.01rem solid #bbd3ef;
    border-radius: 0.06rem;
    background: #edf4fc;
    color: #0087ff;
    font-size: 0.14rem;
    text-align: center;
    line-height: 0.3rem;
  }
  .Technical-text:hover {
    cursor: pointer;
  }

  & > div {
    padding: 0px 0px 24px 24px;
    width: 100%;
    font-size: 14px;

    .top {
      color: #333333;

      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.25rem;

      div:first-child,
      div:last-child {
        width: 2.45rem;
        height: 0.01rem;
        background: #f0f0f0;
      }

      div:nth-child(2) {
        margin: 0 0.3rem;
      }
    }

    .bottom {
      // margin-top: 0.25rem;

      .items {
        background: #fafafa;
        padding: 0.1rem;

        p {
          display: flex;
          justify-content: space-between;

          span:nth-of-type(1) {
            width: 2rem;
          }

          span:nth-of-type(2) {
            width: 100%;
            font-weight: 600;
          }
        }

        p:nth-of-type(1) > span:nth-of-type(1) {
          font-size: 0.18rem;
          font-weight: 600;
        }
      }

      .add {
        cursor: pointer;
        margin-top: 0.1rem;
        font-size: 0.16rem;
        color: #007efb;
      }

      .form {
        min-height: 32px;
        margin-top: 24px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        span:first-child {
          width: 1.0rem;
        }

        :deep(.ant-input-textarea) {
          width: 1000px;
        }

        :deep(.ant-radio-group) {
          width: 5.2rem;
        }

        :deep(.ant-input-number) {
          width: 2rem;
        }

        :deep(.ant-input) {
          resize: none;
          width: 5.2rem;
        }

        .ant-btn {
          width: 1.6rem;
          height: 0.32rem;
          text-align: center;
          background: #edf4fc;
          color: #0087ff;
          border: 0.01rem solid #bbd3ef;
          border-radius: 0.06rem;
        }
      }

      .submit {
        margin-top: 0.4rem;
        font-size: 0.14rem;
        display: flex;
        justify-content: center;

        .ant-btn {
          width: 260px;
          height: 32px;
          text-align: center;
          background: #fff;
          color: #0558e1;
          border: 1px solid #0558e1;
          border-radius: 2px;
          font-size: 14px;
        }
        .ant-btn:hover{
          background: #fff;
          color: #0558e1;
          opacity: 0.8;
        }
        .ant-btn:active{
          background: #fff;
          color: #0558e1;
          opacity: 0.8
        }
      }
    }
  }

  & > div:nth-of-type(1) {
    margin-top: 0;
  }
}
.danxuan-Area {
  display: grid;
  margin-top: -0.05rem;
  grid-template-columns: auto auto auto auto auto auto;
  border-right: 1px #0558e1 solid;
  .danxuan-Area-son {
    cursor: pointer;
    min-width: 80px;
    height: 32px;
    border-radius: 2px;
    color: #0558e1;
    background: #fff;
    border-left: 1px #0558e1 solid;
    border-bottom: 1px #0558e1 solid;
    border-top: 1px #0558e1 solid;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .danxuan-Area-son:hover {
    color: #fff;
    background: #0558e1;
  }

  .danxuan-Area-down {
    background: #0058e1;
    color: #fff;
    // border: 1px #0558e1 solid;
  }
}

.application-Area {
  display: grid;
  margin-top: -0.05rem;
  grid-template-columns: auto auto auto auto auto auto;

  .application-Area-son {
    cursor: pointer;
    width: 162px;
    height: 32px;
    border-radius: 2px;
    color: #212121;
    background: rgba(96, 99, 104, 0.1);
    border: 0.01rem rgba(96, 99, 104, 0.1) solid;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    margin-right: 8px;
    position: relative;
    .application-Area-son-son {
      position: absolute;
      right: 0px;
      top: 0px;
      z-index: 100;
      width: 16px;
      height: 16px;
      background: url('~@/assets/home/kong.png') no-repeat;
    }
  }
  .application-Area-son:hover {
    opacity: 0.9;
    color: #0058e1;
    border: 1px #0558e1 solid;
  }

  .application-Area-down {
    opacity: 0.9;
    color: #0058e1;
    border: 1px #0558e1 solid;
    .application-Area-son-son {
      position: absolute;
      right: 0px;
      top: 0px;
      z-index: 100;
      width: 16px;
      height: 16px;
      background: url('~@/assets/home/duihao.png') no-repeat;
    }
  }
}

:deep(.ant-image-img) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:deep(.ant-modal) {
  width: 9.6rem;
}

:deep(.ant-transfer-list) {
  width: 39.5%;
  height: 5.2rem;
}

:deep(.ant-transfer-operation) {
  flex-direction: row-reverse;
  margin: 0 0.3rem;
}

:deep(.ant-btn) {
  width: 0.56rem;
  height: 0.4rem;
  border-radius: 0.04rem;
}

:deep(.ant-btn:first-child) {
  margin-left: 0.04rem;
}

:deep(.ant-modal-footer) {
  border: 0;
}

:deep(.ant-modal-header) {
  border: 0;
}

:deep(.ant-modal-title) {
  line-height: 0.24rem;
  font-size: 0.18rem;
  color: #303133;
}

:deep(.ant-transfer-list-header) {
  background: #f5f7fa;
}

:deep(.ant-transfer-list-header-selected) {
  display: flex;
  width: 90%;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}

:deep(.ant-transfer-list-header-title) {
  font-size: 0.16rem;
  color: #303133;
  font-weight: 400;
  text-align: left;
}
:deep(.ant-transfer-list-header .ant-checkbox-wrapper) {
  display: none !important;
}
:deep(.ant-upload-list-item-name) {
  width: 1rem;
}

.del {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.14rem;
  margin-left: 0.2rem;

  .delImg {
    cursor: pointer;
    display: inline-block;
    width: 0.16rem;
    height: 0.18rem;
    background: url(~@/assets/home/sf_del.png) no-repeat;
    margin-right: 0.05rem;
  }

  div {
    cursor: pointer;
  }
}
.item {
  position: relative;
  span:first-child {
    width: unset;
  }
  .box {
    display: flex;
    align-items: center;
    min-height: 32px;
    // margin: 15px 0;
    & > div:nth-of-type(1) {
      text-align: right;
      width: 110px;
      margin-right: 16px;
      // display: flex;
      align-items: center;
    }
    .required {
      color: #e83e48;
      margin-left: -6px;
    }
  }

  :deep(.the-new-release .box .first) {
    justify-content: center !important;

    padding: 10px 350px 0;
    button {
      cursor: pointer;
      width: 80px;
      height: 35px;
      text-align: center;
      color: #fff;
      border: none;
      border-radius: 6px;
      background: yellow;
    }
    button:nth-of-type(1) {
      color: red;
      background: #e1edfa;
    }
    button:nth-of-type(2) {
      background: yellow;
    }
  }

  .requiredTips {
    font-size: 14px;
    color: #e83e48;
    position: absolute;
    bottom: -20px;
    left: 110px;
  }
}
</style>