<script setup lang="ts">
import { ref } from 'vue'
import addimg from '../images/default_add@2x.png'

const editdialogVisible = ref(false)
const isEdit = ref(false)
const UnableSaveVisible = ref(false)
const outputoptions = ref([
  {
    label:'JSON',
    value: 'JSON'
  }
])
const isSelected = ref([
  {
    label: '必填字段',
    value: '必填字段'
  },
  {
    label: '有条件必填',
    value: '有条件必填'
  }
])
const EditDataType = ref('')
const EditName = ref('')
const Editdescribe = ref('')
const isSelectedvalue = ref('')
const Condition = ref('')

interface TypeItem {
  name: string
  type: string
  describe: string
  selecttype: string
  requirements: string
}
interface Props {
  formatList: TypeItem []
  outputvalue: String
}
const props = withDefaults(defineProps<Props>(), {})

const formatList = ref(props.formatList)
const outputvalue = ref(props.outputvalue)
watch(
  () => props.formatList,
  (current) => {
    formatList.value = current
    if(formatList.value == null) {
      formatList.value = []
    }
  }
)
watch(
  () => props.outputvalue,
  (current) => {
    outputvalue.value = current
  }
)

// 编辑字段
const temporaryname = ref('')
const handelclickedit = (item: any) => {
  editdialogVisible.value = true
  isEdit.value = true
  EditName.value = item.name
  temporaryname.value = item.name
  EditDataType.value = item.type
  Editdescribe.value = item.describe
  isSelectedvalue.value = item.selecttype
  Condition.value = item.requirements
}

// 添加字段
const handleaddclick = () => {
  editdialogVisible.value = true
}

// 取消保存
const handleclickcancel = () => {
  editdialogVisible.value = false
  isEdit.value = false
  EditName.value = ''
  EditDataType.value = ''
  Editdescribe.value = ''
  isSelectedvalue.value = ''
  Condition.value = ''
  temporaryname.value = ''
}

// 保存字段
const handleclicksave = () => {
  if(isEdit.value) {
    const target = formatList.value.find(obj => obj.name === temporaryname.value);
    if(EditName.value == '' || EditDataType.value == '' || Editdescribe.value == '' || isSelectedvalue.value == '') {
      UnableSaveVisible.value = true
    } else {
      if(isSelectedvalue.value == '有条件必填' && Condition.value == '') {
        UnableSaveVisible.value = true
      } else {
        const newData = { name: EditName.value, type: EditDataType.value, describe: Editdescribe.value, selecttype: isSelectedvalue.value,requirements: Condition.value }
        if (target) Object.assign(target, newData);
        EditName.value = ''
        EditDataType.value = ''
        Editdescribe.value = ''
        isSelectedvalue.value = ''
        editdialogVisible.value = false
        Condition.value = ''
        temporaryname.value = ''
      }
    }
  } else {
      if(formatList.value.some(obj => Object.values(obj).includes(EditName.value))) {
        const target = formatList.value.find(obj => obj.name === EditName.value);
        if(EditName.value == '' || EditDataType.value == '' || Editdescribe.value == '' || isSelectedvalue.value == '') {
        UnableSaveVisible.value = true
      } else {
        if(isSelectedvalue.value == '有条件必填' && Condition.value == '') {
          UnableSaveVisible.value = true
        } else {
          const newData = { name: EditName.value, type: EditDataType.value, describe: Editdescribe.value, selecttype: isSelectedvalue.value,requirements: Condition.value }
          if (target) Object.assign(target, newData);
          EditName.value = ''
          EditDataType.value = ''
          Editdescribe.value = ''
          isSelectedvalue.value = ''
          editdialogVisible.value = false
          Condition.value = ''
          temporaryname.value = ''
        }
      }
    } else {
      if(EditName.value == '' || EditDataType.value == '' || Editdescribe.value == '' || isSelectedvalue.value == '') {
        UnableSaveVisible.value = true
      } else {
        if(isSelectedvalue.value == '有条件必填' && Condition.value == '') {
          UnableSaveVisible.value = true
        } else {
          formatList.value.push({
            name: EditName.value,
            type: EditDataType.value,
            describe: Editdescribe.value,
            selecttype: isSelectedvalue.value,
            requirements: Condition.value
          })
          EditName.value = ''
          EditDataType.value = ''
          Editdescribe.value = ''
          isSelectedvalue.value = ''
          editdialogVisible.value = false
          Condition.value = ''
          temporaryname.value = ''
        }
      }
    }
  }
}

