<template>
  <div class="app-container">
    <div v-show="showSearch" class="search-form">
      <el-form ref="searchForm" :model="queryParams" inline label-width="100px">
        <el-form-item
          label="状态"
          prop="configStatus"
        >
          <ec-select v-model="queryParams.configStatus" dict-type="versionStatus" />
        </el-form-item>
        <el-form-item
          label="备注信息"
          prop="remarks"
        >
          <el-input v-model="queryParams.remarks" type="textarea" :autosize="{minRows: 1, maxRows: 5}" />
        </el-form-item>
        <el-form-item class="searchItem" :label-width="'50px'">
          <el-button type="primary" @click="queryData">查询</el-button>
          <el-button type="default" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <vxe-grid
      ref="vxe"
      highlight-hover-row
      border
      resizable
      sync-resize
      auto-resize
      show-overflow
      show-header-overflow
      max-height="1000"
      class="vxe-table-element"
      :loading="loading"
      :start-index="(page.currentPage - 1) * page.pageSize"
      :sort-config="{ trigger: 'cell' }"
      :pager-config="page"
      :columns="columns"
      :data="tableData"
      :toolbar="tableToolbar"
      @sort-change="sortMethod"
      @page-change="handlePageChange"
    >
      <template v-slot:toolbar_buttons>
        <el-button v-permission="['sysrLoginConfig:add']" type="primary" @click="add()">新增</el-button>
        <!--        <el-button v-permission="['sysrLoginConfig:edit']" type="warning" :disabled="!onlyOne" @click="edit()">编辑</el-button>-->
        <!--        <el-button v-permission="['sysrLoginConfig:delete']" type="danger" :disabled="!oneMore" @click="deleteByIds()">删除</el-button>-->
        <!--        <el-button v-permission="['sysrLoginConfig:remove']" type="warning" :disabled="!oneMore" @click="removeByIds()">移除</el-button>-->
        <!--        <el-button v-permission="['sysrLoginConfig:import']" type="success" @click="importVisible = true">导入</el-button>-->
        <!--        <el-button v-permission="['sysrLoginConfig:export']" type="primary" @click="exportExcel">导出</el-button>-->
        <el-button @click="getData">刷新</el-button>
        <!-- <el-button @click="showSearch = !showSearch">搜索</el-button> -->
      </template>
      <template v-slot:config_status="{ row }">
        <ec-select :value="row.configStatus" dict-type="versionStatus" readonly />
      </template>
      <template v-slot:update_by="{ row }">
        <ec-user-modal :value="row.updateBy && row.updateBy.id" readonly/>
      </template>
      <template v-slot:pic_url="{ row }">
        <!--        <ec-file-modal :value="row.picUrl" readonly list-type="picture" />-->
        <el-image
          class="pic"
          :src="row.picUrl"
          :preview-src-list="[row.picUrl]"
        />
      </template>
      <template v-slot:operation="{ row }">
        <el-button size="mini" type="warning" @click="edit(row)">预览</el-button>
        <el-button v-permission="['sysrLoginConfig:edit']" size="mini" type="primary" @click="publish(row)">发布</el-button>
        <!--        <el-button size="mini" v-permission="['sysrLoginConfig:edit']" type="warning" @click="edit(row)">编辑</el-button>-->
        <el-button size="mini" v-permission="['sysrLoginConfig:delete']" type="danger" @click="deleteByIds(row.id)">删除</el-button>
        <!--        <el-button size="mini" v-permission="['sysrLoginConfig:remove']" type="warning" @click="removeByIds(row.id)">移除</el-button>-->
      </template>
    </vxe-grid>

    <ec-import
      :upload-url="importUrl"
      :tpl-url="tplUrl"
      title="登录页面配置数据导入"
      :visible="importVisible"
      @onSuccess="getData"
      @close="importVisible = false"
    >
      <template v-slot:extra_params="{ extraParams }">
        <el-form-item label="是否生成新主键">
          <ec-radio-group v-model="extraParams.isNewPk" :ec-data="[ {value: false, label: '否'}, {value: true, label: '是' } ]" />
        </el-form-item>
        <el-form-item label="导入策略">
          <ec-radio-group v-model="extraParams.strategy" :ec-data="[ {value: 'ignore', label: '忽略'}, {value: 'update', label: '更新' } ]" />
        </el-form-item>
      </template>
    </ec-import>

    <detail ref="sysrLoginConfigDialog" @refreshData="getData" />

  </div>
</template>

<script>
import permissionMixin from 'ecip-web/utils/permission-mixin'
import { getData, removeByIds, deleteByIds, update } from 'ecip-web/api/web/loginconfig/sysrLoginConfigApi'
import Detail from './components/detail'
import { download } from 'ecip-web/utils'

