<!--
@name: 审批配置
@author: 张泽贤
@time: 2022-06-13
@doc: PROLOG_UPCloudSolutionForTMS__v1.2.1_基础配置_1.2.2
-->
<template>
  <div class="pages">
    <p-spin :spinning="spinning" v-if="!editType">
      <p-card style="margin-bottom: 10px">
        <p-form-model ref="formTarget" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" class="plg-grid-from">
          <a-row>
            <a-col :span="6">
              <p-form-model-item label="审批流">
                <p-input v-model="form.approvalFlowTypeName" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="状态">
                <p-select v-model="form.status" :options="options.APPROVAL_STATUS" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item style="text-align: right">
                <a-space>
                  <p-button type="primary" @clickSync="onSearch" icon="search">查询</p-button>
                  <p-button @click="onReset">重置</p-button>
                </a-space>
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
      </p-card>
      <p-card  class="pull-card-panel" :title="$route.meta.title">
        <a-space slot="extra">
          <p-button type="primary" @click="toEdit('add')" icon="plus">新增</p-button>
          <p-button type="primary" @click="onStatus(1)" :disabled="!selectedRowKeys.length">启用</p-button>
          <p-button type="danger" @click="onStatus(0)" :disabled="!selectedRowKeys.length">停用</p-button>
          <p-button type="danger" @click="onDel" :disabled="!selectedRowKeys.length">删除</p-button>
        </a-space>
        <p-table
          ref="masterTable"
          :id="$route.name + '_mainTable'"
          dragle
          bordered
          row-key="approvalId"
          hasRowSelectCheck
          :data-source.sync="dataSource"
          :scroll="{ x: true}"
          :remote-url="listRemoteUrl"
          :remoteData="listParams"
          :rowSelectType="2"
          :selectedRowKeys.sync="selectedRowKeys"
        >
          <p-table-column data-index="approvalName" title="名称" :width="120" />
          <p-table-column data-index="approvalFlowTypeName" title="审批流程类型" :width="120" />
          <p-table-column data-index="statusName" title="状态" :width="120" />
          <p-table-column data-index="memo" title="备注" :width="120" />
          <p-table-column data-index="approvalConditions" title="满足条件" :width="120" />
          <p-table-column data-index="createperson" title="创建人" :width="120" />
          <p-table-column data-index="createtime" title="创建时间" :width="120" />
          <p-table-column data-index="updateperson" title="修改人" :width="120" />
          <p-table-column data-index="updatetime" title="修改时间" />
          <p-table-column key="action" title="操作" :width="250" fixed="right">
            <template slot-scope="text, record">
              <a-space>
                <a @click.stop="toEdit('view', record)">查看</a>
                <a @click.stop="toEdit('edit', record)">修改</a>
                <p-switch checked-children="启用" un-checked-children="停用" @change="changeSwitch(record)" :checked="record.status === 1 ? true : false" />
                <a @click.stop="toDel(record)">删除</a>
                <a @click.stop="toEdit('node', record)">配置节点</a>
              </a-space>
            </template>
          </p-table-column>
        </p-table>
      </p-card>
    </p-spin>

    <edit v-else :editId="editId" :type="editType" :options="options" @back="editType = ''"></edit>
  </div>
</template>

<script>
import { Enable, Disable, listRemoteUrl, Delete } from './js/api'
import edit from './js/edit'
import { initDictionary } from '@/blocks/utils'

