<template>
  <div class="item-component-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond">
    </bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="search-title">查询条件</div>
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px">
        <el-form
          ref="serchForm"
          :model="searchParam"
          label-width="75px"
          style="width: 100%"
        >
          <el-col :span="6">
            <el-form-item label="组件名称:">
              <el-input
                v-model="searchParam.name"
                size="small"
                placeholder="请输入组件名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布状态:">
              <el-select
                v-model="searchParam.status"
                size="small"
                style="width: 100%"
                placeholder="请选择发布状态"
              >
                <el-option
                  v-for="(item, index) in statuSelect"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            style="padding: 0; text-align: right; padding-right: 15px"
          >
            <el-button type="primary" size="small" @click="search(1)"
              >查询</el-button
            >
            <el-button
              type="default"
              size="small"
              @click="reseat"
              style="margin-left: 0"
              >重置</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      <el-row :gutter="10" class="row create-button" style="margin-right: 0">
        <el-button
          type="primary"
          size="small"
          :disabled="idType == 2 && masterAdministratorFlag == 'false'"
          @click="createComponent"
          >新建项目组件</el-button
        >
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          label="ID编号"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="组件名称"
          min-width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createdName"
          label="发起人"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="80"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ $filters.statusFileter(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          min-width="200"
        >
          <template v-slot="scope">
            <el-button
              type="primary"
              size="small"
              @click="editComponentList(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              v-if="scope.row.status == 2 || scope.row.status == 4"
              size="small"
              @click="enableAndDisable(scope.row, 1)"
              >启用</el-button
            >
            <el-button
              type="primary"
              v-if="scope.row.status == 3"
              size="small"
              @click="enableAndDisable(scope.row, 2)"
              >禁用</el-button
            >
            <el-button
              type="primary"
              v-if="scope.row.status == 1 || scope.row.status == 2"
              size="small"
              @click="deleteComponent(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../assets/image/no-content1.png" />
              <p>没有查询到相关结果</p>
            </div>
          </div>
        </template>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParam.pageNo"
          :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
          :page-size="searchParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 删除 弹窗 -->
    <el-dialog
      title="确认删除"
      :show-close="false"
      v-model="deleteVisible"
      :close-on-click-modal="false"
      width="600px"
      center
    >
      <p style="text-align: center">删除后将不可撤销，确认删除吗？</p>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="confirmDelete">删 除</el-button>
          <el-button type="primary" @click="hideDeleteFrom">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { doUpload, getFilePath } from '../../utils/qiniu-util'
import { validateWord } from '../../utils/validate.js'
import { mapGetters, mapActions } from 'vuex'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
let vm = null
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      curmbFirst: '教培项目',
      curmbSecond: '项目组件',
      idType: '',
      masterAdministratorFlag: false,
      searchParam: {
        idType: '',
        name: '',
        status: '',
        pageNo: 1,
        pageSize: 15,
      },
      statuSelect: [
        {
          label: '草稿',
          value: '1',
        },
        {
          label: '未启用',
          value: '2',
        },
        {
          label: '已启用',
          value: '3',
        },
        {
          label: '已禁用',
          value: '4',
        },
      ],
      tableData: [],
      totalRows: 0,
      basicRule: {
        name: [
          { required: true, message: '输入长度为2-20个中文', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              validateWord(rule, value, callback, '输入长度为2-20个中文')
            },
            trigger: 'blur',
          },
        ],
        introduce: [
          { required: true, message: '请输入组件简介', trigger: 'blur' },
        ],
      },
      currentRow: {},
      deleteVisible: false,
    }
  },
  computed: {
    ...mapGetters([
      '_token',
      // 'idType',
      // 'masterAdministratorFlag'
    ]),
  },
  created() {
    vm = this
    vm.idType = localStorage.getItem('storageIdType')
    vm.masterAdministratorFlag = localStorage.getItem('storageMaster')
    if (this.$route.query.pageNum) {
      console.log(this.$store.state.common.itemComponents)
      vm.searchParam.status = this.$store.state.common.itemComponents.status
      vm.searchParam.name = this.$store.state.common.itemComponents.name
      vm.searchParam.pageNo = parseInt(this.$route.query.pageNum)
    }
    vm.search()
  },
  // 挂载到Dom完成时
  mounted: function () {
    commonUtil.resizeHeight()
  },
  methods: {
    ...mapActions(['updateItemComponents']),
    // 列表查询
    search(flag) {
      if (flag) vm.searchParam.pageNo = 1
      vm.searchParam.idType = vm.idType
      openLoading(vm)
      vm.GET(
        'portal/portalComponent/queryPortalComponent',
        vm.searchParam
      ).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          vm.tableData = res.data.queryList
          vm.totalRows = res.data.total
        } else {
          vm.$message.info(res.message)
        }
      })
    },
    // 重置
    reseat() {
      vm.searchParam = Object.assign(
        {},
        {
          idType: '',
          name: '',
          status: '',
          pageNo: 1,
          pageSize: 15,
        }
      )
      vm.search()
    },
    // 新建组件
    createComponent() {
      vm.$router.push({ path: 'create-component' })
    },
    // 编辑(验证可编辑范围)
    editComponentList(row) {
      let req = {
        token: vm._token,
        componentId: row.id,
      }
      vm.GET('portal/portalComponent/componentEditRange', req).then((res) => {
        if (res.code == '000000') {
          vm.updateItemComponents({
            name: vm.searchParam.name,
            status: vm.searchParam.status,
          })
          vm.$router.push({
            path: 'create-component',
            query: {
              id: row.id,
              status: row.status,
              resultFlag: res.data.resultFlag,
              pageNum: vm.searchParam.pageNo,
            },
          })
        } else {
          vm.$message.info(res.message)
        }
      })
    },
    // 启用(禁用)
    enableAndDisable(row, flag) {
      let req = null
      let text = ''
      if (flag == 1) {
        // 启用
        req = {
          id: row.id,
          status: 3,
        }
        text = '组件一经启用，将无法进行修改，确定启用吗？'
      } else if (flag == 2) {
        // 禁用
        req = {
          id: row.id,
          status: 4,
        }
        text = '确定禁用吗？'
      }
      vm.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          vm.GET('portal/portalComponent/disableOrStart', req)
            .then((res) => {
              if (res.code == '000000') {
                vm.$message({
                  type: 'success',
                  message: '操作成功!',
                })
                vm.search()
                if (res.message != 'success') {
                  vm.$message({
                    message: res.message,
                    type: 'warning',
                  })
                }
              } else {
                vm.$message.info(res.message)
              }
            })
            .catch(function (error) {
              vm.$message.error(error)
            })
        })
        .catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    // 删除
    deleteComponentOld(row) {
      vm.$confirm('确定要删除该组件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          vm.GET('portal/portalComponent/deleteComponentById', { id: row.id })
            .then((res) => {
              if (res.code == '000000') {
                vm.$message({
                  type: 'success',
                  message: '删除成功!',
                })
                vm.search()
              } else {
                vm.$message.info(res.message)
              }
            })
            .catch(function (error) {
              vm.$message.error(error)
            })
        })
        .catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    // 删除组件
    confirmDelete() {
      let req = {}
      vm.GET('portal/portalComponent/deleteComponentById', {
        id: this.currentRow.id,
      })
        .then((res) => {
          this.deleteVisible = false
          if (res.code == '000000') {
            vm.$message({
              type: 'success',
              message: '删除成功!',
            })
            vm.search()
          } else {
            vm.$message.info(res.message)
          }
        })
        .catch(function (error) {
          vm.$message.error(error)
        })
    },

    // 删除
    deleteComponent(row) {
      this.currentRow = row
      this.deleteVisible = true
    },
    hideDeleteFrom() {
      this.deleteVisible = false
    },
    handleSizeChange(value) {
      vm.searchParam.pageSize = value
      vm.search()
    },
    handleCurrentChange(value) {
      vm.searchParam.pageNo = value
      vm.search()
    },
  },
}
</script>

<style lang="scss">
.item-component-wrap {
  .component-content {
    padding: 10px;
    background: #fff;
    // margin: 84px 20px 20px;
    .search-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .create-button {
      padding: 0 0 15px;
      margin-top: 0 !important;
      text-align: right;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
}
</style>
