<template>
  <el-dialog title="选择标签" :visible.sync="visible" width="1200px" :close-on-click-modal="false" :show-close="false">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="动态标签" name="first" />
      <el-tab-pane label="静态标签" name="second" />
      <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">
          <span>来源:</span>
          <el-select v-model="listQuery.fromSearch" clearable @change="getList">
            <el-option :value="1" label="单个添加" />
            <el-option :value="2" label="系统推荐" />
            <el-option :value="3" label="导入" />
            <el-option :value="4" label="协销填写" />
          </el-select>
        </div>
        <div class="filter-control">
          <el-button type="primary" @click="getList"> 查询 </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" :selectable="selectable" />
        <el-table-column label="标签词" prop="keyword" align="center" />
        <el-table-column label="来源" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.fromSearch === 1">单个添加</span>
            <span v-else-if="row.fromSearch === 2">系统推荐</span>
            <span v-else-if="row.fromSearch === 3">导入</span>
            <span v-else>协销填写</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <pagination
        :total="total"
        :page-sizes="[20]"
        :page-size="20"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="getPickKeyword"
      />
      <!-- 列表 -->
    </el-tabs>
    <div slot="footer">
      <el-button @click="handleCanle"> 取 消 </el-button>
      <el-button type="primary" :disabled="disabled" @click="handleConfirm"> 确 定 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getPickKeyword } from '@/api/library/keyword'
const defaultListQuery = {
  keyword: '',
  dynamicStatus: 0, // 0 动态标签 1 静态标签
  fromSearch: '',
  pageNum: 1,
  pageSize: 20
}
export default {
  name: 'LabelDialog',
  filters: {},
  props: {
    maxLen: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeName: 'first',
      visible: true,
      listQuery: Object.assign({}, defaultListQuery),
      list: [],
      total: 0,
      labelsRadio: null,
      isLoading: true
    }
  },
  computed: {
    disabled() {
      return this.labelsRadio === null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // tab切换
    handleClick(tab, event) {
      if (tab.name === 'first') {
        this.listQuery = Object.assign({}, defaultListQuery)
        this.listQuery.dynamicStatus = 0
        this.getList()
      } else if (tab.name === 'second') {
        this.listQuery = Object.assign({}, defaultListQuery)
        this.listQuery.dynamicStatus = 1
        this.getList()
      }
    },
    // 获取所有供应商列表
    async getList() {
      this.list = []
      this.listQuery.pageNum = 1
      this.getPickKeyword()
    },
    // 获取所有供应商列表
    async getPickKeyword() {
      try {
        const res = await getPickKeyword(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 选择关键词
    handleSelectionChange(row) {
      this.labelsRadio = row
      console.log('row', row)
    },
    // 确认选择关键词
    handleConfirm() {
      this.$emit('confirm', this.labelsRadio)
    },
    // 取消选择
    handleCanle() {
      this.$emit('cancel')
    },
    // 已选择的禁用勾选框
    selectable(row) {
      if (row.flag) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
