<template>
  <div class="cacp-typical-four">
    <div class="cacp-pd-m cacp-group__box">
      <el-row justify="space-between">
        <el-col :span="12" class="cacp-typical-four-title">我的信息管理</el-col>
        <el-col :span="12" style="text-align: right">
          <el-button :loading="state.infoLoading" type="primary" @click="onEdit">{{
            state.isEdit ? '完成' : '修改'
          }}</el-button>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <div class="cacp-pb-l" style="height: 100%">
        <el-scrollbar>
          <cacp-group-container title="人员基础信息" v-loading="state.infoLoading">
            <template #content>
              <el-form :model="state.model" label-width="auto" label-position="left" :disabled="!state.isEdit">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="员工号" prop="employee">
                      <el-input v-model="state.model.employee" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="姓名" prop="name">
                      <el-input v-model="state.model.name" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="性别" prop="sex">
                      <el-input v-model="state.model.sex" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="关区" prop="area">
                      <el-select v-model="state.model.area">
                        <el-option
                          v-for="op in areaOptions"
                          :key="op.value"
                          :value="op.value"
                          :label="op.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="部门" prop="section">
                      <el-select v-model="state.model.section">
                        <el-option
                          v-for="op in sectionOptions"
                          :key="op.value"
                          :value="op.value"
                          :label="op.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="生日" prop="birthday">
                      <el-input v-model="state.model.birthday" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="专业" prop="profession">
                      <el-input v-model="state.model.profession" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="学历" prop="educational">
                      <el-input v-model="state.model.educational" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="毕业院校" prop="universities">
                      <el-input v-model="state.model.universities" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="岗位资质" prop="aptityde">
                      <el-input v-model="state.model.aptityde" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="擅长" prop="beGoodAt">
                      <el-input v-model="state.model.beGoodAt" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="个人介绍" prop="introduction">
                      <el-input v-model="state.model.introduction" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </cacp-group-container>
          <cacp-group-container title="指标信息" v-loading="state.tableLoading">
            <template #content>
              <el-tabs v-model="state.information.tabIndex" @tab-change="onQuery">
                <el-tab-pane label="知识贡献" name="0"></el-tab-pane>
                <el-tab-pane label="信息宣传" name="1"></el-tab-pane>
                <el-tab-pane label="重点工作" name="2"></el-tab-pane>
                <el-tab-pane label="学术能力" name="3"></el-tab-pane>
                <el-tab-pane label="奖项荣誉" name="4"></el-tab-pane>
                <el-tab-pane label="专业任职" name="5"></el-tab-pane>
                <el-tab-pane label="数据分析" name="6"></el-tab-pane>
              </el-tabs>
              <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="36" />
                <el-table-column label="类型" width="82" property="type"> </el-table-column>
                <el-table-column property="product.name" label="商品名称" />
                <el-table-column property="profession" label="行业名称" />
                <el-table-column property="name" label="名称" />
                <el-table-column property="product.desc" label="简介" />
                <el-table-column property="createName" label="创建人" />
                <el-table-column property="createTime" label="创建时间" sortable />
                <el-table-column property="modification" label="修改人" />
                <el-table-column property="modifiTime" label="修改时间" sortable />
              </el-table>
            </template>
          </cacp-group-container>
          <cacp-group-container title="标签信息" v-loading="state.tagLoading">
            <template #content>
              <el-row>
                <el-col :span="8" v-for="(value, key) in state.tag" :key="key">
                  <el-form-item :label="tagTitles[key]">
                    <div class="cacp-typical-four-tag-list el-input__wrapper">
                      <el-tag v-for="(t, index) in value" :key="index" :type="t.type" effect="plain">{{
                        t.name
                      }}</el-tag>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </cacp-group-container>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getTypicalFourTable, getTypicalFourTags, getTypicalFourUserinfo, typicalFourSave } from '@/apis/mock'
import type { TypicalFourTable, TypicalFourTags, TypicalFourUserInfo } from '@/types/four'
import { SuccessResultCode } from '@cacp/ui'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, shallowRef } from 'vue'
interface State {
  isEdit: boolean
  model: TypicalFourUserInfo
  information: {
    tabIndex: string
  }
  tag: TypicalFourTags
  infoLoading: boolean
  tableLoading: boolean
  tagLoading: boolean
}

const tableData = shallowRef<TypicalFourTable[]>()
const areaOptions = [
  { name: '关区1', value: 1 },
  { name: '关区2', value: 2 },
  { name: '关区3', value: 3 }
]
const sectionOptions = [
  { name: '部门1', value: 1 },
  { name: '部门2', value: 2 },
  { name: '部门3', value: 3 }
]
const state = reactive<State>({
  isEdit: false,
  model: {
    employee: '',
    name: '',
    sex: '',
    area: '',
    section: '',
    birthday: '',
    profession: '',
    educational: '',
    universities: '',
    aptityde: '',
    beGoodAt: '',
    introduction: ''
  },
  information: {
    tabIndex: '0'
  },
  tag: {
    product: [],
    profession: [],
    expert: []
  },
  infoLoading: false,
  tagLoading: false,
  tableLoading: false
})
const tagTitles = {
  product: '产品标签',
  profession: '行业标签',
  expert: '专家标签'
}

const onEdit = () => {
  if (state.isEdit) {
    onSave()
    return
  }
  state.isEdit = !state.isEdit
}

function handleSelectionChange(val: TypicalFourTable) {
  console.log(val, 'handleSelectionChange')
}

async function onQuery() {
  state.tableLoading = true
  const res = await getTypicalFourTable()
  if (res.code === SuccessResultCode) {
    tableData.value = res.data!
  }
  state.tableLoading = false
}

async function getUserInfo() {
  state.infoLoading = true
  const res = await getTypicalFourUserinfo()
  if (res.code === SuccessResultCode) {
    state.model = res.data!
  }
  state.infoLoading = false
}

async function getTags() {
  state.tagLoading = true
  const res = await getTypicalFourTags()
  if (res.code === SuccessResultCode) {
    state.tag = res.data!
  }
  state.tagLoading = false
}

async function onSave() {
  state.infoLoading = true
  const res = await typicalFourSave(state.model)
  if (res.code === SuccessResultCode) {
    ElMessage.success('保存成功')
    getUserInfo()
    state.isEdit = !state.isEdit
    return
  }
  ElMessage.error('保存失败')
}

onMounted(() => {
  getUserInfo()
  getTags()
  onQuery()
})
</script>
<style scoped lang="less">
.cacp-typical-four {
  height: 100%;
  overflow: hidden;
  padding: var(--cacp-margin-space-l);
  &-title {
    font-weight: 700;
  }
  .cacp-group__box {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .el-divider {
    margin: 10px 0;
  }

  :deep(.cacp-group__container) {
    padding-left: 0;
    padding-right: 0;
  }

  .el-divider--horizontal {
    border-top: 1px solid #e5e8ef;
  }

  :deep(.el-form-item__content) {
    padding-right: 26px;
  }

  &-tag {
    &-list {
      padding: 8px;
      align-items: start;
      justify-content: start;
      min-height: 80px;

      .el-tag {
        margin-right: 8px;
      }

      &:hover {
        box-shadow: 0 0 0 1px var(--el-color-primary) inset;
      }
    }
  }
}
</style>
