<script setup name="tagsManage">
import ElTree from '@/components/elTree/index.vue'
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { tagList, save, del } from '@/http/apis/projectPortrait/tagsManage'
import { storeToRefs } from 'pinia'
import store from '@/store'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'
const { proxy } = getCurrentInstance(),
  userInfo = storeToRefs(store.userStore).userInfo,
  searchForm = reactive({
    name: undefined
  }),
  tableListRef = ref(),
  total = ref(2),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '标签名称',
      key: 'name',
      prop: 'name'
    },
    {
      label: '备注',
      key: 'remark',
      prop: 'remark'
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '170'
    },
    {
      label: '操作',
      slot: 'action',
      width: '140',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await tagList(searchForm.regionCode, {
      ...pageParams,
      ...searchForm
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.name = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  getTree = (data) => {
    searchForm.regionCode = data.regionLevel === 3 ? data.regionCode : undefined
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  delData = (data) => {
    proxy.$messageBox
      .confirm(`是否删除${data.name}?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await del(data.id)
        proxy.$message.success(`删除成功！`)
        getTableData()
      })
  },
  // 新增、编辑标签
  dialogVisible = ref(false),
  formData = ref(),
  formRef = ref(),
  isEdit = ref(false),
  showDialog = (flag, data) => {
    isEdit.value = flag
    dialogVisible.value = true
    formData.value = data || {}
  },
  submit = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async valid => {
      if (valid) {
        const postData = {
          ...formData.value,
          areaCode: searchForm.regionCode || userInfo.regionCode
        }
        await save(postData)
        proxy.$message.success('提交成功！')
        close()
      }
    })
  },
  close = () => {
    formData.value = {}
    formRef.value.clearValidate()
    dialogVisible.value = false
    getTableData()
  }
onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER'])) getTableData()
})
</script>

<template>
  <el-row>
    <el-col v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])" style="padding-right: 16px" :span="4">
      <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false})" @get-tree="getTree" />
    </el-col>
    <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])?20:24">
      <div>
        <el-card class="search mb-16">
          <el-form label-suffix=":" :model="searchForm" size="small">
            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="标签名称">
                  <el-input
                    v-model="searchForm.name"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item class="btn">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card>
          <template #header>
            <div class="flex justify-between items-center">
              <span>标签列表</span>
              <el-button
                type="primary"
                icon="Plus"
                size="small"
                @click="showDialog(false)"
              >
                新增标签
              </el-button>
            </div>
          </template>
          <table-list
            ref="tableListRef"
            :column="column"
            :data="data"
            :total="total"
            @get-table-data="getTableData"
          >
            <template #action="{ scope }">
              <a @click="showDialog(true,scope.row)">编辑</a>
              <a class="text-danger" @click="delData(scope.row)">删除</a>
            </template>
          </table-list>
        </el-card>
      </div>
    </el-col>
  </el-row>
  <el-dialog :title="isEdit?'编辑指标':'新增指标'" :model-value="dialogVisible" @close="close">
    <el-form
      ref="formRef"
      :model="formData"
      label-suffix="："
      label-width="100"
    >
      <el-form-item label="指标名称" prop="name" :rules="[{required:true,message:'请填写'}]">
        <el-input v-model="formData.name" :maxlength="50" placeholder="请填写" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="formData.remark"
          :maxlength="100"
          placeholder="请填写"
          type="textarea"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit(formRef)">提交</el-button>
        <el-button @click="close">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
