<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-23 15:29:44
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-09-20 10:49:13
 * @FilePath: \yuan-risk-management-browser\src\views\configCenter\components\yaRow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yaBox">
    <el-row>
      <el-col span="24">
        <el-checkbox :label="formData.name" v-model="formData.isSelected" />
        <div class="ya-right">
          <div class="ya-selects">
            <el-select
              v-model="formData.type"
              class="ya-mode"
              :disabled="!formData.isSelected || formData.pwdDictOnly"
              ><el-option
                v-for="(child, index) in options"
                :key="index"
                :value="child.dictValue"
                :label="child.dictName"
              ></el-option>
            </el-select>
            <el-select
              :disabled="!formData.isSelected"
              v-show="formData.type == 'combination'"
              v-model="formData.userDictId"
              class="ya-select"
              ><el-option
                v-for="child in userList"
                :key="child.value"
                :value="child.value"
                :label="child.label"
              ></el-option>
            </el-select>
            <el-select
              :disabled="!formData.isSelected"
              v-show="formData.type == 'combination' || formData.type == 'pwd'"
              v-model="formData.pwdDictId"
              class="ya-select"
              ><el-option
                v-for="child in passwordList"
                :key="child.value"
                :value="child.value"
                :label="child.label"
              ></el-option>
            </el-select>
            <el-select
              :disabled="!formData.isSelected"
              v-show="formData.type == 'mix'"
              v-model="formData.mixDictId"
              class="ya-select"
              ><el-option
                v-for="child in combinDictList"
                :key="child.value"
                :value="child.value"
                :label="child.label"
              ></el-option>
            </el-select>
            <el-input
              :disabled="!formData.isSelected"
              class="ya-select"
              v-model="formData.ports"
            ></el-input>
          </div>
          <div class="ya-textarea" v-if="formData.textFiledEnable">
            <el-input v-model="formData.textField" type="textarea" />
            <YaTooltip
              placement="top"
              trigger="hover"
              content="rtsp://192.168.1.1，rtsp://192.168.1.1:554，rtsp://192.168.1.1:554/path，多个链接之间使用分号，回车换行等分隔符隔开，分隔符均为英文输入"
            >
              <svg
                t="1660879085342"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2208"
                width="14"
                height="14"
              >
                <path
                  d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
                  p-id="2209"
                ></path>
                <path
                  d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
                  p-id="2210"
                ></path>
              </svg>
              /></YaTooltip
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { defineProps, ref, onMounted, defineExpose } from "vue";

const { colArr } = defineProps({
  colArr: Object,
  userList: Array,
  passwordList: Array,
  combinDictList: Array,
  options: Array,
});
const formData = ref({
  name: "",
  type: "",
  isSelected: false,
  userDictId: "",
  pwdDictId: "",
  mixDictId: "",
  ports: "",
  textFiledEnable: false,
  pwdDictOnly: false,
  textField: "",
  serviceType: "",
});
onMounted(() => {
  formData.value = colArr;
});
defineExpose({
  formData,
});
</script>
<style lang="scss" scoped>
.yaBox {
  ::v-deep .el-checkbox-group {
    width: 100%;
  }
  ::v-deep .el-input .el-input__wrapper .el-input__inner {
    color: rgba(0, 0, 0, 0.6);
  }

  ::v-deep .el-row {
    margin-top: 16px;
  }
  ::v-deep .el-col {
    display: flex;
    width: 100%;
  }
  ::v-deep .el-checkbox {
    width: 15.8%;
    .el-checkbox__label {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      line-height: 22px;
    }
  }
  .ya-right {
    width: 84.2%;
    .ya-selects {
      .ya-mode {
        width: 10.4%;
        margin-right: 16px;
      }
      .ya-select {
        width: 20.8%;
        margin-right: 16px;
      }
    }
    .ya-textarea {
      position: relative;
      ::v-deep .el-textarea {
        width: 51%;
        border-radius: 2px;
        border-color: rgba(0, 0, 0, 0.12);
        margin-top: 16px;
      }
      svg {
        cursor: pointer;
        fill: rgba(0, 0, 0, 0.65);
        position: absolute;
        top: 16px;
        left: calc(51% + 8px);
      }
    }
  }
}
</style>
