<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      ref="htTable"
      :show-export="false"
      :show-custom-column="false"
      highlight-current-row
      quick-search-props="name"
      :header-cell-class-name="headerCellClassName"
	     @selection-change="handleSelectionChange"

    >
      <template v-slot:toolbar>
        <el-button size="small" @click="edit()" icon="el-icon-plus" type="primary"
          >添加</el-button
        >
        <ht-delete-button
          :url="deleteUrl"
          :htTable="$refs.htTable"
          pk="id"
          style="margin-left:10px;"
          parameter="ids"
          :disabled="isDisabled"
          >删除</ht-delete-button
        >
      </template>
      <ht-table-column type="index" width="50" align="center" label="序号" />
      <ht-table-column prop="name" align="center" label="名称">
        <template v-slot="{row}">
          <el-link type="primary" @click="edit(row.id)" title="点击编辑">{{
            row.name
          }}</el-link>
        </template>
      </ht-table-column>
      <ht-table-column
        prop="type"
        align="center"
        label="类型"
        :render-header="renderHeaderMethod"
        :filters="typeArray"
      >
        <template v-slot="{row}">
          <el-tag v-if="row.type === 1" type="success">文字</el-tag>
          <el-tag v-if="row.type === 2">图片</el-tag>
        </template>
      </ht-table-column>
      <ht-table-column prop="content" align="center" label="内容">
        <template v-slot="{row}">
          <div :style="{color: row.color}" v-if="row.type === 1">
            {{ row.content }}
          </div>
          <el-avatar :size="30" :src="row.content" v-else />
        </template>
      </ht-table-column>
      <ht-table-column label="操作" align="center" width="160">
        <template v-slot="{row}" >
          <el-button type="text" @click="setType(row)">设置分类</el-button>
          <el-button type="text" @click="setProcess(row)">设置流程</el-button>
        </template>
      </ht-table-column>
    </ht-table>

    <ht-sidebar-dialog
      width="28%"
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-form data-vv-scope="editForm">
        <ht-form-item label="名称">
          <ht-input
            v-model="watermark.name"
            validate="required"
            :maxlength="30"
            show-word-limit
          />
        </ht-form-item>
        <ht-form-item label="类型">
          <ht-select
            v-model="watermark.type"
            validate="required"
            :options="[{key: 1, value: '文字'}, {key: 2, value: '图片'}]"
            @input="typeChange"
          />
        </ht-form-item>
        <ht-form-item label="内容">
          <ht-input
            v-model="watermark.content"
            validate="required"
            :maxlength="100"
            show-word-limit
            v-if="watermark.type === 1"
          />
          <template v-else>
            <el-avatar :size="50" :src="watermark.content" /><br />
            <el-upload
              action="string"
              :http-request="updateImage"
              :show-file-list="false"
              :before-upload="beforeUpload"
            >
              <el-button size="mini">上传</el-button>
            </el-upload>
          </template>
        </ht-form-item>
        <ht-form-item label="颜色" v-if="watermark.type === 1">
          <div style="display: flex">
            <div
              :style="{color: watermark.color, width: '100'}"
              class="color-item"
            >
              {{ watermark.content }}
            </div>
            <el-color-picker v-model="watermark.color" show-alpha />
          </div>
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <ht-submit-button
          :url="saveUrl"
          :model="watermark"
          scope-name="editForm"
          :isSubmit="isSubmit"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >保 存</ht-submit-button
        >
      </div>
    </ht-sidebar-dialog>

    <watermark-type-dialog ref="watermarkTypeDialog" :id="selectRow.id" />
    <watermark-set-process-dialog
      ref="watermarkSetProcessDialog"
      :id="selectRow.id"
    />
  </div>
</template>

<script>
import flow from '@/api/flow.js'
import uc from '@/api/uc.js'
const watermarkTypeDialog = () =>
  import('@/components/flow/WatermarkTypeDialog.vue')
const watermarkSetProcessDialog = () =>
  import('@/components/flow/WatermarkSetProcessDialog')
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
export default {
  name: 'watermark-manager',
  components: {
    watermarkTypeDialog,
    watermarkSetProcessDialog
  },
  mixins: [tableHeaderFilter],
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      deleteUrl: window.context.bpmModel + '/bpmModel/bpmWatermark/v1/remove',
      saveUrl: window.context.bpmModel + '/bpmModel/bpmWatermark/v1/save',
      dialogVisible: false,
      typeDialogVisible: false,
      title: '',
      watermark: {
        name: '',
        type: 1,
        content: '',
        color: 'rgba(255, 69, 0, 0.68)'
      },
      typeArray: [{text: '文字', value: 1}, {text: '图片', value: 2}],
      selectRow: {},
      isSubmit: true,
       isDisabled: true,
      selectedList: [],
    }
  },
   watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true,
    },
  },
  methods: {
     handleSelectionChange(selection){
      this.selectedList = selection
    },
    typeChange(val) {
      if (val) {
        this.watermark.color = null
        this.watermark.content = ''
      }
    },
    loadData(param, cb) {
      flow
        .getWatermarkList(param)
        .then(data => {
          this.data = data.rows
          this.pageResult = {
            page: data.page,
            pageSize: data.pageSize,
            total: data.total
          }
        })
        .finally(() => {
          cb && cb()
        })
    },
    edit(id) {
      this.dialogVisible = true
      if (id) {
        this.title = '编辑流程水印'
        flow.getWatermark(id).then(data => {
          this.watermark = data
        })
      } else {
        this.title = '添加流程水印'
        this.watermark = {
          name: '',
          type: 1,
          content: '',
          color: 'rgba(255, 69, 0, 0.68)'
        }
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.typeDialogVisible = false
    },
    beforeSaveData() {
      this.isSubmit = true
      if (this.watermark.type == 2) {
        if (!this.watermark.content || this.watermark.content == undefined) {
          this.$message.error('请上传图片')
          this.isSubmit = false
        }
      }
    },
    afterSaveData() {
      this.dialogVisible = false
      this.$refs.htTable.load()
    },
    setType(row) {
      this.selectRow = {...row}
      this.$refs.watermarkTypeDialog.showDialog()
    },
    setProcess(row) {
      this.selectRow = {...row}
      this.$refs.watermarkSetProcessDialog.showDialog()
    },
    updateImage(param) {
      const formData = new FormData()
      formData.append('files', param.file)
      uc.fileUpload(formData)
        .then(response => {
          this.$store
            .dispatch('menu/downloadImg', response.fileId)
            .then(res => {
              if (res != '') {
                this.$set(this.watermark, 'content', res)
                param.onSuccess() // 上传成功的图片会显示绿色的对勾
              }
            })
            .catch(() => {
              param.onError()
            })
        })
        .catch(() => {
          param.onError()
        })
    },
    beforeUpload(file) {
      var fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (fileType != 'jpg' && fileType != 'png') {
        this.$message.warning('只能上传jpg/png格式的文件')
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.color-item {
  font-size: 14px;
  padding-right: 6px;
}

::v-deep{
  .cell>.el-table__column-filter-trigger{
    display: none;
  }
}
</style>