<template>
  <div class="tab1">
    <div class="insideTop">
      文物典藏管理
      <div class="add">
        <el-button type="primary" @click="addGood">新增文物典藏</el-button>
      </div>
    </div>
    <div class="obstruct"></div>
    <div class="conten">
      <div class="con_left">
        <div class="cutJT">
          <i class="el-icon-arrow-down"></i>
          文物典藏
        </div>
        <ul>
          <li
            v-for="item in conLeftArr"
            :key="item.id"
            :class="{ active: formData.type === item.type }"
            @click="cutLeft(item.type)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 右侧主要内容 -->
      <div class="con_right">
        <div class="classify">全部</div>
        <div class="search">
          <span>发布时间：</span>
          <el-date-picker
            style="width: 240px"
            v-model="time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
          <span class="search_k">标题关键字：</span>
          <el-input
            v-model="formData.searchKey"
            placeholder="请输入"
            style="width: 240px"
          ></el-input>
          <span class="search_k">排序：</span>
          <el-select
            v-model="formData.sortType"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option label="发布时间" :value="0"></el-option>
            <el-option label="排序编号" :value="1"></el-option>
          </el-select>
          <!-- 右侧按钮 -->
          <div class="search_btn">
            <el-button type="primary" @click="searchBtn">查 询</el-button>
            <el-button @click="resetBtn">重 置</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="80">
              <template slot-scope="scope">
                {{
                  scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
                }}
              </template>
            </el-table-column>
            <el-table-column label="标题" width="200">
              <template #default="{ row }">
                <span class="table_name" :title="row.name">{{
                  row.name
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="封面图片" width="120">
              <template #default='{row}'>
                <img class="table_img" :src="baseURL+row.thumb" alt="" :onerror="defaultImg"/>
              </template>
            </el-table-column>
            <el-table-column prop="visit" label="阅读"> </el-table-column>
            <el-table-column prop="creatorName" label="发布人"> </el-table-column>
            <el-table-column prop="createTime" label="发布时间" width="200">
            </el-table-column>
            <el-table-column  label="排序" width="80">
              <template #default="{ row }">
                <el-input type="text" v-model="row.sort" @blur="changeSort(row.sort,row.id)"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否显示">
              <template #default="{ row }">
                <el-switch v-model="row.display" active-color="#b9412e" :active-value='1' :inactive-value='0' @change='changeSwit($event,row.id)'>
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button
                  type="text"
                  @click="lookGood(row.id)"
                  >查看</el-button
                >
                <el-button type="text" v-if="!row.display" @click="editGood(row.id)">编辑</el-button>
                <el-button type="text" v-if="!row.display" @click="delGoods(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        layout="sizes,prev, pager, next,jumper"
        :total="total"
        :current-page="formData.pageNum"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import { goodsList, goodsRemove, goodsDisplay, goodsSort } from '@/apis/tab1'
export default {
  name: 'tab1',
  components: {},
  data () {
    // 这里存放数据
    return {
      baseURL: '',
      total: 0,
      time: '',
      conLeftArr: [
        { name: '实物模型', type: 'model' },
        { name: '专题图库', type: 'img' },
        { name: '视频档案', type: 'video' }
      ],
      formData: {
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10,
        searchKey: '',
        sortType: 0,
        type: 'model'
      },
      tableData: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    time (val) {
      this.handleSelect(val)
    }
  },
  // 方法集合
  methods: {
    // 点击重置
    resetBtn () {
      this.formData.searchKey = ''
      this.formData.sortType = 0
      this.time = ''
      this.formData.pageNum = 1
      this.formData.startTime = this.formData.endTime = ''
      this.goodsList(this.formData)
    },
    // 点击查询
    searchBtn () {
      this.formData.pageNum = 1
      this.goodsList(this.formData)
    },
    // 排序
    async changeSort (val, id) {
      // console.log(998, val, id)
      if (Number(val) < 1) return this.$message.warning('不能小于1')
      const res = await goodsSort(id, Number(val))
      if (res.code === 0) {
        this.$message.success('操作成功')
        this.goodsList(this.formData)
      } else this.$message.warning(res.msg)
    },
    // 点击开关
    async changeSwit (val, id) {
      const res = await goodsDisplay(id, val)
      if (res.code === 0) {
        this.$message.success('操作成功')
        this.goodsList(this.formData)
      } else this.$message.warning(res.msg)
      console.log(998, val, id)
    },
    // 分页器方法
    currentChange (val) {
      // console.log('当前页改变了', val)
      this.formData.pageNum = val
      this.goodsList(this.formData)
    },
    sizeChange (val) {
      // console.log('条数改变了', val)
      this.formData.pageNum = 1
      this.formData.pageSize = val
      this.goodsList(this.formData)
    },
    // 点击删除
    delGoods (id) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await goodsRemove(id)
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.goodsList(this.formData)
          } else this.$message.warning(res.msg)
        })
        .catch(() => {
          this.$message.info('已取消')
        })
    },
    // 点击查看
    lookGood (id) {
      this.$router.push({
        path: '/layout/tab1Look',
        query: { conLeftId: this.formData.type, id }
      })
    },
    // 点击编辑文物
    editGood (id) {
      if (this.formData.type === 'img') {
        this.$router.push({
          path: '/layout/tab1Add2',
          query: { id }
        })
      } else {
        this.$router.push({
          path: '/layout/tab1Add',
          query: { conLeftId: this.formData.type, id }
        })
      }
    },
    // 点击新增文物
    addGood () {
      if (this.formData.type === 'img') this.$router.push('/layout/tab1Add2')
      else {
        this.$router.push({
          path: '/layout/tab1Add',
          query: { conLeftId: this.formData.type }
        })
      }
    },
    // 点击左侧的tab栏
    cutLeft (type) {
      if (type === this.formData.type) return
      this.formData.type = type
      this.goodsList(this.formData)
    },
    // 时间处理----------------
    handleSelect (e) {
      const date = []
      for (const i in e) {
        date.push(this.gettime(e[i]))
      }
      this.formData.startTime = date[0]
      if (date[1]) {
        this.formData.endTime = date[1].replace('00:00:00', '23:59:59')
      }
      if (e === null) this.formData.endTime = ''
    },
    gettime (data) {
      const value =
        data.getFullYear() +
        '-' +
        this.checkTime(data.getMonth() + 1) +
        '-' +
        this.checkTime(data.getDate()) +
        ' ' +
        this.checkTime(data.getHours()) +
        ':' +
        this.checkTime(data.getMinutes()) +
        ':' +
        this.checkTime(data.getSeconds())
      return value
    },
    checkTime (i) {
      if (i < 10) {
        i = '0' + i
      }
      return i
    },
    // 封装获取列表的函数
    async goodsList (data) {
      const res = await goodsList(data)
      this.total = res.data.total
      this.tableData = res.data.records
      // console.log(998, res)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL
    // 判断是第一次进来还是修改或者新增或者查看后返回
    // 拿到路由跳转传过来的数据
    if (this.$route.query.conLeftId) {
      this.formData.type = this.$route.query.conLeftId
    }
    this.goodsList(this.formData)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab1 {
  height: 100%;
  .conten {
    display: flex;
    height: calc(100% - 32px);
    .con_left {
      padding: 20px 0 0 15px;
      width: 180px;
      height: 100%;
      border: 1px solid #ccc;
      .cutJT {
        margin-bottom: 10px;
      }
      ul {
        li {
          cursor: pointer;
          margin-left: 20px;
          width: 100px;
          text-align: center;
          line-height: 30px;
          height: 30px;
          &:hover {
            color: #b9412e;
            background-color: #e6f7ff;
          }
        }
        .active {
          color: #b9412e;
          background-color: #e6f7ff;
        }
      }
    }
    .con_right {
      padding: 15px 30px 0;
      flex: 1;
      .classify {
        text-align: center;
        width: 40px;
        padding-bottom: 10px;
        color: #b9412e;
        border-bottom: 2px solid #b9412e;
      }
      .search {
        margin-bottom: 20px;
        position: relative;
        margin-top: 12px;
        height: 40px;
        .search_k {
          margin-left: 30px;
        }
        .search_btn {
          display: flex;
          justify-content: space-between;
          width: 200px;
          position: absolute;
          right: 0px;
          top: 0;
        }
      }
    }
  }
  .table{
    max-width: 1370px;
  }
  /deep/.el-table__body-wrapper{
    max-height: 485px;
    overflow-y: auto;
  }
      .paging {
      position: absolute;
      bottom: 15px;
      right: 50px;
    }

}
</style>
