<template>
  <el-dialog
    v-if="show"
    v-model="show"
    width="900px"
    class="dialog-okr"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="dialog-okr-header">
        <div class="flex-1 flex items-center" style="line-height: 50px"> 修改Okr </div>
        <div class="flex items-center">
          <el-button type="primary" link :disabled="formLoading" @click="handleSave">
            保存
          </el-button>
          <el-button link @click="show = false"> 关闭 </el-button>
        </div>
      </div>
    </template>
    <template #default>
      <div class="dialog-okr-body">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="4" :offset="0">
              <el-form-item label="父节点" prop="parentId">
                <el-tree-select
                  v-model="form.parentId"
                  :data="parentNodeList"
                  check-strictly
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  :render-after-expand="false"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item label="节点名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item label="开始日期" prop="createTime">
                <el-date-picker
                  v-model="form.createTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item label="截止日期" prop="endTime">
                <el-date-picker
                  v-model="form.endTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item label="执行人" prop="executor">
                <el-select
                  v-model="form.executor"
                  placeholder="选择执行人，可多选"
                  multiple
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in userOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-tabs v-model="okrKey">
          <el-tab-pane label="目标/关键成果" name="okr">
            <div>
              <div class="flex items-center w-full" v-for="(item, i) in objectList" :key="item.id">
                <div class="flex-1 w-100px">
                  <div class="flex items-center">
                    <el-tag type="success" class="mr-10px">O{{ i + 1 }}</el-tag>
                    <el-input v-model="item.name" placeholder="目标名称" class="flex-1 w-150px" />
                    <el-select
                      v-model="item.objExecutor"
                      placeholder="选择执行人，可多选"
                      multiple
                      clearable
                      filterable
                      style="min-width: 240px; margin-left: 10px"
                    >
                      <el-option
                        v-for="it in userOptions"
                        :key="it.id"
                        :label="it.name"
                        :value="it.id"
                      />
                    </el-select>
                    <div class="ml-10px">
                      <el-button type="primary" text @click="AddKR">新增关键成果</el-button>
                      <el-button type="danger" text @click="removeObj">删除目标</el-button>
                    </div>
                  </div>
                  <div style="background: #f0f3fa; padding-bottom: 15px">
                    <div class="ml-50px" v-for="(kr, index) in item.children" :key="kr.id">
                      <div class="flex flex-1 items-center pb-5px pt-5px">
                        <el-tag class="mr-10px">KR{{ index + 1 }}</el-tag>
                        <el-select
                          v-model="kr.id"
                          placeholder="选择或输入"
                          filterable
                          :props="{ value: 'id', label: 'name' }"
                          allow-create
                          :reserve-keyword="false"
                          class="flex-1 w-150px"
                        >
                          <el-option
                            v-for="it in item.children"
                            :key="it.id"
                            :label="it.name"
                            :value="it.id"
                          />
                        </el-select>
                        <el-button type="danger" text @click="removeKR">删除关键成果</el-button>
                      </div>
                      <div class="mt-5px flex items-center">
                        <el-tree-select
                          v-model="kr.sourceId"
                          :data="sourceOptions"
                          :props="defaultProps"
                          check-strictly
                          clearable
                          filterable
                          node-key="sourceId"
                          placeholder="请选择渠道"
                        />
                        <el-radio-group v-model="kr.targetType" class="ml-10px">
                          <el-radio-button label="value">目标值</el-radio-button>
                          <el-radio-button label="radio">是/否</el-radio-button>
                        </el-radio-group>

                        <el-input
                          v-if="kr.targetType === 'value'"
                          v-model="kr.targetNum"
                          type="number"
                          placeholder="目标值"
                          class="ml-10px"
                          style="width: 100px"
                        />

                        <el-select
                          v-model="kr.objExecutor"
                          placeholder="选择执行人，可多选"
                          multiple
                          clearable
                          filterable
                          style="min-width: 240px; margin-left: 10px"
                        >
                          <el-option
                            v-for="it in userOptions"
                            :key="it.id"
                            :label="it.name"
                            :value="it.id"
                          />
                        </el-select>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="w-100px"></div> -->
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="子节点" name="childNode">
            <el-button class="mb-10px" type="primary" @click="addChildNode">新增子节点</el-button>

            <el-table :data="childNodeList">
              <el-table-column label="名称">
                <template #default="{ row }">
                  <el-input v-model="row.name" placeholder="子节点名称" />
                </template>
              </el-table-column>
              <el-table-column label="开始日期" width="250px">
                <template #default="{ row }">
                  <el-date-picker
                    v-model="row.createTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  />
                </template>
              </el-table-column>
              <el-table-column label="截止日期" width="250px">
                <template #default="{ row }">
                  <el-date-picker
                    v-model="row.endTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  />
                </template>
              </el-table-column>
              <el-table-column label="执行人">
                <template #default="{ row }">
                  <el-select
                    v-model="row.executor"
                    placeholder="选择执行人，可多选"
                    multiple
                    clearable
                    filterable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in userOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="删除" :width="100">
                <template #default="{ $index }">
                  <el-button type="danger" text @click="removeChildNode($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="DialogOkrInfo">
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const show = ref(false)

