<template>
  <el-drawer
    title="标签详情"
    :visible.sync="drawer"
    size="80%"
    @close="$emit('cancel')"
  >
    <divider-container title="基本信息">
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">标签名称：</el-col>
        <el-col :span="20">{{ info.tagName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">标签类型：</el-col>
        <el-col :span="20">{{ info.tagType }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">使用状态：</el-col>
        <el-col :span="20">{{ info.usedStatusF }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">展示状态：</el-col>
        <el-col :span="20">{{ info.showStatusF }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">使用内容数：</el-col>
        <el-col :span="20">{{ info.usedNum }}</el-col>
      </el-row>
      <el-row :gutter="10" type="flex">
        <el-col class="txt-right" :span="4">内容列表：</el-col>
        <el-col :span="20">
          <div class="search-box">
            <el-input v-model="form.input" class="search-input" placeholder="请输入内容名称搜索">
              <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
            </el-input>
            <table-with-page
              :columns="columns"
              :items="items"
              :pagination="pagination"
              :page-change="pageChange"
              min-height="300px"
            >
              <template #btn-box="scope">
                <el-popconfirm
                  title="确定删除吗？"
                  @onConfirm="handleDeleteSelected(scope.selected)"
                >
                  <el-button slot="reference" type="danger">删除</el-button>
                </el-popconfirm>
              </template>
            </table-with-page>
          </div>
        </el-col>
      </el-row>
    </divider-container>
    <div class="flex-end mcol-10 mt-30 btn-footer">
      <el-button @click="drawer = false">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { getItem, getArticleList, deleteTagInArticle, deleteTagsInArticle } from '@/model/tag'

export default {
  name: 'TagItem',

  props: {
    id: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      drawer: true,
      info: {},
      columns: [
        {
          key: 'selection'
        }, {
          key: 'contentType',
          name: '内容载体',
          minWidth: '80'
        }, {
          key: 'id',
          name: '内容ID',
          minWidth: '250'
        }, {
          key: 'title',
          name: '内容名称',
          minWidth: '200'
        }, {
          key: 'isReleaseF',
          name: '发布状态',
          minWidth: '100'
        }, {
          key: 'isFeatureF',
          name: '是否精选',
          minWidth: '80'
        }, {
          key: 'action',
          name: '操作',
          minWidth: '100',
          render: (h, { row }) => {
            const action = []
            action.push(h('el-popconfirm', {
              props: {
                title: '确定删除这项吗？'
              },
              on: {
                onConfirm: () => this.handleDeleteSelectItem(row)
              }
            }, [
              h('el-button', {
                slot: 'reference',
                props: {
                  type: 'danger'
                }
              }, '删除')
            ]))
            return h('div', action)
          }
        }
      ],
      pagination: {
        page: 1,
        total: 0,
        pageSize: 10
      },
      form: {
        input: ''
      },
      filter: {
        'searchText': ''
      },
      items: []
    }
  },

  watch: {
  },

  mounted() {
    this.loadData()
  },

  methods: {
    async loadData() {
      const { success, data, msg } = await getItem({
        id: this.id
      })
      if (success) {
        this.info = data
        this.reload()
      } else {
        this.$message.error(msg)
      }
    },

    reload() {
      this.pageChange(this.pagination.page)
    },

    handleSearch() {
      this.filter['searchText'] = this.form.input
      this.pageChange(1)
    },

    async pageChange(page) {
      this.pagination.page = page

      const options = {
        tagId: this.id,
        'data': {
          ...this.filter
        },
        'start': this.pagination.page,
        'limit': this.pagination.pageSize
      }
      const { success, data, msg } = await getArticleList(options)
      if (success) {
        const { items, total } = data
        if (items.length === 0 && this.pagination.page > 1) {
          this.pageChange(1)
        } else {
          this.items.splice(0, this.items.length)
          this.items.push(...Object.freeze(items))
          this.pagination.total = total
        }
        this.info.usedStatusF = this.items.length !== 0 ? '已使用' : '未使用'
      } else {
        this.$message.error(msg)
      }
    },

    async handleDeleteSelectItem(row) {
      const { success, msg } = await deleteTagInArticle({
        id: row.tagRelationId
      })
      if (success) {
        this.$message.success('删除成功~')
        this.reload()
      } else {
        this.$message.error(msg)
      }
    },

    async handleDeleteSelected(selected) {
      if (selected.length === 0) {
        this.$message.error('请至少选择一条数据~')
        return false
      }
      const { success, msg } = await deleteTagsInArticle({
        data: {
          ids: selected.map(x => x.tagRelationId)
        }
      })
      if (success) {
        this.$message.success('删除成功~')
        this.reload()
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mt-60 {
  margin-top: 60px;
}
.mcol-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.mt-30 {
  margin-top: 30px;
}
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mcol-20 .el-row {
  font-size: 14px;
  line-height: 1.7;
  padding-top: 14px;
}
.search-box {
  border: 1px #DCDEE2 solid;
  padding: 5px;
}
.search-box .search-input {
  margin: 0 5px;
  max-width: 200px;
}
.btn-footer {
  margin-right: 15px;
}
</style>
