<template>
  <div>
    <el-dialog
      title="流程套打配置"
      :visible.sync="dialogVisible"
      width="60%"
      appendToBody
      :close-on-click-modal="false"
      top="10vh"
    >
      <el-container>
        <el-main style="padding: 10px;calc(100% - 80px)">
          <div style="height: 100%">
            <ht-table
              @load="loadData"
              :data="wordPrintList"
              :selectable="false"
              :nopagination="true"
              :show-export="false"
              :show-custom-column="false"
              ref="htWordPrintTable"
            >
              <template v-slot:toolbar>
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-plus"
                  @click="operating('')"
                  >添加</el-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="operating(row.alias)"
                    title="编辑流程套打模板"
                    >{{ row.name }}</el-link
                  >
                </template>
              </ht-table-column>
              <ht-table-column
                prop="alias"
                width="150"
                align="center"
                label="模板别名"
              />
              <ht-table-column width="100" align="center" label="允许预览">
                <template v-slot="{row}">
                  <el-tag type="success" v-if="row.preview == 'Y'">是</el-tag>
                  <el-tag type="info" v-if="row.preview == 'N'">否</el-tag>
                </template>
              </ht-table-column>
              <ht-table-column width="100" align="center" label="允许下载">
                <template v-slot="{row}">
                  <el-tag type="success" v-if="row.download == 'Y'">是</el-tag>
                  <el-tag type="info" v-if="row.download == 'N'">否</el-tag>
                </template>
              </ht-table-column>
              <!-- <ht-table-column align="center" label="应用范围">
                      <template v-slot="{row}">
                        <span v-if="row.range=='all'">全局应用</span>
                        <span v-if="row.range!='all'">{{row.range}}</span>
                      </template>
                    </ht-table-column> -->
              <ht-table-column label="操作" align="center" width="100">
                <template v-slot="{row}">
                  <el-button type="text" @click="remove(row.alias)"
                    >删除</el-button
                  >
                </template>
              </ht-table-column>
            </ht-table>
            <el-dialog
              width="650px"
              :title="title"
              :visible="dialogVisibleSetting"
              :before-close="close"
              :close-on-click-modal="false"
              append-to-body
              custom-class="add-flow-print-dialog"
            >
              <el-form :model="wordPrintDef" data-vv-scope="settingSave">
                <ht-form-item label="选择模板" label-width="100px" align="left">
                  <ht-select
                    v-show="isAdd"
                    filterable
                    clearable
                    validate="required"
                    v-model="wordPrintDef.alias"
                    :options="wordPrintTemplateList"
                    @change="wordPrintTemplateChange"
                    :props="{key: 'alias', value: 'name'}"
                  />
                  <span v-show="!isAdd">{{ wordPrintDef.name }}</span>
                </ht-form-item>
                <ht-form-item label="允许预览" label-width="100px" align="left">
                  <ht-select
                    clearable
                    v-model="wordPrintDef.preview"
                    :options="[
                      {key: 'Y', value: '是'},
                      {key: 'N', value: '否'}
                    ]"
                    validate="required"
                  />
                </ht-form-item>
                <ht-form-item label="允许下载" label-width="100px" align="left">
                  <ht-select
                    clearable
                    v-model="wordPrintDef.download"
                    :options="[
                      {key: 'Y', value: '是'},
                      {key: 'N', value: '否'}
                    ]"
                    validate="required"
                  />
                </ht-form-item>
                <ht-form-item label="模板描述" label-width="100px" align="left">
                  <ht-input
                    type="textarea"
                    :rows="8"
                    v-model="wordPrintDef.desc"
                    placeholder="请输入流程套打模板描述"
                    autocomplete="off"
                    :maxlength="200"
                    :showWordLimit="true"
                  ></ht-input>
                </ht-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="save">确 认</el-button>
              </div>
            </el-dialog>
          </div>
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium"
          >取 消</el-button
        >
        <el-button type="primary" @click="handleClose" size="medium"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {Message} from 'element-ui'
