<!--
@name: 合并计费策略
@author: 张泽贤
@time: 2022-08-02
@doc: 
-->
<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.strategyName" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="状态">
                <p-select v-model="form.status" :options="options.BMS_STATUS" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="12">
              <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
                <a-space>
                  <p-button type="primary" @clickSync="onSearch" icon="search">查询</p-button>
                  <p-button @click="onReset">重置</p-button>
                  <!-- <p-button type="primary" @click="onSeniorSearch">高级查询</p-button> -->
                </a-space>
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
      </p-card>
      <p-card title="合并计费策略" style="margin-bottom: 10px">
        <a-space slot="extra">
          <p-button type="primary" @click="onEdit({}, 'add')">新增</p-button>
          <p-button type="primary" @click="onEnOrDis(1)" :disabled="!selectedRowKeys.length">启用</p-button>
          <p-button type="danger" @click="onEnOrDis(0)" :disabled="!selectedRowKeys.length">停用</p-button>
          <p-button type="danger" @click="onDel" :disabled="!selectedRowKeys.length">删除</p-button>
        </a-space>
        <p-table
          ref="masterTable"
          dragle
          bordered
          row-key="id"
          :id="$route.meta.menuId + '_consolidatedBilling'"
          :scroll="{ x: true, y: 300 }"
          :data-source.sync="dataSource"
          :remote-url="listRemoteUrl"
          :remoteData="listParams"
          :rowSelectType="2"
          :selectedRowKeys.sync="selectedRowKeys"
          :sign="true"
        >
          <p-table-column data-index="strategyName" title="策略名称" :width="120" />
          <p-table-column data-index="mergeRule" title="合并规则" :width="120" />
          <p-table-column data-index="feeRuleName" title="计费规则" :width="120" />
          <p-table-column data-index="memo" title="备注" :width="120" />
          <p-table-column data-index="statusName" 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="修改时间" :width="120" />
          <p-table-column key="action" title="操作" :width="180" fixed="right">
            <template slot-scope="text, record">
              <a-space>
                <a @click.stop="onEdit(record, 'view')">查看</a>
                <a @click.stop="onEdit(record, 'edit')">修改</a>
                <p-switch @change="toEnOrDis(record)" :checked="record.status === 1 ? true : false" size="small" />
                <a @click.stop="toDel(record)">删除</a>
              </a-space>
            </template>
          </p-table-column>
        </p-table>
      </p-card>
    </p-spin>

    <!-- 编辑 -->
    <edit ref="edit" v-if="editType" :type="editType" :editId="editId" :options="options" @back="editType = ''"></edit>
  </div>
</template>

<script>
import { initDictionary } from '@/blocks/utils';

import { listRemoteUrl, updateStatus, Delete, importUrl, downUrl } from './js/api';
import edit from './modules/edit.vue';

export default {
  components: { edit },
  data() {
    return {
      spinning: false,
      // 空-列表页 view-查看 add-新增 edit-修改
      editType: '',
      editId: '',
      importUrl,
      downUrl,

      form: {
        strategyName: '',
        status: '',
      },
      options: {
        BMS_STATUS: [],
        FEE_RULE: [],
      },

      // 主表格
      dataSource: [],
      selectedRowKeys: [],
      listRemoteUrl,
      listParams: {},
    };
  },
  mounted() {
    initDictionary([{ objectcode: 'BMS_STATUS' }, { objectcode: 'FEE_RULE' }], true).then((res) => {
      for (const key in res) {
        this.options[key] = res[key];
      }
    });
  },
  methods: {
    // 查询
    onSearch() {
      this.listParams = { ...this.form };
    },
    // 重置
    onReset() {
      this.form = {
        expenseCode: '',
        expenseName: '',
      };
    },

    // 新增、修改、复制、查看
    onEdit(record = { id: '' }, type) {
      this.editId = record.id;
      this.editType = type;
    },

    // 启用、停用
    onEnOrDis(status) {
      let list = this.selectedRowKeys.map((item) => {
        return {
          id: item,
          status,
        };
      });
      this.WhetherToEnable(updateStatus, list, status === 1 ? '启用' : '停用');
    },
    toEnOrDis(record) {
      let reuest = [
        {
          id: record.id,
          status: record.status === 1 ? 0 : 1,
        },
      ];
      this.WhetherToEnable(updateStatus, reuest, record.status === 1 ? '停用' : '启用');
    },
    // 删除
    onDel() {
      this.WhetherToEnable(Delete, this.selectedRowKeys, '删除');
    },
    toDel(record) {
      this.WhetherToEnable(Delete, [record.id], '删除');
    },
    WhetherToEnable(method, idList, text) {
      let self = this;
      this.$confirm({
        title: '是否' + text + '?',
        onOk() {
          return new Promise((resolve, reject) => {
            method(idList)
              .then((res) => {
                if (res.success) {
                  self.$message.success(res.message);
                  self.onSearch();
                } else {
                  self.$exception(res);
                }
                resolve();
              })
              .catch((res) => {
                self.$exception(res);
                resolve();
              });
          });
        },
      });
    },
  },
};
</script>