<template>
  <div>
    <el-dialog
      title="选择子标签"
      :visible.sync="visible"
      width="1200px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="filter-container">
        <div class="filter-control">
          <span>子标签名称:</span>
          <el-input
            v-model="listQuery.keyword"
            placeholder="子标签名称"
            clearable
            style="width: 160px"
            @keyup.enter.native="getList"
            @clear="getList"
          />
        </div>
        <div class="filter-control">
          <el-button type="primary" @click="getList"> 查询 </el-button>
          <el-button type="primary" @click="addTagDialog = true"> 添加标签 </el-button>
        </div>
      </div>
      <el-table
        ref="table"
        v-loading="isLoading"
        :data="list"
        height="380px"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="子标签名称" prop="keyword" align="center" />
        <el-table-column label="添加时间" prop="addTime" align="center">
          <template slot-scope="{ row }">
            {{ row.addTime | parseTime }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <pagination
        :total="total"
        :page-sizes="[10, 20]"
        :page-size="10"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="getSubtagKeyword"
      />
      <div slot="footer">
        <el-button @click="handleCanle"> 取 消 </el-button>
        <el-button type="primary" :disabled="disabled" @click="handleConfirm"> 确 定 </el-button>
      </div>
    </el-dialog>
    <!-- 添加标签 -->
    <el-dialog
      title="添加标签"
      :visible.sync="addTagDialog"
      width="460px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form ref="tagForm" :model="tagForm" :rules="tagFormRules">
        <el-form-item label="标签名：" prop="keyword">
          <el-input v-model="tagForm.keyword" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeAddTagDialog"> 取 消 </el-button>
        <el-button type="primary" @click="handleAddTagConfirm"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { saveLabelByState, getSubtagKeyword } from '@/api/library/keyword'
export default {
  name: 'TagsDialog',
  filters: {
    NumFormat(value) {
      // 处理金额
      return Number(value).toFixed(2)
    }
  },
  data() {
    return {
      visible: false,
      listQuery: {
        pageNum: 1, // 页码
        pageSize: 10, // 页面数据数
        keyword: '' // 子标签名称
      },
      list: [],
      total: 0,
      addTagDialog: false,
      tagForm: {
        id: '',
        keyword: '',
        dynamicStatus: 0,
        parentLabel: 0
      },
      tagsRadio: null,
      isLoading: true,
      tagFormRules: {
        keyword: [{ required: true, message: '请输入标签名称', trigger: ['blur'] }]
      }
    }
  },
  computed: {
    disabled() {
      return this.tagsRadio === null
    }
  },
  created() {
    this.visible = true
    this.getList()
  },
  methods: {
    // 子标签弹窗列表(未关联父标签的子标签列表)
    async getList() {
      this.list = []
      this.listQuery.pageNum = 1
      this.getSubtagKeyword()
    },
    // 子标签弹窗列表(未关联父标签的子标签列表)
    async getSubtagKeyword() {
      try {
        const res = await getSubtagKeyword(this.listQuery)
        const data = res.data
        this.list = data.results.map((tags) => {
          return {
            ...tags,
            ...{ subtagId: tags.id }
          }
        })
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 多选子标签
    handleSelectionChange(row) {
      this.tagsRadio = row
      console.log('row', row)
    },
    // 确认选择子标签
    handleConfirm() {
      this.$emit('confirm', this.tagsRadio)
    },
    handleCanle() {
      // 取消弹窗
      this.$emit('cancel')
    },
    // 添加标签取消
    closeAddTagDialog() {
      this.$refs.tagForm.resetFields()
      this.addTagDialog = false
    },
    // 添加标签确定
    async handleAddTagConfirm() {
      try {
        await this.$refs.tagForm.validate()
        this.addTagSubmit()
      } catch (error) {
        console.log(error)
      }
    },
    // 提交添加标签信息
    async addTagSubmit() {
      try {
        await saveLabelByState(this.tagForm)
        this.$message.success('添加标签成功')
        this.getList()
      } catch (error) {
        console.log(error)
      }
      this.closeAddTagDialog()
    }
  }
}
</script>
<style lang="scss" scoped></style>
