<template>
  <div class="page">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form>
        <el-form-item>
          <div class="tool-wrap fl">
            <el-select v-model="curClassify" placeholder="请选择" @change="HandleSelectChange">
              <el-option
                v-for="(item,index) in totalData.classifyList"
                :key="index"
                :label="item.name"
                :value="item.classify"
              ></el-option>
            </el-select>
            <el-button @click="handleAdd()" v-if="true" type="primary">新增</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 列表 -->
    <el-table
      :data="totalData.dataList"
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%;"
    >
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column label="所属分类">
        <template slot-scope="scope">{{formatClassify(scope.row)}}</template>
      </el-table-column>
      <!-- <el-table-column prop="thumb" label="封面"></el-table-column> -->
      <el-table-column label="封面图">
        <template slot-scope="scope">
          <img class="poster" :src="scope.row.thumb" alt>
        </template>
      </el-table-column>
      <el-table-column prop="descript" label="描述"></el-table-column>
      <el-table-column prop="url" label="链接地址"></el-table-column>
      <!-- <el-table-column prop="content" label="文章内容">
      </el-table-column>-->
      <el-table-column prop="months" label="月份" :formatter="formatterMonths"></el-table-column>
      <el-table-column prop="tags" label="标签" :formatter="formatterTags"></el-table-column>
      <el-table-column prop="pv" label="pv"></el-table-column>
      <el-table-column prop="share" label="分享"></el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="modifyHandler(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="deleteHandler(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑界面-->
    <el-dialog :title="dialogTitle" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="分类" prop="classify">
          <el-select
            v-model="editForm.classify"
            placeholder="请选择"
            @change="HandleSelectDialogChange"
          >
            <el-option
              v-for="(item,index) in totalData.classifyDialogList"
              :key="index"
              :label="item.name"
              :value="item.classify"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="封面图" prop="thumb">
          <img class="upload-poster-image" v-show="editForm.thumb" :src="editForm.thumb" alt>
          <upload-item pid="p1" v-on:upload-success="onUploadSuccess"></upload-item>
        </el-form-item>
        <el-form-item label="描述" prop="descript">
          <el-input v-model="editForm.descript"></el-input>
        </el-form-item>
        <el-form-item label="链接地址" prop="url">
          <el-input v-model="editForm.url"></el-input>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select
            :disabled="editForm.classify == ''"
            v-model="editForm.tags"
            multiple
            placeholder="请选择"
            style="width:100%;"
          >
            <el-option
              v-for="(item,index) in totalData.tagList"
              :key="index"
              :label="item.tag"
              :value="item.tagCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月龄" prop="months">
          <el-select v-model="editForm.months" multiple placeholder="请选择" style="width:100%;">
            <el-option v-for="(item,index) in months" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="文章内容" prop="content">
                    <el-input v-model="editForm.content"></el-input>
                    <quill-editor
                        class="quill"
                        v-model="editForm.content"
                        ref="quillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @ready="onEditorReady($event)"
                    ></quill-editor>
        </el-form-item>-->
        <!-- 月份，是个数组 -->
        <!-- <el-form-item label="月份" prop="months">
          <el-input v-model="editForm.months"></el-input>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--分页导航-->
    <el-col :span="24" class="toolbar fl pagination-wrap">
      <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>
  </div>
</template>

<script>
import {
  getClassifyList,
  getArticleList,
  saveArticle,
  deleteArticle,
  getTagList
} from '../../api/api.js'
import UploadItem from '../../components/UploadItem'

export default {
  data() {
    return {
      key: 'value',
      page: 1,
      pageSize: 10,
      total: 0,
      totalData: {
        dataList: [],
        classifyList: [],
        classifyDialogList: [],
        tagList: []
      },
      classifyMap: {},
      listLoading: false,
      editLoading: false,
      editFormVisible: false,
      dialogTitle: '编辑',
      //编辑界面数据
      editForm: {
        title: '',
        thumb: '',
        descript: '',
        url: '',
        content: '',
        months: [],
        tags: [],
        contentType: '',
        pv: '',
        share: '',
        classify: ''
      },
      editFormRules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        thumb: [
          {
            required: true,
            message: '请输入封面图',
            trigger: 'blur'
          }
        ],
        descript: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '请输入文章连接',
            trigger: 'blur'
          }
        ],
        tags: [
          {
            required: true,
            message: '请选择标签',
            trigger: 'change'
          }
        ],
        months: [
          {
            required: true,
            message: '请选择月龄',
            trigger: 'change'
          }
        ],

        classify: [{ required: true, message: '请选择分类', trigger: 'blur' }]
      },
      curClassify: '',
      editorOption: {
        /* quill options */
      },
      months: []
    }
  },
  computed: {
    pageNum() {
      return Math.ceil(this.total / this.pageSize)
    },
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    name() {},
    onUploadSuccess(evtAny) {
      let { pid, url } = evtAny
      if (pid == 'p1') {
        this.$set(this.editForm, 'thumb', url)
      } else if (pid == 'v1') {
        // this.$set(this.editForm, 'vedioUrl', url)
      }
    },
    formatterMonths(row, column) {
      let result = row.months
      return result.join(',')
    },
    formatterTags(row, column) {
      let result = []
      row.tags.forEach((element, idx) => {
        this.totalData.tagList.forEach((element2, idx2) => {
          if (element == element2.tagCode) {
            result.push(element2.tag)
          }
        })
      })
      return result.join(',')
    },
    // 获取列表
    reqQuery() {
      let data = {
        page: this.page,
        size: this.pageSize,
        classify: this.curClassify
      }
      getArticleList(data).then(result => {
        let { content, code } = result
        let { list, total } = content
        this.total = total
        this.$set(this.totalData, 'dataList', list)
      })
      // getTagList(data).then(result => {
      //     let { content, code } = result
      //     let { list, total } = content
      //     this.total = total
      //     this.$set(this.totalData, 'tagList', list)
      // })
    },
    // 获取分类列表
    reqGetClassifyList() {
      let data = {}
      getClassifyList(data)
        .then(result => {
          let { content, code } = result
          this.$set(this.totalData, 'classifyDialogList', content)
          //深复制
          let content2 = Object.assign([], content)
          content2.forEach(element => {
            this.classifyMap[element.classify] = element.name;
          });
          content2.unshift({
            classify: '',
            dispayType: '',
            name: '全部'
          })
          this.$set(this.totalData, 'classifyList', content2)
          this.reqQuery()
        })
        .catch(err => {})
    },
    // 获取话题列表
    reqTagList() {
      let data = {
        classify: this.editForm.classify
      }
      console.log('this.curClassify:', this.curClassify)
      getTagList(data).then(result => {
        let { content, code } = result
        let { list, total } = content
        this.total = total
        console.log('list:', list)
        this.$set(this.totalData, 'tagList', list)
      })
    },
    // 修改 显示修改对话框
    modifyHandler(index, row) {
      this.$set(this.totalData, 'tagList', [])
      this.dialogTitle = '修改'
      try {
        this.$refs['editForm'].resetFields()
      } catch (error) {}
      this.editFormVisible = true
      this.editForm = Object.assign({}, row)
      this.reqTagList()
      console.log('editForm:', this.editForm)
    },
    formatClassify(data) {
      return this.classifyMap[data.classify];
    },
    deleteHandler(index, row) {
      let data = {
        articleCode: row.articleCode
      }
      console.log('deleteHandler data:', data)
      this.$confirm('确认删除吗？', '提示', {}).then(() => {
        deleteArticle(data)
          .then(result => {
            let { code, content } = result
            if (code == 200) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              })
            } else {
            }
            this.editFormVisible = false
            this.reqQuery()
          })
          .catch(err => {})
      })
    },
    // 新增
    handleAdd() {
      this.editForm = {
        title: '',
        thumb: '',
        descript: '',
        url: '',
        content: '',
        months: [],
        tags: [],
        contentType: '1',
        pv: '',
        share: '',
        classify: ''
      }
      try {
        this.$refs['editForm'].resetFields()
      } catch (error) {}
      this.editFormVisible = true
      this.dialogTitle = '新增'
    },
    // 提交 新增/修改
    editSubmit() {
      let data = this.editForm
      // 默认传1
      if (!data.contentType) data.contentType = '1'
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.editLoading = true
          saveArticle(data)
            .then(result => {
              let { code, content } = result
              if (code == 200) {
                this.$notify({
                  title: '成功',
                  message: '提交成功',
                  type: 'success'
                })
              } else {
              }
              this.editLoading = false
              this.editFormVisible = false
              this.reqQuery()
            })
            .catch(err => {})
        }
      })
    },
    // 点击页数
    handleCurrentChange(val) {
      this.page = val
      this.reqQuery()
    },
    HandleSelectChange() {
      this.reqQuery()
    },
    // 编辑时选择分类
    HandleSelectDialogChange() {
      this.editForm.tags = []
      this.reqTagList()
    },
    // 富文本响应事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    }
  },

  created() {
    this.reqGetClassifyList()
    for (let index = 0; index < 37; index++) {
      this.months.push(index + '')
    }
  },
  components: {
    UploadItem
  }
}
</script>

<style lang="less" scoped>
// @import '../../styles/element-ui.less';

.tool-wrap {
  color: #333333;
}

.pagination-wrap {
  .page-tips {
    height: 32px;
    line-height: 32px;
    color: #333333;
  }
}

.fl {
  display: flex;
  justify-content: space-between;
}

.fle {
  display: flex;
  justify-content: flex-end;
}

.quill {
}
</style>