<template>
  <div>
    <toolbar
      @onSearch="filterData"
    />
    <white-board>
      <el-row class="header" :gutter="20">
        <el-col class="toolbar-txt" :span="4">共有课程：{{ info.totalTagNum }}</el-col>
        <template v-if="articleType === null">
          <el-col class="toolbar-txt" :span="4">已发布：{{ info.usedTagNum }}</el-col>
          <el-col class="toolbar-txt" :span="4">未发布：{{ info.unusedTagNum }}</el-col>
        </template>
        <el-col v-else class="toolbar-txt" :span="8" />
        <el-col class="flex-end" :span="12">
          <el-button icon="el-icon-plus" type="primary" @click="handleAddItem">添加内容</el-button>
        </el-col>
      </el-row>
      <table-with-page
        :columns="columns"
        :items="items"
        :pagination="pagination"
        :page-change="pageChange"
      >
        <template #btn-box="scope">
          <el-button type="danger" @click="handleReleaseSelect(scope.selected)">下架</el-button>
        </template>
      </table-with-page>
    </white-board>

    <!-- <add-item-modal :tag-type="tagType" /> -->
  </div>
</template>

<script>
import toolbar from './toolbar'
import EMITKEY from '@/const/emitNameKey'
import { getTagTypeInArr, setStatus } from '@/utils'
import CARRIERKEY from '@/const/carrierKey'
import MODULETYPE from '@/const/moduleType'

import mxFilterList from '@/mixins/filterList'
import { getList, getArticleNum, changeSelectReleaseStatus, changeReleaseStatus } from '@/model/article'

export default {
  name: 'ArticlePage',

  components: { toolbar },

  mixins: [mxFilterList({
    fetchList: getList // 在下方data再声明一个 fetchList: getList 同等效果
  })],

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

  data() {
    return {
      columns: [
        {
          key: 'selection'
        }, {
          key: 'id',
          name: '内容ID',
          minWidth: '150'
        }, {
          key: 'sort',
          name: '序号',
          minWidth: '80'
        }, {
          key: 'moduleType',
          name: '所属课程',
          minWidth: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(MODULETYPE.ARTICLE_ITEM_MODAL_TAG_TYPE, val)
        }, {
          key: 'title',
          name: '内容名称',
          minWidth: '150',
          'show-overflow-tooltip': true
        }, {
          key: 'usedNum',
          name: '内容载体',
          minWidth: '100',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(CARRIERKEY.CARRIER_TAG_TYPE, val)
        }, {
          name: '封面图片',
          width: '100',
          render: (h, { row }) => {
            if (row.headUrl || row.headUrl !== '') {
              return h('img', {
                style: {
                  width: '100%',
                  height: 'auto'
                },
                attrs: {
                  src: row.headUrl
                }
              })
            } else {
              return h('p', '-')
            }
          }
        }, {
          key: 'doctorName',
          name: '关联医生',
          minWidth: '80'
        }, {
          key: 'timeArr',
          name: '每周一课时段',
          minWidth: '140',
          render: (h, { row }) => {
            if (row.startTime === null) {
              return h('div', '-')
            }
            return h('div', [h('p', row.startTime), h('p', row.endTime)])
          }
        }, {
        //   key: 'likeNum',
        //   name: '点赞数',
        //   minWidth: '80'
        // }, {
          key: 'collectNum',
          name: '收藏数',
          minWidth: '80'
        }, {
        //   key: 'level',
        //   name: '内容等级',
        //   minWidth: '80'
        // }, {
        //   key: 'score',
        //   name: '内容分值',
        //   minWidth: '80'
        // }, {
          key: 'isReleaseF',
          name: '发布状态',
          minWidth: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['已发布', '未发布'], ['success', 'danger']), val)
        }, {
          key: 'isFeatureF',
          name: '首页精选',
          minWidth: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['设为精选', '未设精选'], ['success', 'danger']), val)
        }, {
          key: 'action',
          name: '操作',
          fixed: 'right',
          minWidth: '150',
          render: (h, { row }) => {
            const isRelease = row.isRelease
            const action = []
            action.push(h('el-button', {
              props: {
                type: 'primary'
              },
              on: {
                click: () => this.view(row)
              }
            }, '详情'))
            action.push(h('el-button', {
              props: {
                type: isRelease ? 'danger' : 'primary',
                size: 'small'
              },
              on: {
                click: () => this.changeRelease(row)
              }
            }, isRelease ? '下架' : '上架'))
            return h('div', action)
          }
        }
      ],
      info: {
        totalTagNum: 0,
        usedTagNum: 0,
        unusedTagNum: 0
      }
    }
  },

  watch: {
    articleType: {
      handler(val) {
        this.internalFilterObj['moduleType'] = val
      },
      immediate: true
    }
  },

  created() {
    this.bus.$on(EMITKEY.ARTICLERELOAD, this.reload)
  },

  beforedestroy() {
    this.bus.$off(EMITKEY.ARTICLERELOAD, this.reload)
  },

  methods: {
    loadCallBack(source) {
      this.info.totalTagNum = source.total
      this.loadNum()
    },

    async loadNum() {
      if (this.articleType !== null) {
        return false
      } else if (this.articleType === null) {
        const { success, data, msg } = await getArticleNum({
          status: this.articleType,
          data: {
            ...this.filter
          }
        })
        if (success) {
          this.info.usedTagNum = data.releaseNum
          this.info.unusedTagNum = this.info.totalTagNum - data.releaseNum
        } else {
          this.$message.error(msg)
        }
      }
    },

    handleAddItem() {
      this.$articleItemDrawer({
        articleType: this.articleType,
        modalType: 'add'
      })
    },

    async handleReleaseSelect(selected) {
      const { success, msg } = await changeSelectReleaseStatus({
        data: {
          ids: selected.map(x => x.id)
        }
      })
      if (success) {
        this.$message.success('下架成功~')
        this.bus.$emit(EMITKEY.ARTICLERELOAD)
      } else {
        this.$message.error(msg)
      }
    },

    view(row) {
      this.$articleItemDrawer({
        articleType: this.articleType,
        modalType: 'edit',
        id: row.id
      })
    },

    async changeRelease(row) {
      const { success, msg } = await changeReleaseStatus({
        id: row.id
      })
      if (success) {
        this.$message.success('修改成功~')
        this.bus.$emit(EMITKEY.ARTICLERELOAD)
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
.header {
  padding: 4px 20px 6px 20px;
}
.toolbar-txt {
  font-size: 13px;
  padding: 5px;
  line-height: 1.7;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
