<template>
  <div class="article page_container">
    <table-list v-bind="tableOptions" ref="tableList">
      <template #header-aside>
        <el-button type="primary" size="mini" @click="handleCreate">新建文章</el-button>
      </template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审核" name="1"></el-tab-pane>
        <el-tab-pane label="已驳回" name="2"></el-tab-pane>
        <el-tab-pane label="已通过" name="3"></el-tab-pane>
      </el-tabs>
      <!-- 图片 -->
      <template v-slot:image="scope"><img :src="scope.row.image_url" height="40" /></template>
      <template v-slot:adId="scope"><span class="details-handle" @click="handleDetails(scope.row)">{{scope.row.ad_id}}</span></template>
      <!-- 审核状态 -->
      <template v-slot:review-status="{ row }">
        <el-switch v-model="row.review_status"></el-switch>
      </template>
      <!-- 发布状态 -->
      <template v-slot:publish-status="{ row }">
        <el-switch v-model="row.publish_status"></el-switch>
      </template>
      <!-- 置顶状态 -->
      <template v-slot:top-status="{ row }">
        <el-switch v-model="row.top_status"></el-switch>
      </template>
    </table-list>
    <el-drawer :visible.sync="drawerVisible" size="1100px" :destroy-on-close="true">
      <template slot="title">
        <h5>
          {{drawTitle}}
          <el-button v-if="drawFormOptions.type !== 'create'" type="primary" @click="drawFormOptions.type = 'edit'" size="mini" style="float:right;margin-right:30px;">编辑</el-button>
        </h5>
      </template>
      <drawer-form :options="drawFormOptions">
        <template #form-item-review>
          <el-form-item>
            <el-button type="primary" @click="dialogVisible = true" size="small">审核</el-button>
          </el-form-item>
        </template>
      </drawer-form>
      <el-dialog title="审核文章" :visible.sync="dialogVisible" width="460px" append-to-body :destroy-on-close="true">
        <review-form @dialogClose="dialogVisible = false" @reviewSubmit="handleReviewSubmit"/>
      </el-dialog>
    </el-drawer>
  </div>
</template>
<script>
import DrawerForm from '../components/DrawerForm.vue'
import TableList from '@/components/TableList'
import { getArticleList } from '@/api/contentManage'
export default {
  data() {
    return {
      activeName: '0',
      drawerVisible: false,
      projectList: [
        { project_id: '111', project_name: '官网' },
        { project_id: '222', project_name: 'kellet' }
      ],
      typeList: [
        { id: '111', name: 'banner广告' },
        { id: '222', name: '侧边栏广告' },
        { id: '333', name: '正文区广告' }
      ],
      drawFormOptions: {
        type: '',
        page: 'article'
      },
      drawItem: '',
      dialogVisible: false
    }
  },
  computed: {
    drawTitle() {
      if (this.drawFormOptions.type === 'create') return '新建文章'
      else if (this.drawFormOptions.type === 'edit') return '编辑文章'
      else return this.drawItem.title || '文章详情'
    },
    tableOptions() {
      return {
        remote: {
          httpRequest: getArticleList,
          params: { type_id: '', id_title: '', project_id: '' },
          beforeRequest: this.beforeRequest
        },
        filters: [
          {
            type: 'select',
            placeholder: '项目',
            prop: 'project_id',
            options: this.projectList,
            labelKey: 'project_name',
            valueKey: 'project_id'
          },
          { type: 'input', placeholder: 'ID', prop: 'id_title' },
          {
            type: 'select',
            placeholder: '类型',
            prop: 'type_id',
            options: this.typeList,
            labelKey: 'name',
            valueKey: 'id'
          }
        ],
        columns: [
          { prop: 'image_url', label: '图片', slots: 'image' },
          { prop: 'ad_id', label: '广告ID', slots: 'adId' },
          { prop: 'title', label: '标题' },
          { prop: 'start_time', label: '开始时间' },
          { prop: 'end_time', label: '结束时间' },
          { prop: 'project_name', label: '项目' },
          { prop: 'type', label: '类型' },
          { prop: 'top', label: '权重' },
          { prop: 'author', label: '创建人' },
          { prop: 'review_status', label: '审核状态', slots: 'review-status' },
          { prop: 'publish_status', label: '发布状态', slots: 'publish-status' },
          { prop: 'top_status', label: '置顶状态/权重', slots: 'top-status' },
          { prop: 'create_time', label: '创建时间' }
        ],
        data: [
          {
            image_url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
            ad_id: '20210425001',
            title: '专业化的紫荆',
            start_time: '2020-01-23 14:23:34',
            end_time: '2020-01-23 14:23:34',
            project_name: 'sofia项目站',
            type: 'banner广告',
            top: '100',
            author: '作者',
            review_status: '1',
            publish_status: '1',
            top_status: '1',
            create_time: '2020-01-23 14:23:34'
          }
        ]
      }
    }
  },
  components: { TableList, DrawerForm },
  methods: {
    beforeRequest(params) {
      params.status = this.activeName
      return params
    },
    handleCreate() {
      this.drawFormOptions.type = 'create'
      this.drawerVisible = true
    },
    handleDetails(val) {
      this.drawItem = val
      this.drawFormOptions.type = 'details'
      this.drawFormOptions.details = {
        project_id: '111',
        type_id: '111',
        title: '3232',
        uri: 'https://www.baidu.com',
        summary: '内容摘要',
        remarks: '注意事项',
        web_img_uri: 'https://zj-images.oss-cn-beijing.aliyuncs.com/00d78a3a999f4b10000f2cd422232221.JPG',
        mobile_terminal_img_uri: 'https://zj-images.oss-cn-beijing.aliyuncs.com/00d78a3a999f4b10000f2cd422232221.JPG',
        enclosure_uri: 'https://zj-images.oss-cn-beijing.aliyuncs.com/00d78a3a999f4b10000f2cd422232221.JPG',
        video_uri: 'https://zj-images.oss-cn-beijing.aliyuncs.com/00d78a3a999f4b10000f2cd422232221.JPG',
        start_time: '2021-01-01 08:33:22',
        hasEndDate: 1,
        end_time: '2021-01-05 08:33:22',
        is_publish: 1,
        is_top: 1,
        weight: 10
      }
      this.drawerVisible = true
    },
    handleReviewSubmit(val) {
      console.log(val)
    },
    handleTabClick() {
      // true 强制刷新
      this.$refs.tableList.refetch(true)
    }
  }
}
</script>
<style scoped>
</style>
