<template>
  <template v-if="!isNoData">
    <div class="card-type-title" v-if="aiTaggingList.length > 0">{{$t('knowledgeBase.intelligenceLearning')}}</div>
    <el-checkbox-group v-model="checkList" >
      <div class="card-box" v-for="data in aiTaggingList" :key="data.knowledgeId">
        <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
          <div class="card-content">
            <div class="card-operate">
              <el-tooltip
                  effect="light"
                  trigger="hover"
                  :content="$t('tip.notAvailable')"
                  placement="right"
                  popper-class="panel-tooltip"
              >
                <el-switch v-model="data.status"
                           class="card-enable"
                           active-color="#38ACD2"
                           inactive-color="#C0CEDB"
                           :disabled="true"
                           :active-value="1"
                           :inactive-value="0"
                           @change="changeStatus($event,data.knowledgeId)"
                >
                </el-switch>
              </el-tooltip>
            </div>
            <div class="card-icon">
              <img :src="data.iconUrl"/>
            </div>
            <div class="card-title">
              <div class="card-title-name" :title="data.label">{{data.label}}</div>
            </div>
            <div class="card-desc" :title="data.desc">{{data.desc ? data.desc : '—'}}</div>
          </div>
          <div class="card-operate__footer">
            <button v-if="data.showUpdate"
                    class="top-tool-btn--update"
                    @click="jumpToUpdatePage(data,true)">
              <i class="cn-icon-update-knowledge-base cn-icon"></i>
              <span>{{$t('overall.update')}}</span>
            </button>
          </div>
        </div>
      </div>
    </el-checkbox-group>
    <div class="card-type-title" style="margin-top:4px;"  v-if="websketchList.length > 0">{{$t('knowledgeBase.websketchIntegration')}}</div>
    <el-checkbox-group v-model="checkList" >
      <div class="card-box" v-for="data in websketchList" :key="data.knowledgeId">
        <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
        <div class="card-content">
          <div class="card-icon">
            <img :src="data.iconUrl"/>
          </div>
          <div class="card-title">
            <div class="card-title-name" :title="data.label">{{data.label}}</div>
          </div>
          <div class="card-desc" :title="data.desc ? data.desc:'—'">{{data.desc ? data.desc : '—'}}</div>
        </div>
        <div class="card-operate__footer">
          <button v-if="data.showUpdate" :title="$t('overall.update')" class="top-tool-btn--update"
                  @click="jumpToUpdatePage(data,false)">
            <i class="cn-icon-update-knowledge-base cn-icon"></i>
            <span>{{$t('overall.update')}}</span>
          </button>
        </div>
      </div>
      </div>
    </el-checkbox-group>
  </template>

  <div class="table-no-data" v-else>
    <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
  </div>

  <div class="center-dialog">
    <el-dialog v-model="showUpdateDialog"
               :custom-class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
               :after-close="handleClose">
      <div class="knowledge-update__top" >
        <div class="update-left__icon">
          <img width="60" height="60" :src="updateKnowledge.iconUrl"/>
        </div>
        <div class="update-right">
          <div class="knowledge-enable">
            <div class="update-title">
              <div class="card-title-name" :title="updateKnowledge.label">{{updateKnowledge.label}}</div>
            </div>
            <el-tooltip
                effect="light"
                trigger="hover"
                v-if="showEnable"
                :content="$t('tip.notAvailable')"
                placement="right"
                popper-class="panel-tooltip"
            >
              <el-switch v-model="updateKnowledge.status"
                         active-color="#38ACD2"
                         inactive-color="#C0CEDB"
                         :disabled="true"
                         :active-value="1"
                         :inactive-value="0"
                         @change="changeStatus($event,updateKnowledge.knowledgeId)"
              >
              </el-switch>
            </el-tooltip>
          </div>
          <div class="knowledge-desc" :title="updateKnowledge.description">{{updateKnowledge.description?updateKnowledge.description:'—'}}</div>
        </div>
      </div>
      <template v-if="!showAddUpdateDialog">
        <div class="knowledge-update" >
          <div class="update-title">
            <div class="card-title-name">update record</div>
          </div>
          <div class="update-operate">
            <button :title="$t('overall.update')" class="top-tool-btn--update"
                    @click="uploadRecord">
              <i class="cn-icon-update-knowledge-base cn-icon"></i>
              <span>{{$t('overall.update')}}</span>
            </button>
          </div>
        </div>
        <el-table ref="updateDataTable"
                  border
                  :data="updateHistoryList"
                  @selection-change="secondSelectionChange"
                  width="100%"
                  height="calc(100% - 125px)"
                  class="update-dialog__table"
                  cell-style="padding:6px 0px;font-size: 12px;color: #353636;font-weight: 400;line-height: 20px;border-right:none;"
                  header-cell-style="padding:8px 0px;font-size: 12px;color: #353636;font-weight: 500;border-right:none;">
          <el-table-column prop="opTime" label="Update time" width="150" ></el-table-column>
          <el-table-column prop="user" label="Operating user" width="150" >
            <template #default="scope" :column="item">
              <span>{{$_.get(scope.row, 'user.name', '-')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="commitVersion" label="Version information" width="150"  ></el-table-column>
          <el-table-column prop="description" label="Description"></el-table-column>
        </el-table>
      </template>
      <template v-if="showAddUpdateDialog">
        <div class="update-knowledge-form">
          <loading :loading="uploadLoading"></loading>
          <el-form :model="updateObject" label-position="top" ref="form" :rules="rules">
            <!--name-->
            <el-form-item :label="$t('overall.name')" prop="name">
              <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
                        size="mini" type="text" v-model="updateObject.label"></el-input>
            </el-form-item>
            <el-form-item :label="$t('knowledge.upload')" prop="file">
              <el-upload :action="`${baseUrl}${apiVersion}/knowledgeBase/items/batch`"
                         :headers="uploadHeaders"
                         :multiple="false"
                         :file-list="fileList"
                         :data="uploadParams"
                         :on-change="fileChange"
                         :on-success="uploadSuccess"
                         :before-upload="beforeUpload"
                         :on-error="uploadError"
                         :class="uploadErrorTip ? 'el-upload--error' : ''"
                         :accept="fileTypeLimit"
                         :auto-upload="false"
                         ref="knowledgeUpload"
                         id="knowledgeUpload"
              >
                <el-button type="primary" class="uploadBtn"><i class="cn-icon cn-icon-a-1"></i></el-button>
              </el-upload>
            </el-form-item>

            <el-form-item :label="$t('knowledge.version')" prop="version">
              <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
                        size="mini" type="text" v-model="currentVersion"></el-input>
            </el-form-item>
            <el-form-item :label="$t('overall.remark')" prop="description" class="knowledge-remark">
              <el-input  maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
                         v-model="updateObject.description" id="role-box-input-remark"/>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button @click="showAddUpdateDialog = false">{{ $t('overall.cancel') }}</el-button>
          <el-button type="primary" @click="submitConfirm">{{ $t('tip.confirm') }}</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="showConfirmDialog"
               :title="$t('overall.tips')"
               custom-class="update-knowledge-tip"
               :before-close="handleConfirmClose">
      <div class="dialog-message">{{$t('knowledge.updateTips')}}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showConfirmDialog = false">{{ $t('overall.cancel') }}</el-button>
          <el-button type="primary" @click="submit">{{ $t('tip.confirm') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import table from '@/mixins/table'
import Loading from '@/components/common/Loading'
import { knowledgeCategoryValue, storageKey, builtInKnowledgeBaseBasicInfo } from '@/utils/constants'
import { ref } from 'vue'
import { api } from '@/utils/api'
import axios from 'axios'
export default {
  name: 'knowledgeBaseTableForCard',
  mixins: [table],
  props: {
    isNoData: {
      type: Boolean,
      default: false
    },
    isSelectedStatus: {
      type: Boolean
    }
  },
  components: {
    Loading
  },
  data () {
    return {
      tableTitle: [],
      checkList: [],
      aiTaggingList: [],
      websketchList: [],
      showUpdateDialog: false,
      showConfirmDialog: false,
      showAddUpdateDialog: false,
      updateKnowledge: {},
      showEnable: false,
      updateHistoryList: [],
      updateObject: {},
      currentVersion: 0,
      uploadLoading: false
    }
  },
  setup () {
    // 没上传过文件的提示
    const uploadErrorTip = ref('')
    return {
      baseUrl: BASE_CONFIG.baseUrl,
      apiVersion: BASE_CONFIG.apiVersion,
      uploadHeaders: {
        'Cn-Authorization': localStorage.getItem(storageKey.token)
      },
      uploadErrorTip,
      fileTypeLimit: '.csv',
      fileList: ref([])
    }
  },
  methods: {
    fileChange (files, fileList) {
      this.fileList = fileList.slice(-1)
    },
    uploadError () {
      this.uploadLoading = false
      this.$message.error(this.$t('tip.uploadFailed', { msg: 'error' }))
    },
    uploadSuccess (response) {
      this.uploadLoading = false
      this.uploaded = response.code === 200
      if (response.code === 200) {
        this.$message.success(this.$t('tip.success'))
        this.showAddUpdateDialog = false
        axios.get(api.knowledgeBaseLog + '/' + this.updateKnowledge.knowledgeId, { params: { pageSize: 999 } }).then(res => {
          this.updateHistoryList = res.data.data.list
          this.currentVersion = this.updateHistoryList[0].commitVersion + 1
        })
      } else {
        this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
      }
    },
    beforeUpload (file) {
      this.uploadLoading = true
      this.showConfirmDialog = false
    },
    submitConfirm () {
      this.showConfirmDialog = true
    },
    submit () {
      this.$refs.knowledgeUpload.submit()
    },
    clickCard (data, event) {
      if (data.isSelected) { // 原来为选中，当前点击后未选中
        const index = this.checkList.indexOf(data)
        if (index > -1) {
          this.checkList.splice(index, 1)
        }
      } else {
        const index = this.checkList.indexOf(data)
        if (index === -1) {
          this.checkList.push(data)
        }
      }
      const val = !data.isSelected
      data.isSelected = val
      this.$emit('checkboxStatusChange', val, data)
    },
    checkboxStatusChange (val, data) {
      data.isSelected = val
      this.$emit('checkboxStatusChange', val, data)
    },
    handleClose () {
      this.showUpdateDialog = false
      this.showAddUpdateDialog = false
      this.uploadLoading = false
    },
    handleConfirmClose () {
      this.showConfirmDialog = false
    },
    handleUpdateClose () {
      this.showAddUpdateDialog = false
    },
    showUpdate () {
      this.showUpdateDialog = true
      this.showAddUpdateDialog = false
    },
    jumpToUpdatePage (data, showEnable) {
      axios.get(api.knowledgeBaseLog + '/' + data.knowledgeId, { params: { pageSize: 999 } }).then(res => {
        this.updateKnowledge = data
        this.updateHistoryList = res.data.data.list
        this.currentVersion = this.updateHistoryList[0].commitVersion + 1
        this.showEnable = showEnable
        this.showUpdate()
      })
    },
    uploadRecord () {
      this.showAddUpdateDialog = true
      this.updateObject.name = this.updateKnowledge.name
      this.updateObject.label = this.updateKnowledge.label
      this.updateObject.description = ''
    },
    clearSelect () {
      this.$nextTick(() => {
        this.checkList = []
        if (this.tableData && this.tableData.length > 0) {
          this.tableData.forEach(data => {
            data.isSelected = false
          })
        }
      })
    },
    mouseenter (card) {
      this.tableData.forEach(t => {
        if (t.knowledgeId === card.knowledgeId) {
          card.showUpdate = true
        }
      })
    },
    mouseleave (card) {
      this.tableData.forEach(t => {
        if (t.knowledgeId === card.knowledgeId) {
          card.showUpdate = false
        }
      })
    },
    del (data) {
      this.$emit('delete', data)
    },
    edit (id) {
      const pageNo = this.$router.currentRoute.value.query.pageNo
      const dataType = this.$router.currentRoute.value.query.dataType
      this.$router.push({
        path: '/knowledgeBase/edit',
        query: {
          t: +new Date(),
          pageNoForTable: pageNo || 1,
          id: id,
          dataType: dataType
        }
      })
    }
  },
  watch: {
    tableData: {
      handler (n) {
        if (this.tableData && this.tableData.length > 0) {
          this.aiTaggingList = []
          this.websketchList = []
          this.tableData.forEach(item => {
            item.showUpdate = false
            const basicInfo = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === item.knowledgeId)
            if (basicInfo) {
              item = {
                ...item,
                ...basicInfo
              }
              if (item.category === knowledgeCategoryValue.aiTagging) {
                this.aiTaggingList.push(item)
              } else if (item.category === knowledgeCategoryValue.webSketch) {
                this.websketchList.push(item)
              }
            }
          })
        }
      }
    },
    showAddUpdateDialog: {
      handler (n) {
        if (!n) {
          this.fileList = []
        }
      }
    }
  },
  mounted () {
    this.aiTaggingList = []
    this.websketchList = []
    this.tableData.forEach(item => {
      item.showUpdate = false
      if (item.category === knowledgeCategoryValue.aiTagging) {
        this.aiTaggingList.push(item)
      } else if (item.category === knowledgeCategoryValue.webSketch) {
        this.websketchList.push(item)
      }
    })
  },
  computed: {
    uploadParams () {
      return {
        knowledgeId: this.updateKnowledge.knowledgeId,
        action: 'update',
        description: this.updateObject.description
      }
    }
  }
}
</script>
