<template>
  <el-container>
    <el-container style="border-left:1px solid #E7EAEC">
      <el-main>
        <el-row>
          <el-col :span="6">
            <el-button icon="el-icon-delete" type="danger" @click="remove"
              >删除</el-button
            >
            <el-button type="error" @click="close">返回</el-button>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="title"
              clearable
              placeholder="标题"
              prefix-icon="el-icon-search"
              size="small"
              style="width:380px"
            ></el-input>
            <el-button
              icon="el-icon-search"
              size="small"
              style="margin-left: 20px"
              type="primary"
              @click="loadData()"
              >{{ $t('common.search') }}
            </el-button>
            <el-button icon="el-icon-refresh" size="small" @click="reset">{{
              $t('common.reset')
            }}</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="htTable"
          v-loading="fullscreenLoading"
          :data="data"
          border
          header-cell-class-name="todo-header-row"
          row-class-name="todo-row"
          size="medium"
          stripe
          style="width: 100%"
          @selection-change="handleChecked"
        >
          <el-table-column
            sortable
            type="selection"
            width="50"
          ></el-table-column>
          <ht-table-column
            align="center"
            label="序号"
            type="index"
            width="50"
          />
          <ht-table-column
            :show-overflow-tooltip="true"
            :sortable="true"
            label="标题"
            prop="title"
          ></ht-table-column>
          <ht-table-column
            :show-overflow-tooltip="true"
            :sortable="true"
            label="创建时间"
            prop="createTime"
          ></ht-table-column>
          <el-table-column
            :label="$t('common.operation')"
            align="center"
            prop
            width="290"
          >
            <template slot-scope="scope">
              <el-button
                icon="el-icon-tickets"
                plain
                size="small"
                @click="edit(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer height="45px">
        <el-row justify="end" type="flex">
          <el-pagination
            :current-page="pageBean.page"
            :page-size="10"
            :page-sizes="[10, 20, 30, 40]"
            :total="pageBean.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-row>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import form from '@/api/form.js'

export default {
  name: 'templateDraft',
  props: ['tempAlias', 'dataViewFlag', 'openType'],
  data() {
    return {
      alias_new: 'statement',
      title: '',
      fullscreenLoading: true,
      checkBoxData: [],
      pageBean: {page: 1, pageSize: 20, showTotal: true, total: 0},
      data: [],
      selection: [],
      ignoredAlias: ['appCenterFront']
    }
  },
  computed: {
    formDeleteUrl: function() {
      return `${window.context.form}/form/dataTemplate/v1/remove`
    }
  },
  methods: {
    close() {
      let isSingle = '/true'
      //数据视图随机添加到其他菜单下面时获取当前菜单的别名  并且当前数据视图不是表单里的数据视图  dataViewFlag
      if (
        sessionStorage.menu_alias &&
        this.dataViewFlag == 'false' &&
        !this.ignoredAlias.includes(sessionStorage.menu_alias) &&
        this.$route.query.isNew != 'true'
      ) {
        this.alias_new = sessionStorage.menu_alias
        isSingle = ''
      } else if (this.$route.query.isNew == 'true') {
        //在前端菜单中新窗口打开
        window.close()
      }
      let path =
        '/' + this.alias_new + '/template/preview/' + this.tempAlias + isSingle
      this.$router.push(path)
      // this.$router.go(-1);
    },
    remove() {
      if (!this.selection || this.selection.length <= 0) {
        this.$message.warning('请至少选择一项')
        return
      }
      let ids = []
      this.selection.forEach(item => {
        ids.push(item.id)
      })
      this.$confirm('确定删除草稿吗？')
        .then(() => {
          form.removeTempDraft(ids.join(',')).then(resp => {
            if (resp.state) {
              this.$message.success(resp.message)
              this.loadData()
            } else {
              this.$message.error(resp.message)
            }
          })
        })
        .catch(() => {})
    },
    handleChecked(selection) {
      this.selection = selection
    },
    edit(row) {
      //判断是不是发布到前端菜单
      if (
        window.sessionStorage.menu_alias &&
        this.dataViewFlag == 'false' &&
        this.$route.query.isNew != 'true'
      ) {
        this.$router.push(
          `/${sessionStorage.menu_alias}/template/form/${row.tempAlias}/editDraft/true?draftId=${row.id}`
        )
      } else if (this.$route.query.isNew == 'true') {
        this.$router.push(
          `/statement/template/form/${row.tempAlias}/editDraft/true/new?draftId=${row.id}`
        )
      } else {
        this.$router.push(
          `/statement/template/form/${row.tempAlias}/editDraft/true?draftId=${row.id}`
        )
      }
    },
    //重置
    reset() {
      this.title = ''
      this.loadData()
    },
    handleSizeChange: function(size) {
      this.pageBean.pageSize = size
      this.loadData()
    },
    handleCurrentChange: function(currentPage) {
      this.pageBean.page = currentPage
      this.loadData()
    },
    loadData() {
      let queryFilter = {
        pageBean: this.pageBean,
        querys: []
      }
      if (this.tempAlias) {
        let query = {
          property: 'tempAlias',
          value: this.tempAlias,
          group: 'main',
          operation: 'EQUAL',
          relation: 'AND'
        }
        queryFilter.querys.push(query)
      }
      if (this.title) {
        let query = {
          property: 'title',
          value: this.title,
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        }
        queryFilter.querys.push(query)
      }
      form.getMyTemplateDraftList(queryFilter).then(resp => {
        this.pageBean.page = resp.page
        this.pageBean.pageSize = resp.pageSize
        this.pageBean.total = resp.total
        this.data = resp.rows
        this.fullscreenLoading = false
      })
    }
  },
  created() {
    // this.tempAlias = this.$route.query.tempAlias;
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.el-table ::v-deep th.todo-header-row {
  background-color: #fafafa;
  font-size: 13px;
}

.el-table ::v-deep tr.todo-row {
  font-size: 13px;
  color: $--color-text-regular;
}

.el-container {
  background-color: #fff;
}

.el-row {
  margin-bottom: 20px;
}

.el-header {
  border-bottom: 1.5px solid #ededed;
}

.todo-subject {
  cursor: pointer;
}

.todo-subject {
  color: $--theme-color;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