// 删除字段
const handelclickdelete = (val: any) => {
  formatList.value.splice(formatList.value.indexOf(val), 1)
}
</script>
<template>
  <div>
    <div class="output-title">
      <span class="stars_red">*</span>输出格式类型
    </div>
    <el-select
      v-model="outputvalue"
      placeholder="Select"
      style="width: 480px;margin: 4px 0 16px 0;"
    >
      <el-option
        v-for="item in outputoptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div>
      <el-button class="el-button--noborder--configuration prompt-button" @click="handleaddclick">+ 添加字段</el-button>
    </div>
    <div class="empty" v-if="formatList.length == 0 ">
      <div>
        <div><img :src="addimg" width="100" /></div>
        <el-button @click="handleaddclick" class="el-button--main">+ 添加字段</el-button>
      </div>
    </div>
    <div class="output-item" v-for="(item, index) in formatList" :key="index">
      <div class="output-flex">
        <div class="output-flex-left">
          <div class="output-item-title">{{ item.name }}</div>
          <div class="output-item-type">{{ item.type }}</div>
        </div>
        <div class="output-flex-left">
          <el-button class="el-button--blue" style="height: 24px;width: 24px;" @click="handelclickedit(item)">
            <span class="font_family icon-icon_edit_b icon_dark"></span>
          </el-button>
          <el-button @click="handelclickdelete(item)" class="el-button--blue" style="height: 24px;width: 24px;">
            <span class="font_family icon-icon_delete_b icon_dark"></span>
          </el-button>
        </div>
      </div>
      <div class="output-describe">{{ item.describe }}</div>
      <div class="output-select">{{ item.selecttype }}<span class="output-select" v-if="item.selecttype === '有条件必填'">({{item.requirements}})</span></div>
    </div>
    <el-dialog
      v-model="editdialogVisible"
      title="编辑字段"
      :modal="false"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog-edit"
      width="480"
    > 
      <div class="dialog-title"><span class="stars_red">*</span>字段名称</div>
      <el-input v-model="EditName" style="margin-bottom: 16px;"></el-input>
      <div class="dialog-title"><span class="stars_red">*</span>数据类型</div>
      <el-input v-model="EditDataType" style="margin-bottom: 16px;"></el-input>
      <div class="dialog-title"><span class="stars_red">*</span>描述</div>
      <el-input type="textarea" v-model="Editdescribe" style="margin-bottom: 16px;"></el-input>
      <div class="dialog-title"><span class="stars_red">*</span>是否必填</div>
      <el-select
        v-model="isSelectedvalue"
        placeholder="Select"
        style="margin-bottom: 16px;"
      >
        <el-option
          v-for="item in isSelected"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div v-if="isSelectedvalue === '有条件必填'" class="dialog-title"><span class="stars_red">*</span>条件要求</div>
      <el-input v-if="isSelectedvalue === '有条件必填'"  v-model="Condition"></el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="dialog_button" type="default" @click="handleclickcancel">
            <span class="font_family icon-icon_return_b icon_dark" style="margin-right: 5px;"></span>Cancel
          </el-button>
          <el-button class="el-button--dark dialog_button" @click="handleclicksave">
            <span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>Save
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="UnableSaveVisible" width="480">
      <div>Please complete all required fields.</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            class="el-button--danger"
            @click="UnableSaveVisible = false"
            style="width: 100px"
          >
            OK
          </el-button>
        </div>
      </template>
      <template #header>
        <div class="cancel_header">
          <span class="iconfont_icon iconfont_warning">
            <svg class="iconfont icon_danger" aria-hidden="true">
              <use xlink:href="#icon-icon_fail_fill_b"></use>
            </svg>
          </span>
          Unable to Save
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.stars_red {
  color: var(--color-danger);
}
.empty {
  display: flex;
  justify-content: center;
  height: 215px;
}
.output-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-neutral-2);
}
.prompt-button {
  margin-bottom: 8px;
}
.output-item {
  background-color: var(--color-personal-preference-bg);
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.output-flex {
  display: flex;
  justify-content: space-between;
}
.output-flex-left {
  display: flex;
  align-items: center;
}
.output-item-title {
  color: var(--color-neutral-1);
  font-size: 14px;
  font-weight: 700;
  margin-right: 8px;
}
.output-item-type {
  color: var(--color-white);
  background-color: var(--color-output-type-string-bg);
  font-size: 12px;
  border-radius: 3px;
  padding: 1px 4px;
}
.output-describe {
  color: var(--color-neutral-2);
  font-size: 12px;
  margin: 6px 0;
}
.output-select {
  color:var(--color-output-select-text);
  font-size: 12px;
}
:deep(.dialog_button) {
  padding: 10px 34px !important;
  height: 40px;
}
:deep(.el-dialog) {
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.25) ;
}
.dialog-title {
  color: var(--color-neutral-2);
  font-size: 12px;
  margin-bottom: 8px;
}
</style>