<template>
  <div>
   <div class="form-a">
     <diy-el-form v-model:model-form="filterForm" :span-attrs="{
      span:5
    }" :forms="labelTypeFilterForm">
       <template #searchBtn>
         <el-button type="primary" :icon="Search" @click="initS">查询</el-button>
       </template>
       <template #addBtn>
         <el-button type="primary" :icon="Plus" @click="openModel('add',{})">新增</el-button>

       </template>
       <template #exportBtn>
         <el-button type="primary" @click="exportFile">导出</el-button>
       </template>
       <template #importBtn v-if="tabType === 'theme'">
         <el-upload
           :limit="1"
          :action="baseUrl2()+'/ptjkInterface/zt_Label_upload?appkey='+new UserInfo().GetUserKeyCode()"
           ref="upload"
           :on-success="importF"
           :show-file-list="false"

           class="my-el-upload"
         >
           <el-button class="upload-btn"  type="primary">导入</el-button>
           <!--                <template v-for="file in fileList" >-->
           <!--                  <span :key="file.name">{{ file.name }}</span>-->
           <!--                </template>-->
         </el-upload>

       </template>

     </diy-el-form>
   </div>
    <el-tabs tab-position="left" v-model="tabType">
      <el-tab-pane label="专题标签" name="theme">
        <label-type-tab-content
          @openModel2="openModel" @delRule="delRule" ref="contentRef" v-if="tabType === 'theme'" :form="filterForm" :type="tabType"/>
      </el-tab-pane>
      <el-tab-pane label="基本分类标签" name="base">
        <label-type-tab-content
          @openModel2="openModel"
          ref="contentRef" @delRule="delRule" v-if="tabType === 'base'" :form="filterForm" :type="tabType"/>
      </el-tab-pane>
    </el-tabs>
    <template v-if="isLabelTypeDialogIsShow">
      <label-type-dialog
        v-model:origin-data="originTreeData"
        :current-dialog-op-obj="currentDialogObj"
        @getTableNow="getTableNow"
        :dialog-operation-type="dialogOperationType" :type="tabType"  v-model:dialog-visible="isLabelTypeDialogIsShow"/>
    </template>
  </div>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {ref} from "vue";
import {labelTypeFilterForm} from "@/data/all-forms";
import {Plus, Search} from "@element-plus/icons-vue";
import LabelTypeTabContent from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/LabelTypeTabContent.vue";
import {baseUrl} from "@/service/config";
import {
  deleteLabelRuleData,
  exportFileBase,
  exportFileTheme,
  getLabelDetailArr
} from "@/service/zsk/base-rule/label-rule";
import {UserInfo} from "@/unit/UserInfo";
import {useRootStore} from "@/stores/useStore";
import {elAlert, handleMes, showConfirm, showMessage} from "@/unit/element-ui/tip";
import LabelTypeDialog from "@/view/other/c-views/data-handle/zsk/base-rule/tabs/LabelTypeDialog.vue";
import {useDetailOrEdit} from "@/unit/use-method/usePagination";
import {delSyncRule} from "@/service/zsk/sync-rule";

export default {
  name: "LabelType",
  methods: {

    baseUrl2() {
      return import.meta.env.VITE_BASE_API
    }
  },
  computed: {
    Plus() {
      return Plus
    },
    Search() {
      return Search
    }
  },
  components: {LabelTypeDialog, LabelTypeTabContent, DiyElForm},
  setup() {

    function getTableNow() {
      isLabelTypeDialogIsShow.value =false
      contentRef.value.getTableList()
    }
    function delRule(data) {
      getLabelDetailArr({
        "pageIndex": 1,
        "pageSize": 20000,
        "CATALOG_ID": "",
        "ASSOCIATED_FIELD_NAME": "",
        "LABEL_STATES": ""
      }).then(res => {
        let data2 = res?.msg[0]?.Rows || []
        let isHas = data2.find(i => +i.LABEL_RULE_ID === +(data.LABEL_ID || data.SHOWCODE))
        if (!isHas){
          let isHasChild = originTreeData.value.find(i => +(i.PARENT || i.PARENT_LABEL_ID) === +(data.LABEL_ID || data.SHOWCODE))
          if (isHasChild){
            elAlert('该标签尚有下级标签，请先删除下级标签')
          }
          else {
            showConfirm(() => {
              deleteLabelRuleData(data.SHOWCODE || data.LABEL_ID).then(res => {
                handleMes(res,() => {
                  contentRef.value.getTableList()
                })
              })
            },'确定要删除吗','系统提示',{
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
          }

        }else {
          elAlert('该标签已被配置使用')
        }
      })

    }
    function openModel(type,item){
      console.log('yt',type,item)
      isLabelTypeDialogIsShow.value = true
      changeDialogOperation(type,item)
    }
    const originTreeData = ref([])
    const isLabelTypeDialogIsShow =ref(false)
    function exportFile() {
      if (tabType.value ==='theme'){
        window.open(baseUrl+'/ptjkInterface/exportZt_Label?appkey='+useRootStore().userInfo.ptjk_userkeycode,'_blank')

      }else {
        window.open(baseUrl+'/DataLabelDetailDownload/ExcelDownload?appkey='+useRootStore().userInfo.ptjk_userkeycode,'_blank')
      }
    }
    function importF(res,res2) {
      console.log('my',res,res2)
      handleMes(res,() => {
        initS()
      },()=>{},'导入成功','导入失败')
      // handleMes(res,() => {
      //
      // })
      // showMessage({
      //   type:'success',
      //   message:'导入成功'
      // })
      //

    }
    function initS(){
      contentRef.value.initSearch()
    }
    const {currentOpObj:currentDialogObj,operationType:dialogOperationType,changeOperation:changeDialogOperation} = useDetailOrEdit()
    const contentRef = ref(null)
    const tabType = ref('theme')
    const filterForm = ref({

    })
    return {
      importF,
      filterForm,
      labelTypeFilterForm,
      tabType,
      contentRef,
      initS,
      exportFile,isLabelTypeDialogIsShow,
      openModel,
      currentDialogObj,
      dialogOperationType,
      changeDialogOperation,
      getTableNow,
      delRule,
      originTreeData,
      UserInfo,

    }
  }
}
</script>

<style scoped lang="scss">
.form-a{
  padding-left: 20px;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--el-border-color-light);
}
:deep{
  .el-tabs__content{
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--el-border-color-light);
  }
}
</style>