watch(
  () => show.value,
  (newValue, oldValue) => {
    if (oldValue && !newValue) {
      emit('close')
    }
  }
)

const title = ref('')
const formType = ref('create')

const form = ref({})
const formLoading = ref(false)
const rules = ref({})

const okrKey = ref('okr')

const parentNodeList = ref([
  {
    id: 1,
    label: '寻驾全年目标',
    children: [
      { id: 2, label: '1月' },
      { id: 3, label: '2月' },
      { id: 4, label: '3月' },
      { id: 5, label: '4月' },
      { id: 6, label: '5月' },
      { id: 7, label: '6月' },
      { id: 8, label: '7月' },
      { id: 9, label: '8月' },
      { id: 10, label: '9月' },
      { id: 11, label: '10月' },
      { id: 12, label: '11月' },
      { id: 13, label: '12月' }
    ]
  }
])

const childNodeList = ref([{}])

const userOptions = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵六' }
])
const defaultProps = {
  children: 'children',
  label: 'sourceName',
  value: 'sourceId',
  isLeaf: 'leaf'
}
const sourceOptions = ref([])
const objectList = ref([
  {
    nodeId: 2,
    name: '1月销售任务概述，例：销售额100万，成交率15%',
    objExecutor: [1, 2],
    id: 'a1',
    children: [
      {
        id: 'a1-1',
        name: '销售额',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-2',
        name: '成交数',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-3',
        name: '成交率',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-4',
        name: '本月抖音运营投入相较上月少10%',
        isSystem: false,
        targetNum: 0,
        targetValue: false,
        targetType: 'radio'
      }
    ]
  },
  {
    nodeId: 3,
    name: '1月运营目标',
    objExecutor: [1, 2],
    id: 'a2',
    children: [
      {
        id: 'a2-1',
        name: '销售额',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a2-2',
        name: '成交数',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-3',
        name: '成交率',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-4',
        name: '本月抖音运营投入相较上月少10%',
        isSystem: false,
        targetNum: 0,
        targetValue: false,
        targetType: 'radio'
      }
    ]
  },
  {
    nodeId: 4,
    name: '1月主播任务',
    objExecutor: [1, 2],
    id: 'a3',
    children: [
      {
        id: 'a3-1',
        name: '销售额',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a3-2',
        name: '成交数',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a3-3',
        name: '成交率',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a3-4',
        name: '本月抖音运营投入相较上月少10%',
        isSystem: false,
        targetNum: 0,
        targetValue: false,
        targetType: 'radio'
      }
    ]
  }
])

async function open(type, val) {
  show.value = true
  title.value = type == 'update' ? '修改Okr' : '新增Okr'
  formType.value = type
  resetForm()
  if (val) {
    formLoading.value = true
    try {
      // form.value = await KpiApi.getKpiDetail(val)
    } finally {
      formLoading.value = false
    }
  }
  // getOptions()
}
function resetForm() {
  form.value = {
    parentId: '',
    name: '',
    createTime: '',
    endTime: '',
    executor: []
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const formRef = ref()
/** 提交表单 */
const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调

function AddKR() {
  objectList.value.push({
    name: '',
    objExecutor: [],
    children: []
  })
}

function removeObj() {
  objectList.value.pop()
}

function removeKR() {
  objectList.value.pop()
}

function addChildNode() {
  childNodeList.value.push({})
}

function removeChildNode(idx) {
  childNodeList.value.splice(idx, 1)
}

async function handleSave() {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    if (formType.value === 'create') {
      // await KpiApi.createKpi(form.value)
      message.success(t('common.createSuccess'))
    } else {
      // await KpiApi.updateKpi(form.value)
      message.success(t('common.updateSuccess'))
    }
    show.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.dialog-okr {
  .dialog-okr-header {
    display: flex;
    height: 51px;
    min-height: 51px;
    vertical-align: middle;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.25rem;
  }
  .dialog-okr-body {
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 1064px;
    height: calc(94vh - 85px);
  }
}
</style>