import flow from '@/api/flow.js'
import req from '@/request.js'
export default {
  name: 'FlowWordPrintList',
  props: {
    defId: {
      type: String,
      required: true
    },
    nodes: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      wordPrintList: [], //列表数据
      title: '添加流程套打模板',
      dialogVisibleSetting: false, //是否显示添加编辑流程套打模板侧边栏
      wordPrintDef: {
        alias: '',
        name: '',
        preview: 'Y',
        download: 'Y',
        range: 'all'
      },
      isAdd: false,
      allCheck: true, //是否全局
      wordPrintTemplateList: []
    }
  },
  methods: {
    showDialog: function(param) {
      this.dialogVisible = true
      this.loadData()
      this.getWordPrintTemplates()
    },
    changeAllCheck() {
      if (this.allCheck) {
        this.wordPrintDef.range = 'all'
      } else {
        this.wordPrintDef.range = ''
      }
    },
    wordPrintTemplateChange(value, data) {
      if (value && data) {
        this.wordPrintDef.name = data.name
      }
    },
    //保存流程套打模板
    save() {
      const this_ = this
      this_.$validator.validateAll('settingSave').then(result => {
        if (result) {
          let isAdd = true //是否新增流程套打模板
          if (this_.title == '添加流程套打模板') {
            isAdd = true
          } else {
            isAdd = false
          }
          let param = {
            wordPrintDef: this_.wordPrintDef,
            isAdd: isAdd,
            defId: this_.defId
          }
          if (this_.wordPrintDef.range === '') {
            this_.$message.warning('请勾选应用范围')
            return
          }
          req
            .post('${bpmModel}/flow/wordPrint/v1/save', param)
            .then(function(data) {
              data = data.data
              if (data.state) {
                Message.success((isAdd ? '添加' : '编辑') + '流程套打模板成功')
                this_.dialogVisibleSetting = false
                this_.$refs.htWordPrintTable.load() //重新加载列表数据
              }
            })
        } else {
          let arr = this_.$validator.errors.items.filter(
            item => item.scope == 'settingSave'
          )
          let errorLength = arr.length
          this_.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    },
    //删除流程套打模板
    remove(key) {
      const this_ = this
      let url =
        '${bpmModel}/flow/wordPrint/v1/remove?defId=' +
        this_.defId +
        '&alias=' +
        key
      this_
        .$confirm('是否确认删除？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          closeOnClickModal: false
        })
        .then(() => {
          req.remove(url).then(function(rep) {
            rep = rep.data
            if (rep.state) {
              if (rep.message) {
                Message.success(rep.message)
                this_.$refs.htWordPrintTable.load() //重新加载列表数据
              }
            } else {
              Message.error(rep.message)
            }
          })
        })
    },
    //添加或编辑流程套打模板
    operating(key) {
      this.title = key == '' ? '添加流程套打模板' : '编辑流程套打模板'
      this.isAdd = key === '' ? true : false
      this.dialogVisibleSetting = true //显示添加编辑流程套打模板侧边栏
      this.allCheck = true
      this.wordPrintDef = {
        alias: '',
        name: '',
        preview: 'Y',
        download: 'Y',
        range: 'all'
      } //清空值
      const this_ = this
      req
        .get(
          '${bpmModel}/flow/wordPrint/v1/wordPrintEdit?defId=' +
            this_.defId +
            '&alias=' +
            key
        )
        .then(function(res) {
          res = res.data
          if (res) {
            this_.wordPrintDef = res
            if (res.range != 'all') {
              this_.allCheck = false
            } else {
              this_.allCheck = true
            }
          }
        })
    },
    //关闭侧边栏
    close() {
      this.dialogVisibleSetting = false
    },
    handleClose() {
      this.dialogVisible = false
    },
    //页面加载显示数据
    loadData(param, cb) {
      const this_ = this
      let listUrl =
        '${bpmModel}/flow/wordPrint/v1/listJson?defId=' + this_.defId
      req
        .get(listUrl)
        .then(function(data) {
          this_.wordPrintList = data.data
        })
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    },
    getWordPrintTemplates() {
      const this_ = this
      let listUrl =
        '${bpmModel}/flow/wordPrint/v1/getAllFormPrintTemplateByDefId?defId=' +
        this_.defId +
        '&topDefKey='
      req.get(listUrl).then(function(data) {
        this_.wordPrintTemplateList = data.data
      })
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  }
}
</script>

<style lang="scss" scoped>
::v-deep .add-flow-print-dialog {
  .el-form {
    padding: 30px;
  }
  .dialog-footer {
    text-align: right;
  }
}
div ::v-deep .el-dialog__body {
  padding: 10px;
}

.table > thead > tr > th,
.table > thead > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-top: 1px solid #e7eaec;
  border-left: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 8px;
  vertical-align: middle;
}
.table {
  border-bottom: 1px solid #e7eaec;
  border-right: 1px solid #e7eaec;
}
.filed_body ::v-deep .el-button {
  float: right;
}
.range-nodes {
  margin: 15px 0px;
}
</style>