export default {
  components: { edit },
  data() {
    return {
      spinning: false,
      editType: '', // 空-列表页 add-新增 edit-修改 view-查看 node-配置节点
      editId: '',
      form: {
        cargoOwnerName: '',
        approvalFlowType: '',
        status: '',
      },
      // 主表格
      dataSource: [],
      selectedRowKeys: [],
      listRemoteUrl,
      listParams: {
        contractNo: '',
        contractName: '',
        fromDate: '',
        endDate: '',
      },
      options: {
        APPROVAL_STATUS: [],
        APPROVAL_FLOW_TYPE: [],
        NODE_APPROVER_TYPE: [],
        NODE_APPROVAL_TYPE: [],
        APPROVAL_CONDITION_TYPE: [],
        FLOW_CONDITION_TYPE: [],
        DELIVERY_METHOD_TYPE: [],
        SHIPPER_TYPE: [],
        CONSIGNEE_TYPE: [],
        ORDER_TYPE: [],
        ORDER_BUSINESS_TYPE: [],
        TRANSPORT_TYPE: [],
        TEMPERATURE_REQUIREMENT: [],
      },
    }
  },
  mounted() {
    initDictionary([
      { objectcode: 'APPROVAL_STATUS' },
      { objectcode: 'APPROVAL_FLOW_TYPE' },
      { objectcode: 'NODE_APPROVER_TYPE' },
      { objectcode: 'NODE_APPROVAL_TYPE' },
      { objectcode: 'APPROVAL_CONDITION_TYPE' },
      { objectcode: 'FLOW_CONDITION_TYPE' },
      { objectcode: 'DELIVERY_METHOD_TYPE' },
      { objectcode: 'SHIPPER_TYPE' },
      { objectcode: 'CONSIGNEE_TYPE' },
      { objectcode: 'ORDER_TYPE' },
      { objectcode: 'ORDER_BUSINESS_TYPE' },
      { objectcode: 'TRANSPORT_TYPE' },
      { objectcode: 'TEMPERATURE_REQUIREMENT' },
    ]).then((res) => {
      this.options.APPROVAL_STATUS = res.APPROVAL_STATUS.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.APPROVAL_FLOW_TYPE = res.APPROVAL_FLOW_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.NODE_APPROVER_TYPE = res.NODE_APPROVER_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.NODE_APPROVAL_TYPE = res.NODE_APPROVAL_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.APPROVAL_CONDITION_TYPE = res.APPROVAL_CONDITION_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.FLOW_CONDITION_TYPE = res.FLOW_CONDITION_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.DELIVERY_METHOD_TYPE = res.DELIVERY_METHOD_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.SHIPPER_TYPE = res.SHIPPER_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.CONSIGNEE_TYPE = res.CONSIGNEE_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.ORDER_TYPE = res.ORDER_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.ORDER_BUSINESS_TYPE = res.ORDER_BUSINESS_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.TRANSPORT_TYPE = res.TRANSPORT_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.TEMPERATURE_REQUIREMENT = res.TEMPERATURE_REQUIREMENT.map((item) => {
        item.value = +item.value
        return item
      })
    })
  },
  methods: {
    toEdit(type, editData = { approvalId: '' }) {
      this.editType = type
      this.editId = editData.approvalId
    },
    onSearch() {
      this.detailDataSource = []
      this.detailSelectedRowKeys = []
      this.listParams = { ...this.form }
    },
    onSeniorSearch() {},
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {
        cargoOwnerName: '',
        approvalFlowType: '',
        status: '',
      }
      this.onSearch()
    },
    onStatus(status) {
      const ids = this.selectedRowKeys
      if (!ids.length) {
        this.$message.error('请选择数据')
        return false
      }
      this.WhetherToEnable(status, ids)
    },
    changeSwitch(record) {
      this.WhetherToEnable(record.status === 1 ? 0 : 1, [record.approvalId])
    },
    WhetherToEnable(status, ids) {
      let self = this
      let text = status ? '是否启用?' : '是否停用?'
      this.$confirm({
        title: text,
        onOk() {
          return new Promise((resolve, reject) => {
            if (status) {
              Enable(ids)
                .then((res) => {
                  if (res.success) {
                    self.$message.success(res.message)
                    self.onSearch()
                    resolve()
                  } else {
                    self.$message.error(res.message)
                    reject()
                  }
                })
                .catch((res) => {
                  self.$message.error(res.message)
                  resolve()
                })
            } else {
              Disable(ids)
                .then((res) => {
                  if (res.success) {
                    self.$message.success(res.message)
                    self.onSearch()
                    resolve()
                  } else {
                    self.$message.error(res.message)
                    reject()
                  }
                })
                .catch((res) => {
                  self.$message.error(res.message)
                  resolve()
                })
            }
          })
        },
      })
    },
    onDel() {
      const ids = this.selectedRowKeys
      if (!ids.length) {
        this.$message.error('请选择数据')
        return false
      }
      this.Delete(ids)
    },
    toDel(record) {
      this.Delete([record.approvalId])
    },
    Delete(ids) {
      let self = this
      this.$confirm({
        title: '是否删除?',
        onOk() {
          return new Promise((resolve, reject) => {
            Delete(ids)
              .then((res) => {
                if (res.success) {
                  self.$message.success(res.message)
                  self.onSearch()
                  resolve()
                } else {
                  self.$message.error(res.message)
                  reject()
                }
              })
              .catch((res) => {
                self.$message.error(res.message)
                reject()
              })
          })
        },
      })
    },
  },
}
</script>