<#assign base=request.contextPath />
<#import "../../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>

      .el-upload__input {
          display: none !important;
      }

      .el-textarea .el-input__count {
          line-height: 15px;
      }

      .admin-content-body {
          margin-bottom: 100px;
      }

      .el-table__empty-block {
          height: 60px !important;
      }

      .el-radio-button__inner, .el-radio-group {
          line-height: unset;
      }
  </style>

  <div class="admin-content" id="app">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">业务应用</strong> /
          <small>已办流程</small></div>
      </div>

      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-12">
          <el-form :inline="true" ref="queryForm" :model="queryForm" label-position="right">

            <div>
              <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="queryForm.projectTitle" clearable></el-input>
              </el-form-item>

              <el-form-item label="项目编号">
                <el-input placeholder="请输入项目编号" v-model="queryForm.projectNo" clearable></el-input>
              </el-form-item>

              <el-form-item label="合同编号">
                <el-input placeholder="请输入合同编号" v-model="queryForm.contractNo" clearable></el-input>
              </el-form-item>

              <el-form-item label="流程类型">
                <el-select v-model="queryForm.processType" placeholder="请选择" clearable>
                  <el-option label="全部" :value="null"></el-option>
                    <#list processTypes as processType>
                      <el-option label="${processType.description}"
                                 value="${processType.name()}"></el-option>
                    </#list>
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="申请人">
                <el-input placeholder="请输入申请人" v-model="queryForm.applyPersonName" clearable></el-input>
              </el-form-item>

              <el-form-item label="审核状态">
                <el-select v-model="queryForm.processStatus" placeholder="请选择" clearable>
                  <el-option label="全部" :value="null"></el-option>
                    <#list processStatus as item>
                      <el-option label="${item.description}"
                                 value="${item.name()}"></el-option>
                    </#list>
                  </el-option>
                </el-select>
              </el-form-item>

              <el-button type="primary" @click="queryTable">查询</el-button>
            </div>

          </el-form>

          <el-table border :data="page.data">
            <el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
            <el-table-column prop="projectNo" label="项目编号" fixed width="80"></el-table-column>
            <el-table-column prop="projectTitle" label="标题" width="350"></el-table-column>
            <el-table-column prop="contractNo" label="合同编号" width="80"></el-table-column>
            <el-table-column prop="processType" label="流程类型" width="100">
              <template slot-scope="scope">
                <span>{{scope.row.processType | processType}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="applyPersonName" label="申请人"></el-table-column>
            <el-table-column prop="status" label="审核状态" width="100">
              <template slot-scope="scope">
                <span>{{scope.row.status | processStatus}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="当前审核人" width="100"></el-table-column>
            <el-table-column prop="lastUpdateAt" label="最后更新时间" width="170"></el-table-column>

            <el-table-column label="操作" fixed="right" width="230">
              <template slot-scope="scope">
                <el-button
                        v-if="scope.row.status==='audit_passed' || scope.row.status==='audit_not_passed' || scope.row.status==='to_be_audit'"
                        type="text" @click="showDetail(scope.row, scope)">查看详情
                </el-button>
                <el-button v-if="scope.row.status==='audit_passed' || scope.row.status==='audit_not_passed'"
                           type="text" @click="showAuditDetail(scope.row, scope)">查看审核流程
                </el-button>
                <el-button v-if="scope.row.status==='draft' || scope.row.status==='audit_not_passed'"
                           type="text" @click="editProcess(scope.row, scope)">编辑
                </el-button>
                <el-button v-if="scope.row.status==='to_be_audit'" type="text" @click="revokeProcess(scope.row, scope)">撤回</el-button>
                <el-button v-if="scope.row.status==='draft'" type="text" @click="deleteProcess(scope.row, scope)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>

          <el-pagination style="text-align: center; margin-top: 10px"
                         :page-size="page.size"
                         :current-page="page.current"
                         @current-change="handlePageChange"
                         layout="prev, pager, next" :total="page.total"></el-pagination>
        </div>
      </div>

      <el-dialog title="审核详情" :visible.sync="auditDetailVisible">
        <el-timeline>
          <el-timeline-item
                  v-for="(item, index) in auditDetails"
                  :key="index"
                  :color="item.color||'red'"
                  :size="item.size||'normal'"
                  :timestamp="item.timestamp">
            {{item.content}}
          </el-timeline-item>
        </el-timeline>

      </el-dialog>

    </div>

  </div>

  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script>

    const isEmpty = (obj) => {
      return !obj || (obj.length && obj.length === 0)
    }

    const isNotEmpty = (obj) => {
      return !isEmpty(obj)
    }

    const isBlank = (obj) => {
      return isEmpty(obj) || (obj.trim && isEmpty(obj.trim()))
    }

    const hasText = (obj) => {
      return !isBlank(obj)
    }

    const data = () => {
      return {
        auditForm: {
          processStatus: null
        },
        auditDetailVisible: false,
        auditDetails: [],
        page: {
          data: [],
          total: 0,
          size: 10,
          current: 1,
        },
        queryForm: {},
      }
    }

    const methods = {
      showDetail(row, scope) {
        console.log(row)
        console.log(scope)

      },
      editProcess(row, scope) {

      },
      deleteProcess(row, scope) {
        this.$confirm('您确认要删除审批流程吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在删除',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          fetch("${base}/process/" + row.id, {
            method: 'DELETE', // or 'PUT'
          }).then(response => {
            if (response.ok) {
              this.queryTable()
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              })
            }
            else {
              return Promise.reject(response)
            }
          }).catch(res => {
            res.json().then(json => {
              this.$message.error(json.message || "删除失败");
            })
          }).finally(() => loading.close())
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      revokeProcess(row, scope) {
        this.$confirm('您确认要撤回审批流程吗?', '撤回', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在撤销',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          fetch("${base}/process/revoke/" + row.id, {
            method: 'POST', // or 'PUT'
          }).then(response => {
            if (response.ok) {
              this.queryTable()
              this.$message({
                showClose: true,
                message: '撤销成功',
                type: 'success'
              })
            }
            else {
              return Promise.reject(response)
            }
          }).catch(err => {
            this.$message.error("撤销失败");
          }).finally(() => loading.close())
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      showAuditDetail(row, scope) {
        const loading = this.$loading({
          lock: true,
          text: '正在查询数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        fetch("${base}/process/audits/" + row.id).then(response => {
          if (response.ok) {
            // 展示弹窗
            response.json().then(json => {
              this.auditDetailVisible = true
              this.auditDetails = json
            })
          }
          else {
            return Promise.reject(response)
          }
        }).catch(res => {
          res.json().then(json => {
            this.$message.error(json.message || "数据获取失败");
          })
        }).finally(() => loading.close())

      },

      submitAudit() {
        this.$refs["auditForm"].validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '正在审核',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })

            const form = this.auditForm

            fetch("${base}/process/audit", {
              method: 'POST', // or 'PUT'
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(form),
            }).then(response => {
              this.$message({
                showClose: true,
                message: '审核成功',
                type: 'success'
              })
              // 关闭对话框
              this.auditFormVisible = false
            }).catch(err => {
              this.$message.error("审核失败");
            }).finally(() => loading.close())
          }
          else {
            return false;
          }
        })

      },

      render(obj) {
        console.log(obj)
      },

      queryTable() {
        const form = {
          ...this.queryForm,
        }
        const loading = this.$loading({
          lock: true,
          text: '正在查询',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        const { size, current } = this.page
        fetch("${base}/process/query?size=" + size + "&page=" + current, {
          method: 'POST', // or 'PUT'
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(form),
        }).then(res => res.json())
            .then(data => {
              this.page = {
                data: data.content,
                size: data.size,
                current: data.number + 1,
                total: data.totalElements
              }
            })
            .catch(err => {
              this.$message.error('查询失败');
            })
            .finally(() => loading.close())
      },

      handlePageChange(val) {
        this.page.current = val
        this.queryTable()
      },

    }

    new Vue({
      el: '#app',
      data,
      computed: {
        projectTitle() {
          const { projectNo, projectName, applyPersonName, applyDate } = this.processForm
          if (projectNo && projectName) {
            return projectNo.trim() + "-" + projectName.trim() + "-" + applyPersonName + "-" + applyDate
          }
          return ""
        },
        isButtonMode() {
          return this.mode === BUTTON
        },
        isBusinessProcurementContractProcessMode() {
          return this.mode === newBusinessProcurementContractProcess
        },
        isSalesContractProcessMode() {
          return this.mode === saleContractProcess
        },
        isSaleContractDetailMode() {
          return this.mode === saleContractDetail
        },
        subTitle() {
          switch (this.mode) {
            case BUTTON:
              return "新增流程"
            case saleContractProcess:
              return "新增销售合同流程"
            case saleContractDetail:
              return "销售合同清单明细"
            case newBusinessProcurementContractProcess:
              return "新增业务采购合同流程"
          }
        }
      },

      methods,

      mounted() {
        this.queryTable()
      },
      filters: {
        processStatus: function (val) {
          switch (val) {
            case 'draft':
              return "草稿"
            case 'to_be_audit':
              return "待审核"
            case 'audit_passed':
              return "审核通过"
            case 'audit_not_passed':
              return "审核不通过"
          }
        },
        processType: function (value) {
          switch (value) {
            case 'sale_contract':
              return "销售合同流程"
            case 'business_procurement':
              return "业务采购流程"
          }
        }
      }
    })

  </script>

</@defaultLayout.layout>