<template>
  <div class="entry-manager">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <el-row>
        <el-form
          :model="formInline"
          ref="formInline"
          label-width="75px"
          class="form-inline"
        >
          <el-col :span="8">
            <el-form-item label="入口名称：">
              <el-input
                size="small"
                v-model="formInline.entryName"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="16"
            style="padding: 0; text-align: right; padding-right: 10px"
          >
            <el-button type="primary" @click="search()" size="small"
              >查询</el-button
            >
            <el-button type="primary" @click="resetForm()" size="small"
              >重置</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-button
          class="button-jump"
          type="primary"
          size="small"
          @click="toPage()"
          >新建入口</el-button
        >
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          label="ID编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createdTime"
          width="100"
          label="入口创建时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="entryName"
          label="入口名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createdName"
          label="创建人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="entryIntro"
          label="入口简介"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="entryBegintime"
          width="100"
          label="开始时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="entryEndtime"
          width="100"
          label="结束时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="entryStatus" label="状态" align="center">
          <template v-slot="scope">{{
            $filters.entryStatusType(scope.row.entryStatus)
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250" align="center">
          <template v-slot="scope">
            <el-button type="primary" @click="toPage(scope.row.id)" size="small"
              >编辑</el-button
            >
            <el-button
              type="primary"
              v-show="showButton(scope.row.entryStatus, 1)"
              @click="openDialog('up', scope.row)"
              size="small"
              >上架</el-button
            >
            <el-button
              type="primary"
              v-show="showButton(scope.row.entryStatus, 2)"
              @click="changeStatus(scope.row.id, 4)"
              size="small"
              >下架</el-button
            >
            <el-button
              type="primary"
              v-show="showButton(scope.row.entryStatus, 3)"
              @click="delEntry(scope.row, 5)"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNo"
          :page-sizes="[10, 20, 30, 100]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
      <el-dialog title="确定上架" v-model="dialogUp" width="30%" center>
        <p v-if="childrenNum > 0" class="dialog_p">
          该项目已关联<span> {{ childrenNum }} </span>个子项目
        </p>
        <p v-if="childrenNum > 0" class="dialog_p">确认要继续上架吗？</p>
        <p v-if="childrenNum == 0" class="dialog_p">
          该项目已关联<span> 0 </span>个子项目
        </p>
        <p v-if="childrenNum == 0" class="dialog_p">
          继续上架，将在APP端无法显示该项目
        </p>
        <template v-slot:footer>
          <span v-if="childrenNum > 0" class="dialog-footer">
            <el-button @click="dialogUp = false">取消</el-button>
            <el-button type="primary" @click="changeStatus(null, 3)"
              >确定上架</el-button
            >
          </span>
        </template>
        <template v-slot:footer>
          <span v-if="childrenNum == 0" class="dialog-footer">
            <el-button @click="changeStatus(null, 3)">确认上架</el-button>
            <el-button type="primary" @click="dialogUp = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog title="确定删除" v-model="dialogDel" width="30%" center>
        <p v-if="scopeRow.entryStatus != 4" class="dialog_p">
          确认删除该条记录？
        </p>
        <template v-slot:footer>
          <span v-if="scopeRow.entryStatus != 4" class="dialog-footer">
            <el-button @click="dialogDel = false">取消</el-button>
            <el-button type="primary" @click="changeStatus(null, 5)"
              >确认删除</el-button
            >
          </span>
        </template>

        <p v-if="scopeRow.entryStatus == 4" class="dialog_p">
          删除后，该项目入口将不存在
        </p>
        <p v-if="scopeRow.entryStatus == 4" class="dialog_p">
          同时释放该项目关联的所有子项目
        </p>
        <template v-slot:footer>
          <span v-if="scopeRow.entryStatus == 4" class="dialog-footer">
            <el-button @click="changeStatus(null, 5)">确认删除</el-button>
            <el-button type="primary" @click="dialogDel = false"
              >取消</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
import * as operationData from '../../utils/operation'
let vm = null
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      curmbFirst: '入口管理',
      totalRows: 0,
      formInline: {
        entryName: '',
        pageNo: 1,
        pageSize: 10,
      },
      tableData: [],
      dialogUp: false,
      dialogDel: false,
      childrenNum: 0,
      scopeRow: {},
    }
  },
  computed: {
    ...mapGetters(['_token']),
  },
  created() {
    vm = this
    vm.search()
  },
  mounted: function () {
    commonUtil.resizeHeight()
  },
  methods: {
    searchData() {
      vm.formInline.pageNo = 1
      vm.search()
    },
    search() {
      let req = {}
      req = vm.formInline
      openLoading(vm)
      vm.GET('portal/entryInfo/getEntryList', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          vm.tableData = res.data.data
          vm.totalRows = res.data.totalRows
        } else {
          vm.$message(res.message)
        }
      })
    },
    showButton(status, option) {
      //status 1.草稿，2.未上架，3.已上架，4.已下架
      //option 0.编辑，1上架，2下架，3删除
      status = status - 1
      let showArray = [
        [true, false, false, true],
        [true, true, false, true],
        [true, false, true, false],
        [true, true, false, true],
      ]
      let showType = showArray[status][option]
      return showType
    },
    resetForm() {
      vm.formInline = {
        entryName: '',
        pageNo: 1, //当前是第几页
        pageSize: 10, //页面总数
      }
      vm.search()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      vm.searchData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.pageNo = val
      vm.search()
    },
    toPage(id) {
      if (id === undefined) {
        this.$router.push('edit-entry')
      } else {
        this.$router.push('edit-entry?entryId=' + id)
      }
    },
    openDialog(type, row) {
      vm.scopeRow = row
      vm.childrenNum = row.subprojectNum
      vm.dialogUp = true
    },
    changeStatus(id, changeTo) {
      vm.dialogUp = false
      vm.dialogDel = false
      let req = {}
      let entryId = id
      if (entryId == null) {
        entryId = vm.scopeRow.id
      }
      openLoading(vm)
      vm.POST(
        'portal/entryInfo/changeStatus?entryId=' +
          entryId +
          '&changeTo=' +
          changeTo,
        req
      ).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          if (changeTo === 3) {
            vm.$message({
              message: '发布成功',
              type: 'success',
            })
          } else {
            vm.$message(res.message)
          }
        } else {
          //失败
          if (changeTo === 3) {
            vm.$message.error('发布失败')
          } else {
            vm.$message(res.message)
          }
        }
        vm.search()
      })
    },
    delEntry(row, changeTo) {
      vm.scopeRow = row
      vm.dialogDel = true

      // if (vm.scopeRow.entryStatus == 4) {
      //   vm.dialogDel = true;
      // } else {
      //   vm.changeStatus(vm.scopeRow.id, changeTo);
      // }
    },
  },
}
</script>

<style lang="scss">
.entry-manager {
  .component-content {
    padding: 10px;
    background: #fff;
    .dialog_p {
      text-align: center;
      span {
        font-weight: 700;
      }
    }
    .button-jump {
      margin-right: 10px;
      margin-bottom: 10px;
      float: right;
    }
  }
}
.el-tooltip__popper {
  max-width: 50%;
}
</style>
