<template>
  <basic-container>
    <jl-go-back v-if="id"></jl-go-back>

    <!-- 表格区 -->
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @search-reset="searchReset"
    >
      <template slot="sort">
        <el-button type="text">上移</el-button>
        <el-button type="text">下移</el-button>
      </template>
      <template slot="menuLeft">
        <el-button size="small" type="primary" @click="add">添加</el-button>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button size="small" type="text" @click="modify(row)">查看</el-button>
        <el-button size="small" type="text" @click="del(row)">移除</el-button>
      </template>
    </avue-crud>
    <!-- 展示区 -->
    <!-- 添加 -->
    <el-drawer title="添加" :visible.sync="viewDrawerAdd" size="80%">
      <add-dialog v-if="viewDrawerAdd"></add-dialog>
    </el-drawer>
    <!-- 编辑 -->
    <el-drawer title="查看" :visible.sync="viewDrawer" size="60%">
      <modify-dialog v-if="viewDrawer" disabled :formOption="formOption"></modify-dialog>
    </el-drawer>
  </basic-container>
</template>

<script>
  import addDialog from './addDialog'
  import modifyDialog from './modifyDialog'
  import {getAllContentCategoryFirst} from '@/api/help/classify'
  import {
    getSidebarContentList,
    sidebarContentDel,
  } from '@/api/help/recommend/contentManage'
  const wxStatus = process.env.VUE_APP_SITE

export default {
  name: "test",
  components: {addDialog, modifyDialog},
  props: {
    id: String,
    type: String
  },
  provide() {
    return {
      contentManage: this,
    };
  },
  mounted() {
    this.onLoad(this.page)
  },
  watch: {
    viewDrawerAdd(){
      if (!this.viewDrawerAdd) {
        this.onLoad(this.page)
      }
    }
  },
  data () {
    return {
      wxStatus,
      loading:false,
      viewDrawerAdd:false,
      viewDrawer:false,
      drawerTitle: '',
      option: {
        height: "auto",
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexLabel: "序号",
        selection: false,
        viewBtn: false,
        addBtn: false,
        editBtn:false,
        delBtn: false,
        columnBtn: false,
        menuWidth: 300,
        labelWidth: 151,
        dialogClickModal: false,
        dialogType: "drawer",
        dialogFullscreen: true,
        column: [
          {
            label: "内容标题",
            prop: "title",
            display: false,
            search: true
          },
          {
            label: "一级分类",
            prop: "firstId",
            display: false,
            search: true,
            type: "tree",
            dicUrl: getAllContentCategoryFirst(),
            props: {
              label: "name",
              value: "id"
            },
          },
          {
            label: "二级分类",
            prop: "secondName",
            display: false,
          },
          {
            label: "更新时间",
            prop: "createTime",
            display: false,
            type: "datetime",
            // format: "yyyy/MM/dd",
          }
        ]
      },
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 100,
      },
      formOption: {},
      query: {}
    }
  },
  methods: {
    onLoad(page, params = {}){
      if (this.id) {
        this.loading = true;
        var pcSource = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 3 : 4;
        getSidebarContentList(
          this.id,
          this.type,
          pcSource,
          page.currentPage,
          page.pageSize,
          Object.assign(this.query, params)
        ).then((res) => {
          this.data = res.data.data.records;
          this.page.total = res.data.data.total;
          this.loading = false;
        });
      } else {
        // wx
        this.loading = true;
        var source = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 1 : 2;
        getSidebarContentList(
          '',
          source,
          source,
          page.currentPage,
          page.pageSize,
          Object.assign(this.query, params)
        ).then((res) => {
          this.data = res.data.data.records;
          this.page.total = res.data.data.total;
          this.loading = false;
        });
      }
    },
    /* 编辑 组建返回结果 */
    modifyChange (list) {
      // console.log('编辑后结果 ===',list);
      this.closeChange()
    },
    closeChange (status) {
      this.viewDrawer = false
    },
    /* 表格按钮 */
    add () {
      this.viewDrawerAdd = true
    },
    closeAdd () {
      this.viewDrawerAdd = false
    },
    modify (row) {
      this.formOption = JSON.parse(JSON.stringify(row))
      this.formOption.type = JSON.parse(JSON.stringify(row.firstName))
      this.formOption.tag = JSON.parse(JSON.stringify(row.secondName))
      this.formOption.note = JSON.parse(JSON.stringify(row.content))
      this.viewDrawer = true
    },
    del (row) {
      this.$confirm('是否移除此数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.id) { // pc
          var pcSource = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 3 : 4;
          sidebarContentDel(this.id, this.type, pcSource, row.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.onLoad(this.page);
          })
        } else { // 小程序
          var source = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 1 : 2;
          sidebarContentDel('', source, source, row.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.onLoad(this.page);
          })
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /* 表格方法 */
    searchChange(params,done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(val) {
      this.page.currentPage = val
      this.onLoad(this.page)
    },
    sizeChange(val) {
      this.page.currentPage = 1
      this.page.pageSize = val
      this.onLoad(this.page)
    },
    refreshChange () {
      this.page.currentPage = 1;
      this.onLoad(this.page)
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    }
  }
}
</script>

<style scoped>

</style>