export default {
  name: 'WebLoginconfigSysrLoginConfigView',
  components: { Detail },
  mixins: [permissionMixin],
  data() {
    return {
      importVisible: false,
      showSearch: true,
      loading: false,
      onlyOne: true, // 工具栏编辑按钮是否禁用，只有当且仅当选择一条记录的时候才可编辑
      oneMore: true, //  工具栏删除按钮是否禁用，当选中条数为0的时候禁用
      importUrl: 'api/v1/loginconfig/sysrLoginConfig/importExcel',
      tplUrl: 'api/v1/loginconfig/sysrLoginConfig/excelTemplate',
      exportUrl: 'api/v1/loginconfig/sysrLoginConfig/exportExcel',
      tableToolbar: {
        id: 'web.loginconfig.sysrLoginConfigView-toolbar',
        custom: true,
        slots: {
          buttons: 'toolbar_buttons'
        },
        zoom: true, // 最大化按钮
        // 列宽操作记录
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true,
        field: 'a.create_date',
        order: 'desc'
      },
      selections: [],
      tableData: [],
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left', align: 'center' },
        { title: '发布时间', field: 'publishDate', tableField: 'publish_date', minWidth: 180, sortable: true, formatter: ['date', 'yyyy-MM-dd HH:mm:ss'] },
        { title: '发布人', field: 'updateBy.id', tableField: 'update_by', minWidth: 180, slots: { default: 'update_by' }},
        { title: '状态', field: 'configStatus', tableField: 'config_status', minWidth: 180, sortable: true, slots: { default: 'config_status' }},
        { title: '登录背景图', field: 'picUrl', tableField: 'pic_url', minWidth: 180, sortable: true, slots: { default: 'pic_url' }},
        { title: '备注信息', field: 'remarks', tableField: 'remarks', minWidth: 180, sortable: true },
        { title: '操作', width: 210, fixed: 'right', align: 'center', slots: { default: 'operation' }}
      ],
      queryParams: {
        configStatus: '',
        remarks: ''
      }
    }
  },
  mounted() {
    this.$watch(this.$refs.vxe.getCheckboxRecords, (newValue, oldValue) => {
      this.selections = newValue
      this.onlyOne = this.selections.length === 1
      this.oneMore = this.selections.length > 0
    })
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      // 每次查询初始化checkbox selections
      this.selections = []
      this.loading = true
      const { data } = await getData(Object.assign({}, { size: this.page.pageSize, current: this.page.currentPage, field: this.page.field, order: this.page.order }), this.queryParams)
      this.tableData = data.records
      this.page.total = data.total
      this.loading = false
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.getData()
    },
    sortMethod({ column, property, order }) {
      this.page.field = (column.own.tableField && 'a.'.concat(column.own.tableField)) || property
      this.page.order = order
      this.getData()
    },
    add() {
      this.$refs.sysrLoginConfigDialog.init('add')
    },
    edit(row) {
      const record = row || this.selections[0]
      this.$refs.sysrLoginConfigDialog.init('edit', record)
    },
    publish(row) {
      this.$confirm(`确定发布吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await update(row.id, {})
        await this.getData()
        this.$notify.success('发布成功')
      })
    },
    removeByIds(rowId) {
      const additionMsg = rowId ? '此条记录' : '选中记录'
      this.$confirm(`确定移除${additionMsg}?(逻辑删除,数据库数据不删除)`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async() => {
        const removeIds = []
        if (rowId) {
          removeIds.push(rowId)
        } else {
          removeIds.push(...this.selections.map(row => row.id))
        }
        await removeByIds(removeIds)
        await this.getData()
        this.$notify.success('移除成功')
      })
    },
    deleteByIds(rowId) {
      const additionMsg = rowId ? '此条记录' : '选中记录'
      this.$confirm(`确定删除${additionMsg}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async() => {
        const deleteIds = []
        if (rowId) {
          deleteIds.push(rowId)
        } else {
          deleteIds.push(...this.selections.map(row => row.id))
        }
        await deleteByIds(deleteIds)
        await this.getData()
        this.$notify.success('删除成功')
      })
    },
    async exportExcel() {
      this.loading = true
      await download({ url: this.exportUrl, method: 'post', data: this.queryParams })
      this.loading = false
    },
    queryData() {
      Object.assign(this.$data.page, this.$options.data().page)
      this.getData()
    },
    handleReset() {
      Object.assign(this.$data.page, this.$options.data().page)
      Object.assign(this.$data.queryParams, this.$options.data().queryParams)
      this.getData()
    }
  }
}
</script>

<style scoped>
.vxe-table-element ::v-deep .pic {
  /*width: 80px;*/
  height: 80px;
  display: block;
  margin: 0 auto;
  padding: 5px 0;
}

</style>
